import { useEffect } from 'react'
import { AnimatePresence, motion } from 'framer-motion'
import { X } from 'lucide-react'

export interface CardDetail {
  tag: string
  title: string
  date?: string
  levelLabel?: string
  levelColor?: string
  topBarColor?: string
  num?: string
  lead: string
  body: string[]
  bullets: string[]
  iranImpact: string
}

interface Props {
  item: CardDetail | null
  onClose: () => void
  lang: 'fa' | 'en'
}

const L = {
  fa: { keyPoints: 'نکات کلیدی', iranImpact: 'تأثیر بر صنعت فولاد ایران', close: 'بستن' },
  en: { keyPoints: 'Key Points', iranImpact: "Impact on Iran's Steel Industry", close: 'Close' },
}

export default function DetailSheet({ item, onClose, lang }: Props) {
  useEffect(() => {
    if (!item) return
    const handler = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose() }
    document.addEventListener('keydown', handler)
    document.body.style.overflow = 'hidden'
    return () => {
      document.removeEventListener('keydown', handler)
      document.body.style.overflow = ''
    }
  }, [item, onClose])

  const lbl = L[lang]
  const dir = lang === 'fa' ? 'rtl' : 'ltr'

  return (
    <AnimatePresence>
      {item && (
        <motion.div
          key="overlay"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.18 }}
          onClick={onClose}
          style={{
            position: 'fixed',
            inset: 0,
            zIndex: 200,
            background: 'rgba(10,8,5,0.58)',
            backdropFilter: 'blur(3px)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            padding: '16px',
          }}
        >
          <motion.aside
            key="panel"
            dir={dir}
            initial={{ opacity: 0, scale: 0.95, y: 20 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            exit={{ opacity: 0, scale: 0.95, y: 12 }}
            transition={{ type: 'spring', damping: 30, stiffness: 320 }}
            onClick={e => e.stopPropagation()}
            style={{
              position: 'relative',
              width: 'min(700px, 100%)',
              maxHeight: '90vh',
              background: 'var(--paper)',
              overflowY: 'auto',
              display: 'flex',
              flexDirection: 'column',
              boxShadow: '0 32px 80px rgba(0,0,0,0.30)',
            }}
          >
            {/* colored top bar */}
            <div style={{ height: 4, background: item.topBarColor || 'var(--ink)', flexShrink: 0 }} />

            {/* header */}
            <div style={{ padding: '28px 32px 24px', borderBottom: '1px solid var(--rule-thin)', flexShrink: 0 }}>
              <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16 }}>
                <div style={{ flex: 1 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12, flexWrap: 'wrap' }}>
                    <span style={{ fontSize: 9, fontWeight: 700, letterSpacing: '1.5px', background: 'var(--ink)', color: 'var(--paper)', padding: '3px 10px' }}>{item.tag}</span>
                    {item.levelLabel && (
                      <span style={{ fontSize: 9, fontWeight: 700, color: item.levelColor, letterSpacing: '1px' }}>{item.levelLabel}</span>
                    )}
                    {item.date && (
                      <span style={{ fontSize: 10, color: 'var(--ink-5)', fontWeight: 600 }}>{item.date}</span>
                    )}
                    {item.num && (
                      <span style={{ fontSize: 10, color: 'var(--ink-5)', fontWeight: 700, letterSpacing: '1px' }}>#{item.num}</span>
                    )}
                  </div>
                  <h2 style={{ fontSize: 'clamp(16px,2.4vw,21px)', fontWeight: 900, color: 'var(--ink)', lineHeight: 1.4, letterSpacing: '-0.4px' }}>{item.title}</h2>
                </div>
                <button
                  onClick={onClose}
                  aria-label={lbl.close}
                  style={{ flexShrink: 0, width: 36, height: 36, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--paper-2)', border: 'none', cursor: 'pointer', color: 'var(--ink-3)' }}
                >
                  <X size={18} />
                </button>
              </div>
            </div>

            {/* body */}
            <div style={{ padding: '32px', overflowY: 'auto', flex: 1 }}>

              {/* lead */}
              <p style={{ fontSize: 15, fontWeight: 700, color: 'var(--ink)', lineHeight: 1.7, marginBottom: 24, borderRight: lang === 'fa' ? '3px solid var(--red)' : 'none', borderLeft: lang === 'en' ? '3px solid var(--red)' : 'none', paddingRight: lang === 'fa' ? 16 : 0, paddingLeft: lang === 'en' ? 16 : 0 }}>
                {item.lead}
              </p>

              {/* body paragraphs */}
              {item.body.map((para, i) => (
                <p key={i} style={{ fontSize: 14, color: 'var(--ink-3)', lineHeight: 1.85, marginBottom: 16 }}>{para}</p>
              ))}

              {/* key points */}
              <div style={{ margin: '28px 0', padding: '20px 24px', background: 'var(--paper-2)' }}>
                <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '2px', color: 'var(--ink-4)', marginBottom: 16, textTransform: 'uppercase' }}>{lbl.keyPoints}</div>
                <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {item.bullets.map((b, i) => (
                    <li key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 13, color: 'var(--ink)', lineHeight: 1.6 }}>
                      <span style={{ flexShrink: 0, width: 5, height: 5, borderRadius: '50%', background: 'var(--red)', marginTop: 7 }} />
                      {b}
                    </li>
                  ))}
                </ul>
              </div>

              {/* Iran impact */}
              <div style={{ borderTop: '1px solid var(--rule-thin)', paddingTop: 24 }}>
                <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '2px', color: 'var(--red)', marginBottom: 12, textTransform: 'uppercase' }}>{lbl.iranImpact}</div>
                <p style={{ fontSize: 14, color: 'var(--ink)', lineHeight: 1.85 }}>{item.iranImpact}</p>
              </div>
            </div>
          </motion.aside>
        </motion.div>
      )}
    </AnimatePresence>
  )
}
