'use client';

import { useState, useEffect } from 'react';
import { useTranslations } from 'next-intl';
import { motion, AnimatePresence } from 'framer-motion';
import { Check, Loader2 } from 'lucide-react';

// ─── Types ───────────────────────────────────────────────────────────────────

interface GeneratingStep {
  id: string;
  labelKey: string;
  durationMs: number;
}

interface StepGeneratingProps {
  hasUrl: boolean;
}

// ─── Component ───────────────────────────────────────────────────────────────

export default function StepGenerating({ hasUrl }: StepGeneratingProps) {
  const t = useTranslations('configurator');

  const steps: GeneratingStep[] = [
    { id: 'preparing', labelKey: 'generatingSteps.preparingBrief', durationMs: 1000 },
    ...(hasUrl
      ? [
          { id: 'analyzing', labelKey: 'generatingSteps.analyzingSite', durationMs: 3000 },
          { id: 'performance', labelKey: 'generatingSteps.runningAudit', durationMs: 5000 },
        ]
      : []),
    { id: 'generating', labelKey: 'generatingSteps.generatingBrief', durationMs: Infinity },
  ];

  const [completedCount, setCompletedCount] = useState(0);

  useEffect(() => {
    const step = steps[completedCount];
    if (!step || step.durationMs === Infinity) return;
    const timer = setTimeout(() => {
      setCompletedCount((prev) => Math.min(prev + 1, steps.length - 1));
    }, step.durationMs);
    return () => clearTimeout(timer);
  }, [completedCount, steps]);

  return (
    <div className="flex flex-col items-center gap-8 py-12">
      <motion.div
        initial={{ scale: 0.9, opacity: 0 }}
        animate={{ scale: 1, opacity: 1 }}
        transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
        className="w-16 h-16 rounded-2xl bg-gradient-to-br from-primary to-primary-dark/80 flex items-center justify-center shadow-lg"
      >
        <motion.div
          animate={{ rotate: 360 }}
          transition={{ duration: 2, repeat: Infinity, ease: 'linear' }}
        >
          <Loader2 size={28} strokeWidth={1.5} className="text-white" />
        </motion.div>
      </motion.div>

      <div className="flex flex-col gap-3 w-full max-w-xs">
        {steps.map((step, index) => {
          const isCompleted = index < completedCount;
          const isActive = index === completedCount;

          return (
            <motion.div
              key={step.id}
              initial={{ opacity: 0, x: -12 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: index * 0.1, duration: 0.35, ease: [0.16, 1, 0.3, 1] }}
              className="flex items-center gap-3"
            >
              <div className="flex-shrink-0 w-6 h-6 flex items-center justify-center">
                <AnimatePresence mode="wait">
                  {isCompleted ? (
                    <motion.div
                      key="check"
                      initial={{ scale: 0 }}
                      animate={{ scale: 1 }}
                      className="w-5 h-5 rounded-full bg-primary flex items-center justify-center"
                    >
                      <Check size={12} strokeWidth={3} className="text-white" />
                    </motion.div>
                  ) : isActive ? (
                    <motion.div
                      key="spinner"
                      animate={{ rotate: 360 }}
                      transition={{ duration: 1.2, repeat: Infinity, ease: 'linear' }}
                      className="w-5 h-5 rounded-full border-2 border-primary/30 border-t-primary"
                    />
                  ) : (
                    <div
                      key="pending"
                      className="w-3 h-3 rounded-full bg-outline-variant/30"
                    />
                  )}
                </AnimatePresence>
              </div>

              <span
                className={
                  isCompleted
                    ? 'text-sm font-medium text-on-surface'
                    : isActive
                      ? 'text-sm font-semibold text-primary-dark'
                      : 'text-sm text-outline/40'
                }
              >
                {t(step.labelKey)}
              </span>
            </motion.div>
          );
        })}
      </div>
    </div>
  );
}
