'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 {
  Code2,
  Container,
  GitBranch,
  Layers,
  ShieldCheck,
  Terminal,
  Cpu,
  Database,
  Braces,
  FileCode2,
  Server,
  Workflow,
} from 'lucide-react'

interface EngineeringSlideProps {
  lang: Language
}

export default function EngineeringSlide({ lang }: EngineeringSlideProps) {
  const i = t(lang)
  const de = lang === 'de'

  const heroStats = [
    {
      value: '481K',
      label: de ? 'Zeilen Code' : 'Lines of Code',
      sub: 'Go · Python · TypeScript',
      color: 'text-indigo-400',
      borderColor: 'border-indigo-500/30',
    },
    {
      value: '10',
      label: de ? 'Docker Container' : 'Docker Containers',
      sub: de ? 'Coolify → Hetzner (amd64)' : 'Coolify → Hetzner (amd64)',
      color: 'text-emerald-400',
      borderColor: 'border-emerald-500/30',
    },
    {
      value: '48+',
      label: de ? 'SDK-Module' : 'SDK Modules',
      sub: de ? 'DSGVO · AI Act · NIS2 · CRA' : 'GDPR · AI Act · NIS2 · CRA',
      color: 'text-purple-400',
      borderColor: 'border-purple-500/30',
    },
    {
      value: '14',
      label: 'Dockerfiles',
      sub: de ? 'Vollstaendig containerisiert' : 'Fully containerized',
      color: 'text-amber-400',
      borderColor: 'border-amber-500/30',
    },
  ]

  const languageBreakdown = [
    { lang: 'TypeScript / TSX', pct: 49, loc: '235K', color: 'bg-blue-500', icon: Braces },
    { lang: 'Python', pct: 28, loc: '133K', color: 'bg-yellow-500', icon: Terminal },
    { lang: 'Go', pct: 23, loc: '113K', color: 'bg-cyan-500', icon: Code2 },
  ]

  const devopsStack = [
    {
      icon: GitBranch,
      label: 'Gitea + Actions',
      desc: de ? 'Self-hosted Git + CI/CD · Lint → Tests → Validierung' : 'Self-hosted Git + CI/CD · Lint → Tests → Validation',
    },
    {
      icon: Workflow,
      label: 'Coolify',
      desc: de ? 'Auto-Deploy bei Push · Docker Compose auf Hetzner · Health Checks' : 'Auto-deploy on push · Docker Compose on Hetzner · Health checks',
    },
    {
      icon: Container,
      label: 'Docker Compose',
      desc: de ? 'arm64 → amd64 Build-Pipeline · Multi-Stage Builds' : 'arm64 → amd64 build pipeline · Multi-stage builds',
    },
    {
      icon: ShieldCheck,
      label: 'DevSecOps',
      desc: 'Semgrep · Trivy · Gitleaks · CycloneDX SBOM',
    },
    {
      icon: Database,
      label: 'HashiCorp Vault',
      desc: de ? 'Secrets Management · Auto-Rotation · PKI' : 'Secrets Management · Auto-Rotation · PKI',
    },
    {
      icon: Server,
      label: de ? 'EU-Cloud Infrastruktur' : 'EU Cloud Infrastructure',
      desc: de ? 'Hetzner · SysEleven (BSI) · OVH · PostgreSQL · Qdrant' : 'Hetzner · SysEleven (BSI) · OVH · PostgreSQL · Qdrant',
    },
  ]

  const serviceArchitecture = [
    {
      project: de ? 'Frontend & Portale' : 'Frontend & Portals',
      color: 'text-indigo-400',
      dotColor: 'bg-indigo-400',
      services: de
        ? ['Admin Dashboard (Next.js 15)', 'Developer Portal (Next.js 15)', 'MkDocs Dokumentation']
        : ['Admin Dashboard (Next.js 15)', 'Developer Portal (Next.js 15)', 'MkDocs Documentation'],
    },
    {
      project: de ? 'Backend & KI' : 'Backend & AI',
      color: 'text-purple-400',
      dotColor: 'bg-purple-400',
      services: de
        ? ['Backend API (FastAPI)', 'AI Compliance SDK (Go/Gin)', 'Document Crawler', 'TTS Service (Piper)']
        : ['Backend API (FastAPI)', 'AI Compliance SDK (Go/Gin)', 'Document Crawler', 'TTS Service (Piper)'],
    },
    {
      project: de ? 'Infrastruktur & Daten' : 'Infrastructure & Data',
      color: 'text-emerald-400',
      dotColor: 'bg-emerald-400',
      services: de
        ? ['PostgreSQL 17 (Hetzner)', 'Qdrant Vector DB', 'DSMS/IPFS Node + Gateway', 'MinIO Object Storage']
        : ['PostgreSQL 17 (Hetzner)', 'Qdrant Vector DB', 'DSMS/IPFS Node + Gateway', 'MinIO Object Storage'],
    },
  ]

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

      {/* Hero Stats */}
      <FadeInView delay={0.1}>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-5">
          {heroStats.map((stat, idx) => (
            <div
              key={idx}
              className={`border rounded-xl p-3 bg-white/[0.03] text-center ${stat.borderColor}`}
            >
              <p className={`text-3xl font-black tracking-tight ${stat.color}`}>{stat.value}</p>
              <p className="text-xs font-semibold text-white/70 mt-0.5">{stat.label}</p>
              <p className="text-[10px] text-white/30 mt-0.5">{stat.sub}</p>
            </div>
          ))}
        </div>
      </FadeInView>

      <div className="grid md:grid-cols-12 gap-4">
        {/* Left Column: Language Breakdown + Service Map */}
        <div className="md:col-span-5 space-y-4">
          {/* Language Breakdown */}
          <FadeInView delay={0.2}>
            <GlassCard hover={false} className="p-4">
              <div className="flex items-center gap-2 mb-3">
                <FileCode2 className="w-4 h-4 text-white/40" />
                <p className="text-xs font-semibold text-white/40 uppercase tracking-wider">
                  {de ? 'Sprachen-Mix' : 'Language Mix'}
                </p>
              </div>
              {/* Stacked bar */}
              <div className="flex rounded-full overflow-hidden h-3 mb-3">
                {languageBreakdown.map((l, idx) => (
                  <div
                    key={idx}
                    className={`${l.color} transition-all`}
                    style={{ width: `${l.pct}%` }}
                  />
                ))}
              </div>
              <div className="space-y-1.5">
                {languageBreakdown.map((l, idx) => {
                  const Icon = l.icon
                  return (
                    <div key={idx} className="flex items-center justify-between">
                      <div className="flex items-center gap-2">
                        <div className={`w-2 h-2 rounded-full ${l.color}`} />
                        <Icon className="w-3 h-3 text-white/40" />
                        <span className="text-xs text-white/60">{l.lang}</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <span className="text-xs font-mono text-white/40">{l.loc}</span>
                        <span className="text-xs font-bold text-white/70">{l.pct}%</span>
                      </div>
                    </div>
                  )
                })}
              </div>
            </GlassCard>
          </FadeInView>

          {/* Service Map */}
          <FadeInView delay={0.3}>
            <GlassCard hover={false} className="p-4">
              <div className="flex items-center gap-2 mb-3">
                <Layers className="w-4 h-4 text-white/40" />
                <p className="text-xs font-semibold text-white/40 uppercase tracking-wider">
                  {de ? 'Service-Architektur' : 'Service Architecture'}
                </p>
              </div>
              <div className="space-y-3">
                {serviceArchitecture.map((proj, idx) => (
                  <div key={idx}>
                    <p className={`text-[10px] font-bold uppercase tracking-wider ${proj.color} mb-1`}>
                      {proj.project}
                    </p>
                    <div className="flex flex-wrap gap-1">
                      {proj.services.map((svc, sidx) => (
                        <span
                          key={sidx}
                          className="text-[10px] px-1.5 py-0.5 rounded bg-white/[0.05] text-white/50 border border-white/[0.06]"
                        >
                          {svc}
                        </span>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            </GlassCard>
          </FadeInView>
        </div>

        {/* Right Column: DevOps Stack */}
        <div className="md:col-span-7">
          <FadeInView delay={0.25}>
            <GlassCard hover={false} className="p-4 h-full">
              <div className="flex items-center gap-2 mb-3">
                <Cpu className="w-4 h-4 text-white/40" />
                <p className="text-xs font-semibold text-white/40 uppercase tracking-wider">
                  {de ? 'DevOps & Toolchain' : 'DevOps & Toolchain'}
                </p>
              </div>
              <div className="space-y-3">
                {devopsStack.map((tool, idx) => {
                  const Icon = tool.icon
                  return (
                    <div
                      key={idx}
                      className="flex items-start gap-3 p-2.5 rounded-lg bg-white/[0.03] border border-white/5"
                    >
                      <div className="w-8 h-8 rounded-lg bg-indigo-500/10 border border-indigo-500/20 flex items-center justify-center shrink-0">
                        <Icon className="w-4 h-4 text-indigo-400" />
                      </div>
                      <div>
                        <p className="text-sm font-semibold text-white/80">{tool.label}</p>
                        <p className="text-xs text-white/40 mt-0.5">{tool.desc}</p>
                      </div>
                    </div>
                  )
                })}
              </div>
              {/* Footer note */}
              <div className="mt-3 pt-3 border-t border-white/5">
                <p className="text-[10px] text-white/20 text-center">
                  {de
                    ? '100% EU-Cloud · Hetzner + SysEleven (BSI) + OVH · Keine US-Anbieter · Volle Datenkontrolle'
                    : '100% EU Cloud · Hetzner + SysEleven (BSI) + OVH · No US Providers · Full Data Control'}
                </p>
              </div>
            </GlassCard>
          </FadeInView>
        </div>
      </div>
    </div>
  )
}