'use client'

import { Language } from '@/lib/types'
import { t } from '@/lib/i18n'
import GradientText from '../ui/GradientText'
import FadeInView from '../ui/FadeInView'
import GlassCard from '../ui/GlassCard'
import KPICard from '../ui/KPICard'

interface RegulatoryLandscapeSlideProps {
  lang: Language
}

// Key EU regulations as columns — the ones investors care about
const KEY_REGULATIONS = [
  { id: 'GDPR', label: 'DSGVO', color: '#6366f1' },
  { id: 'AI_ACT', label: 'AI Act', color: '#a855f7' },
  { id: 'NIS2', label: 'NIS2', color: '#ef4444' },
  { id: 'CRA', label: 'CRA', color: '#f97316' },
  { id: 'MACHINERY_REG', label: 'Masch.-VO', color: '#22c55e' },
  { id: 'DATA_ACT', label: 'Data Act', color: '#06b6d4' },
  { id: 'BATTERIE_VO', label: 'Batt.-VO', color: '#f59e0b' },
]

// 10 real VDMA/VDA/BDI industry sectors with regulation applicability
// Based on rag-documents.json: 244 horizontal + 65 sector-specific = 320 total
const INDUSTRIES: { id: string; de: string; en: string; regs: string[]; totalDocs: number }[] = [
  {
    id: 'automotive',
    de: 'Automobilindustrie',
    en: 'Automotive',
    regs: ['GDPR', 'AI_ACT', 'NIS2', 'CRA', 'MACHINERY_REG', 'DATA_ACT', 'BATTERIE_VO'],
    totalDocs: 263,
  },
  {
    id: 'maschinenbau',
    de: 'Maschinen- & Anlagenbau',
    en: 'Machinery & Plant Eng.',
    regs: ['GDPR', 'AI_ACT', 'NIS2', 'CRA', 'MACHINERY_REG', 'DATA_ACT'],
    totalDocs: 266,
  },
  {
    id: 'elektrotechnik',
    de: 'Elektro- & Digitalindustrie',
    en: 'Electrical & Digital',
    regs: ['GDPR', 'AI_ACT', 'NIS2', 'CRA', 'MACHINERY_REG', 'DATA_ACT', 'BATTERIE_VO'],
    totalDocs: 281,
  },
  {
    id: 'chemie',
    de: 'Chemie- & Prozessindustrie',
    en: 'Chemicals & Process',
    regs: ['GDPR', 'AI_ACT', 'NIS2', 'CRA', 'DATA_ACT'],
    totalDocs: 250,
  },
  {
    id: 'metall',
    de: 'Metallindustrie',
    en: 'Metal Industry',
    regs: ['GDPR', 'AI_ACT', 'NIS2', 'CRA', 'MACHINERY_REG', 'DATA_ACT'],
    totalDocs: 246,
  },
  {
    id: 'energie',
    de: 'Energie & Versorgung',
    en: 'Energy & Utilities',
    regs: ['GDPR', 'AI_ACT', 'NIS2', 'CRA', 'DATA_ACT', 'BATTERIE_VO'],
    totalDocs: 256,
  },
  {
    id: 'transport',
    de: 'Transport & Logistik',
    en: 'Transport & Logistics',
    regs: ['GDPR', 'AI_ACT', 'NIS2', 'CRA', 'DATA_ACT'],
    totalDocs: 256,
  },
  {
    id: 'handel',
    de: 'Handel',
    en: 'Retail & Commerce',
    regs: ['GDPR', 'AI_ACT', 'NIS2', 'CRA', 'DATA_ACT'],
    totalDocs: 271,
  },
  {
    id: 'konsumgueter',
    de: 'Konsumgüter & Lebensmittel',
    en: 'Consumer Goods & Food',
    regs: ['GDPR', 'AI_ACT', 'NIS2', 'CRA', 'DATA_ACT', 'BATTERIE_VO'],
    totalDocs: 265,
  },
  {
    id: 'bau',
    de: 'Bauwirtschaft',
    en: 'Construction',
    regs: ['GDPR', 'AI_ACT', 'NIS2', 'CRA', 'MACHINERY_REG', 'DATA_ACT'],
    totalDocs: 245,
  },
]

export default function RegulatoryLandscapeSlide({ lang }: RegulatoryLandscapeSlideProps) {
  const i = t(lang)
  const rl = i.regulatoryLandscape
  const de = lang === 'de'

  return (
    <div className="max-w-6xl mx-auto">
      <FadeInView className="text-center mb-5">
        <h2 className="text-3xl md:text-5xl font-bold mb-2">
          <GradientText>{rl.title}</GradientText>
        </h2>
        <p className="text-base text-white/50 max-w-2xl mx-auto">{rl.subtitle}</p>
      </FadeInView>

      {/* KPI Row */}
      <div className="grid grid-cols-4 gap-3 mb-5">
        <KPICard label={de ? 'Gesetze & Dokumente im RAG' : 'Laws & Documents in RAG'} value={320} color="#6366f1" delay={0.1} />
        <KPICard label={de ? 'Gelten für alle Branchen' : 'Apply to All Industries'} value={244} color="#a78bfa" delay={0.2} />
        <KPICard label={de ? 'Branchenspezifische Gesetze' : 'Industry-specific Laws'} value={65} color="#f97316" delay={0.3} />
        <KPICard label={de ? 'Abgedeckte Branchen' : 'Covered Industries'} value={10} color="#34d399" delay={0.4} />
      </div>

      {/* Matrix */}
      <FadeInView delay={0.5}>
        <GlassCard hover={false} className="p-4 overflow-x-auto">
          <div className="space-y-1">
            {/* Header rows — staggered for space */}
            <div className="grid items-end gap-1" style={{ gridTemplateColumns: '180px repeat(7, 1fr) 70px' }}>
              <div className="text-[9px] text-white/70 uppercase tracking-wider pl-1 font-semibold">
                {de ? 'Branche' : 'Industry'}
              </div>
              {KEY_REGULATIONS.map((reg, idx) => (
                <div key={reg.id} className="text-center">
                  {idx % 2 === 0 ? (
                    <span className="text-[8px] font-semibold uppercase tracking-wider" style={{ color: reg.color }}>
                      {reg.label}
                    </span>
                  ) : null}
                </div>
              ))}
              <div className="text-[8px] text-indigo-400 text-center font-semibold uppercase tracking-wider">
                {de ? 'Gesetze gesamt' : 'Total Laws'}
              </div>
            </div>
            <div className="grid items-start gap-1" style={{ gridTemplateColumns: '180px repeat(7, 1fr) 70px' }}>
              <div />
              {KEY_REGULATIONS.map((reg, idx) => (
                <div key={reg.id} className="text-center">
                  {idx % 2 === 1 ? (
                    <span className="text-[8px] font-semibold uppercase tracking-wider" style={{ color: reg.color }}>
                      {reg.label}
                    </span>
                  ) : null}
                </div>
              ))}
              <div />
            </div>

            {/* Industry rows */}
            {INDUSTRIES.map((industry) => (
              <div
                key={industry.id}
                className="grid items-center gap-1 py-1.5 rounded-lg hover:bg-white/[0.04] transition-colors"
                style={{ gridTemplateColumns: '180px repeat(7, 1fr) 70px' }}
              >
                <div className="flex items-center gap-2 pl-1">
                  <span className="text-[11px] text-white/70 font-medium truncate">
                    {de ? industry.de : industry.en}
                  </span>
                </div>
                {KEY_REGULATIONS.map((reg) => {
                  const applies = industry.regs.includes(reg.id)
                  return (
                    <div key={reg.id} className="flex justify-center">
                      {applies ? (
                        <div
                          className="w-4 h-4 rounded-full flex items-center justify-center"
                          style={{ backgroundColor: `${reg.color}20` }}
                        >
                          <div className="w-2 h-2 rounded-full" style={{ backgroundColor: reg.color }} />
                        </div>
                      ) : (
                        <div className="w-4 h-4 rounded-full bg-white/[0.03]" />
                      )}
                    </div>
                  )
                })}
                <div className="text-center">
                  <span className="text-xs font-bold text-white/80">{industry.totalDocs}</span>
                </div>
              </div>
            ))}

            {/* Footer note */}
            <div className="pt-2 mt-1 border-t border-white/5">
              <p className="text-xs text-white/50 text-center">
                {de
                  ? '244 Dokumente gelten horizontal für alle Branchen (DSGVO, BDSG, AI Act, NIS2, CRA, BetrVG, HGB, ...). Sektorspezifische Regulierungen kommen hinzu.'
                  : '244 documents apply horizontally to all industries (GDPR, BDSG, AI Act, NIS2, CRA, ...). Sector-specific regulations are added on top.'}
              </p>
            </div>
          </div>
        </GlassCard>
      </FadeInView>
    </div>
  )
}