import { useState, useEffect, type CSSProperties } from 'react'
import { AnimatePresence, motion } from 'framer-motion'
import { X, Globe, Calendar, LayoutGrid, Newspaper, ChevronDown } from 'lucide-react'
import { useLang } from '@/context/LangContext'
import FeaturedReportBanner from '../Home/sections/FeaturedReportBanner'

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

/* ─── types ─── */
type Tab = 'market' | 'tech' | 'geo' | 'energy' | 'commodity'

type Card = {
  id: string
  tab: Tab
  img: string
  titleFa: string; titleEn: string
  bodyFa: string[]; bodyEn: string[]
  analysisFa: string; analysisEn: string
  tags: string[]
  source: string
  dateFa: string; dateEn: string
}

/* ─── data ─── */
const TABS: { id: Tab; fa: string; en: string }[] = [
  { id: 'commodity', fa: 'مواد معدنیِ حیاتی و زنجیره‌ی تامین', en: 'Critical Minerals & Supply Chain' },
  { id: 'market',    fa: 'بازارهای جهانی و اقتصادِ کلان',      en: 'Global Markets & Macroeconomy' },
  { id: 'geo',       fa: 'ژئوپلیتیک و امنیتِ اقتصادی',         en: 'Geopolitics & Economic Security' },
  { id: 'tech',      fa: 'نوآوری و فناوری‌هایِ تحول‌آفرین',    en: 'Innovation & Transformative Tech' },
  { id: 'energy',    fa: 'تجارت و کسب‌وکارِ بین‌الملل',        en: 'Trade & International Business' },
]

const catLabel = (tab: Tab, fa: boolean): string => { const t = TABS.find(x => x.id === tab); return t ? (fa ? t.fa : t.en) : '' }
const sidebarH: CSSProperties = { fontSize: 14, fontWeight: 900, color: NAVY, margin: '0 0 12px', paddingBottom: 10, borderBottom: `2px solid ${GOLD}` }
const catNum: CSSProperties = { fontSize: 11, fontWeight: 700, color: GOLD, background: `${GOLD}1a`, borderRadius: 6, padding: '2px 8px' }
const catRow = (active: boolean): CSSProperties => ({ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, padding: '9px 2px', border: 'none', background: 'transparent', cursor: 'pointer', fontFamily: 'inherit', fontSize: 13, fontWeight: 700, color: active ? GOLD : 'rgba(3,35,64,0.78)', borderBottom: '1px solid rgba(3,35,64,0.06)' })

const CARDS: Card[] = [
  {
    id: 'c1', tab: 'market',
    img: '/news/photo-1504307651254-35680f356dfd.jpg',
    titleFa: 'شوک هیدروژنی به بازار جهانی فولاد',
    titleEn: 'Hydrogen Shock to Global Steel Markets',
    bodyFa: [
      'پروژه عظیم «فولاد سبز H2» در سوئد با جذب بی‌سابقه ۶.۵ میلیارد یورو سرمایه، رسماً وارد فاز اجرایی شد.',
      'این تأسیسات با هدف کاهش ۹۵ درصدی انتشار CO₂، قواعد رقابت در زنجیره ارزش اروپا را برای همیشه بازتعریف می‌کند.',
    ],
    bodyEn: [
      'Sweden\'s massive Green Steel H2 project, raising an unprecedented €6.5bn, has officially entered execution phase.',
      'Targeting a 95% cut in CO₂ emissions, this facility is set to redefine competitive rules in Europe\'s value chain.',
    ],
    analysisFa: 'تحول فولاد سبز، فرصت صادراتی ایران را در بازارهای سنتی تهدید می‌کند.',
    analysisEn: 'Green steel transformation threatens Iran\'s export opportunities in traditional markets.',
    tags: ['فولاد سبز', 'هیدروژن', 'اروپا'],
    source: 'Financial Times', dateFa: '۱۴ اردیبهشت ۱۴۰۵', dateEn: 'May 4, 2026',
  },
  {
    id: 'c2', tab: 'market',
    img: '/news/photo-1581092160607-ee22731c9b4e.jpg',
    titleFa: 'CBAM اروپا وارد اجرای کامل شد',
    titleEn: 'EU CBAM Enters Full Enforcement',
    bodyFa: [
      'با اجرای کامل مکانیسم تنظیم مرزهای کربنی، صادرکنندگان فولاد به اروپا موظف به پرداخت هزینه کامل کربن شدند.',
      'این تحول فشار بی‌سابقه‌ای بر تولیدکنندگان مبتنی بر کوره بلند وارد کرده است.',
    ],
    bodyEn: [
      'With CBAM fully enforced, steel exporters to the EU must now pay the full cost of embedded carbon.',
      'This places unprecedented pressure on blast-furnace producers globally.',
    ],
    analysisFa: 'ایران باید فوری‌ترین اولویت خود را کربن‌زدایی از فرآیند تولید قرار دهد.',
    analysisEn: 'Iran must make decarbonization its most urgent industrial priority.',
    tags: ['CBAM', 'کربن', 'صادرات'],
    source: 'Reuters', dateFa: '۱۲ اردیبهشت ۱۴۰۵', dateEn: 'May 2, 2026',
  },
  {
    id: 'c3', tab: 'tech',
    img: '/news/photo-1518770660439-4636190af475.jpg',
    titleFa: 'هوش مصنوعی تقاضای فولاد مراکز داده را بازتعریف می‌کند',
    titleEn: 'AI Rewrites Steel Demand for Data Centers',
    bodyFa: [
      'موج ساخت مراکز داده هوش مصنوعی، تقاضای جدیدی برای مقاطع ساختمانی و فولاد ویژه ایجاد کرده است.',
      'تحلیلگران پیش‌بینی می‌کنند این روند تا پایان دهه یکی از پیشران‌های اصلی رشد مصرف فولاد باشد.',
    ],
    bodyEn: [
      'The AI data-center construction wave is creating fresh demand for structural sections and specialty steel.',
      'Analysts project this trend to be a leading driver of steel consumption growth through the decade.',
    ],
    analysisFa: 'فولادسازان باید ظرفیت تولید مقاطع ساختمانی پیشرفته را افزایش دهند.',
    analysisEn: 'Steel producers must expand capacity for advanced structural sections.',
    tags: ['هوش مصنوعی', 'مراکز داده', 'تقاضا'],
    source: 'Bloomberg', dateFa: '۱۰ اردیبهشت ۱۴۰۵', dateEn: 'Apr 30, 2026',
  },
  {
    id: 'c4', tab: 'tech',
    img: '/news/photo-1567789884554-0b844b597180.jpg',
    titleFa: 'اتوماسیون کوره‌های القایی در ایران',
    titleEn: 'Induction Furnace Automation in Iran',
    bodyFa: [
      'چندین کارخانه بزرگ فولاد ایران سرمایه‌گذاری در سیستم‌های کنترل هوشمند کوره را آغاز کرده‌اند.',
      'این سیستم‌ها توانایی کاهش مصرف انرژی تا ۱۵ درصد را دارند.',
    ],
    bodyEn: [
      'Several major Iranian steel plants have begun investing in smart furnace control systems.',
      'These systems are capable of reducing energy consumption by up to 15%.',
    ],
    analysisFa: 'گام مثبتی است اما سرعت پیاده‌سازی باید افزایش یابد.',
    analysisEn: 'A positive step, but implementation speed must increase.',
    tags: ['اتوماسیون', 'کوره', 'انرژی'],
    source: 'فولاد نیوز', dateFa: '۸ اردیبهشت ۱۴۰۵', dateEn: 'Apr 28, 2026',
  },
  {
    id: 'c5', tab: 'geo',
    img: '/news/photo-1540575467063-178a50c2df87.jpg',
    titleFa: 'تنش‌های خاورمیانه و تجارت فولاد',
    titleEn: 'Middle East Tensions and Steel Trade',
    bodyFa: [
      'ناآرامی‌های منطقه‌ای مسیرهای حمل‌ونقل دریایی را مختل کرده و هزینه‌های لجستیک را افزایش داده است.',
      'صادرکنندگان ایرانی با چالش‌های اضافی در انتقال محصولات روبرو هستند.',
    ],
    bodyEn: [
      'Regional instability has disrupted maritime shipping routes and increased logistics costs.',
      'Iranian exporters face additional challenges in product delivery.',
    ],
    analysisFa: 'تنوع‌بخشی در مسیرهای صادراتی اکنون یک ضرورت استراتژیک است.',
    analysisEn: 'Diversifying export routes is now a strategic necessity.',
    tags: ['ژئوپلیتیک', 'حمل دریایی', 'صادرات'],
    source: 'Al Jazeera', dateFa: '۶ اردیبهشت ۱۴۰۵', dateEn: 'Apr 26, 2026',
  },
  {
    id: 'c6', tab: 'geo',
    img: '/news/photo-1570168007204-dfb528c6958f.jpg',
    titleFa: 'رقابت چین و آمریکا بر سر فلزات استراتژیک',
    titleEn: 'China–US Competition Over Strategic Metals',
    bodyFa: [
      'تنش‌های ژئوپلیتیک میان قدرت‌های بزرگ، زنجیره تأمین فلزات حیاتی را بی‌ثبات کرده است.',
      'این رقابت فرصت‌هایی برای تأمین‌کنندگان جایگزین ایجاد می‌کند.',
    ],
    bodyEn: [
      'Geopolitical tensions between major powers have destabilized critical metal supply chains.',
      'This competition creates opportunities for alternative suppliers.',
    ],
    analysisFa: 'ایران می‌تواند نقش تأمین‌کننده جایگزین برخی فلزات را ایفا کند.',
    analysisEn: 'Iran can play the role of alternative supplier for some metals.',
    tags: ['چین', 'آمریکا', 'فلزات'],
    source: 'Reuters', dateFa: '۴ اردیبهشت ۱۴۰۵', dateEn: 'Apr 24, 2026',
  },
  {
    id: 'c7', tab: 'energy',
    img: '/news/photo-1466611653911-95081537e5b7.jpg',
    titleFa: 'بحران گاز و صنعت فولاد ایران',
    titleEn: 'Gas Crisis and Iran\'s Steel Industry',
    bodyFa: [
      'کمبود گاز در فصل سرما چندین واحد فولادسازی را مجبور به تعلیق موقت تولید کرد.',
      'این چالش ساختاری نیاز به سرمایه‌گذاری جدی در زیرساخت انرژی دارد.',
    ],
    bodyEn: [
      'Gas shortages during winter forced several steelmaking units into temporary production suspension.',
      'This structural challenge requires serious investment in energy infrastructure.',
    ],
    analysisFa: 'بدون تأمین پایدار انرژی، اهداف تولید فولاد محقق نمی‌شود.',
    analysisEn: 'Without stable energy supply, steel production targets cannot be met.',
    tags: ['گاز', 'انرژی', 'تولید'],
    source: 'ایسنا', dateFa: '۲ اردیبهشت ۱۴۰۵', dateEn: 'Apr 22, 2026',
  },
  {
    id: 'c8', tab: 'energy',
    img: '/news/photo-1611273426858-450d8e3c9fce.jpg',
    titleFa: 'انرژی خورشیدی برای فولادسازی پایدار',
    titleEn: 'Solar Energy for Sustainable Steelmaking',
    bodyFa: [
      'پتانسیل عظیم انرژی خورشیدی ایران می‌تواند پایه‌ای برای فولادسازی کم‌کربن باشد.',
      'اولین پروژه‌های آزمایشی ترکیب پنل خورشیدی با کوره‌های الکتریکی در حال بررسی است.',
    ],
    bodyEn: [
      'Iran\'s vast solar energy potential could form the basis for low-carbon steelmaking.',
      'First pilot projects combining solar panels with electric arc furnaces are under review.',
    ],
    analysisFa: 'سرمایه‌گذاری در این حوزه می‌تواند چند مشکل را هم‌زمان حل کند.',
    analysisEn: 'Investment in this area can solve several problems simultaneously.',
    tags: ['خورشیدی', 'فولاد سبز', 'EAF'],
    source: 'PV Magazine', dateFa: '۳۰ فروردین ۱۴۰۵', dateEn: 'Apr 19, 2026',
  },
  {
    id: 'c9', tab: 'commodity',
    img: '/news/photo-1540575467063-178a50c2df87.jpg',
    titleFa: 'قیمت سنگ‌آهن در مسیر کاهش',
    titleEn: 'Iron Ore Prices on Declining Path',
    bodyFa: [
      'کاهش تقاضای چین در بخش ساختمان قیمت سنگ‌آهن را به پایین‌ترین سطح دو سال گذشته رساند.',
      'این کاهش برای تولیدکنندگان فولاد مبتنی بر کوره بلند مزیت هزینه‌ای ایجاد می‌کند.',
    ],
    bodyEn: [
      'China\'s declining construction-sector demand has pushed iron ore to a two-year low.',
      'This drop creates a cost advantage for blast-furnace-based steel producers.',
    ],
    analysisFa: 'فرصتی برای افزایش ذخیره‌سازی سنگ‌آهن با قیمت پایین وجود دارد.',
    analysisEn: 'An opportunity exists to increase iron ore stockpiling at low prices.',
    tags: ['سنگ‌آهن', 'چین', 'قیمت'],
    source: 'Bloomberg', dateFa: '۲۸ فروردین ۱۴۰۵', dateEn: 'Apr 17, 2026',
  },
  {
    id: 'c10', tab: 'commodity',
    img: '/news/photo-1504307651254-35680f356dfd.jpg',
    titleFa: 'نوسان قیمت زغال‌سنگ کک‌شو',
    titleEn: 'Coking Coal Price Volatility',
    bodyFa: [
      'محدودیت‌های صادرات استرالیا و بارندگی در مناطق استخراجی، قیمت زغال کک‌شو را نوسانی کرده است.',
      'این بی‌ثباتی برنامه‌ریزی تولید را برای کارخانه‌های کوره بلند دشوار می‌کند.',
    ],
    bodyEn: [
      'Australian export restrictions and rainfall in mining regions have made coking coal prices volatile.',
      'This instability complicates production planning for blast furnace plants.',
    ],
    analysisFa: 'تنوع در منابع تأمین زغال‌سنگ یک اولویت استراتژیک است.',
    analysisEn: 'Diversifying coking coal sources is a strategic priority.',
    tags: ['زغال‌سنگ', 'استرالیا', 'تولید'],
    source: 'Metal Bulletin', dateFa: '۲۶ فروردین ۱۴۰۵', dateEn: 'Apr 15, 2026',
  },
]

const NEWS_ITEMS = [
  { titleFa: 'فولاد مبارکه رکورد تولید ماهانه را شکست', titleEn: 'Mobarakeh Steel breaks monthly production record', dateFa: '۱۴ اردیبهشت ۱۴۰۵', dateEn: 'May 4, 2026' },
  { titleFa: 'تفاهم‌نامه همکاری ایران و روسیه در حوزه فولاد', titleEn: 'Iran-Russia steel cooperation MOU signed', dateFa: '۱۲ اردیبهشت ۱۴۰۵', dateEn: 'May 2, 2026' },
  { titleFa: 'افزایش ۸ درصدی صادرات فولاد در فروردین', titleEn: '8% rise in steel exports in April', dateFa: '۱۰ اردیبهشت ۱۴۰۵', dateEn: 'Apr 30, 2026' },
  { titleFa: 'نشست وزرای صنعت کشورهای عضو ECO', titleEn: 'ECO member states industry ministers summit', dateFa: '۸ اردیبهشت ۱۴۰۵', dateEn: 'Apr 28, 2026' },
  { titleFa: 'راه‌اندازی خط تولید ورق گالوانیزه در اصفهان', titleEn: 'Galvanized sheet production line launched in Isfahan', dateFa: '۶ اردیبهشت ۱۴۰۵', dateEn: 'Apr 26, 2026' },
]


/* ─── modal — pixel-matched to Figma node 6791-15495 ─── */
const SectionHead = ({ Icon, img, children }: { Icon?: typeof Newspaper; img?: string; children: string }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
    {img
      ? <img src={img} alt="" width={22} height={22} style={{ objectFit: 'contain' }} />
      : Icon ? <Icon size={22} color="#0084E6" strokeWidth={1.6} /> : null}
    <span style={{ fontSize: 16, fontWeight: 700, color: '#262626', lineHeight: '28px' }}>{children}</span>
  </div>
)

function CardModal({ card, lang, onClose, onTagClick }: { card: Card; lang: 'fa' | 'en'; onClose: () => void; onTagClick: (tag: string) => void }) {
  const isFa = lang === 'fa'
  const dir = isFa ? 'rtl' : 'ltr'
  // lock background scroll so the wheel scrolls the modal body, not the page behind it
  useEffect(() => {
    const prev = document.body.style.overflow
    document.body.style.overflow = 'hidden'
    return () => { document.body.style.overflow = prev }
  }, [])
  const body = isFa ? card.bodyFa : card.bodyEn
  const bodyText: CSSProperties = { fontSize: 14, lineHeight: '24px', color: '#676F71', textAlign: 'justify', margin: 0 }
  const metaItem: CSSProperties = { display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12, color: '#868686', lineHeight: '21px' }

  return (
    <motion.div
      initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
      onClick={onClose}
      style={{ position: 'fixed', inset: 0, zIndex: 1000, background: 'rgba(3,35,64,0.55)', backdropFilter: 'blur(4px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '20px 16px' }}
    >
      <motion.div
        initial={{ opacity: 0, y: 32, scale: 0.97 }}
        animate={{ opacity: 1, y: 0, scale: 1 }}
        exit={{ opacity: 0, y: 32, scale: 0.97 }}
        transition={{ duration: 0.36, ease: [0.22, 1, 0.36, 1] }}
        onClick={e => e.stopPropagation()}
        dir={dir}
        style={{ background: '#fff', border: '1px solid #E1E2E3', borderRadius: 16, width: '100%', maxWidth: 600, maxHeight: '92vh', overflowY: 'auto', position: 'relative', boxShadow: '0 24px 70px -16px rgba(0,0,0,0.32)' }}
      >
        {/* cover */}
        <div style={{ position: 'relative', height: 284, minHeight: 284 }}>
          <img src={card.img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
        </div>

        {/* content */}
        <div style={{ padding: '16px 32px 0' }}>
          {/* title row */}
          <div style={{ borderBottom: '1px solid #E1E2E3', padding: '8px 0', marginBottom: 16 }}>
            <h2 style={{ fontSize: 16, fontWeight: 700, color: '#151617', lineHeight: '28px', textAlign: isFa ? 'right' : 'left', margin: 0 }}>
              {isFa ? card.titleFa : card.titleEn}
            </h2>
          </div>

          {/* category badge (right) + meta (left) */}
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap', marginBottom: 20 }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: GOLD, color: '#fff', fontSize: 14, fontWeight: 500, lineHeight: '24px', padding: '0 8px', borderRadius: 3 }}>
              <span>{catLabel(card.tab, isFa)}</span>
              <LayoutGrid size={16} color="#fff" strokeWidth={1.6} />
            </span>
            <div style={{ display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
              <span style={metaItem}><span>{card.source}</span><Globe size={18} color={GOLD} strokeWidth={1.6} /></span>
              <span style={metaItem}><span>{isFa ? card.dateFa : card.dateEn}</span><Calendar size={18} color={GOLD} strokeWidth={1.6} /></span>
            </div>
          </div>

          {/* اصل رویداد */}
          <div style={{ marginBottom: 16 }}>
            <SectionHead Icon={Newspaper}>{isFa ? 'رویداد' : 'The Event'}</SectionHead>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {body.map((p, i) => <p key={i} style={bodyText}>{p}</p>)}
            </div>
          </div>

          {/* دلالت‌های راهبردی */}
          <div style={{ marginBottom: 16 }}>
            <SectionHead img="/hugeicons_chart-analysis.png">{isFa ? 'دلالت‌های راهبردی' : 'Strategic Implications'}</SectionHead>
            <p style={bodyText}>{isFa ? card.analysisFa : card.analysisEn}</p>
          </div>

          {/* tags */}
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 20 }}>
            {card.tags.map(t => (
              <button key={t} type="button" onClick={() => onTagClick(t)}
                style={{ background: '#EDEDED', color: '#262626', fontSize: 12, lineHeight: '21px', padding: '4px 10px', borderRadius: 16, border: 'none', cursor: 'pointer', fontFamily: 'inherit', transition: 'background 160ms, color 160ms' }}
                onMouseEnter={e => { e.currentTarget.style.background = GOLD; e.currentTarget.style.color = '#fff' }}
                onMouseLeave={e => { e.currentTarget.style.background = '#EDEDED'; e.currentTarget.style.color = '#262626' }}
              >#{t.replace(/ /g, '_')}</button>
            ))}
          </div>
        </div>

        {/* footer */}
        <div style={{ background: NAVY, borderRadius: '0 0 16px 16px', padding: '16px 24px 24px', display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
          <button onClick={onClose} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: GOLD, color: '#fff', border: 'none', borderRadius: 100, padding: '8px 16px', fontSize: 14, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit' }}>
            <X size={18} color="#fff" />
            {isFa ? 'بستن' : 'Close'}
          </button>
        </div>
      </motion.div>
    </motion.div>
  )
}

/* ─── source + date meta row (Figma: «Bloomberg» globe + date calendar, #606060 / 12px) ─── */
function Meta({ source, date, light }: { source?: string; date: string; light?: boolean }) {
  const item = { fontSize: 12, color: light ? 'rgba(255,255,255,0.85)' : '#606060', fontWeight: 400, display: 'inline-flex', alignItems: 'center', gap: 5 } as const
  return (
    <div style={{ display: 'flex', gap: 18, direction: 'rtl', alignItems: 'center', flexWrap: 'wrap' }}>
      {source && <span style={item}><Globe size={13} color={GOLD} />{source}</span>}
      <span style={item}><Calendar size={13} color={GOLD} />{date}</span>
    </div>
  )
}

/* ─── category badge — Figma «Link» pill: gold #CD9E53, white text 14/500, element icon, r8 ─── */
function Badge({ label }: { label: string }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: GOLD, color: '#fff', fontSize: 12.5, fontWeight: 500, padding: '4px 11px', borderRadius: 8, lineHeight: 1.7, whiteSpace: 'nowrap', maxWidth: '100%' }}>
      <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{label}</span>
      <LayoutGrid size={15} color="#fff" strokeWidth={1.8} style={{ flexShrink: 0 }} />
    </span>
  )
}

/* ─── clickable hashtags shown directly on cards (filters the list on click) ─── */
function TagRow({ tags, onTagClick }: { tags: string[]; onTagClick: (t: string) => void }) {
  if (!tags?.length) return null
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 8 }}>
      {tags.slice(0, 4).map(t => (
        <button key={t} type="button"
          onClick={(e) => { e.stopPropagation(); onTagClick(t) }}
          style={{ background: '#EDEDED', color: '#262626', fontSize: 11, lineHeight: '20px', padding: '2px 9px', borderRadius: 14, border: 'none', cursor: 'pointer', fontFamily: 'inherit', transition: 'background 160ms, color 160ms' }}
          onMouseEnter={e => { e.currentTarget.style.background = GOLD; e.currentTarget.style.color = '#fff' }}
          onMouseLeave={e => { e.currentTarget.style.background = '#EDEDED'; e.currentTarget.style.color = '#262626' }}
        >#{t.replace(/ /g, '_')}</button>
      ))}
    </div>
  )
}

/* ─── main page ─── */
export default function AtAGlance() {
  const { lang } = useLang()
  const isFa = lang === 'fa'
  const [activeTab, setActiveTab] = useState<Tab | 'all'>('all')
  const [selectedCard, setSelectedCard] = useState<Card | null>(null)
  const [showAllList, setShowAllList] = useState(false)
  const [tagFilter, setTagFilter] = useState<string | null>(null)
  const [cards, setCards] = useState<Card[]>(CARDS)

  // clicking a hashtag in the modal filters the list to every post carrying that tag
  const handleTagClick = (tag: string) => { setTagFilter(tag); setActiveTab('all'); setSelectedCard(null); setShowAllList(true) }

  // load «در یک نگاه» cards from the panel (radar_items); fall back to the static list
  useEffect(() => {
    const PANEL_API = (import.meta as ImportMeta & { env?: Record<string, string> }).env?.VITE_PANEL_API || ''
    let alive = true
    fetch(`${PANEL_API}/api/radar?limit=100`)
      .then(r => (r.ok ? r.json() : null))
      .then((rows) => {
        if (!alive || !Array.isArray(rows) || rows.length === 0) return
        const VALID: Tab[] = ['market', 'tech', 'geo', 'energy', 'commodity']
        setCards(rows.map((r: Record<string, unknown>): Card => ({
          id: String(r.id),
          tab: VALID.includes(r.category as Tab) ? (r.category as Tab) : 'market',
          img: String(r.img || '') || '/news/photo-1504307651254-35680f356dfd.jpg',
          titleFa: String(r.titleFa ?? ''), titleEn: String(r.titleEn || r.titleFa || ''),
          bodyFa: String(r.bodyFa ?? '').split(/\n{2,}/).map(s => s.trim()).filter(Boolean),
          bodyEn: String(r.bodyEn ?? '').split(/\n{2,}/).map(s => s.trim()).filter(Boolean),
          analysisFa: String(r.analysisFa ?? ''), analysisEn: String(r.analysisEn || r.analysisFa || ''),
          tags: Array.isArray(r.tags) ? (r.tags as string[]) : [],
          source: String(r.source ?? ''),
          dateFa: String(r.dateFa ?? ''), dateEn: String(r.dateEn || r.dateFa || ''),
        })))
      })
      .catch(() => {})
    return () => { alive = false }
  }, [])

  const filteredCards = tagFilter
    ? cards.filter(c => c.tags.includes(tagFilter))
    : activeTab === 'all' ? cards : cards.filter(c => c.tab === activeTab)
  const hero = filteredCards[0]
  const smallItems = filteredCards.slice(1, 4)
  const listCards = filteredCards.slice(1)
  const visibleList = showAllList ? listCards : listCards.slice(0, 4)
  const catCounts = TABS.map(t => ({ ...t, n: cards.filter(c => c.tab === t.id).length }))
  const PMON = ['فروردین', 'اردیبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور', 'مهر', 'آبان', 'آذر', 'دی', 'بهمن', 'اسفند']
  const archive = (() => {
    const m = new Map<string, number>()
    cards.forEach(c => {
      const mon = PMON.find(p => c.dateFa.includes(p))
      const yr = (c.dateFa.match(/[۰-۹]{4}|\d{4}/) || [''])[0]
      if (mon) { const k = `${mon} ${yr}`.trim(); m.set(k, (m.get(k) || 0) + 1) }
    })
    return [...m.entries()].map(([k, n]) => ({ k, n }))
  })()

  // today's date — Jalali for fa (day number on the right, month on the left via dir=rtl)
  const todayDate = new Date()
  const todayFa = new Intl.DateTimeFormat('fa-IR-u-ca-persian', { day: 'numeric', month: 'long' }).format(todayDate)
  const todayEn = new Intl.DateTimeFormat('en-US', { day: 'numeric', month: 'short' }).format(todayDate)

  return (
    <div dir={isFa ? 'rtl' : 'ltr'} style={{ background: 'var(--paper)', minHeight: '100vh' }}>

      {/* ── breaking-news ticker ── */}
      <div style={{ background: NAVY, color: '#fff' }}>
        <div className="max-w-7xl mx-auto px-12 max-md:px-5" style={{ display: 'flex', alignItems: 'center', gap: 16, height: 46 }}>
          <span style={{ background: GOLD, color: NAVY, fontWeight: 800, fontSize: 12, padding: '5px 14px', borderRadius: 6, flexShrink: 0, whiteSpace: 'nowrap' }}>
            {isFa ? 'آخرین اخبار' : 'BREAKING'}
          </span>
          <div style={{ flex: 1, overflow: 'hidden' }}>
            <div className="ticker-track" style={{ display: 'inline-flex', alignItems: 'center' }}>
              {NEWS_ITEMS.map((n, i) => (
                <span key={i} style={{ display: 'inline-flex', alignItems: 'center', fontSize: 13, color: 'rgba(255,255,255,0.85)', whiteSpace: 'nowrap' }}>
                  <span style={{ width: 5, height: 5, borderRadius: '50%', background: GOLD, margin: '0 26px', flexShrink: 0 }} />
                  {isFa ? n.titleFa : n.titleEn}
                </span>
              ))}
            </div>
          </div>
          <span className="max-md:!hidden" style={{ fontSize: 12, color: GOLD, fontWeight: 700, flexShrink: 0, direction: 'rtl', whiteSpace: 'nowrap' }}>
            {isFa ? todayFa : todayEn}
          </span>
        </div>
      </div>

      {/* ── heading ── */}
      <div className="max-w-7xl mx-auto px-12 max-md:px-5" style={{ paddingTop: 34, paddingBottom: 6 }}>
        <div style={{ fontSize: 20, fontWeight: 800, letterSpacing: isFa ? '1px' : '3px', color: GOLD, marginBottom: 8 }}>{isFa ? 'دیده‌بانِ تحولات' : 'AT A GLANCE'}</div>
        <h1 style={{ fontSize: 'clamp(24px,3vw,38px)', fontWeight: 900, color: NAVY, margin: 0 }}>{isFa ? 'در یک نگاه' : 'At a Glance'}</h1>
      </div>

      {/* ── HERO: featured + small items ── */}
      <div className="max-w-7xl mx-auto px-12 max-md:px-5" style={{ paddingTop: 18 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 22 }} className="max-lg:!grid-cols-1">
          {hero && (
            <div onClick={() => setSelectedCard(hero)} style={{ position: 'relative', borderRadius: 16, overflow: 'hidden', cursor: 'pointer', minHeight: 360, boxShadow: '0 18px 50px -22px rgba(3,35,64,0.5)' }}>
              <img src={hero.img} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
              <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(3,35,64,0.94) 0%, rgba(3,35,64,0.35) 55%, rgba(3,35,64,0.12) 100%)' }} />
              <div style={{ position: 'absolute', insetInlineStart: 0, insetInlineEnd: 0, bottom: 0, padding: '30px 32px', textAlign: isFa ? 'right' : 'left' }}>
                <Badge label={catLabel(hero.tab, isFa)} />
                <h2 style={{ fontSize: 'clamp(18px,2vw,26px)', fontWeight: 700, color: '#fff', lineHeight: 1.6, margin: '14px 0 10px' }}>{isFa ? hero.titleFa : hero.titleEn}</h2>
                <p style={{ fontSize: 13.5, color: 'rgba(255,255,255,0.82)', lineHeight: 1.9, margin: 0, maxWidth: 580, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{(isFa ? hero.bodyFa : hero.bodyEn)[0] || ''}</p>
                <div style={{ marginTop: 14 }}><Meta source={hero.source} date={isFa ? hero.dateFa : hero.dateEn} light /></div>
              </div>
            </div>
          )}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {smallItems.map(card => (
              <div key={card.id} onClick={() => setSelectedCard(card)} style={{ display: 'flex', gap: 12, background: '#ededed', borderRadius: 16, cursor: 'pointer', padding: 8, alignItems: 'center', boxShadow: '0 3px 14px -10px rgba(3,35,64,0.25)' }}>
                <img src={card.img} alt="" style={{ width: 96, height: 96, objectFit: 'cover', flexShrink: 0, borderRadius: 12 }} />
                <div style={{ textAlign: isFa ? 'right' : 'left', flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 6 }}>
                  <div><Badge label={catLabel(card.tab, isFa)} /></div>
                  <Meta source={card.source} date={isFa ? card.dateFa : card.dateEn} />
                  <div style={{ fontSize: 14, fontWeight: 700, color: '#262626', lineHeight: 1.7, margin: 0, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{isFa ? card.titleFa : card.titleEn}</div>
                  <TagRow tags={card.tags} onTagClick={handleTagClick} />
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* ── MAIN: list + sidebar ── */}
      <div className="max-w-7xl mx-auto px-12 max-md:px-5" style={{ paddingTop: 44, paddingBottom: 56 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 300px', gap: 36 }} className="max-lg:!grid-cols-1">
          {/* main news list */}
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 22, justifyContent: isFa ? 'flex-start' : 'flex-end', flexDirection: isFa ? 'row' : 'row-reverse' }}>
              <span style={{ width: 3, height: 26, background: GOLD, borderRadius: 2 }} />
              <h2 style={{ fontSize: 20, fontWeight: 900, color: NAVY, margin: 0 }}>{isFa ? 'آخرین تحولات' : 'Latest Developments'}</h2>
            </div>
            {tagFilter && (
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 18, flexWrap: 'wrap' }}>
                <span style={{ fontSize: 13, color: '#606060' }}>{isFa ? 'نتایج برای' : 'Results for'}</span>
                <button type="button" onClick={() => setTagFilter(null)}
                  style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: GOLD, color: '#fff', border: 'none', borderRadius: 16, padding: '4px 12px', fontSize: 12.5, fontWeight: 700, cursor: 'pointer', fontFamily: 'inherit' }}>
                  #{tagFilter.replace(/ /g, '_')}
                  <X size={13} />
                </button>
              </div>
            )}
            <div style={{ position: 'relative' }}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                {visibleList.map(card => (
                  <div key={card.id} onClick={() => setSelectedCard(card)} style={{ display: 'flex', gap: 14, background: '#ededed', borderRadius: 16, cursor: 'pointer', padding: 8, boxShadow: '0 4px 18px -12px rgba(3,35,64,0.3)' }} className="max-sm:!flex-col">
                    <img src={card.img} alt="" style={{ width: 200, height: 150, objectFit: 'cover', flexShrink: 0, borderRadius: 14 }} className="max-sm:!w-full max-sm:!h-44" />
                    <div style={{ padding: '8px 12px', textAlign: isFa ? 'right' : 'left', flex: 1, minWidth: 0 }}>
                      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, marginBottom: 10 }}>
                        <Badge label={catLabel(card.tab, isFa)} />
                        <Meta source={card.source} date={isFa ? card.dateFa : card.dateEn} />
                      </div>
                      <h3 style={{ fontSize: 16, fontWeight: 700, color: '#262626', lineHeight: 1.8, margin: '0 0 8px' }}>{isFa ? card.titleFa : card.titleEn}</h3>
                      <p style={{ fontSize: 13, color: '#606060', lineHeight: 1.9, margin: 0, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{(isFa ? card.bodyFa : card.bodyEn)[0] || ''}</p>
                      <TagRow tags={card.tags} onTagClick={handleTagClick} />
                    </div>
                  </div>
                ))}
              </div>
              {/* fade + blur the last card, float the CTA on top of it */}
              {!showAllList && listCards.length > 4 && (
                <div style={{ position: 'absolute', left: 0, right: 0, bottom: -28, height: 220, display: 'flex', alignItems: 'flex-end', justifyContent: 'center', paddingBottom: 0, borderRadius: 16, pointerEvents: 'none', background: 'linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 42%, rgba(255,255,255,0.9) 74%, #ffffff 92%)', backdropFilter: 'blur(2.5px)', WebkitBackdropFilter: 'blur(2.5px)' }}>
                  <button
                    onClick={() => setShowAllList(true)}
                    style={{ pointerEvents: 'auto', display: 'inline-flex', alignItems: 'center', gap: 8, background: GOLD, color: '#fff', border: 'none', borderRadius: 100, padding: '12px 38px', fontSize: 14, fontWeight: 800, cursor: 'pointer', fontFamily: 'inherit', boxShadow: '0 14px 30px -8px rgba(205,158,83,0.8)', transition: 'transform .18s, filter .18s' }}
                    onMouseEnter={e => { e.currentTarget.style.filter = 'brightness(1.08)'; e.currentTarget.style.transform = 'translateY(-2px)' }}
                    onMouseLeave={e => { e.currentTarget.style.filter = 'none'; e.currentTarget.style.transform = 'none' }}
                  >
                    {isFa ? 'مشاهده همه' : 'View all'}
                    <ChevronDown size={18} />
                  </button>
                </div>
              )}
            </div>
          </div>

          {/* sidebar */}
          <aside style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            <div style={{ background: '#fff', borderRadius: 14, padding: '20px 22px', border: '1px solid rgba(3,35,64,0.07)' }}>
              <h4 style={sidebarH}>{isFa ? 'دسته‌بندی‌ها' : 'Categories'}</h4>
              <button onClick={() => { setActiveTab('all'); setTagFilter(null) }} style={catRow(activeTab === 'all' && !tagFilter)}><span>{isFa ? 'همه' : 'All'}</span><span style={catNum}>{cards.length}</span></button>
              {catCounts.map(c => (
                <button key={c.id} onClick={() => { setActiveTab(c.id); setTagFilter(null) }} style={catRow(activeTab === c.id && !tagFilter)}><span>{isFa ? c.fa : c.en}</span><span style={catNum}>{c.n}</span></button>
              ))}
            </div>
            {archive.length > 0 && (
              <div style={{ background: '#fff', borderRadius: 14, padding: '20px 22px', border: '1px solid rgba(3,35,64,0.07)' }}>
                <h4 style={sidebarH}>{isFa ? 'آرشیو ماهانه' : 'Monthly Archive'}</h4>
                {archive.map(a => (
                  <div key={a.k} style={{ ...catRow(false), cursor: 'default' }}><span>{a.k}</span><span style={catNum}>{a.n}</span></div>
                ))}
              </div>
            )}
          </aside>
        </div>
      </div>

      {/* ── promo banner ── */}
      <FeaturedReportBanner position="glance" />

      {/* modal */}
      <AnimatePresence>
        {selectedCard && (
          <CardModal card={selectedCard} lang={lang} onClose={() => setSelectedCard(null)} onTagClick={handleTagClick} />
        )}
      </AnimatePresence>
    </div>
  )
}
