import { useState, useEffect } from 'react'
import { motion } from 'framer-motion'
import { useLang } from '@/context/LangContext'
import SnapshotBar from '@/pages/Home/sections/SnapshotBar'

const STATS = {
  fa: [
    { label: 'تولید فولاد خام', value: '۳۱.۲', unit: 'میلیون تن', delta: '+۴.۱٪' },
    { label: 'صادرات فولاد',    value: '۸.۷',  unit: 'میلیون تن', delta: '+۱.۸٪' },
    { label: 'واردات سنگ‌آهن',  value: '۱۲.۴', unit: 'میلیون تن', delta: '-۲.۳٪' },
    { label: 'ظرفیت نصب‌شده',  value: '۳۸',   unit: 'میلیون تن', delta: '—'     },
  ],
  en: [
    { label: 'Crude Steel Production', value: '31.2', unit: 'Million tons', delta: '+4.1%' },
    { label: 'Steel Exports',          value: '8.7',  unit: 'Million tons', delta: '+1.8%' },
    { label: 'Iron Ore Imports',       value: '12.4', unit: 'Million tons', delta: '-2.3%' },
    { label: 'Installed Capacity',     value: '38',   unit: 'Million tons', delta: '—'     },
  ],
}

const T = {
  fa: {
    overline: 'INDUSTRY PULSE', heading: 'نبض صنعت',
    sub: 'سامانه جامع آمار و اطلاعات صنعت فولاد ایران — داده‌های لحظه‌ای تولید، صادرات، واردات و قیمت‌ها',
    statsLabel: 'آمار کلیدی صنعت · ۱۴۰۳',
    gateAccess: 'دسترسی اعضا',
    gateHeading: 'دسترسی کامل به سامانه نبض صنعت',
    gateSub: 'اعضای اندیشکده به پایگاه داده جامع فولاد ایران شامل آمار لحظه‌ای تولید، صادرات، واردات، قیمت‌های داخلی و بین‌المللی و ۵۰۰+ شاخص صنعتی دسترسی دارند.',
    features: [
      'داده‌های لحظه‌ای تولید کارخانه‌های بزرگ',
      'آمار صادرات تفکیک‌شده بر اساس کشور مقصد',
      'نمودارهای تعاملی و قابل دانلود',
      'گزارش‌های تحلیلی ماهانه اختصاصی',
    ],
    cta: 'درخواست عضویت سازمانی ←',
    ctaDone: '✓ درخواست شما ثبت شد. تیم ما ظرف ۴۸ ساعت با شما تماس می‌گیرد.',
  },
  en: {
    overline: 'INDUSTRY PULSE', heading: 'Industry Pulse',
    sub: 'Comprehensive statistics and data platform for Iran\'s steel industry — live production, export, import, and price data',
    statsLabel: 'KEY INDUSTRY STATS · 1403',
    gateAccess: 'MEMBERS ONLY',
    gateHeading: 'Full Access to Industry Pulse',
    gateSub: 'Institute members have access to Iran\'s comprehensive steel database including live production stats, export/import data, domestic and international prices, and 500+ industrial indicators.',
    features: [
      'Real-time production data from major plants',
      'Export statistics broken down by destination country',
      'Interactive downloadable charts',
      'Exclusive monthly analytical reports',
    ],
    cta: 'Request Organizational Membership →',
    ctaDone: '✓ Your request has been received. Our team will contact you within 48 hours.',
  },
}

const SLIDES = Array.from({ length: 13 }, (_, i) => `/${i + 1}.jpg`)

function ImageSlider() {
  const [current, setCurrent] = useState(0)

  useEffect(() => {
    const id = setInterval(() => setCurrent(c => (c + 1) % SLIDES.length), 3500)
    return () => clearInterval(id)
  }, [])

  return (
    <div style={{ position: 'relative', marginBottom: 48, overflow: 'hidden', border: '1px solid var(--rule-thin)', background: '#000' }}>
      {/* Slides */}
      {SLIDES.map((src, i) => (
        <img
          key={src}
          src={src}
          alt=""
          aria-hidden="true"
          style={{
            position: i === 0 ? 'relative' : 'absolute',
            inset: 0, width: '100%',
            height: i === 0 ? 'auto' : '100%',
            objectFit: 'cover', display: 'block',
            userSelect: 'none', pointerEvents: 'none',
            opacity: i === current ? 1 : 0,
            transition: 'opacity 0.8s ease',
          }}
        />
      ))}

      {/* Radial blur overlay */}
      <div style={{
        position: 'absolute', inset: 0,
        backdropFilter: 'blur(10px)',
        WebkitBackdropFilter: 'blur(10px)',
        maskImage: 'radial-gradient(ellipse 55% 45% at 50% 50%, transparent 25%, black 72%)',
        WebkitMaskImage: 'radial-gradient(ellipse 55% 45% at 50% 50%, transparent 25%, black 72%)',
      }} />

      {/* Vignette */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse 70% 60% at 50% 50%, transparent 30%, rgba(7,29,73,0.55) 100%)',
      }} />

      {/* Dot indicators */}
      <div style={{
        position: 'absolute', bottom: 12, left: '50%', transform: 'translateX(-50%)',
        display: 'flex', gap: 6, zIndex: 10,
      }}>
        {SLIDES.map((_, i) => (
          <button
            key={i}
            onClick={() => setCurrent(i)}
            style={{
              width: i === current ? 18 : 6, height: 6,
              background: i === current ? 'var(--color-blue)' : 'rgba(255,255,255,0.4)',
              border: 'none', cursor: 'pointer', padding: 0,
              transition: 'width 0.3s, background 0.3s',
            }}
          />
        ))}
      </div>
    </div>
  )
}


function MembershipForm({ lang }: { lang: 'fa' | 'en' }) {
  const [name,  setName]  = useState('')
  const [phone, setPhone] = useState('')
  const [email, setEmail] = useState('')
  const [status, setStatus] = useState<'idle'|'sending'|'done'|'error'>('idle')

  const lbl = lang === 'fa'
    ? { name: 'نام و نام‌خانوادگی', phone: 'شماره همراه', email: 'آدرس ایمیل', btn: 'ارسال درخواست', sending: 'در حال ارسال...', done: '✓ درخواست شما ثبت شد. به‌زودی با شما تماس می‌گیریم.', error: 'خطا در ارسال. لطفاً مجدد تلاش کنید.' }
    : { name: 'Full Name', phone: 'Phone Number', email: 'Email Address', btn: 'Send Request', sending: 'Sending...', done: '✓ Request received. We will contact you soon.', error: 'Send failed. Please try again.' }

  async function submit() {
    if (!name || !phone) return
    setStatus('sending')
    try {
      const res = await fetch('http://localhost:3001/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name, phone, email }),
      })
      setStatus(res.ok ? 'done' : 'error')
    } catch {
      setStatus('error')
    }
  }

  if (status === 'done') return (
    <div style={{ background: 'rgba(7,29,73,0.06)', padding: '16px 20px', fontSize: 14, color: 'var(--ink)', fontWeight: 600, borderRight: '4px solid var(--color-blue)' }}>
      {lbl.done}
    </div>
  )

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, maxWidth: 420 }}>
      {(['name','phone','email'] as const).map(field => (
        <input
          key={field}
          type={field === 'email' ? 'email' : field === 'phone' ? 'tel' : 'text'}
          placeholder={lbl[field]}
          value={field === 'name' ? name : field === 'phone' ? phone : email}
          onChange={e => field === 'name' ? setName(e.target.value) : field === 'phone' ? setPhone(e.target.value) : setEmail(e.target.value)}
          style={{
            border: '1px solid var(--rule-thin)', padding: '11px 14px',
            fontSize: 13, fontFamily: 'inherit', background: 'var(--paper)',
            color: 'var(--ink)', outline: 'none', width: '100%',
            direction: lang === 'fa' ? 'rtl' : 'ltr',
          }}
        />
      ))}
      {status === 'error' && <div style={{ fontSize: 12, color: 'var(--red)' }}>{lbl.error}</div>}
      <button
        onClick={submit}
        disabled={status === 'sending'}
        style={{
          background: 'var(--color-navy)', color: '#fff', border: 'none',
          padding: '13px 32px', fontSize: 13, fontWeight: 700,
          fontFamily: 'inherit', cursor: status === 'sending' ? 'default' : 'pointer',
          opacity: status === 'sending' ? 0.7 : 1, transition: 'opacity 150ms',
          alignSelf: 'flex-start',
        }}
      >
        {status === 'sending' ? lbl.sending : lbl.btn}
      </button>
    </div>
  )
}

export default function Pulse() {
  const { lang } = useLang()
  const t = T[lang]
  const stats = STATS[lang]

  return (
    <div dir={lang === 'fa' ? 'rtl' : 'ltr'} style={{ background: 'var(--paper)', minHeight: '80vh' }}>
      <SnapshotBar />
      <div style={{ borderBottom: '3px solid var(--ink)' }}>
        <div className="max-w-7xl mx-auto px-12 max-md:px-5" style={{ paddingTop: 48, paddingBottom: 40 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
            <div style={{ width: 36, height: 2, background: 'var(--red)' }} />
            <span style={{ fontSize: 10, fontWeight: 700, letterSpacing: '3px', textTransform: 'uppercase', color: 'var(--ink-4)' }}>{t.overline}</span>
          </div>
          <h1 style={{ fontSize: 'clamp(28px,4vw,52px)', fontWeight: 900, letterSpacing: '-1.5px', color: 'var(--ink)', marginBottom: 12 }}>{t.heading}</h1>
          <p style={{ fontSize: 15, color: 'var(--ink-3)', lineHeight: 1.7, maxWidth: 600 }}>{t.sub}</p>
        </div>
      </div>

      <div className="max-w-7xl mx-auto px-12 max-md:px-5" style={{ paddingTop: 48, paddingBottom: 64 }}>
        <div style={{ marginBottom: 48 }}>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '2px', color: 'var(--ink-4)', textTransform: 'uppercase', marginBottom: 20 }}>
            {t.statsLabel}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: 1, background: 'var(--rule-thin)' }}>
            {stats.map((s, i) => (
              <div key={i} style={{ background: 'var(--paper)', padding: '24px 20px', filter: i >= 2 ? 'blur(5px)' : 'none', userSelect: i >= 2 ? 'none' : 'auto', pointerEvents: i >= 2 ? 'none' : 'auto' }}>
                <div style={{ fontSize: 32, fontWeight: 900, letterSpacing: '-1px', color: 'var(--ink)', lineHeight: 1, marginBottom: 6 }}>{s.value}</div>
                <div style={{ fontSize: 11, color: 'var(--ink-5)', marginBottom: 4 }}>{s.unit}</div>
                <div style={{ fontSize: 10, fontWeight: 700, color: 'var(--ink-3)' }}>{s.label}</div>
                <div style={{ fontSize: 10, fontWeight: 700, color: s.delta.startsWith('+') ? '#2d6a4f' : s.delta.startsWith('-') ? 'var(--red)' : 'var(--ink-5)', marginTop: 6 }}>{s.delta}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Auto-sliding image carousel — radial blur paywall */}
        <ImageSlider />

        <motion.div
          initial={{ opacity: 0, y: 16 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5 }}
          style={{ border: '2px solid var(--ink)', padding: '40px 36px', position: 'relative' }}
        >
          <div style={{ position: 'absolute', top: 0, right: 0, left: 0, height: 4, background: 'var(--red)' }} />
          <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '2.5px', textTransform: 'uppercase', color: 'var(--red)', marginBottom: 16 }}>{t.gateAccess}</div>
          <h2 style={{ fontSize: 20, fontWeight: 900, color: 'var(--ink)', marginBottom: 12, lineHeight: 1.3 }}>{t.gateHeading}</h2>
          <p style={{ fontSize: 13, color: 'var(--ink-3)', lineHeight: 1.75, marginBottom: 24 }}>{t.gateSub}</p>
          <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 28px', display: 'flex', flexDirection: 'column', gap: 8 }}>
            {t.features.map(item => (
              <li key={item} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 13, color: 'var(--ink)' }}>
                <span style={{ color: 'var(--red)', fontWeight: 900, fontSize: 14 }}>✓</span>
                {item}
              </li>
            ))}
          </ul>
          <MembershipForm lang={lang} />
        </motion.div>
      </div>
    </div>
  )
}
