'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: '691K',
      label: de ? 'Zeilen Code' : 'Lines of Code',
      sub: 'Go · Python · TypeScript',
      color: 'text-indigo-400',
      borderColor: 'border-indigo-500/30',
    },
    {
      value: '45',
      label: de ? 'Docker Container' : 'Docker Containers',
      sub: de ? 'Produktiv auf einem Mac Studio' : 'Production on one Mac Studio',
      color: 'text-emerald-400',
      borderColor: 'border-emerald-500/30',
    },
    {
      value: '27',
      label: de ? 'Microservices' : 'Microservices',
      sub: '10 Go · 9 Python · 8 Next.js',
      color: 'text-purple-400',
      borderColor: 'border-purple-500/30',
    },
    {
      value: '37',
      label: 'Dockerfiles',
      sub: de ? 'Vollstaendig containerisiert' : 'Fully containerized',
      color: 'text-amber-400',
      borderColor: 'border-amber-500/30',
    },
  ]

  const languageBreakdown = [
    { lang: 'TypeScript / TSX', pct: 58, loc: '403K', color: 'bg-blue-500', icon: Braces },
    { lang: 'Python', pct: 23, loc: '160K', color: 'bg-yellow-500', icon: Terminal },
    { lang: 'Go', pct: 18, loc: '127K', color: 'bg-cyan-500', icon: Code2 },
  ]

  const devopsStack = [
    {
      icon: GitBranch,
      label: 'Gitea',
      desc: de ? 'Self-hosted Git · 4 Repos · Code Review' : 'Self-hosted Git · 4 Repos · Code Review',
    },
    {
      icon: Workflow,
      label: 'Woodpecker CI',
      desc: de ? 'Self-hosted CI/CD · Lint · Test · Build · Deploy' : 'Self-hosted CI/CD · Lint · Test · Build · Deploy',
    },
    {
      icon: Container,
      label: 'Docker Compose',
      desc: de ? '66 Service-Definitionen · Multi-Stage Builds' : '66 Service Definitions · 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 ? 'Infrastruktur' : 'Infrastructure',
      desc: 'Nginx · PostgreSQL · Qdrant · MinIO · Valkey',
    },
  ]

  const serviceArchitecture = [
    {
      project: 'breakpilot-core',
      color: 'text-indigo-400',
      dotColor: 'bg-indigo-400',
      services: de
        ? ['Admin Dashboard', 'Consent Service (Go)', 'Billing Service (Go)', 'RAG Pipeline', 'Embedding Service', 'Voice Service', 'Pitch Deck', 'Nginx Reverse Proxy']
        : ['Admin Dashboard', 'Consent Service (Go)', 'Billing Service (Go)', 'RAG Pipeline', 'Embedding Service', 'Voice Service', 'Pitch Deck', 'Nginx Reverse Proxy'],
    },
    {
      project: 'breakpilot-lehrer',
      color: 'text-purple-400',
      dotColor: 'bg-purple-400',
      services: de
        ? ['Lehrer Dashboard', 'Studio v2', 'Website', 'Klausur Service', 'School Service (Go)', 'Edu Search (Go)']
        : ['Teacher Dashboard', 'Studio v2', 'Website', 'Exam Service', 'School Service (Go)', 'Edu Search (Go)'],
    },
    {
      project: 'breakpilot-compliance',
      color: 'text-emerald-400',
      dotColor: 'bg-emerald-400',
      services: de
        ? ['Compliance Dashboard', 'Developer Portal', 'AI SDK (Go)', 'Document Crawler', 'DSMS Gateway', 'Security Scanner (Go)']
        : ['Compliance Dashboard', 'Developer Portal', 'AI SDK (Go)', 'Document Crawler', 'DSMS Gateway', 'Security Scanner (Go)'],
    },
  ]

  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% Self-Hosted · Kein externer Cloud-Anbieter · Vollstaendige Kontrolle ueber Code und Daten'
                    : '100% Self-Hosted · No External Cloud Provider · Full Control Over Code and Data'}
                </p>
              </div>
            </GlassCard>
          </FadeInView>
        </div>
      </div>
    </div>
  )
}