import { useEffect, useMemo, useState, type CSSProperties } from 'react'
import { Link } from 'react-router-dom'
import { AnimatePresence, motion } from 'framer-motion'
import { useLang } from '@/context/LangContext'
import { sortByPublishedDesc } from '@/utils/dateSort'
import { resolveSourceUrl } from '@/utils/sourceLinks'

const NAVY = '#032340'
const GOLD = '#CD9E53'

type Glance = {
  id: string
  source: string
  sourceUrl?: string
  date: string
  dateFa: string
  dateEn: string
  dateIso: string
  createdAt?: string
  updatedAt?: string
  title: string
  titleEn: string
  desc: string
  descEn: string
  img: string
}

export const FALLBACK_ITEMS: Glance[] = [
  {
    id: 'h2-green-steel',
    source: 'Financial Times',
    date: '۱۴ اردیبهشت ۱۴۰۵',
    dateFa: '۱۴ اردیبهشت ۱۴۰۵',
    dateEn: 'May 4, 2026',
    dateIso: '2026-05-04',
    title: 'شوک هیدروژنی به بازار جهانی؛ آغاز رسمی عصر فولادسازی بدون کربن',
    titleEn: 'Hydrogen Shock to Global Markets; the Carbon-Free Steel Era Begins',
    desc: 'پروژه فولاد سبز مبتنی بر هیدروژن در اروپا، رقابت را از قیمت صرف به شدت کربن، دسترسی به انرژی پاک و قابلیت اخذ پریمیوم سبز منتقل می‌کند. برای فولاد مبارکه، پیام اصلی روشن است: بدون مسیر معتبر کاهش کربن، بخشی از بازارهای صادراتی آینده گران‌تر یا محدودتر می‌شوند.',
    descEn: 'Hydrogen-based green steel is shifting competition from price alone toward carbon intensity, clean-energy access and green premium capture.',
    img: '/news/photo-1504307651254-35680f356dfd.jpg',
  },
  {
    id: 'eu-cbam',
    source: 'European Commission / Reuters',
    date: '۱۲ اردیبهشت ۱۴۰۵',
    dateFa: '۱۲ اردیبهشت ۱۴۰۵',
    dateEn: 'May 2, 2026',
    dateIso: '2026-05-02',
    title: 'CBAM اروپا؛ کربن به متغیر مستقیم قیمت صادرات فولاد تبدیل می‌شود',
    titleEn: 'EU CBAM Turns Carbon into a Direct Steel Export Cost',
    desc: 'ورود CBAM به فاز مالی، مزیت تولیدکنندگانی را که داده انتشار شفاف، برق کم‌کربن و مسیر کاهش CO₂ دارند تقویت می‌کند. برای صادرکنندگان فولاد، موضوع فقط گزارش‌دهی نیست؛ اثر مستقیم روی قیمت تمام‌شده، قراردادهای بلندمدت و پذیرش مشتری اروپایی دارد.',
    descEn: 'CBAM strengthens producers with transparent emissions data, low-carbon electricity and credible decarbonization roadmaps.',
    img: '/news/photo-1581092160607-ee22731c9b4e.jpg',
  },
  {
    id: 'ai-data-centers',
    source: 'Bloomberg / worldsteel',
    date: '۱۰ اردیبهشت ۱۴۰۵',
    dateFa: '۱۰ اردیبهشت ۱۴۰۵',
    dateEn: 'Apr 30, 2026',
    dateIso: '2026-04-30',
    title: 'مراکز داده هوش مصنوعی، الگوی تقاضای فولاد ویژه را تغییر می‌دهند',
    titleEn: 'AI Data Centers Reshape Specialty Steel Demand',
    desc: 'رشد سرمایه‌گذاری در مراکز داده، تقاضا برای مقاطع سازه‌ای، ورق‌های باکیفیت، تجهیزات سرمایشی و فولادهای مهندسی را بالا می‌برد. فرصت برای فولاد مبارکه در محصولاتی است که کیفیت، تحویل قابل اتکا و استاندارد پروژه‌ای بالاتری می‌خواهند.',
    descEn: 'AI data-center construction lifts demand for structural sections, high-quality flat steel and engineered steel applications.',
    img: '/news/photo-1518770660439-4636190af475.jpg',
  },
  {
    id: 'middle-east-logistics',
    source: 'MSC / AP / Al Jazeera',
    date: '۶ اردیبهشت ۱۴۰۵',
    dateFa: '۶ اردیبهشت ۱۴۰۵',
    dateEn: 'Apr 26, 2026',
    dateIso: '2026-04-26',
    title: 'ریسک مسیرهای دریایی، هزینه صادرات منطقه‌ای فولاد را بالا نگه می‌دارد',
    titleEn: 'Maritime Risk Keeps Regional Steel Export Costs Elevated',
    desc: 'اختلال در مسیرهای دریایی و افزایش حق بیمه حمل، مزیت بازارهای نزدیک را پررنگ‌تر می‌کند. برای فولاد مبارکه، مدیریت بازارهای عراق، CIS و خلیج فارس باید همزمان با سناریوی حمل جایگزین و قراردادهای منعطف انجام شود.',
    descEn: 'Shipping disruption and higher insurance costs increase the value of nearby export markets and flexible logistics planning.',
    img: '/news/photo-1540575467063-178a50c2df87.jpg',
  },
  {
    id: 'energy-security',
    source: 'IEA / گزارش‌های صنعت فولاد ایران',
    date: '۲ اردیبهشت ۱۴۰۵',
    dateFa: '۲ اردیبهشت ۱۴۰۵',
    dateEn: 'Apr 22, 2026',
    dateIso: '2026-04-22',
    title: 'امنیت انرژی، سقف عملیاتی تولید فولاد ایران را تعیین می‌کند',
    titleEn: 'Energy Security Sets Iran Steel’s Operating Ceiling',
    desc: 'ناترازی گاز و برق، دیگر فقط مسئله هزینه نیست؛ ریسک توقف تولید، کاهش قابلیت تحویل و افت اعتماد مشتری را ایجاد می‌کند. اولویت عملیاتی، قراردادهای انرژی پایدار، بازیافت حرارت و سرمایه‌گذاری در برق اختصاصی است.',
    descEn: 'Gas and power imbalance is now an availability risk, not only a cost issue, affecting delivery reliability and customer confidence.',
    img: '/news/photo-1466611653911-95081537e5b7.jpg',
  },
]

const normalizePanelItem = (row: Record<string, unknown>, index: number): Glance => {
  const bodyFa = String(row.bodyFa ?? row.descFa ?? row.descriptionFa ?? '').trim()
  const bodyEn = String(row.bodyEn ?? row.descEn ?? row.descriptionEn ?? bodyFa).trim()
  const dateEn = String(row.dateEn ?? row.dateIso ?? row.createdAt ?? row.updatedAt ?? '').trim()
  const dateFa = String(row.dateFa ?? row.date ?? dateEn).trim()

  return {
    id: String(row.id ?? `panel-${index}`),
    source: String(row.source ?? ''),
    sourceUrl: resolveSourceUrl(String(row.source ?? ''), String(row.sourceUrl ?? row.source_url ?? row.url ?? row.link ?? '')),
    date: dateFa,
    dateFa,
    dateEn,
    dateIso: String(row.dateIso ?? row.createdAt ?? row.updatedAt ?? dateEn),
    createdAt: String(row.createdAt ?? ''),
    updatedAt: String(row.updatedAt ?? ''),
    title: String(row.titleFa ?? row.title ?? ''),
    titleEn: String(row.titleEn ?? row.titleFa ?? row.title ?? ''),
    desc: bodyFa.split(/\n{2,}/)[0] || bodyFa,
    descEn: bodyEn.split(/\n{2,}/)[0] || bodyEn,
    img: String(row.img ?? row.image ?? '') || '/news/photo-1504307651254-35680f356dfd.jpg',
  }
}

export default function AtAGlanceSection({ embedded = false }: { embedded?: boolean }) {
  const { lang } = useLang()
  const isFa = lang === 'fa'
  const [remoteItems, setRemoteItems] = useState<Glance[] | null>(null)
  const [i, setI] = useState(0)
  const [dir, setDir] = useState<1 | -1>(1)

  useEffect(() => {
    const PANEL_API = import.meta.env.DEV
      ? ''
      : ((import.meta as ImportMeta & { env?: Record<string, string> }).env?.VITE_PANEL_API || '')
    let alive = true

    fetch(`${PANEL_API}/api/radar?limit=30`)
      .then(r => (r.ok ? r.json() : null))
      .then((rows) => {
        if (!alive || !Array.isArray(rows) || rows.length === 0) return
        const mapped = rows
          .map(normalizePanelItem)
          .filter(item => item.title && item.desc)
        if (mapped.length) setRemoteItems(mapped)
      })
      .catch((error) => {
        console.error('Failed to load homepage at-a-glance items', error)
      })

    return () => { alive = false }
  }, [])

  const items = useMemo(
    () => sortByPublishedDesc(remoteItems && remoteItems.length > 0 ? remoteItems : FALLBACK_ITEMS),
    [remoteItems],
  )
  const latest = items.slice(0, 5)
  const it = latest[i] ?? latest[0]

  useEffect(() => {
    setI(0)
  }, [items])

  const go = (d: 1 | -1) => {
    setDir(d)
    setI((prev) => (prev + d + latest.length) % latest.length)
  }

  if (!it) {
    return (
      <section
        id="at-a-glance"
        aria-busy="true"
        style={{ background: '#faf7f4', padding: '52px 0', minHeight: 500, scrollMarginTop: '90px' }}
      />
    )
  }

  const T = {
    heading: isFa ? 'در یک نگاه' : 'At a Glance',
  }

  return (
    <section id="at-a-glance" style={{ background: '#faf7f4', padding: '52px 0', overflow: 'hidden', scrollMarginTop: '90px' }} dir={isFa ? 'rtl' : 'ltr'}>
      <div className="max-w-7xl mx-auto px-12 max-md:px-5">

        {!embedded && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, justifyContent: 'space-between', marginBottom: 24 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{ width: 4, height: 28, background: GOLD, borderRadius: 2 }} />
              <h2 style={{ fontSize: 'clamp(22px, 2.2vw, 30px)', fontWeight: 900, color: NAVY, letterSpacing: '-0.5px', margin: 0 }}>
                {T.heading}
              </h2>
            </div>
            <Link
              to="/at-a-glance"
              style={{
                display: 'inline-flex', alignItems: 'center', gap: 6,
                fontSize: 14, fontWeight: 700, color: GOLD, textDecoration: 'none',
                padding: '8px 16px', border: `1.5px solid ${GOLD}`, borderRadius: 8,
                transition: 'background 160ms, color 160ms', whiteSpace: 'nowrap',
              }}
              onMouseEnter={(e) => { e.currentTarget.style.background = GOLD; e.currentTarget.style.color = '#fff' }}
              onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = GOLD }}
            >
              {isFa ? 'مشاهده بیشتر' : 'See more'}
              <span>{isFa ? '←' : '→'}</span>
            </Link>
          </div>
        )}

        <div
          style={{ display: 'flex', flexDirection: isFa ? 'row' : 'row-reverse', alignItems: 'center', gap: 0, minHeight: 380, direction: 'ltr' }}
          className="max-lg:!flex-col max-lg:!gap-8"
        >
          <div style={{ width: '35%', position: 'relative', flexShrink: 0 }} className="max-lg:!w-full max-lg:!max-w-[400px]">
            <div style={{
              position: 'absolute', inset: 0,
              transform: 'translate(-28px, -22px)',
              background: '#ece7e1', borderRadius: 18,
              boxShadow: '0 30px 70px -30px rgba(7,29,73,0.25)',
            }} />
            <div
              style={{ position: 'relative', borderRadius: 18, overflow: 'hidden', boxShadow: '0 40px 90px -30px rgba(7,29,73,0.45)' }}
              className="aspect-[3/3.2] max-lg:!aspect-[16/10]"
            >
              <AnimatePresence mode="wait" custom={dir}>
                <motion.img
                  key={it.id}
                  src={it.img}
                  alt=""
                  initial={{ opacity: 0, scale: 1.06 }}
                  animate={{ opacity: 1, scale: 1 }}
                  exit={{ opacity: 0, scale: 1.02 }}
                  transition={{ duration: 0.55, ease: [0.22, 1, 0.36, 1] }}
                  style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
                />
              </AnimatePresence>
            </div>
          </div>

          <div style={{ flex: 1, position: 'relative', zIndex: 2 }} className="max-lg:!w-full">
            <div style={{
              background: '#fff', borderRadius: 6,
              boxShadow: '0 30px 80px -40px rgba(7,29,73,0.30)',
              padding: '40px 44px 32px',
              marginLeft: isFa ? '-8%' : 0,
              marginRight: isFa ? 0 : '-8%',
              direction: isFa ? 'rtl' : 'ltr',
            }} className="max-lg:!ms-0 max-lg:!me-0 max-md:!p-6">

              <AnimatePresence mode="wait">
                <motion.div
                  key={it.id}
                  initial={{ opacity: 0, x: dir * 24 }}
                  animate={{ opacity: 1, x: 0 }}
                  exit={{ opacity: 0, x: dir * -16 }}
                  transition={{ duration: 0.45, ease: [0.22, 1, 0.36, 1] }}
                >
                  <h3 style={{ fontSize: 'clamp(20px, 1.9vw, 27px)', fontWeight: 900, color: NAVY, lineHeight: 1.4, letterSpacing: '-0.3px', margin: '0 0 18px' }}>
                    {isFa ? it.title : it.titleEn}
                  </h3>

                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20, flexWrap: 'wrap', gap: 8 }}>
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 13, color: 'rgba(7,29,73,0.55)' }}>
                      <CalendarIcon />
                      {isFa ? it.date : it.dateEn}
                    </span>
                    {it.source && <SourceLink source={it.source} sourceUrl={it.sourceUrl} />}
                  </div>

                  <p style={{
                    fontSize: 'clamp(13px, 1.05vw, 15px)',
                    lineHeight: 2.1,
                    color: 'rgba(7,29,73,0.72)',
                    margin: 0,
                    textAlign: 'justify',
                    display: '-webkit-box',
                    WebkitBoxOrient: 'vertical',
                    WebkitLineClamp: 4,
                    overflow: 'hidden',
                  }}>
                    {isFa ? it.desc : it.descEn}
                  </p>

                  <Link
                    to="/at-a-glance"
                    style={{
                      display: 'inline-flex',
                      alignItems: 'center',
                      justifyContent: 'flex-end',
                      gap: 6,
                      width: '100%',
                      marginTop: 14,
                      color: GOLD,
                      fontSize: 13,
                      fontWeight: 800,
                      textDecoration: 'none',
                    }}
                  >
                    {isFa ? 'مطالعه بیشتر' : 'Read more'}
                    <span aria-hidden="true">{isFa ? '←' : '→'}</span>
                  </Link>
                </motion.div>
              </AnimatePresence>

              <div style={{ display: 'flex', gap: 12, marginTop: 28 }}>
                <NavBtn onClick={() => go(-1)} aria="prev">‹</NavBtn>
                <NavBtn onClick={() => go(1)} aria="next">›</NavBtn>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

function SourceLink({ source, sourceUrl }: { source: string; sourceUrl?: string }) {
  const href = resolveSourceUrl(source, sourceUrl)
  const style: CSSProperties = {
    fontSize: 14,
    fontWeight: 700,
    color: GOLD,
    letterSpacing: '0.3px',
    textDecoration: href ? 'underline' : 'none',
    textUnderlineOffset: 3,
    cursor: href ? 'pointer' : 'default',
  }

  if (!href) return <span style={style}>{source}</span>

  return (
    <a
      href={href}
      target={href.startsWith('http') ? '_blank' : undefined}
      rel={href.startsWith('http') ? 'noopener noreferrer' : undefined}
      style={style}
      onClick={(e) => e.stopPropagation()}
    >
      {source}
    </a>
  )
}

function NavBtn({ children, onClick, aria }: { children: React.ReactNode; onClick: () => void; aria: string }) {
  return (
    <button
      onClick={onClick}
      aria-label={aria}
      style={{
        width: 38, height: 38, borderRadius: '50%',
        background: '#fff', color: GOLD, border: `1.5px solid ${GOLD}`, cursor: 'pointer',
        fontSize: 20, fontWeight: 700, lineHeight: 1,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: 'inherit', transition: 'background 180ms, color 180ms',
      }}
      onMouseEnter={(e) => { e.currentTarget.style.background = GOLD; e.currentTarget.style.color = '#fff' }}
      onMouseLeave={(e) => { e.currentTarget.style.background = '#fff'; e.currentTarget.style.color = GOLD }}
    >
      {children}
    </button>
  )
}

function CalendarIcon() {
  return (
    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke={GOLD} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="4" width="18" height="18" rx="2" />
      <line x1="16" y1="2" x2="16" y2="6" />
      <line x1="8" y1="2" x2="8" y2="6" />
      <line x1="3" y1="10" x2="21" y2="10" />
    </svg>
  )
}
