'use client'

import { useState } from 'react'
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 { Shield, Scale, Wifi, Calendar, AlertTriangle, CheckCircle2, Clock } from 'lucide-react'

interface RegulatorySlideProps {
  lang: Language
}

type RegTab = 'dsgvo' | 'aiact' | 'nis2'

export default function RegulatorySlide({ lang }: RegulatorySlideProps) {
  const i = t(lang)
  const de = lang === 'de'
  const [activeTab, setActiveTab] = useState<RegTab>('dsgvo')

  const tabs: { id: RegTab; label: string; icon: typeof Shield }[] = [
    { id: 'dsgvo', label: de ? 'DSGVO / GDPR' : 'GDPR', icon: Shield },
    { id: 'aiact', label: 'AI Act', icon: Scale },
    { id: 'nis2', label: 'NIS2', icon: Wifi },
  ]

  const regulations: Record<RegTab, {
    fullName: string
    status: string
    statusColor: string
    statusIcon: typeof CheckCircle2
    deadline: string
    affectedCompanies: string
    keyRequirements: string[]
    fines: string
    howWeHelp: string[]
  }> = {
    dsgvo: {
      fullName: de ? 'Datenschutz-Grundverordnung (EU 2016/679)' : 'General Data Protection Regulation (EU 2016/679)',
      status: de ? 'In Kraft seit Mai 2018' : 'In effect since May 2018',
      statusColor: 'text-emerald-400',
      statusIcon: CheckCircle2,
      deadline: de ? 'Bereits anzuwenden' : 'Already applicable',
      affectedCompanies: de ? 'Alle Unternehmen die personenbezogene Daten verarbeiten' : 'All companies processing personal data',
      keyRequirements: de
        ? [
            'Verzeichnis von Verarbeitungstaetigkeiten (VVT)',
            'Datenschutz-Folgenabschaetzung (DSFA)',
            'Technische und organisatorische Massnahmen (TOM)',
            'Betroffenenrechte (Auskunft, Loeschung, Portabilitaet)',
            'Auftragsverarbeitungsvertraege (AVV)',
            'Datenschutzbeauftragter (ab 20 MA)',
            'Meldepflicht bei Datenpannen (72h)',
          ]
        : [
            'Records of Processing Activities (RoPA)',
            'Data Protection Impact Assessment (DPIA)',
            'Technical & Organizational Measures (TOMs)',
            'Data Subject Rights (Access, Erasure, Portability)',
            'Data Processing Agreements (DPA)',
            'Data Protection Officer (from 20 employees)',
            'Breach Notification (72h)',
          ],
      fines: de ? 'Bis zu 20 Mio. EUR oder 4% des weltweiten Jahresumsatzes' : 'Up to EUR 20M or 4% of global annual revenue',
      howWeHelp: de
        ? [
            'Automatische VVT-Erstellung aus Unternehmensdaten',
            'KI-gestuetzte DSFA-Durchfuehrung',
            'TOM-Generator mit Branchenvorlagen',
            'Self-Service-Portal fuer Betroffenenanfragen',
            'Automatische Dokumentation und Audit-Trail',
          ]
        : [
            'Automatic RoPA generation from company data',
            'AI-powered DPIA execution',
            'TOM generator with industry templates',
            'Self-service portal for data subject requests',
            'Automatic documentation and audit trail',
          ],
    },
    aiact: {
      fullName: de ? 'KI-Verordnung (EU 2024/1689)' : 'AI Act (EU 2024/1689)',
      status: de ? 'Schrittweise ab Aug 2025' : 'Phased from Aug 2025',
      statusColor: 'text-amber-400',
      statusIcon: Clock,
      deadline: de ? 'Aug 2025: Verbote · Aug 2026: Hochrisiko · Aug 2027: Vollstaendig' : 'Aug 2025: Prohibitions · Aug 2026: High-Risk · Aug 2027: Full',
      affectedCompanies: de ? 'Anbieter und Betreiber von KI-Systemen in der EU' : 'Providers and deployers of AI systems in the EU',
      keyRequirements: de
        ? [
            'Risikoklassifizierung aller KI-Systeme (Art. 6)',
            'Konformitaetsbewertung fuer Hochrisiko-KI (Art. 43)',
            'Technische Dokumentation und Transparenz (Art. 11-13)',
            'Menschliche Aufsicht (Art. 14)',
            'Registrierung in EU-Datenbank (Art. 49)',
            'GPAI-Modell-Pflichten (Art. 51-56)',
            'Grundrechte-Folgenabschaetzung (Art. 27)',
          ]
        : [
            'Risk classification of all AI systems (Art. 6)',
            'Conformity assessment for high-risk AI (Art. 43)',
            'Technical documentation and transparency (Art. 11-13)',
            'Human oversight (Art. 14)',
            'Registration in EU database (Art. 49)',
            'GPAI model obligations (Art. 51-56)',
            'Fundamental rights impact assessment (Art. 27)',
          ],
      fines: de ? 'Bis zu 35 Mio. EUR oder 7% des weltweiten Jahresumsatzes' : 'Up to EUR 35M or 7% of global annual revenue',
      howWeHelp: de
        ? [
            'Automatische Risikoklassifizierung von KI-Systemen',
            'Konformitaets-Checklisten mit KI-Unterstuetzung',
            'Technische Dokumentation per Template-Engine',
            'Audit-Vorbereitung fuer Hochrisiko-Systeme',
            'Monitoring von Rechtsaenderungen',
          ]
        : [
            'Automatic AI system risk classification',
            'Conformity checklists with AI assistance',
            'Technical documentation via template engine',
            'Audit preparation for high-risk systems',
            'Regulatory change monitoring',
          ],
    },
    nis2: {
      fullName: de ? 'NIS-2-Richtlinie (EU 2022/2555)' : 'NIS2 Directive (EU 2022/2555)',
      status: de ? 'Umsetzung in nationales Recht laeuft' : 'National transposition in progress',
      statusColor: 'text-amber-400',
      statusIcon: Clock,
      deadline: de ? 'NIS2UmsuCG: voraussichtlich 2025/2026' : 'NIS2 Implementation Act: expected 2025/2026',
      affectedCompanies: de ? '30.000+ Unternehmen in DE (Energie, Transport, Gesundheit, Digital, KRITIS)' : '30,000+ companies in DE (Energy, Transport, Healthcare, Digital, Critical Infrastructure)',
      keyRequirements: de
        ? [
            'Risikomanagement-Massnahmen (Art. 21)',
            'Incident-Meldepflichten: 24h Fruehwarnung, 72h Bericht (Art. 23)',
            'Business Continuity und Krisenmanagement',
            'Supply-Chain-Security (Lieferkettenrisiken)',
            'Geschaeftsleiterhaftung (persoenliche Haftung)',
            'Registrierung beim BSI',
            'Regelmaessige Audits und Nachweise',
          ]
        : [
            'Risk management measures (Art. 21)',
            'Incident reporting: 24h early warning, 72h report (Art. 23)',
            'Business continuity and crisis management',
            'Supply chain security',
            'Management liability (personal liability)',
            'Registration with national authority (BSI)',
            'Regular audits and evidence',
          ],
      fines: de ? 'Bis zu 10 Mio. EUR oder 2% des weltweiten Jahresumsatzes' : 'Up to EUR 10M or 2% of global annual revenue',
      howWeHelp: de
        ? [
            'Cybersecurity-Policy-Generator nach BSI-Grundschutz',
            'Incident-Response-Plaene mit KI-Unterstuetzung',
            'Supply-Chain-Risikoanalyse',
            'Automatische Audit-Dokumentation',
            'NIS2-Readiness-Assessment',
          ]
        : [
            'Cybersecurity policy generator based on BSI standards',
            'AI-assisted incident response plans',
            'Supply chain risk analysis',
            'Automatic audit documentation',
            'NIS2 readiness assessment',
          ],
    },
  }

  const reg = regulations[activeTab]

  return (
    <div>
      <FadeInView className="text-center mb-8">
        <p className="text-xs font-mono text-indigo-400/60 uppercase tracking-widest mb-2">
          {de ? 'Anhang' : 'Appendix'}
        </p>
        <h2 className="text-4xl md:text-5xl font-bold mb-3">
          <GradientText>{i.annex.regulatory.title}</GradientText>
        </h2>
        <p className="text-lg text-white/50 max-w-2xl mx-auto">{i.annex.regulatory.subtitle}</p>
      </FadeInView>

      {/* Tab Navigation */}
      <FadeInView delay={0.15}>
        <div className="flex items-center justify-center gap-2 mb-6">
          {tabs.map((tab) => {
            const Icon = tab.icon
            return (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                className={`flex items-center gap-2 px-4 py-2 rounded-xl text-sm transition-all
                  ${activeTab === tab.id
                    ? 'bg-indigo-500/20 text-indigo-300 border border-indigo-500/30'
                    : 'bg-white/[0.04] text-white/40 border border-transparent hover:text-white/60 hover:bg-white/[0.06]'
                  }`}
              >
                <Icon className="w-4 h-4" />
                {tab.label}
              </button>
            )
          })}
        </div>
      </FadeInView>

      {/* Content */}
      <FadeInView delay={0.2} key={activeTab}>
        <div className="grid md:grid-cols-12 gap-4">
          {/* Left: Overview */}
          <div className="md:col-span-5 space-y-4">
            <GlassCard hover={false} className="p-4">
              <h3 className="text-sm font-bold text-white mb-1">{reg.fullName}</h3>
              <div className="space-y-2 mt-3 text-xs">
                <div className="flex items-center gap-2">
                  <reg.statusIcon className={`w-4 h-4 ${reg.statusColor}`} />
                  <span className="text-white/60">{reg.status}</span>
                </div>
                <div className="flex items-start gap-2">
                  <Calendar className="w-4 h-4 text-white/30 mt-0.5" />
                  <span className="text-white/60">{reg.deadline}</span>
                </div>
                <div className="flex items-start gap-2">
                  <AlertTriangle className="w-4 h-4 text-red-400 mt-0.5" />
                  <span className="text-red-400/80">{reg.fines}</span>
                </div>
              </div>
            </GlassCard>

            <GlassCard hover={false} className="p-4">
              <p className="text-xs font-semibold text-emerald-400 uppercase tracking-wider mb-2">
                {de ? 'Wie ComplAI hilft' : 'How ComplAI Helps'}
              </p>
              <ul className="space-y-1.5">
                {reg.howWeHelp.map((item, idx) => (
                  <li key={idx} className="flex items-start gap-2 text-xs text-white/60">
                    <CheckCircle2 className="w-3 h-3 text-emerald-400 mt-0.5 shrink-0" />
                    {item}
                  </li>
                ))}
              </ul>
            </GlassCard>
          </div>

          {/* Right: Requirements */}
          <div className="md:col-span-7">
            <GlassCard hover={false} className="p-4 h-full">
              <p className="text-xs font-semibold text-white/40 uppercase tracking-wider mb-3">
                {de ? 'Kernanforderungen' : 'Key Requirements'}
              </p>
              <div className="space-y-2">
                {reg.keyRequirements.map((req, idx) => (
                  <div
                    key={idx}
                    className="flex items-start gap-3 p-2 rounded-lg bg-white/[0.03] border border-white/5"
                  >
                    <span className="text-xs font-mono text-indigo-400/60 mt-0.5 shrink-0 w-4 text-right">{idx + 1}</span>
                    <span className="text-xs text-white/70">{req}</span>
                  </div>
                ))}
              </div>
              <p className="text-[10px] text-white/20 mt-3">
                {de ? 'Betroffene Unternehmen' : 'Affected companies'}: {reg.affectedCompanies}
              </p>
            </GlassCard>
          </div>
        </div>
      </FadeInView>
    </div>
  )
}