'use client';

import { useEffect, useState } from 'react';
import { Sparkles, FileText, Brain, ListChecks, ShieldCheck, CheckCircle2 } from 'lucide-react';
import { cn } from '@/lib/utils';

/**
 * Modal-Overlay während der KI-Brief-Analyse.
 * Phasen sind nicht real-time observable — wir simulieren die Timeline (~9s gesamt):
 *  0-1s : Brief einlesen
 *  1-4s : Kontextanalyse (Tokenisierung, Sektionen erkennen)
 *  4-8s : Felder extrahieren (Sonnet Tool-Call)
 *  8-9s : Konsistenzcheck + AI-Vermutungen markieren
 */

interface Step {
  key: string;
  label: string;
  hint: string;
  icon: typeof Sparkles;
  expectedSec: number;
}

const STEPS: Step[] = [
  { key: 'read',    label: 'Brief einlesen',          hint: 'Tiptap-Text wird normalisiert, HTML-Tags entfernt …',                  icon: FileText, expectedSec: 1 },
  { key: 'context', label: 'Kontextanalyse',          hint: 'Branche, Tonalität, Zielgruppe und Kampagnen-Typ erkennen …',          icon: Brain, expectedSec: 3 },
  { key: 'extract', label: 'Felder extrahieren',      hint: 'Sonnet 4.6 mappt die 9 Briefing-Felder aus dem Brief …',               icon: ListChecks, expectedSec: 4 },
  { key: 'verify',  label: 'AI-Vermutungen markieren', hint: 'Was direkt im Brief stand vs. was die KI inferiert hat …',            icon: ShieldCheck, expectedSec: 1 },
];

export function SuggestLoader() {
  const [elapsedSec, setElapsedSec] = useState(0);

  useEffect(() => {
    const start = Date.now();
    const tick = setInterval(() => {
      setElapsedSec((Date.now() - start) / 1000);
    }, 250);
    return () => clearInterval(tick);
  }, []);

  let cursor = 0;
  let currentStep = 0;
  for (let i = 0; i < STEPS.length; i++) {
    cursor += STEPS[i].expectedSec;
    if (elapsedSec < cursor) { currentStep = i; break; }
    currentStep = i + 1;
  }
  if (currentStep >= STEPS.length) currentStep = STEPS.length - 1;

  const totalExpected = STEPS.reduce((a, s) => a + s.expectedSec, 0);

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
      <div className="mx-4 w-full max-w-md rounded-xl border border-zinc-200 bg-white p-8 shadow-2xl dark:border-zinc-800 dark:bg-zinc-950">
        {/* Hauptanimation */}
        <div className="flex justify-center">
          <div className="relative">
            <div className="absolute inset-0 animate-ping rounded-full bg-[#ff006a]/30" />
            <div className="relative flex h-16 w-16 items-center justify-center rounded-full bg-gradient-to-br from-[#ff006a] to-[#c70054] shadow-lg shadow-[#ff006a]/30">
              <Sparkles className="h-8 w-8 animate-pulse text-white" />
            </div>
          </div>
        </div>

        <div className="mt-5 text-center">
          <h2 className="text-base font-bold text-zinc-900 dark:text-zinc-100">
            Analysiere deinen Brief …
          </h2>
          <p className="mt-1 text-xs text-zinc-500">
            Ca. {totalExpected} Sekunden — KI extrahiert Briefing-Felder aus deinem Editor-Text.
          </p>
          <p className="mt-1 font-mono text-[10px] text-zinc-400">{elapsedSec.toFixed(1)}s</p>
        </div>

        {/* Schritt-Liste */}
        <ol className="mt-5 flex flex-col gap-2">
          {STEPS.map((step, i) => {
            const Icon = step.icon;
            const isPast = i < currentStep;
            const isCurrent = i === currentStep;
            const isFuture = i > currentStep;
            return (
              <li
                key={step.key}
                className={cn(
                  'flex items-start gap-2.5 rounded-md border px-3 py-2 transition',
                  isCurrent && 'border-pink-200 bg-pink-50 shadow-sm dark:border-pink-900/50 dark:bg-pink-950/30',
                  isPast && 'border-emerald-200 bg-emerald-50/50 dark:border-emerald-900/50 dark:bg-emerald-950/20',
                  isFuture && 'border-zinc-200 bg-zinc-50/50 opacity-50 dark:border-zinc-800 dark:bg-zinc-900/30',
                )}
              >
                <div
                  className={cn(
                    'flex h-7 w-7 shrink-0 items-center justify-center rounded-full',
                    isPast && 'bg-emerald-500 text-white',
                    isCurrent && 'bg-[#ff006a] text-white',
                    isFuture && 'bg-zinc-200 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-500',
                  )}
                >
                  {isPast ? (
                    <CheckCircle2 className="h-3.5 w-3.5" />
                  ) : isCurrent ? (
                    <Icon className="h-3.5 w-3.5 animate-pulse" />
                  ) : (
                    <Icon className="h-3.5 w-3.5" />
                  )}
                </div>
                <div className="min-w-0 flex-1">
                  <div className="flex items-baseline justify-between gap-2">
                    <span className={cn(
                      'text-xs font-medium',
                      isCurrent ? 'text-pink-900 dark:text-pink-200' : isPast ? 'text-emerald-800 dark:text-emerald-300' : 'text-zinc-500',
                    )}>
                      {step.label}
                    </span>
                    <span className="text-[10px] text-zinc-400">~{step.expectedSec}s</span>
                  </div>
                  <p className={cn(
                    'mt-0.5 text-[11px] leading-tight',
                    isCurrent ? 'text-pink-700 dark:text-pink-300' : 'text-zinc-500',
                  )}>
                    {step.hint}
                  </p>
                </div>
              </li>
            );
          })}
        </ol>
      </div>
    </div>
  );
}
