import { Link } from 'react-router-dom'
import { motion } from 'framer-motion'
import WorldMap from '@/components/ui/world-map'
import { events } from '@/data/events'
import { useLang } from '@/context/LangContext'

const ROUTES = [
  { start: { lat: 35.69, lng: 51.39 }, end: { lat: 33.31, lng: 44.36 } },
  { start: { lat: 35.69, lng: 51.39 }, end: { lat: 41.30, lng: 69.24 } },
  { start: { lat: 31.23, lng: 121.47 }, end: { lat: 51.92, lng: 4.47 } },
  { start: { lat: 31.23, lng: 121.47 }, end: { lat: 6.45, lng: 3.39 } },
  { start: { lat: 31.23, lng: 121.47 }, end: { lat: 1.35, lng: 103.82 } },
  { start: { lat: 55.75, lng: 37.62 }, end: { lat: 39.91, lng: 116.39 } },
  { start: { lat: 55.75, lng: 37.62 }, end: { lat: 35.69, lng: 51.39 } },
  { start: { lat: 19.07, lng: 72.88 }, end: { lat: 25.20, lng: 55.27 } },
  { start: { lat: 19.07, lng: 72.88 }, end: { lat: -4.05, lng: 39.67 } },
  { start: { lat: -23.55, lng: -46.63 }, end: { lat: 31.23, lng: 121.47 } },
  { start: { lat: 37.56, lng: 126.97 }, end: { lat: 1.35, lng: 103.82 } },
  { start: { lat: 41.01, lng: 28.97 }, end: { lat: 52.52, lng: 13.40 } },
  { start: { lat: -33.87, lng: 151.21 }, end: { lat: 31.23, lng: 121.47 } },
]

const TYPE_COLOR: Record<string, string> = {
  conference: 'var(--ink)', exhibition: '#6b4a00',
  seminar: '#1a4a2a', international: 'var(--red)',
}
const TYPE_LABEL = {
  fa: { conference: 'کنگره', exhibition: 'نمایشگاه', seminar: 'سمینار', international: 'جهانی' },
  en: { conference: 'Conference', exhibition: 'Exhibition', seminar: 'Seminar', international: 'International' },
}

const T = {
  fa: {
    mapOverline: 'اسکنر جهانی',
    mapHeading: 'تمام رویدادهای فولادی دنیا را رصد می‌کنیم',
    mapSub: 'از بورس دالیان چین تا گمرک بصره عراق — هر سیگنالی که بر رقابت‌پذیری ایران اثر می‌گذارد.',
    eventsOverline: 'تقویم رویداد', eventsHeading: 'رویدادهای پیش‌رو',
    eventsAll: 'تقویم کامل ←', register: 'ثبت‌نام ←', soon: 'به‌زودی',
  },
  en: {
    mapOverline: 'GLOBAL SCANNER',
    mapHeading: 'Every Global Steel Event, Monitored',
    mapSub: 'From the Dalian Commodity Exchange to the Basra customs gate — every signal affecting Iran\'s competitiveness.',
    eventsOverline: 'EVENT CALENDAR', eventsHeading: 'Upcoming Events',
    eventsAll: 'Full Calendar →', register: 'Register →', soon: 'Coming Soon',
  },
}

export default function MapEventsSection() {
  const { lang } = useLang()
  const t = T[lang]
  const typeLabel = TYPE_LABEL[lang]
  const displayed = events.slice(0, 5)

  return (
    <section dir={lang === 'fa' ? 'rtl' : 'ltr'} style={{ background: 'var(--paper)', borderBottom: '1px solid var(--rule-thin)', overflow: 'hidden' }}>
      <div className="max-w-7xl mx-auto px-12 max-md:px-5">
      <div style={{ display: 'flex', alignItems: 'stretch', minHeight: 520 }} className="max-md:flex-col">

        {/* ── 70% · Map ── */}
        <div style={{
          flex: '7 7 0', minWidth: 0, overflow: 'hidden',
          borderLeft: lang === 'fa' ? '1px solid var(--rule-thin)' : 'none',
          borderRight: lang === 'en' ? '1px solid var(--rule-thin)' : 'none',
        }}>
          <div className="px-12 max-md:px-5" style={{ paddingTop: 48, paddingBottom: 8 }}>
            <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '3px', textTransform: 'uppercase', color: 'var(--ink-4)', marginBottom: 8 }}>{t.mapOverline}</div>
            <h2 style={{ fontSize: 'clamp(18px,2vw,28px)', fontWeight: 900, color: 'var(--ink)', letterSpacing: '-0.5px', lineHeight: 1.2, marginBottom: 10 }}>{t.mapHeading}</h2>
            <p style={{ fontSize: 13, color: 'var(--ink-4)', lineHeight: 1.7, maxWidth: 460 }}>{t.mapSub}</p>
          </div>
          <div style={{ padding: '8px 16px 32px' }}>
            <WorldMap dots={ROUTES} lineColor="#9b1c1c" dotColor="#c8c2bc" />
          </div>
        </div>

        {/* ── 30% · Events ── */}
        <div style={{ flex: '3 3 0', minWidth: 0, background: 'var(--paper-2)', display: 'flex', flexDirection: 'column' }}>
          <div style={{ padding: '48px 20px 16px', borderBottom: '1px solid var(--rule-thin)' }}>
            <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '3px', textTransform: 'uppercase', color: 'var(--ink-4)', marginBottom: 6 }}>{t.eventsOverline}</div>
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 8 }}>
              <h2 style={{ fontSize: 'clamp(15px,1.4vw,20px)', fontWeight: 900, color: 'var(--ink)', letterSpacing: '-0.3px' }}>{t.eventsHeading}</h2>
              <Link to="/events" style={{ fontSize: 11, fontWeight: 700, color: 'var(--red)', textDecoration: 'none', whiteSpace: 'nowrap', flexShrink: 0 }}>{t.eventsAll}</Link>
            </div>
          </div>

          <div style={{ flex: 1 }}>
            {displayed.map((ev, i) => (
              <motion.div
                key={ev.id}
                initial={{ opacity: 0, x: 8 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.3, delay: i * 0.06 }}
                style={{
                  padding: '16px 20px',
                  borderBottom: '1px solid var(--rule-thin)',
                  display: 'flex', gap: 14, alignItems: 'flex-start',
                }}
              >
                {/* Date */}
                <div style={{ textAlign: 'center', flexShrink: 0, minWidth: 40 }}>
                  <div style={{ fontSize: 26, fontWeight: 900, lineHeight: 1, color: 'var(--ink)' }}>
                    {ev.date.toLocaleString('fa-IR')}
                  </div>
                  <div style={{ fontSize: 9, color: 'var(--ink-4)', marginTop: 3 }}>{ev.month}</div>
                </div>

                {/* Content */}
                <div style={{ flex: 1, minWidth: 0 }}>
                  <span style={{
                    display: 'inline-block', marginBottom: 5,
                    border: `1px solid ${TYPE_COLOR[ev.type]}`,
                    color: TYPE_COLOR[ev.type],
                    fontSize: 8, fontWeight: 700, textTransform: 'uppercase',
                    padding: '2px 5px', letterSpacing: '1px',
                  }}>
                    {typeLabel[ev.type]}
                  </span>
                  <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--ink)', lineHeight: 1.45, marginBottom: 3 }}>{ev.title}</div>
                  <div style={{ fontSize: 10, color: 'var(--ink-5)', marginBottom: 4 }}>{ev.city}</div>
                  {ev.registrationOpen
                    ? <Link to="#" style={{ fontSize: 10, fontWeight: 700, color: 'var(--red)', textDecoration: 'none' }}>{t.register}</Link>
                    : <span style={{ fontSize: 10, color: 'var(--ink-5)', fontWeight: 600 }}>{t.soon}</span>
                  }
                </div>
              </motion.div>
            ))}
          </div>
        </div>

      </div>
      </div>
    </section>
  )
}
