"use client";

import React, { useState, useEffect } from "react";
import Image from "next/image";
import { useI18n } from "@/lib/i18n/context";
import {
  FileSpreadsheet,
  Check,
  ShieldCheck,
  Scan,
} from "lucide-react";

export function HeroScannerShowcase() {
  const { language } = useI18n();
  const isDe = language === "de";

  const [currentStep, setCurrentStep] = useState<0 | 1 | 2>(0); // 0: Receipt, 1: Scanning, 2: Excel

  // Gentle 3-step automatic animation loop
  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentStep((prev) => ((prev + 1) % 3) as 0 | 1 | 2);
    }, 2800);

    return () => clearInterval(interval);
  }, []);

  return (
    <div className="relative w-full bg-white border-2 border-black rounded-none transition-all">
      {/* Clean Stepper Header */}
      <div className="border-b border-[#E2E8F0] px-4 sm:px-6 py-3 flex items-center justify-between bg-[#F8FAFC]">
        <div className="flex items-center gap-1 sm:gap-2">
          {[
            { label: isDe ? "1. Beleg" : "1. Receipt", step: 0 },
            { label: isDe ? "2. KI-Scan" : "2. AI Scan", step: 1 },
            { label: isDe ? "3. Excel" : "3. Excel", step: 2 },
          ].map((item) => (
            <button
              key={item.step}
              type="button"
              onClick={() => setCurrentStep(item.step as 0 | 1 | 2)}
              className={`px-2.5 py-1 text-xs font-mono transition-all ${
                currentStep === item.step
                  ? "bg-black text-white font-semibold"
                  : "text-[#64748B] hover:text-black"
              }`}
            >
              {item.label}
            </button>
          ))}
        </div>

        <span className="font-mono text-[11px] text-emerald-700 font-semibold flex items-center gap-1">
          <Check className="w-3.5 h-3.5" />
          <span>{isDe ? "Live Vorschau" : "Live Preview"}</span>
        </span>
      </div>

      {/* Main Animated Visual Canvas */}
      <div className="p-6 sm:p-8 min-h-[300px] sm:min-h-[320px] flex flex-col justify-center items-center relative overflow-hidden">
            {/* STEP 0: PHOTO OF RECEIPT */}
            {currentStep === 0 && (
              <div className="w-full max-w-sm flex flex-col items-center text-center space-y-3 animate-in fade-in duration-300">
                <div className="relative w-36 h-44 border-2 border-black bg-[#F1F5F9] shadow-md overflow-hidden transform -rotate-1">
                  <Image
                    src="/demo/fuel_receipt.jpg"
                    alt="Receipt preview"
                    fill
                    className="object-cover"
                  />
                  <div className="absolute inset-0 bg-black/10" />
                </div>
                <p className="font-mono text-xs text-[#475569]">
                  {isDe ? "Echter Kassenbon, Foto oder PDF" : "Original receipt, photo or PDF"}
                </p>
              </div>
            )}

            {/* STEP 1: AI SCANNING & EXTRACTION */}
            {currentStep === 1 && (
              <div className="w-full max-w-md flex flex-col items-center space-y-3 animate-in fade-in duration-300">
                <div className="relative w-full border-2 border-black bg-black p-4 text-white font-mono text-xs space-y-2 overflow-hidden shadow-md">
                  {/* Laser Scanline */}
                  <div className="absolute left-0 right-0 h-0.5 bg-emerald-400 animate-scanline"></div>
                  
                  <div className="flex items-center justify-between text-emerald-400 border-b border-white/20 pb-2">
                    <span className="flex items-center gap-1.5 font-bold">
                      <Scan className="w-3.5 h-3.5" />
                      <span>{isDe ? "KI-ERKENNUNG AKTIV" : "AI EXTRACTION ACTIVE"}</span>
                    </span>
                    <span>{isDe ? "100% SICHER" : "100% VERIFIED"}</span>
                  </div>

                  <div className="space-y-1.5 pt-1 text-[11px]">
                    <div className="flex justify-between">
                      <span className="text-[#94A3B8]">{isDe ? "Händler:" : "Merchant:"}</span>
                      <span className="text-white font-bold">ARAL Station Berlin</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-[#94A3B8]">{isDe ? "Datum:" : "Date:"}</span>
                      <span className="text-white">2026-05-27</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-[#94A3B8]">{isDe ? "MwSt (19%):" : "Tax (19%):"}</span>
                      <span className="text-emerald-400 font-bold">12,05 €</span>
                    </div>
                    <div className="flex justify-between border-t border-white/20 pt-1.5 font-bold text-xs">
                      <span>{isDe ? "Gesamtsumme:" : "Gross Total:"}</span>
                      <span className="text-emerald-400">{isDe ? "75,50 € (Gerechnet ✓)" : "75.50 € (Verified ✓)"}</span>
                    </div>
                  </div>
                </div>
                <p className="font-mono text-xs text-emerald-700 font-semibold">
                  {isDe ? "✓ Summen automatisch mathematisch geprüft" : "✓ Totals verified with live math"}
                </p>
              </div>
            )}

            {/* STEP 2: CLEAN EXCEL OUTPUT */}
            {currentStep === 2 && (
              <div className="w-full max-w-md flex flex-col items-center space-y-3 animate-in fade-in duration-300">
                <div className="w-full border-2 border-black bg-white shadow-md overflow-hidden">
                  <div className="bg-[#107C41] text-white px-3 py-1.5 flex items-center justify-between font-mono text-[11px] font-semibold">
                    <div className="flex items-center gap-1.5">
                      <FileSpreadsheet className="w-3.5 h-3.5" />
                      <span>{isDe ? "Belege_2026.xlsx" : "Receipts_2026.xlsx"}</span>
                    </div>
                    <span>Sheet 1 & 2</span>
                  </div>

                  <table className="w-full text-left font-mono text-[11px]">
                    <thead>
                      <tr className="bg-[#F1F5F9] border-b border-[#CBD5E1] text-[#475569]">
                        <th className="p-2 border-r border-[#E2E8F0]">{isDe ? "Datum" : "Date"}</th>
                        <th className="p-2 border-r border-[#E2E8F0]">{isDe ? "Händler" : "Merchant"}</th>
                        <th className="p-2 border-r border-[#E2E8F0] text-right">{isDe ? "MwSt" : "Tax"}</th>
                        <th className="p-2 text-right">{isDe ? "Brutto" : "Gross"}</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr className="border-b border-[#E2E8F0] bg-emerald-50/70 font-semibold">
                        <td className="p-2 border-r border-[#E2E8F0]">2026-05-27</td>
                        <td className="p-2 border-r border-[#E2E8F0]">ARAL Berlin</td>
                        <td className="p-2 border-r border-[#E2E8F0] text-right">12,05 €</td>
                        <td className="p-2 text-right text-emerald-800">75,50 €</td>
                      </tr>
                      <tr className="text-[#64748B]">
                        <td className="p-2 border-r border-[#E2E8F0]">2026-06-12</td>
                        <td className="p-2 border-r border-[#E2E8F0]">Trattoria</td>
                        <td className="p-2 border-r border-[#E2E8F0] text-right">15,14 €</td>
                        <td className="p-2 text-right">94,80 €</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <p className="font-mono text-xs text-[#475569]">
                  {isDe ? "Formatiertes Excel mit Live-Formeln (.xlsx)" : "Clean Excel spreadsheet with formulas (.xlsx)"}
                </p>
              </div>
            )}
      </div>

      {/* Subtle Trust Footer */}
      <div className="px-4 sm:px-6 py-2 border-t border-[#E2E8F0] bg-white flex items-center justify-between text-[11px] font-mono text-[#64748B]">
        <span className="flex items-center gap-1.5">
          <ShieldCheck className="w-3.5 h-3.5 text-black" />
          <span>{isDe ? "100% sicher & verschlüsselt" : "100% secure & encrypted"}</span>
        </span>
        <span className="hidden sm:inline">PDF • PNG • JPG • WEBP</span>
      </div>
    </div>
  );
}
