import { useState } from 'react'
import { ChevronDown, ChevronRight } from 'lucide-react'
import { Link } from 'react-router-dom'
import { events } from '@/data/events'

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

const faNum = (n: number | string) => String(n).replace(/\d/g, (d) => '۰۱۲۳۴۵۶۷۸۹'[+d])

export default function StrategicEvents() {
  const [open, setOpen] = useState<number | null>(0)

  // live events from the panel API (bootstrapEvents fills this array; soonest first)
  const list = events.slice(0, 3).map((e) => ({
    title: `${e.title} | ${e.location}`,
    desc: e.description,
    when: `${faNum(e.date)} ${e.month} ${faNum(e.year)}`,
  }))

  return (
    <div style={{ direction: 'rtl' }}>
      {/* heading */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, marginBottom: 28 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ width: 4, height: 30, background: GOLD, borderRadius: 2 }} />
          <h2 style={{ fontSize: 'clamp(20px,2.2vw,28px)', fontWeight: 900, color: NAVY, letterSpacing: '-0.5px', margin: 0 }}>
            دیده‌بان رویداد‌ها
          </h2>
        </div>
        <Link to="/events" style={{
          display: 'inline-flex', alignItems: 'center', gap: 6, direction: 'ltr',
          fontSize: 13, fontWeight: 700, color: GOLD, textDecoration: 'none', flexShrink: 0,
        }}>
          <div style={{ width: 24, height: 24, borderRadius: '50%', border: `1px solid ${GOLD}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <ChevronRight size={14} strokeWidth={2.5} />
          </div>
          <span>مشاهده همه</span>
        </Link>
      </div>

      {/* accordion list */}
      <div>
        {list.map((e, i) => {
          const isOpen = open === i
          return (
            <div key={i} style={{ borderBottom: '1px solid var(--rule-thin)' }}>
              <button
                onClick={() => setOpen(isOpen ? null : i)}
                style={{
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, width: '100%',
                  background: 'none', border: 'none', cursor: 'pointer', fontFamily: 'inherit', textAlign: 'right',
                  padding: '18px 0', color: GOLD,
                }}
              >
                <span className="max-md:!whitespace-normal" style={{ fontSize: 'clamp(14px,1.3vw,17px)', fontWeight: 800, lineHeight: 1.5, whiteSpace: 'nowrap' }}>{e.title}</span>
                <ChevronDown
                  size={20} strokeWidth={2.4} color={GOLD}
                  style={{ flexShrink: 0, transform: isOpen ? 'rotate(180deg)' : 'none', transition: 'transform 250ms' }}
                />
              </button>

              {/* expandable body */}
              <div style={{
                maxHeight: isOpen ? 260 : 0, overflow: 'hidden',
                transition: 'max-height 320ms cubic-bezier(0.22,1,0.36,1), opacity 250ms',
                opacity: isOpen ? 1 : 0,
              }}>
                <p style={{ fontSize: 13.5, lineHeight: 2.05, color: 'rgba(3,35,64,0.66)', margin: '0 0 20px', textAlign: 'justify' }}>
                  {e.desc} <span style={{ color: 'rgba(3,35,64,0.5)' }}>(زمان: {e.when})</span>
                </p>
              </div>
            </div>
          )
        })}
      </div>
    </div>
  )
}
