'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 { Server, Cpu, Shield, Database, Globe, Lock, Layers, Workflow } from 'lucide-react'

interface ArchitectureSlideProps {
  lang: Language
}

export default function ArchitectureSlide({ lang }: ArchitectureSlideProps) {
  const i = t(lang)
  const de = lang === 'de'

  const layers = [
    {
      icon: Server,
      color: 'text-indigo-400',
      bg: 'bg-indigo-500/10 border-indigo-500/20',
      title: de ? 'Hardware-Schicht' : 'Hardware Layer',
      items: [
        { label: 'ComplAI Mini', desc: 'Mac Mini M4 · 16 GB · Llama 3.2 3B' },
        { label: 'ComplAI Studio', desc: 'Mac Studio M4 Max · 64 GB · Qwen 2.5 32B' },
        { label: 'ComplAI Cloud', desc: de ? 'Managed GPU-Cluster · Multi-Model' : 'Managed GPU Cluster · Multi-Model' },
      ],
    },
    {
      icon: Cpu,
      color: 'text-purple-400',
      bg: 'bg-purple-500/10 border-purple-500/20',
      title: de ? 'KI-Engine' : 'AI Engine',
      items: [
        { label: 'Ollama Runtime', desc: de ? 'Lokale LLM-Inferenz, GPU-optimiert' : 'Local LLM inference, GPU-optimized' },
        { label: 'RAG Pipeline', desc: de ? 'Vektorsuche mit Compliance-Wissensbasis' : 'Vector search with compliance knowledge base' },
        { label: 'Agent Framework', desc: de ? 'Autonome Compliance-Agenten (Audit, Monitoring, Reporting)' : 'Autonomous compliance agents (Audit, Monitoring, Reporting)' },
      ],
    },
    {
      icon: Shield,
      color: 'text-emerald-400',
      bg: 'bg-emerald-500/10 border-emerald-500/20',
      title: de ? 'Compliance-Module' : 'Compliance Modules',
      items: [
        { label: 'DSGVO Engine', desc: de ? 'VVT, DSFA, Betroffenenrechte, Loeschkonzept' : 'RoPA, DPIA, Data Subject Rights, Deletion Concept' },
        { label: 'AI Act Module', desc: de ? 'Risikoklassifizierung, Konformitaetsbewertung, Dokumentation' : 'Risk Classification, Conformity Assessment, Documentation' },
        { label: 'NIS2 Module', desc: de ? 'Cybersecurity-Policies, Incident Response, Meldewege' : 'Cybersecurity Policies, Incident Response, Reporting Chains' },
      ],
    },
    {
      icon: Layers,
      color: 'text-blue-400',
      bg: 'bg-blue-500/10 border-blue-500/20',
      title: de ? 'Plattform-Services' : 'Platform Services',
      items: [
        { label: de ? 'Admin-Dashboard' : 'Admin Dashboard', desc: 'Next.js · ' + (de ? 'Mandantenfaehig · Rollenbasiert' : 'Multi-Tenant · Role-Based') },
        { label: 'SDK API', desc: 'Go/Gin · REST · ' + (de ? 'Tenant-isoliert' : 'Tenant-Isolated') },
        { label: 'DevSecOps Suite', desc: 'Semgrep · Trivy · Gitleaks · CycloneDX SBOM' },
      ],
    },
  ]

  const securityFeatures = [
    { icon: Lock, label: de ? 'Zero-Trust Architektur' : 'Zero-Trust Architecture' },
    { icon: Database, label: de ? 'Daten verlassen nie das Unternehmen' : 'Data Never Leaves the Company' },
    { icon: Globe, label: de ? 'Kein Cloud-Abhaengigkeit' : 'No Cloud Dependency' },
    { icon: Workflow, label: de ? 'Air-Gap faehig' : 'Air-Gap Capable' },
  ]

  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.architecture.title}</GradientText>
        </h2>
        <p className="text-lg text-white/50 max-w-2xl mx-auto">{i.annex.architecture.subtitle}</p>
      </FadeInView>

      {/* Architecture Layers */}
      <div className="grid md:grid-cols-2 gap-4 mb-6">
        {layers.map((layer, idx) => {
          const Icon = layer.icon
          return (
            <FadeInView key={idx} delay={0.2 + idx * 0.1}>
              <div className={`border rounded-xl p-4 ${layer.bg}`}>
                <div className="flex items-center gap-2 mb-3">
                  <Icon className={`w-5 h-5 ${layer.color}`} />
                  <h3 className="text-sm font-bold text-white">{layer.title}</h3>
                </div>
                <div className="space-y-2">
                  {layer.items.map((item, iidx) => (
                    <div key={iidx} className="flex items-start gap-2">
                      <div className={`w-1.5 h-1.5 rounded-full mt-1.5 ${layer.color} bg-current opacity-50`} />
                      <div>
                        <span className="text-xs font-semibold text-white/80">{item.label}</span>
                        <span className="text-xs text-white/40 ml-2">{item.desc}</span>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </FadeInView>
          )
        })}
      </div>

      {/* Security Bar */}
      <FadeInView delay={0.6}>
        <GlassCard hover={false} className="p-4">
          <div className="flex items-center justify-center gap-8 flex-wrap">
            {securityFeatures.map((feat, idx) => {
              const Icon = feat.icon
              return (
                <div key={idx} className="flex items-center gap-2">
                  <Icon className="w-4 h-4 text-emerald-400" />
                  <span className="text-xs text-white/60">{feat.label}</span>
                </div>
              )
            })}
          </div>
        </GlassCard>
      </FadeInView>
    </div>
  )
}