import React, { useState, useEffect, useRef } from 'react'
import type { CSSProperties } from 'react'
import { createPortal } from 'react-dom'
import { NavLink, Link, useNavigate } from 'react-router-dom'
import { Search, Menu, X, ChevronDown, Leaf, Globe, Cpu, BarChart3, Video, CalendarDays, Users, Eye, Phone, type LucideIcon } from 'lucide-react'
import { motion, AnimatePresence } from 'framer-motion'
import { useLang } from '@/context/LangContext'
import { useAuth } from '@/context/AuthContext'

/* ─── tokens ─── */
const T = {
  paper:    'var(--paper)',
  paper2:   'var(--paper-2)',
  ink:      'var(--ink)',
  ink3:     'var(--ink-3)',
  ink4:     'var(--ink-4)',
  ink5:     'var(--ink-5)',
  ruleThin: 'var(--rule-thin)',
  red:      'var(--red)',
} as const

type Section = { fa: string; en: string; to: string; Icon: LucideIcon }

/* ─── dropdown sections under رادار آینده ─── */
const SECTIONS: Section[] = [
  { fa: 'پایداری و فولاد سبز',        en: 'Sustainability & Green Steel', to: '/radar/sustainability', Icon: Leaf      },
  { fa: 'ژئوپلیتیک و اقتصاد جهانی', en: 'Geopolitics & Global Economy', to: '/radar/geopolitics',    Icon: Globe     },
  { fa: 'فناوری و نوآوری',            en: 'Technology & Innovation',      to: '/radar/technology',     Icon: Cpu       },
  { fa: 'بازار و زنجیره فولاد',       en: 'Market & Steel Chain',         to: '/radar/market',         Icon: BarChart3 },
]

/* ─── dropdown sections under رسانه و رویداد ─── */
const MEDIA: Section[] = [
  { fa: 'ویدیوکست و پادکست',   en: 'Videocast & Podcast', to: '/podcast',         Icon: Video        },
  { fa: 'رویدادهای صنعت فولاد', en: 'Steel Industry Events', to: '/events',        Icon: CalendarDays },
  { fa: 'تقویم اندیشکده',      en: 'Institute Calendar',  to: '/events#calendar', Icon: CalendarDays },
]

/* ─── dropdown sections under درباره ما ─── */
const ABOUT: Section[] = [
  { fa: 'چشم‌انداز ما', en: 'Our Vision', to: '/about#vision', Icon: Eye   },
  { fa: 'تیم ما',      en: 'Our Team',   to: '/about#team',   Icon: Users },
  { fa: 'تماس با ما',  en: 'Contact Us', to: '/contact',       Icon: Phone },
]

/* ─── top-level nav items ─── */
type TopNav = { fa: string; en: string; to?: string; dropdown?: 'radar' | 'media' | 'about' }
const TOP_NAV: TopNav[] = [
  { fa: 'رادار آینده',     en: 'Radar',           dropdown: 'radar'   },
  { fa: 'آمار و داده',      en: 'Stats & Data',    to: '/pulse'        },
  { fa: 'در یک نگاه',      en: 'At a Glance',     to: '/at-a-glance'  },
  { fa: 'رسانه و رویداد',  en: 'Media & Events',  dropdown: 'media'   },
  { fa: 'شبکه خبرگان',     en: 'Expert Network',  to: '/experts'      },
  { fa: 'درباره ما',       en: 'About',           to: '/about'        },
]

/* ─── generic nav dropdown card ─── */
function NavDropdown({ lang, label, sections }: { lang: 'fa' | 'en'; label: string; sections: Section[] }) {
  const [open, setOpen] = useState(false)
  const ref = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const handler = (e: MouseEvent) => {
      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
    }
    document.addEventListener('mousedown', handler)
    return () => document.removeEventListener('mousedown', handler)
  }, [])

  return (
    <div ref={ref} style={{ position: 'relative' }}>
      <button
        onClick={() => setOpen(o => !o)}
        style={{
          display: 'flex', alignItems: 'center', gap: 4,
          fontSize: 16, fontWeight: 700,
          color: open ? T.red : T.ink3,
          background: 'none', border: 'none', padding: '6px 0',
          cursor: 'pointer', fontFamily: 'inherit', whiteSpace: 'nowrap',
          transition: 'color 120ms',
          borderBottom: open ? `2px solid ${T.red}` : '2px solid transparent',
        }}
      >
        {label}
        <ChevronDown size={12} style={{ transform: open ? 'rotate(180deg)' : 'none', transition: 'transform 200ms' }} />
      </button>

      <AnimatePresence>
        {open && (
          <motion.div
            initial={{ opacity: 0, y: -6, scale: 0.98 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: -6, scale: 0.98 }}
            transition={{ duration: 0.15 }}
            style={{
              position: 'absolute', top: 'calc(100% + 14px)',
              right: lang === 'fa' ? 0 : 'auto',
              left:  lang === 'fa' ? 'auto' : 0,
              background: '#fff', borderRadius: 12,
              boxShadow: '0 8px 48px rgba(7,29,73,0.14), 0 2px 8px rgba(7,29,73,0.06)',
              border: '1px solid rgba(7,29,73,0.08)',
              minWidth: 300, overflow: 'hidden', zIndex: 200,
              direction: lang === 'fa' ? 'rtl' : 'ltr',
            }}
          >
            {sections.map((item, i) => (
              <NavLink
                key={i}
                to={item.to}
                onClick={() => setOpen(false)}
                style={(): CSSProperties => ({
                  display: 'flex', alignItems: 'center', gap: 12,
                  padding: '15px 20px', textDecoration: 'none',
                  color: '#3d3d3d',
                  background: 'transparent',
                  borderBottom: i < sections.length - 1 ? '1px solid rgba(7,29,73,0.07)' : 'none',
                  transition: 'background 100ms', fontSize: 14, fontWeight: 600,
                })}
                onMouseEnter={e => { (e.currentTarget as HTMLElement).style.background = 'rgba(7,29,73,0.03)' }}
                onMouseLeave={e => { (e.currentTarget as HTMLElement).style.background = 'transparent' }}
              >
                <item.Icon size={20} color="#CD9E53" strokeWidth={1.5} style={{ flexShrink: 0 }} />
                <span>{lang === 'fa' ? item.fa : item.en}</span>
              </NavLink>
            ))}
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  )
}

/* ─── plain nav item with chevron ─── */
function PlainNavItem({ label, to }: { label: string; to: string }) {
  const [hovered, setHovered] = useState(false)
  const style: CSSProperties = {
    display: 'flex', alignItems: 'center', gap: 4,
    fontSize: 16, fontWeight: 700,
    color: hovered ? T.ink : T.ink3,
    textDecoration: 'none', padding: '6px 0', whiteSpace: 'nowrap',
    transition: 'color 120ms',
    borderBottom: '2px solid transparent',
  }
  const handlers = {
    onMouseEnter: () => setHovered(true),
    onMouseLeave: () => setHovered(false),
  }
  // internal app route → client-side nav; otherwise plain anchor (hash / external)
  const isInternal = to.startsWith('/')
  return isInternal ? (
    <NavLink to={to} {...handlers} style={style}>
      {label}
    </NavLink>
  ) : (
    <a href={to} {...handlers} style={style}>
      {label}
    </a>
  )
}

/* ─── drawer accordion group ─── */
function DrawerAccordion({ label, children }: { label: string; children: React.ReactNode }) {
  const [open, setOpen] = useState(false)
  return (
    <div>
      <button
        onClick={() => setOpen(o => !o)}
        style={{
          width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '13px 20px', fontSize: 13, fontWeight: 700, color: T.ink,
          background: 'transparent', border: 'none', borderBottom: `1px solid ${T.ruleThin}`,
          cursor: 'pointer', fontFamily: 'inherit', textAlign: 'right',
        }}
      >
        {label}
        <ChevronDown size={14} style={{ transform: open ? 'rotate(180deg)' : 'none', transition: 'transform 200ms', flexShrink: 0 }} />
      </button>
      <AnimatePresence initial={false}>
        {open && (
          <motion.div
            key="content"
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: 'auto', opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            transition={{ duration: 0.2 }}
            style={{ overflow: 'hidden', background: T.paper2 }}
          >
            {children}
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  )
}

/* ─── drawer item ─── */
function DrawerNavItem({ to, label, onClose, indent }: { to: string; label: string; onClose: () => void; indent?: boolean }) {
  const [hovered, setHovered] = useState(false)
  return (
    <NavLink
      to={to}
      onClick={onClose}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={({ isActive }: { isActive: boolean }): CSSProperties => ({
        display: 'block', padding: indent ? '10px 32px' : '13px 20px',
        fontSize: indent ? 13 : 14, fontWeight: 600,
        color: isActive || hovered ? T.paper : T.ink,
        background: isActive ? T.ink : hovered ? T.paper2 : 'transparent',
        textDecoration: 'none', borderBottom: `1px solid ${T.ruleThin}`,
        transition: 'background 120ms, color 120ms',
      })}
    >
      {label}
    </NavLink>
  )
}

/* ─── MAIN ─── */
export default function Header() {
  const [mobileOpen, setMobileOpen] = useState(false)
  const [isMobile, setIsMobile] = useState(false)
  const [searchOpen, setSearchOpen] = useState(false)
  const [searchQuery, setSearchQuery] = useState('')

  const searchInputRef = useRef<HTMLInputElement>(null)
  const navigate = useNavigate()
  const runSearch = () => {
    const q = searchQuery.trim()
    if (!q) return
    navigate(`/search?q=${encodeURIComponent(q)}`)
    setSearchOpen(false)
    setSearchQuery('')
  }
  const { lang, toggle: toggleLang } = useLang()
  const { member } = useAuth()

  useEffect(() => {
    const mq = window.matchMedia('(max-width: 1023px)')
    const handler = (e: MediaQueryListEvent | MediaQueryList) => setIsMobile(e.matches)
    handler(mq); mq.addEventListener('change', handler)
    return () => mq.removeEventListener('change', handler)
  }, [])

  useEffect(() => {
    document.body.style.overflow = mobileOpen ? 'hidden' : ''
    return () => { document.body.style.overflow = '' }
  }, [mobileOpen])

  useEffect(() => {
    if (searchOpen) searchInputRef.current?.focus()
  }, [searchOpen])

  return (
    <header
      style={{
        position: 'sticky', top: 0, zIndex: 50,
        background: 'rgba(255,255,255,0.72)',
        backdropFilter: 'blur(24px) saturate(180%)',
        WebkitBackdropFilter: 'blur(24px) saturate(180%)',
        borderBottom: '1px solid rgba(255,255,255,0.35)',
        boxShadow: '0 1px 32px rgba(7,29,73,0.10)',
        direction: lang === 'fa' ? 'rtl' : 'ltr',
      }}
    >
      <div>
        <div
          style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 68, gap: 20 }}
          className="max-w-7xl mx-auto px-12 max-md:px-5 max-md:h-[60px]"
        >
          {/* Brand */}
          <NavLink
            to="/"
            style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 12, textDecoration: 'none', flexShrink: 0, lineHeight: 1 }}
          >
            <img src="/Frame%202095585206%20(2).png" alt="" aria-hidden="true"
              style={{ height: 52, width: 'auto', display: 'block', flexShrink: 0, marginTop: -8 }}
              className="max-md:h-[40px]"
            />
            <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
              <span style={{ fontSize: 19, fontWeight: 900, color: T.ink, letterSpacing: '-0.5px', whiteSpace: 'nowrap' }}
                className="max-md:text-[16px]">
                اندیشکده فولاد آینده
              </span>
              <span style={{ fontSize: 8, letterSpacing: '2.5px', color: T.ink5, fontWeight: 600, textTransform: 'uppercase', whiteSpace: 'nowrap' }}
                className="max-md:hidden">
                The Steel Futures Institute
              </span>
            </div>
          </NavLink>

          {/* Desktop Nav */}
          {!isMobile && (
            <nav aria-label="ناوبری اصلی"
              style={{ display: 'flex', alignItems: 'center', gap: 20, flex: 1, justifyContent: 'center' }}
            >
              {TOP_NAV.map((item) =>
                item.dropdown
                  ? <NavDropdown key={item.fa} lang={lang} label={lang === 'fa' ? item.fa : item.en}
                      sections={item.dropdown === 'radar' ? SECTIONS : item.dropdown === 'media' ? MEDIA : ABOUT} />
                  : <PlainNavItem key={item.fa} label={lang === 'fa' ? item.fa : item.en} to={item.to!} />
              )}
            </nav>
          )}

          {/* Actions */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexShrink: 0 }}>
            <button
              aria-label="جستجو"
              onClick={() => setSearchOpen(s => !s)}
              style={{
                width: 34, height: 34, border: `1px solid ${T.ruleThin}`,
                background: searchOpen ? T.ink : 'transparent',
                color: searchOpen ? T.paper : T.ink,
                cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
                transition: 'background 120ms, color 120ms', borderRadius: 0,
              }}
            >
              <Search size={14} aria-hidden="true" />
            </button>

            {!isMobile && (
              <>
                {member ? (
                  <Link to="/profile" style={{
                    height: 34, padding: '0 14px', fontSize: 12, fontWeight: 700,
                    display: 'flex', alignItems: 'center', gap: 6,
                    background: '#CD9E53', color: '#032340', textDecoration: 'none',
                    border: 'none', cursor: 'pointer',
                  }}>
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
                    </svg>
                    {member.name.split(' ')[0]}
                  </Link>
                ) : (
                  <Link to="/login" style={{
                    height: 34, padding: '0 16px', fontSize: 12, fontWeight: 600,
                    display: 'flex', alignItems: 'center',
                    border: `1px solid ${T.ruleThin}`, color: T.ink,
                    textDecoration: 'none', background: 'transparent',
                  }}>
                    {lang === 'fa' ? 'ورود / ثبت‌نام' : 'Login / Register'}
                  </Link>
                )}
                <button
                  onClick={toggleLang}
                  aria-label={lang === 'fa' ? 'Switch to English' : 'تغییر به فارسی'}
                  style={{
                    height: 34, width: 40, padding: 0, fontSize: 12.5, fontWeight: 700, lineHeight: 1,
                    background: 'transparent', border: `1px solid ${T.ruleThin}`,
                    color: T.ink,
                    cursor: 'pointer', fontFamily: 'inherit',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    transition: 'border-color 120ms',
                  }}
                  onMouseEnter={e => { e.currentTarget.style.borderColor = T.ink }}
                  onMouseLeave={e => { e.currentTarget.style.borderColor = T.ruleThin }}
                >
                  {lang === 'fa' ? 'EN' : 'FA'}
                </button>
              </>
            )}

            {isMobile && (
              <button
                aria-label="باز کردن منو"
                onClick={() => setMobileOpen(true)}
                style={{
                  width: 34, height: 34, border: `1px solid ${T.ruleThin}`,
                  background: 'transparent', color: T.ink, cursor: 'pointer',
                  display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 0,
                }}
              >
                <Menu size={18} />
              </button>
            )}
          </div>
        </div>
      </div>

      {/* Search */}
      <AnimatePresence>
        {searchOpen && (
          <motion.div
            initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: 'auto' }} exit={{ opacity: 0, height: 0 }}
            transition={{ duration: 0.2 }}
            style={{ overflow: 'hidden', borderBottom: `1px solid ${T.ruleThin}`, background: T.paper2 }}
          >
            <div style={{ padding: '20px 0' }} className="max-w-7xl mx-auto px-12 max-md:px-5">
              <input
                ref={searchInputRef} type="search"
                placeholder="جستجو در گزارش‌ها، تحلیل‌ها، رویدادها..."
                aria-label="جستجو"
                value={searchQuery}
                onChange={e => setSearchQuery(e.target.value)}
                onKeyDown={e => {
                  if (e.key === 'Escape') setSearchOpen(false)
                  else if (e.key === 'Enter') runSearch()
                }}
                style={{
                  width: '100%', border: `1px solid ${T.ink}`, padding: '12px 16px',
                  fontSize: 14, background: T.paper, color: T.ink, outline: 'none',
                  borderRadius: 0, fontFamily: 'inherit', direction: 'rtl',
                }}
              />
            </div>
          </motion.div>
        )}
      </AnimatePresence>

      {/* Mobile Drawer — portaled to <body> so the header's backdrop-filter doesn't trap position:fixed */}
      {createPortal(
        <AnimatePresence>
        {mobileOpen && (
          <>
            <motion.div key="overlay"
              initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
              transition={{ duration: 0.2 }}
              onClick={() => setMobileOpen(false)}
              style={{ position: 'fixed', inset: 0, background: 'rgba(7,29,73,0.55)', zIndex: 100 }}
            />
            <motion.div key="drawer"
              initial={{ x: 300 }} animate={{ x: 0 }} exit={{ x: 300 }}
              transition={{ duration: 0.25, ease: [0.32, 0, 0.18, 1] }}
              style={{
                position: 'fixed', top: 0, right: 0, height: '100dvh', width: 300,
                background: T.paper, zIndex: 101, display: 'flex', flexDirection: 'column',
                borderLeft: `2px solid ${T.ink}`,
              }}
            >
              <div style={{
                padding: '16px 20px', borderBottom: `1px solid ${T.ruleThin}`,
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                background: T.ink, color: T.paper,
              }}>
                <span style={{ fontSize: 14, fontWeight: 800 }}>اندیشکده فولاد آینده</span>
                <button aria-label="بستن منو" onClick={() => setMobileOpen(false)}
                  style={{ background: 'transparent', border: 'none', cursor: 'pointer', color: T.paper, padding: 4, display: 'flex', alignItems: 'center' }}>
                  <X size={20} />
                </button>
              </div>

              <nav style={{ flex: 1, overflowY: 'auto' }}>
                <DrawerNavItem to="/" label={lang === 'fa' ? 'خانه' : 'Home'} onClose={() => setMobileOpen(false)} />

                <DrawerAccordion label={lang === 'fa' ? 'رادار آینده' : 'Radar'}>
                  {SECTIONS.map(item => (
                    <DrawerNavItem key={item.to} to={item.to} label={lang === 'fa' ? item.fa : item.en} onClose={() => setMobileOpen(false)} indent />
                  ))}
                </DrawerAccordion>

                <DrawerNavItem to="/pulse"       label={lang === 'fa' ? 'آمار و داده'  : 'Stats & Data'}    onClose={() => setMobileOpen(false)} />
                <DrawerNavItem to="/at-a-glance" label={lang === 'fa' ? 'در یک نگاه'  : 'At a Glance'}     onClose={() => setMobileOpen(false)} />
                <DrawerNavItem to="/experts"     label={lang === 'fa' ? 'شبکه خبرگان' : 'Expert Network'}   onClose={() => setMobileOpen(false)} />

                <DrawerAccordion label={lang === 'fa' ? 'رسانه و رویداد' : 'Media & Events'}>
                  {MEDIA.map(item => (
                    <DrawerNavItem key={item.to} to={item.to} label={lang === 'fa' ? item.fa : item.en} onClose={() => setMobileOpen(false)} indent />
                  ))}
                </DrawerAccordion>

                <DrawerNavItem to="/about" label={lang === 'fa' ? 'درباره ما' : 'About'} onClose={() => setMobileOpen(false)} />
              </nav>

              <div style={{ padding: '16px 20px', borderTop: `1px solid ${T.ruleThin}`, display: 'flex', flexDirection: 'column', gap: 10 }}>
                <Link to={member ? '/profile' : '/login'} onClick={() => setMobileOpen(false)} style={{
                  display: 'block', width: '100%', padding: '10px 16px', textAlign: 'center',
                  border: `1px solid ${T.ink}`, color: T.ink, fontSize: 12, fontWeight: 600,
                  textDecoration: 'none', boxSizing: 'border-box',
                }}>
                  {member
                    ? (lang === 'fa' ? `پروفایل` : 'Profile')
                    : (lang === 'fa' ? 'ورود / ثبت‌نام' : 'Login / Register')}
                </Link>
                <button onClick={toggleLang} style={{
                  background: 'transparent', border: `1px solid ${T.ruleThin}`,
                  padding: '8px', fontSize: 14, fontWeight: 700, cursor: 'pointer', fontFamily: 'inherit',
                  color: T.ink,
                }}>
                  {lang === 'fa' ? 'English' : 'فارسی'}
                </button>
              </div>
            </motion.div>
          </>
        )}
        </AnimatePresence>,
        document.body,
      )}
    </header>
  )
}

