'use client'

import { motion } from 'framer-motion'
import { Language } from '@/lib/types'
import { t } from '@/lib/i18n'
import GradientText from '../ui/GradientText'
import FadeInView from '../ui/FadeInView'
import { Cpu, Brain, Server, Shield, Database } from 'lucide-react'

interface TechnologySlideProps {
  lang: Language
}

const phaseColors = [
  'from-blue-500/20 to-blue-600/10 border-blue-500/30',
  'from-indigo-500/20 to-indigo-600/10 border-indigo-500/30',
  'from-purple-500/20 to-purple-600/10 border-purple-500/30',
  'from-violet-500/20 to-violet-600/10 border-violet-500/30',
  'from-fuchsia-500/20 to-fuchsia-600/10 border-fuchsia-500/30',
]

const phaseAccents = [
  'text-blue-400',
  'text-indigo-400',
  'text-purple-400',
  'text-violet-400',
  'text-fuchsia-400',
]

const layerIcons = [Cpu, Brain, Server, Shield, Database]
const layerColors = [
  'text-blue-400 bg-blue-500/10 border-blue-500/20',
  'text-purple-400 bg-purple-500/10 border-purple-500/20',
  'text-green-400 bg-green-500/10 border-green-500/20',
  'text-red-400 bg-red-500/10 border-red-500/20',
  'text-amber-400 bg-amber-500/10 border-amber-500/20',
]

export default function TechnologySlide({ lang }: TechnologySlideProps) {
  const i = t(lang) as any

  return (
    <div className="max-w-6xl mx-auto px-4">
      <FadeInView className="text-center mb-6">
        <h2 className="text-3xl md:text-4xl font-bold mb-2">
          <GradientText>{i.technology.title}</GradientText>
        </h2>
        <p className="text-sm text-white/50 max-w-2xl mx-auto">{i.technology.subtitle}</p>
      </FadeInView>

      {/* Timeline Section */}
      <FadeInView delay={0.1}>
        <div className="mb-6">
          <p className="text-[10px] text-white/30 uppercase tracking-wider mb-3">
            {i.technology.timelineTitle}
          </p>

          {/* Timeline Line */}
          <div className="relative">
            <div className="absolute top-4 left-0 right-0 h-px bg-gradient-to-r from-blue-500/40 via-purple-500/40 to-fuchsia-500/40" />

            <div className="grid grid-cols-5 gap-2">
              {i.technology.phases.map((phase: any, idx: number) => (
                <motion.div
                  key={phase.year}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: 0.2 + idx * 0.1, duration: 0.5 }}
                  className="relative"
                >
                  {/* Dot on timeline */}
                  <div className="flex justify-center mb-2">
                    <div className={`w-2.5 h-2.5 rounded-full ${phaseAccents[idx].replace('text-', 'bg-')} ring-2 ring-slate-950 relative z-10`} />
                  </div>

                  {/* Phase Card */}
                  <div className={`bg-gradient-to-b ${phaseColors[idx]} border rounded-xl p-2.5 backdrop-blur-sm`}>
                    <p className={`text-xs font-bold ${phaseAccents[idx]} mb-0.5`}>{phase.year}</p>
                    <p className="text-[10px] font-semibold text-white mb-1.5">{phase.phase}</p>
                    <div className="space-y-0.5">
                      {phase.techs.map((tech: string, i: number) => (
                        <p key={i} className="text-[9px] text-white/40 leading-tight">
                          {tech}
                        </p>
                      ))}
                    </div>
                  </div>
                </motion.div>
              ))}
            </div>
          </div>
        </div>
      </FadeInView>

      {/* Tech Stack Layers */}
      <FadeInView delay={0.4}>
        <p className="text-[10px] text-white/30 uppercase tracking-wider mb-2">
          {i.technology.stackTitle}
        </p>
        <div className="space-y-1.5">
          {i.technology.layers.map((layer: any, idx: number) => {
            const Icon = layerIcons[idx]
            return (
              <motion.div
                key={layer.name}
                initial={{ opacity: 0, x: -20 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ delay: 0.5 + idx * 0.08, duration: 0.4 }}
                className={`flex items-center gap-3 bg-white/[0.04] backdrop-blur-sm border border-white/[0.06] rounded-xl px-3 py-2`}
              >
                <div className={`w-8 h-8 rounded-lg border flex items-center justify-center shrink-0 ${layerColors[idx]}`}>
                  <Icon className="w-4 h-4" />
                </div>
                <div className="flex items-center gap-3 flex-1 min-w-0">
                  <p className="text-[11px] font-semibold text-white/80 w-24 shrink-0">{layer.name}</p>
                  <p className="text-[10px] text-white/40 truncate">{layer.techs}</p>
                </div>
              </motion.div>
            )
          })}
        </div>
      </FadeInView>
    </div>
  )
}