'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'
import {
  Shield, Lock, Brain, Globe, Package, Landmark, Heart, ShoppingCart,
  Activity, Cpu, Bot, Radio, Monitor, Building2, Cog
} from 'lucide-react'

interface RegulatoryLandscapeSlideProps {
  lang: Language
}

// Regulation categories with their color
const CATEGORIES = [
  { id: 'privacy', color: '#6366f1', icon: Shield },
  { id: 'cyber', color: '#ef4444', icon: Lock },
  { id: 'ai', color: '#a855f7', icon: Brain },
  { id: 'markets', color: '#22c55e', icon: Globe },
  { id: 'product', color: '#f97316', icon: Package },
  { id: 'finance', color: '#10b981', icon: Landmark },
  { id: 'health', color: '#ec4899', icon: Heart },
  { id: 'consumer', color: '#f59e0b', icon: ShoppingCart },
]

// Industry → which categories apply (synced with INDUSTRY_REGULATION_MAP in breakpilot-lehrer)
const INDUSTRY_MATRIX: { id: string; icon: typeof Shield; categories: string[]; regCount: number }[] = [
  { id: 'allIndustries', icon: Building2, categories: ['privacy'], regCount: 6 },
  { id: 'maschinenbau', icon: Cog, categories: ['privacy', 'cyber', 'ai', 'product', 'consumer'], regCount: 15 },
  { id: 'health', icon: Heart, categories: ['privacy', 'cyber', 'ai', 'product', 'health'], regCount: 12 },
  { id: 'finance', icon: Landmark, categories: ['privacy', 'cyber', 'ai', 'markets', 'finance'], regCount: 15 },
  { id: 'ecommerce', icon: ShoppingCart, categories: ['privacy', 'markets', 'product', 'finance', 'consumer'], regCount: 25 },
  { id: 'tech', icon: Cpu, categories: ['privacy', 'cyber', 'ai', 'markets'], regCount: 14 },
  { id: 'iot', icon: Activity, categories: ['privacy', 'cyber', 'ai', 'product', 'consumer'], regCount: 13 },
  { id: 'ai', icon: Bot, categories: ['privacy', 'cyber', 'ai', 'product', 'markets'], regCount: 9 },
  { id: 'kritis', icon: Lock, categories: ['privacy', 'cyber', 'ai', 'finance', 'markets'], regCount: 9 },
  { id: 'media', icon: Monitor, categories: ['privacy', 'markets', 'ai'], regCount: 9 },
  { id: 'public', icon: Radio, categories: ['privacy', 'cyber', 'ai', 'markets', 'health'], regCount: 10 },
]

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

  const categoryLabels: Record<string, string> = {
    privacy: rl.categoryPrivacy,
    cyber: rl.categoryCyber,
    ai: rl.categoryAI,
    markets: rl.categoryMarkets,
    product: rl.categoryProduct,
    finance: rl.categoryFinance,
    health: rl.categoryHealth,
    consumer: rl.categoryConsumer,
  }

  const industryLabels: Record<string, string> = {
    allIndustries: rl.allIndustries,
    maschinenbau: rl.maschinenbau,
    health: rl.health,
    finance: rl.finance,
    ecommerce: rl.ecommerce,
    tech: rl.tech,
    iot: rl.iot,
    ai: rl.ai,
    kritis: rl.kritis,
    media: rl.media,
    public: rl.public,
  }

  return (
    <div className="max-w-6xl mx-auto">
      <FadeInView className="text-center mb-6">
        <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-6">
        <KPICard label={rl.documents} value={170} suffix="+" color="#6366f1" delay={0.1} />
        <KPICard label={rl.controls} value={40000} suffix="+" color="#a78bfa" delay={0.2} />
        <KPICard label={rl.regulations} value={84} color="#60a5fa" delay={0.3} />
        <KPICard label={rl.industries} value={10} color="#34d399" delay={0.4} />
      </div>

      {/* Matrix */}
      <FadeInView delay={0.5}>
        <GlassCard hover={false} className="p-4 overflow-x-auto">
          {/* Category Legend */}
          <div className="flex flex-wrap gap-3 mb-4 justify-center">
            {CATEGORIES.map((cat) => (
              <div key={cat.id} className="flex items-center gap-1.5">
                <div className="w-2.5 h-2.5 rounded-full" style={{ backgroundColor: cat.color }} />
                <span className="text-[10px] text-white/50">{categoryLabels[cat.id]}</span>
              </div>
            ))}
          </div>

          {/* Matrix Grid */}
          <div className="space-y-1.5">
            {/* Header row */}
            <div className="grid items-center gap-1" style={{ gridTemplateColumns: '140px repeat(8, 1fr) 50px' }}>
              <div className="text-[9px] text-white/30 uppercase tracking-wider pl-1">
                {lang === 'de' ? 'Branche' : 'Industry'}
              </div>
              {CATEGORIES.map((cat) => {
                const CatIcon = cat.icon
                return (
                  <div key={cat.id} className="flex justify-center">
                    <CatIcon className="w-3.5 h-3.5 opacity-50" style={{ color: cat.color }} />
                  </div>
                )
              })}
              <div className="text-[9px] text-white/30 text-center">#</div>
            </div>

            {/* Industry rows */}
            {INDUSTRY_MATRIX.map((industry, idx) => {
              const Icon = industry.icon
              return (
                <div
                  key={industry.id}
                  className="grid items-center gap-1 py-1.5 rounded-lg hover:bg-white/[0.04] transition-colors"
                  style={{ gridTemplateColumns: '140px repeat(8, 1fr) 50px' }}
                >
                  <div className="flex items-center gap-2 pl-1">
                    <Icon className="w-3.5 h-3.5 text-white/40" />
                    <span className="text-[11px] text-white/70 font-medium truncate">
                      {industryLabels[industry.id]}
                    </span>
                  </div>
                  {CATEGORIES.map((cat) => {
                    const applies = industry.categories.includes(cat.id)
                    return (
                      <div key={cat.id} className="flex justify-center">
                        {applies ? (
                          <div
                            className="w-4 h-4 rounded-full flex items-center justify-center"
                            style={{ backgroundColor: `${cat.color}20` }}
                          >
                            <div className="w-2 h-2 rounded-full" style={{ backgroundColor: cat.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.regCount}</span>
                  </div>
                </div>
              )
            })}
          </div>
        </GlassCard>
      </FadeInView>
    </div>
  )
}