import { useState, type CSSProperties } from 'react'
import { AnimatePresence, motion } from 'framer-motion'
import { Eye, Globe, Factory, type LucideIcon } from 'lucide-react'
import WorldSection from './sections/WorldSection'
import IndustrySection from './sections/IndustrySection'

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

const SECTIONS = [
  { id: 'world',    titleFa: 'دیدن جهان',  subtitleFa: 'روندها · سیاست‌ها · بازار', accentColor: '#1a6bcf', Icon: Globe, component: WorldSection },
  { id: 'industry', titleFa: 'دیدن صنعت', subtitleFa: 'فولاد · رقبا · قیمت‌ها',    accentColor: '#b8893d', Icon: Factory, component: IndustrySection },
] as const

type SectionId = (typeof SECTIONS)[number]['id']

function SwitcherOption({
  id,
  option,
  label,
  Icon,
  activeSectionId,
  onChange,
}: {
  id: SectionId
  option: string
  label: string
  Icon: LucideIcon
  activeSectionId: SectionId
  onChange: (id: SectionId) => void
}) {
  const customAttrs = { 'c-option': option } as Record<string, string>
  return (
    <label className="steel-switcher__option" title={label} aria-label={label}>
      <input
        {...customAttrs}
        className="steel-switcher__input"
        type="radio"
        name="steel-dashboard-section"
        checked={activeSectionId === id}
        onChange={() => onChange(id)}
        title={label}
        aria-label={label}
      />
      <Icon className="steel-switcher__icon" size={20} strokeWidth={2.2} />
    </label>
  )
}

/* ── Page ── */
export default function SteelDashboard() {
  const [activeSectionId, setActiveSectionId] = useState<SectionId>('world')
  const [previousOption, setPreviousOption] = useState('1')

  const activeSection = SECTIONS.find(s => s.id === activeSectionId) ?? SECTIONS[0]
  const ActiveComponent = activeSection.component
  const switcherAttrs = { 'c-previous': previousOption } as Record<string, string>

  const selectSection = (id: SectionId) => {
    const currentOption = String(SECTIONS.findIndex(s => s.id === activeSectionId) + 1)
    setPreviousOption(currentOption)
    setActiveSectionId(id)
    window.scrollTo({ top: 0, behavior: 'smooth' })
  }

  return (
    <div dir="rtl" className="steel-dashboard-page" style={{ minHeight: '100vh', background: '#f3f4f6', fontFamily: 'Vazir, sans-serif' }}>

      {/* page header */}
      <div style={{ background: NAVY, padding: '28px 0 24px' }}>
        <div className="max-w-7xl mx-auto px-12 max-md:px-5">
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{
              width: 44, height: 44, borderRadius: 12,
              background: GOLD,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <Eye size={20} color={NAVY} />
            </div>
            <div>
              <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '3px', color: GOLD, marginBottom: 4 }}>
                STEEL FORESIGHT · DASHBOARD
              </div>
              <h1 style={{ fontSize: 'clamp(16px,2.2vw,26px)', fontWeight: 900, color: '#fff', margin: 0 }}>
                سامانه هوشمند رصد فولاد آینده
              </h1>
            </div>
            <div style={{
              marginRight: 'auto',
              display: 'flex', alignItems: 'center', gap: 6,
              background: 'rgba(5,150,105,0.15)',
              border: '1px solid rgba(5,150,105,0.35)',
              borderRadius: 20, padding: '5px 12px',
            }}>
              <div style={{ width: 7, height: 7, borderRadius: '50%', background: '#10b981' }} className="animate-pulse" />
              <span style={{ fontSize: 11, fontWeight: 700, color: '#10b981' }}>زنده</span>
            </div>
          </div>
        </div>
      </div>

      {/* section content — animated on switch */}
      <div
        className="max-w-7xl mx-auto px-12 max-md:px-5"
        style={{ paddingTop: 40, paddingBottom: 60, paddingRight: 'max(3rem, 72px)' }}
      >
        <AnimatePresence mode="wait">
          <motion.div
            key={activeSectionId}
            initial={{ opacity: 0, y: 18 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -10 }}
            transition={{ duration: 0.22, ease: [0.22, 1, 0.36, 1] }}
          >
            <ActiveComponent />
          </motion.div>
        </AnimatePresence>
      </div>

      <fieldset
        {...switcherAttrs}
        className="steel-switcher"
        style={{ '--steel-active': activeSection.accentColor } as CSSProperties}
      >
        <legend className="steel-switcher__legend">بخش‌های داشبورد</legend>
        {SECTIONS.map((s, index) => (
          <SwitcherOption
            key={s.id}
            id={s.id}
            option={String(index + 1)}
            label={s.titleFa}
            Icon={s.Icon}
            activeSectionId={activeSectionId}
            onChange={selectSection}
          />
        ))}
      </fieldset>
    </div>
  )
}
