'use client'

import { motion } from 'framer-motion'
import { GitBranch, Code, Hammer, TestTube, Rocket, ArrowRight, Container, GitMerge, Activity, Bell } from 'lucide-react'
import { Language } from '@/lib/types'
import GradientText from '../ui/GradientText'
import FadeInView from '../ui/FadeInView'

interface AnnexDevOpsSlideProps {
  lang: Language
}

export default function AnnexDevOpsSlide({ lang }: AnnexDevOpsSlideProps) {
  const pipelineSteps = [
    { name: 'Code', icon: GitBranch, color: 'from-blue-400 to-blue-600' },
    { name: 'Gitea', icon: Code, color: 'from-green-400 to-green-600' },
    { name: 'Woodpecker CI', icon: Hammer, color: 'from-orange-400 to-orange-600' },
    { name: 'Build', icon: Container, color: 'from-purple-400 to-purple-600' },
    { name: 'Test', icon: TestTube, color: 'from-pink-400 to-pink-600' },
    { name: 'Deploy', icon: Rocket, color: 'from-cyan-400 to-cyan-600' }
  ]

  const devOpsTools = [
    {
      title: 'Woodpecker CI',
      icon: Hammer,
      accentColor: 'from-orange-400 to-orange-600',
      items: [
        lang === 'de' ? 'Open-Source CI/CD (Apache 2.0)' : 'Open-source CI/CD (Apache 2.0)',
        lang === 'de' ? 'Docker-native Builds' : 'Docker-native builds',
        lang === 'de' ? 'Automatische Tests bei jedem Commit' : 'Automatic testing on every commit',
        lang === 'de' ? 'Build-Zeit: ~3 min' : 'Build time: ~3 min'
      ]
    },
    {
      title: 'Docker Compose',
      icon: Container,
      accentColor: 'from-blue-400 to-blue-600',
      items: [
        lang === 'de' ? '30+ Services orchestriert' : '30+ services orchestrated',
        lang === 'de' ? 'Health Checks für alle Container' : 'Health checks for all containers',
        lang === 'de' ? 'Automatischer Neustart bei Fehler' : 'Automatic restart on failure',
        lang === 'de' ? 'Ressourcenlimits konfiguriert' : 'Resource limits configured'
      ]
    },
    {
      title: 'Gitea',
      icon: GitMerge,
      accentColor: 'from-green-400 to-green-600',
      items: [
        lang === 'de' ? 'Self-hosted Git Server' : 'Self-hosted Git server',
        lang === 'de' ? 'Keine GitHub/GitLab Abhängigkeit' : 'No GitHub/GitLab dependency',
        lang === 'de' ? 'Issue Tracking integriert' : 'Issue tracking integrated',
        lang === 'de' ? 'Mirror zu externem Backup' : 'Mirror to external backup'
      ]
    },
    {
      title: 'Monitoring',
      icon: Activity,
      accentColor: 'from-purple-400 to-purple-600',
      items: [
        lang === 'de' ? 'Night Scheduler für Auto-Shutdown' : 'Night Scheduler for auto-shutdown',
        lang === 'de' ? 'Container Health Monitoring' : 'Container health monitoring',
        lang === 'de' ? 'Log-Aggregation' : 'Log aggregation',
        lang === 'de' ? 'Alerting bei Fehlern' : 'Alerting on failures'
      ]
    }
  ]

  return (
    <div className="max-w-6xl mx-auto px-4">
      <FadeInView>
        <div className="text-center mb-12">
          <h2 className="text-5xl font-bold mb-4">
            <GradientText>
              {lang === 'de' ? 'DevOps & CI/CD' : 'DevOps & CI/CD'}
            </GradientText>
          </h2>
          <p className="text-xl text-white/60">
            {lang === 'de'
              ? 'Automatisierte Entwicklungs- und Deployment-Pipeline'
              : 'Automated development and deployment pipeline'}
          </p>
        </div>
      </FadeInView>

      {/* CI/CD Pipeline Visualization */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.1 }}
        className="bg-white/[0.04] border border-white/[0.06] rounded-xl p-6 mb-8"
      >
        <h3 className="text-lg font-semibold mb-6 text-white/90 text-center">
          {lang === 'de' ? 'CI/CD Pipeline' : 'CI/CD Pipeline'}
        </h3>
        <div className="flex items-center justify-between gap-2">
          {pipelineSteps.map((step, index) => (
            <div key={step.name} className="flex items-center gap-2">
              <motion.div
                initial={{ opacity: 0, scale: 0.8 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ delay: 0.2 + index * 0.1 }}
                className="flex flex-col items-center"
              >
                <div className={`w-16 h-16 rounded-lg bg-gradient-to-br ${step.color} flex items-center justify-center mb-2`}>
                  <step.icon className="w-8 h-8 text-white" />
                </div>
                <span className="text-xs text-white/70 text-center">{step.name}</span>
              </motion.div>
              {index < pipelineSteps.length - 1 && (
                <ArrowRight className="w-5 h-5 text-white/30 flex-shrink-0" />
              )}
            </div>
          ))}
        </div>
      </motion.div>

      {/* DevOps Tools Grid */}
      <div className="grid md:grid-cols-2 gap-6">
        {devOpsTools.map((tool, index) => (
          <motion.div
            key={tool.title}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.8 + index * 0.1 }}
            className="bg-white/[0.04] border border-white/[0.06] rounded-xl p-4"
          >
            <div className={`w-12 h-12 rounded-lg bg-gradient-to-br ${tool.accentColor} flex items-center justify-center mb-4`}>
              <tool.icon className="w-6 h-6 text-white" />
            </div>
            <h3 className="text-xl font-semibold mb-4 text-white">{tool.title}</h3>
            <ul className="space-y-2">
              {tool.items.map((item, itemIndex) => (
                <li key={itemIndex} className="text-sm text-white/70 flex items-start">
                  <span className="mr-2 text-white/40">•</span>
                  <span>{item}</span>
                </li>
              ))}
            </ul>
          </motion.div>
        ))}
      </div>
    </div>
  )
}