'use client'

import { motion } from 'framer-motion'
import { Language } from '@/lib/types'
import GradientText from '../ui/GradientText'
import FadeInView from '../ui/FadeInView'
import { Upload, ScanLine, Search, AlertTriangle, FileText, UserCheck, ShieldCheck } from 'lucide-react'

interface AnnexAgentWorkflowSlideProps {
  lang: Language
}

export default function AnnexAgentWorkflowSlide({ lang }: AnnexAgentWorkflowSlideProps) {
  const workflowSteps = [
    {
      icon: Upload,
      title: 'Upload',
      desc: lang === 'de' ? 'Dokument-Upload (Verträge, Richtlinien, Aufzeichnungen)' : 'Document upload (contracts, policies, records)',
      color: 'text-blue-400'
    },
    {
      icon: ScanLine,
      title: 'OCR',
      desc: lang === 'de' ? 'Automatische Textextraktion (PaddleOCR)' : 'Automatic text extraction (PaddleOCR)',
      color: 'text-purple-400'
    },
    {
      icon: Search,
      title: lang === 'de' ? 'Analyse' : 'Analysis',
      desc: lang === 'de' ? 'KI analysiert gegen DSGVO/AI Act/NIS2' : 'AI analyzes against DSGVO/AI Act/NIS2',
      color: 'text-indigo-400'
    },
    {
      icon: AlertTriangle,
      title: lang === 'de' ? 'Risikobewertung' : 'Risk Assessment',
      desc: lang === 'de' ? 'Automatische Risikoklassifizierung (niedrig/mittel/hoch/kritisch)' : 'Automatic risk classification (low/medium/high/critical)',
      color: 'text-amber-400'
    },
    {
      icon: FileText,
      title: lang === 'de' ? 'Report-Generierung' : 'Report Generation',
      desc: lang === 'de' ? 'DSFA, VVT, TOM Dokumente automatisch erstellt' : 'DSFA, VVT, TOM documents auto-generated',
      color: 'text-green-400'
    },
    {
      icon: UserCheck,
      title: lang === 'de' ? 'Human Review' : 'Human Review',
      desc: lang === 'de' ? 'Experte prüft und genehmigt' : 'Expert reviews and approves',
      color: 'text-cyan-400'
    }
  ]

  const humanInLoopFeatures = [
    lang === 'de' ? 'KI schlägt vor, Mensch entscheidet' : 'AI suggests, human decides',
    lang === 'de' ? 'Kritische Entscheidungen erfordern Genehmigung' : 'Critical decisions require approval',
    lang === 'de' ? 'Audit-Trail für alle Aktionen' : 'Audit trail for all actions',
    lang === 'de' ? 'Compliance Officer immer in Kontrolle' : 'Compliance officer always in control'
  ]

  return (
    <div className="max-w-6xl mx-auto px-4">
      <FadeInView>
        <div className="text-center mb-12">
          <h2 className="text-4xl md:text-5xl font-bold mb-4">
            <GradientText>
              {lang === 'de' ? 'Autonomer Compliance-Workflow' : 'Autonomous Compliance Workflow'}
            </GradientText>
          </h2>
          <p className="text-xl text-white/60">
            {lang === 'de' ? 'End-to-End: Vom Upload bis zum fertigen Report' : 'End-to-end: From upload to finished report'}
          </p>
        </div>
      </FadeInView>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
        {/* Workflow Steps */}
        <div className="lg:col-span-2">
          <FadeInView delay={0.2}>
            <div className="space-y-4">
              {workflowSteps.map((step, idx) => (
                <motion.div
                  key={step.title}
                  initial={{ opacity: 0, x: -20 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ delay: 0.3 + idx * 0.1 }}
                  className="bg-white/[0.04] border border-white/[0.06] rounded-xl p-4 relative"
                >
                  <div className="flex items-start gap-4">
                    <div className={`p-3 bg-white/[0.06] rounded-lg ${step.color}`}>
                      <step.icon className="w-6 h-6" />
                    </div>
                    <div className="flex-1">
                      <div className="flex items-center gap-2 mb-2">
                        <span className="text-xs font-bold text-white/40">
                          {lang === 'de' ? 'SCHRITT' : 'STEP'} {idx + 1}
                        </span>
                      </div>
                      <h3 className="text-lg font-semibold text-white/90 mb-1">{step.title}</h3>
                      <p className="text-sm text-white/60">{step.desc}</p>
                    </div>
                  </div>

                  {/* Connection line to next step */}
                  {idx < workflowSteps.length - 1 && (
                    <div className="absolute left-8 -bottom-4 w-0.5 h-4 bg-gradient-to-b from-white/[0.2] to-transparent" />
                  )}
                </motion.div>
              ))}
            </div>
          </FadeInView>
        </div>

        {/* Human-in-the-Loop */}
        <div className="lg:col-span-1">
          <FadeInView delay={0.9}>
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 1.0 }}
              className="bg-gradient-to-br from-indigo-500/20 to-purple-500/20 border border-indigo-400/30 rounded-xl p-6 sticky top-8"
            >
              <div className="flex items-center gap-3 mb-6">
                <ShieldCheck className="w-8 h-8 text-indigo-400" />
                <h3 className="text-xl font-bold text-white">
                  {lang === 'de' ? 'Human-in-the-Loop' : 'Human-in-the-Loop'}
                </h3>
              </div>

              <ul className="space-y-4">
                {humanInLoopFeatures.map((feature, idx) => (
                  <motion.li
                    key={idx}
                    initial={{ opacity: 0, x: -10 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ delay: 1.1 + idx * 0.1 }}
                    className="flex items-start gap-3"
                  >
                    <div className="w-1.5 h-1.5 rounded-full bg-indigo-400 mt-2 flex-shrink-0" />
                    <p className="text-sm text-white/80">{feature}</p>
                  </motion.li>
                ))}
              </ul>

              <motion.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ delay: 1.5 }}
                className="mt-6 pt-6 border-t border-white/[0.1]"
              >
                <p className="text-xs text-center text-white/60 italic">
                  {lang === 'de'
                    ? 'KI automatisiert Routine, Mensch behält Kontrolle über kritische Entscheidungen'
                    : 'AI automates routine, human retains control over critical decisions'}
                </p>
              </motion.div>
            </motion.div>
          </FadeInView>
        </div>
      </div>
    </div>
  )
}