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

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

const SECTIONS = [
  { id: 'world',    titleFa: 'دیدن جهان',  subtitleFa: 'روندها · سیاست‌ها · بازار', accentColor: '#1a6bcf' },
  { id: 'industry', titleFa: 'دیدن صنعت', subtitleFa: 'فولاد · رقبا · قیمت‌ها',    accentColor: '#b8893d' },
  { id: 'self',     titleFa: 'دیدن خود',  subtitleFa: 'استراتژی · پروژه‌ها · عملکرد', accentColor: NAVY },
]

const DOCK_ICONS: Record<string, LucideIcon> = { world: Globe, industry: Factory, self: Target }

const SECTION_COMPONENTS = [WorldSection, IndustrySection, SelfSection]

/* ── right-side dock button with a hover label ── */
function DockButton({ Icon, label, color, active, onClick }: { Icon: LucideIcon; label: string; color: string; active: boolean; onClick: () => void }) {
  const [hover, setHover] = useState(false)
  return (
    <div
      style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
    >
      <AnimatePresence>
        {hover && (
          <motion.span
            initial={{ opacity: 0, x: 6 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 6 }}
            transition={{ duration: 0.15 }}
            style={{ position: 'absolute', right: 'calc(100% + 10px)', whiteSpace: 'nowrap', background: '#032340', color: '#fff', fontSize: 12, fontWeight: 700, padding: '5px 11px', borderRadius: 8, boxShadow: '0 6px 18px rgba(3,35,64,0.3)', pointerEvents: 'none' }}
          >
            {label}
          </motion.span>
        )}
      </AnimatePresence>
      <button
        onClick={onClick}
        title={label}
        aria-label={label}
        style={{
          width: 44, height: 44, borderRadius: 13, border: 'none', cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          background: active ? color : hover ? 'rgba(255,255,255,0.2)' : 'rgba(255,255,255,0.1)',
          color: active ? '#fff' : 'rgba(255,255,255,0.78)',
          transition: 'background 180ms, transform 180ms, box-shadow 180ms',
          transform: hover ? 'scale(1.08)' : 'scale(1)',
          boxShadow: active ? `0 6px 18px ${color}66` : 'none',
        }}
      >
        <Icon size={20} strokeWidth={2} />
      </button>
    </div>
  )
}

/* ── Page ── */
export default function SteelDashboard() {
  const [activeSectionId, setActiveSectionId] = useState('world')

  const activeIdx = SECTIONS.findIndex(s => s.id === activeSectionId)

  const selectSection = (id: string) => {
    setActiveSectionId(id)
    window.scrollTo({ top: 0, behavior: 'smooth' })
  }

  return (
    <div dir="rtl" 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 }}
      >
        <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] }}
          >
            {(() => { const C = SECTION_COMPONENTS[activeIdx]; return C ? <C /> : null })()}
          </motion.div>
        </AnimatePresence>
      </div>

      {/* right-side dock */}
      <div style={{
        position: 'fixed', right: 16, top: '50%', transform: 'translateY(-50%)',
        zIndex: 100, display: 'flex', flexDirection: 'column', gap: 22,
        padding: '18px 8px', borderRadius: 20,
        background: 'rgba(3,35,64,0.5)',
        backdropFilter: 'blur(18px) saturate(160%)', WebkitBackdropFilter: 'blur(18px) saturate(160%)',
        border: '1px solid rgba(255,255,255,0.22)',
        boxShadow: '0 18px 50px rgba(3,35,64,0.35), inset 0 1px 0 rgba(255,255,255,0.18)',
      }}>
        {SECTIONS.map((s) => (
          <DockButton
            key={s.id}
            Icon={DOCK_ICONS[s.id]}
            label={s.titleFa}
            color={s.accentColor}
            active={activeSectionId === s.id}
            onClick={() => selectSection(s.id)}
          />
        ))}
      </div>
    </div>
  )
}
