"use client";

import React, { useState, useRef, useEffect } from "react";
import { useI18n } from "@/lib/i18n/context";
import {
  ArrowRight,
  CheckCircle2,
  FileSpreadsheet,
  Layers,
  Calculator,
  Scan,
  ShieldCheck,
} from "lucide-react";
import gsap from "gsap";

export function WorkflowSection() {
  const { language } = useI18n();
  const isDe = language === "de";
  const [activeStep, setActiveStep] = useState(0);

  const previewBoxRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (previewBoxRef.current) {
      gsap.fromTo(
        previewBoxRef.current,
        { opacity: 0.7, y: 8 },
        { opacity: 1, y: 0, duration: 0.35, ease: "power2.out" }
      );
    }
  }, [activeStep]);

  const steps = [
    {
      num: "01",
      icon: Scan,
      title: isDe ? "Erfassung & Multimodale Bildanalyse" : "Ingestion & Multimodal Parsing",
      subtitle: isDe
        ? "Drag & Drop oder Smartphone-Kamera"
        : "Drag & drop or smartphone camera capture",
      desc: isDe
        ? "Lade bis zu 50 Belege gleichzeitig hoch. Sharp optimiert Kontrast & Ausrichtung, bevor das KI-Vision-Modell alle Datenfelder strukturiert extrahiert."
        : "Upload up to 50 receipts at once. Sharp sharpens contrast & orientation before the AI vision model parses all data fields.",
      preview: {
        tag: isDe ? "SCHRITT 1: EXTRAKTION" : "STEP 1: EXTRACTION",
        badge: "4K NEURAL SCAN",
        content: isDe ? "Foto hochgeladen → Händler, Datum & Artikel erkannt" : "Image Ingested → Merchant, Date & Line Items Parsed",
        data: [
          { key: isDe ? "Händler" : "Merchant", val: "Aral Station 4920 München" },
          { key: isDe ? "Datum" : "Date", val: isDe ? "2026-08-14 (ISO-8601 Validiert)" : "2026-08-14 (ISO-8601 Validated)" },
          { key: isDe ? "Kategorie" : "Category", val: isDe ? "KFZ & Treibstoff (Auto-Klassifiziert)" : "Fuel & Vehicle (Auto-Classified)" },
          { key: isDe ? "Brutto" : "Gross", val: "90,00 €" },
        ],
      },
    },
    {
      num: "02",
      icon: Calculator,
      title: isDe ? "Deterministische Plausibilitätsprüfung" : "Deterministic Cross-Verification",
      subtitle: isDe
        ? "Netto + MwSt (7%/19%) = Brutto Abgleich"
        : "Net + VAT = Total mathematical reconciliation",
      desc: isDe
        ? "Unsere Engine rechnet jeden Beleg nach – mit einer Rundungstoleranz im Cent-Bereich. Abweichungen landen in der 1-Klick Prüfleiste."
        : "Our engine cross-checks every receipt down to the cent. Ambiguities are presented in the 1-click review bar for immediate confirmation.",
      preview: {
        tag: isDe ? "SCHRITT 2: MATH CHECK" : "STEP 2: MATH CHECK",
        badge: isDe ? "CENT-GENAU VERIFIZIERT" : "CENT-ACCURATE VERIFIED",
        content: isDe ? "Mathematische Konsistenzprüfung erfolgreich" : "Mathematical Consistency Check Passed",
        data: [
          { key: isDe ? "Netto-Betrag" : "Net Amount", val: "75,63 €" },
          { key: isDe ? "MwSt 19%" : "Tax 19%", val: "14,37 €" },
          { key: isDe ? "Plausibilität" : "Math Proof", val: isDe ? "Valide ✓ (Netto + MwSt = 90,00 €)" : "Valid ✓ (Net + Tax = 90.00 €)" },
          { key: isDe ? "Toleranz" : "Tolerance", val: isDe ? "±0,02 € (Rundungsdifferenz)" : "±0.02 € (Rounding margin)" },
        ],
      },
    },
    {
      num: "03",
      icon: FileSpreadsheet,
      title: isDe ? "1-Klick Dual-Sheet Excel & CSV Export" : "1-Click Excel & CSV Export",
      subtitle: isDe
        ? "Fertig formatiert mit =SUM() Formeln"
        : "Fully formatted with live =SUM() formulas",
      desc: isDe
        ? "Lade eine sofort einsatzbereite .xlsx-Datei mit separatem Einzelpositionen-Blatt oder eine schlichte CSV-Datei herunter."
        : "Download a ready-to-use .xlsx file with an itemized line-items worksheet or a clean CSV file.",
      preview: {
        tag: isDe ? "SCHRITT 3: EXPORT BEREIT" : "STEP 3: EXPORT READY",
        badge: "DUAL-SHEET .XLSX",
        content: isDe ? "Generierte Excel-Datei (.xlsx) bereit" : "Generated Excel File (.xlsx) Ready",
        data: [
          { key: isDe ? "Blatt 1" : "Sheet 1", val: isDe ? "Belegübersicht mit =SUM() Formeln" : "Receipt Summary with =SUM() formulas" },
          { key: isDe ? "Blatt 2" : "Sheet 2", val: isDe ? "Einzelpositionen (Items Detail Matrix)" : "Line Items (Itemized Matrix)" },
          { key: "CSV", val: isDe ? "Semikolon, Dezimalkomma, UTF-8 BOM" : "Semicolon/Comma, UTF-8 BOM" },
          { key: isDe ? "Format" : "Format", val: "ExcelJS Native Binary (.xlsx)" },
        ],
      },
    },
  ];

  return (
    <section id="workflow" className="w-full bg-[#F8FAFC] font-sans py-20 relative">
      <div className="max-w-[1440px] mx-auto px-4 sm:px-8 border-x border-[#E2E8F0] relative">

        {/* Header */}
        <div className="mb-12 pb-6 border-b border-[#E2E8F0]">
          <div className="flex items-center gap-2 mb-3">
            <span className="w-2.5 h-2.5 bg-black"></span>
            <span className="font-mono text-xs uppercase tracking-caps font-semibold text-[#475569]">
              {isDe ? "3-SCHRITTE PIPELINE" : "3-STEP WORKFLOW"}
            </span>
          </div>
          <h2 className="font-display text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tightest text-black">
            {isDe ? "Von Papier zu Excel in 3 Schritten." : "From Paper to Excel in 3 Steps."}
          </h2>
        </div>

        {/* 3 Step Interactive Layout */}
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-stretch">
          {/* Left Column: Interactive Steps List */}
          <div className="lg:col-span-6 space-y-3">
            {steps.map((step, idx) => {
              const Icon = step.icon;
              return (
                <div
                  key={step.num}
                  onClick={() => setActiveStep(idx)}
                  className={`p-6 border cursor-pointer transition-all ${
                    activeStep === idx
                      ? "bg-white border-2 border-black shadow-md"
                      : "bg-white/60 border-[#E2E8F0] hover:border-black hover:bg-white"
                  }`}
                >
                  <div className="flex items-center justify-between mb-2">
                    <div className="flex items-center gap-2">
                      <div className={`w-7 h-7 flex items-center justify-center font-mono text-xs font-bold ${
                        activeStep === idx ? "bg-black text-white" : "bg-[#EEF4FC] text-black border border-[#E2E8F0]"
                      }`}>
                        {idx + 1}
                      </div>
                      <span className="font-mono text-xs font-bold text-black tracking-caps">
                        {isDe ? `SCHRITT ${idx + 1}` : `STEP ${idx + 1}`}
                      </span>
                    </div>
                    <span className="font-mono text-[10px] uppercase text-[#64748B]">
                      {step.subtitle}
                    </span>
                  </div>
                  <h3 className="font-display text-lg font-bold text-black mb-1.5 pt-1">
                    {step.title}
                  </h3>
                  <p className="text-xs text-[#475569] leading-relaxed font-sans">
                    {step.desc}
                  </p>
                </div>
              );
            })}
          </div>

          {/* Right Column: Clean Zenith Silver Preview Box (Matching Color Scheme) */}
          <div className="lg:col-span-6 bg-white border-2 border-black flex flex-col justify-between shadow-lg overflow-hidden font-sans">
            {/* Header Bar */}
            <div className="bg-[#F8FAFC] px-5 py-3.5 border-b border-[#E2E8F0] flex items-center justify-between font-mono text-xs">
              <div className="flex items-center gap-2">
                <span className="w-2.5 h-2.5 bg-black"></span>
                <span className="font-bold text-black uppercase tracking-wider">
                  SCANRECEIPTS PIPELINE
                </span>
              </div>
              <span className="bg-[#EEF4FC] border border-[#E2E8F0] text-black px-2.5 py-0.5 text-[10px] font-bold uppercase tracking-wider">
                {steps[activeStep].preview.badge}
              </span>
            </div>

            {/* Content Area */}
            <div ref={previewBoxRef} className="p-6 sm:p-7 space-y-5 flex-1 flex flex-col justify-center">
              <div className="flex items-center gap-2 text-xs font-mono text-black font-semibold bg-[#F8FAFC] p-3 border border-[#E2E8F0]">
                <CheckCircle2 className="w-4 h-4 text-emerald-600 shrink-0" />
                <span>{steps[activeStep].preview.content}</span>
              </div>

              {/* Data Items */}
              <div className="space-y-2.5">
                {steps[activeStep].preview.data.map((d, i) => (
                  <div
                    key={i}
                    className="flex items-center justify-between p-3 bg-[#F8FAFC] border border-[#E2E8F0] text-xs font-mono"
                  >
                    <span className="text-[#64748B] font-medium">{d.key}:</span>
                    <span className="text-black font-bold">{d.val}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* Footer Bar */}
            <div className="bg-[#F8FAFC] px-5 py-3.5 border-t border-[#E2E8F0] flex items-center justify-between font-mono text-xs">
              <span className="text-[#64748B] text-[11px] flex items-center gap-1.5">
                <span className="w-2 h-2 rounded-full bg-emerald-500"></span>
                <span>{isDe ? "STATUS: BEREIT FÜR EXCEL-EXPORT" : "STATUS: READY FOR EXCEL EXPORT"}</span>
              </span>
              <button
                onClick={() => setActiveStep((activeStep + 1) % 3)}
                className="bg-black text-white hover:bg-[#334155] px-3.5 py-1.5 text-xs font-bold uppercase tracking-wider flex items-center gap-1.5 transition-colors"
              >
                <span>{isDe ? "Nächster Schritt" : "Next Step"}</span>
                <ArrowRight className="w-3.5 h-3.5" />
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

