"use client";

import React, { useState, useRef } from "react";
import Image from "next/image";
import { useI18n } from "@/lib/i18n/context";
import {
  FileSpreadsheet,
  Receipt,
  Sparkles,
  CheckCircle2,
  AlertTriangle,
  ArrowLeftRight,
  ShieldCheck,
  Zap,
} from "lucide-react";

export function ReceiptMorphVisual() {
  const { language } = useI18n();
  const isDe = language === "de";
  const [sliderPos, setSliderPos] = useState<number>(50);
  const [isDragging, setIsDragging] = useState<boolean>(false);
  const containerRef = useRef<HTMLDivElement>(null);

  const handleMove = (clientX: number) => {
    if (!containerRef.current) return;
    const rect = containerRef.current.getBoundingClientRect();
    const x = Math.max(0, Math.min(clientX - rect.left, rect.width));
    const percent = (x / rect.width) * 100;
    setSliderPos(percent);
  };

  const handleTouchMove = (e: React.TouchEvent) => {
    if (isDragging && e.touches[0]) {
      handleMove(e.touches[0].clientX);
    }
  };

  const handleMouseMove = (e: React.MouseEvent) => {
    if (isDragging) {
      handleMove(e.clientX);
    }
  };

  return (
    <section className="w-full bg-white font-sans py-20 relative">
      <div className="max-w-[1440px] mx-auto px-4 sm:px-8 border-x border-[#E2E8F0] relative">
        {/* Section Header */}
        <div className="flex flex-col md:flex-row md:items-end justify-between mb-10 gap-6">
          <div>
            <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 ? "VORHER / NACHHER VERGLEICH" : "BEFORE / AFTER COMPARISON"}
              </span>
            </div>


          <h2 className="font-display text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight text-black max-w-2xl leading-[1.08]">
            {isDe
              ? "Vom unleserlichen Papierbeleg zum perfekten Excel-Ledger."
              : "From illegible paper chaos to flawless Excel ledger."}
          </h2>
        </div>
        <p className="font-sans text-sm text-[#475569] max-w-md leading-relaxed">
          {isDe
            ? "Bewege den Schieberegler horizontal: Sieh links das verblasste Thermopapier und rechts die gestochen scharfe, nachgerechnete Dual-Sheet Excel-Tabelle."
            : "Move the slider horizontally: See the faded thermal receipt on the left and the razor-sharp, recalculated Dual-Sheet Excel table on the right."}
        </p>
      </div>


      {/* Main Massive Morph Visual Container with Architectural Grid Framing */}
      <div
        ref={containerRef}
        onMouseDown={() => setIsDragging(true)}
        onMouseUp={() => setIsDragging(false)}
        onMouseLeave={() => setIsDragging(false)}
        onMouseMove={handleMouseMove}
        onTouchStart={() => setIsDragging(true)}
        onTouchEnd={() => setIsDragging(false)}
        onTouchMove={handleTouchMove}
        className="relative min-h-[520px] w-full border-2 border-black bg-white overflow-hidden select-none cursor-ew-resize shadow-2xl"
      >
        {/* ========================================================================= */}
        {/* LAYER 1 (UNDERNEATH): RAW CRUMPLED THERMAL RECEIPT PHOTO & FADED INK */}
        {/* ========================================================================= */}
        <div className="absolute inset-0 bg-[#EFECE6] flex flex-col justify-between p-6 sm:p-10 overflow-hidden">
          {/* Top Status Bar Left */}
          <div className="flex items-center justify-between border-b border-stone-300 pb-3 z-10">
            <div className="flex items-center gap-2">
              <Receipt className="w-5 h-5 text-stone-700" />
              <span className="font-mono text-xs uppercase tracking-caps font-bold text-stone-800">
                {isDe ? "VORHER: UNSTRUKTURIERTES THERMOPAPIER (RAW FOTO)" : "BEFORE: UNSTRUCTURED THERMAL PAPER (RAW PHOTO)"}
              </span>
            </div>
            <span className="font-mono text-[10px] bg-red-100 text-red-800 px-2.5 py-1 border border-red-300 font-bold uppercase">
              {isDe ? "⚠️ MANUELLE EINGABE NÖTIG (ZEILE FÜR ZEILE)" : "⚠️ MANUAL DATA ENTRY (ROW BY ROW)"}
            </span>
          </div>

          {/* Realistic High-Res Thermal Receipt Layout */}
          <div className="grid grid-cols-1 md:grid-cols-12 gap-8 items-center my-auto z-10">
            {/* Left: Thermal Receipt Image */}
            <div className="md:col-span-4 flex justify-center">
              <div className="relative w-48 h-64 shadow-xl border border-stone-300 transform -rotate-1 overflow-hidden bg-white">
                <Image
                  src="/demo/fuel_receipt.jpg"
                  alt="Thermal Paper Receipt"
                  fill
                  className="object-cover sepia-[0.3] contrast-90"
                />
              </div>
            </div>

            {/* Right: Thermal Receipt Text Breakdown */}
            <div className="md:col-span-8 bg-[#FBF9F5] border border-stone-300 p-6 font-mono text-xs text-stone-700 space-y-3">
              <div className="flex justify-between border-b border-stone-300 pb-2">
                <span className="font-bold text-stone-900">ARAL STATION 0492 BERLIN</span>
                <span className="text-[10px] text-stone-500">2026-05-27 • 16:15</span>
              </div>

              <div className="space-y-1 text-[11px] text-stone-600">
                <div className="flex justify-between">
                  <span>1x ARAL SUPER E10 (42,68 Ltr á 1,769 €)</span>
                  <span>75,50 EUR</span>
                </div>
                <div className="flex justify-between text-stone-400">
                  <span>{isDe ? "(Beleg verblasst / Falten im Thermopapier)" : "(Faded ink / wrinkled thermal receipt)"}</span>
                </div>
              </div>

              <div className="border-t border-stone-300 pt-2 space-y-1 text-[11px]">
                <div className="flex justify-between">
                  <span>{isDe ? "NETTO-BETRAG:" : "NET AMOUNT:"}</span>
                  <span>63,45 EUR</span>
                </div>
                <div className="flex justify-between">
                  <span>{isDe ? "MWST 19%:" : "TAX 19%:"}</span>
                  <span>12,05 EUR</span>
                </div>
                <div className="flex justify-between font-bold text-sm text-stone-900 pt-1 border-t border-stone-300">
                  <span>{isDe ? "GESAMTBETRAG:" : "GROSS TOTAL:"}</span>
                  <span>75,50 EUR</span>
                </div>
              </div>
            </div>
          </div>

          {/* Bottom Telemetry Left */}
          <div className="font-mono text-[11px] text-stone-600 flex items-center justify-between border-t border-stone-300 pt-3 z-10">
            <span>{isDe ? "Manuelle Erfassung: Abtippen & selbst nachrechnen" : "Manual entry: Typing & manual math verification"}</span>
            <span>{isDe ? "Excel-Export: Zeile für Zeile von Hand" : "Excel export: Row by row manually"}</span>
          </div>
        </div>

        {/* ========================================================================= */}
        {/* LAYER 2 (ON TOP / CLIPPED): PRISTINE DUAL-SHEET EXCEL 365 WORKBOOK */}
        {/* ========================================================================= */}
        <div
          className="absolute inset-0 bg-[#0B0F14] text-white flex flex-col justify-between p-6 sm:p-10 overflow-hidden"
          style={{ clipPath: `polygon(${sliderPos}% 0, 100% 0, 100% 100%, ${sliderPos}% 100%)` }}
        >
          {/* Top Status Bar Right */}
          <div className="flex items-center justify-between border-b border-white/10 pb-3 z-10">
            <div className="flex items-center gap-2">
              <FileSpreadsheet className="w-5 h-5 text-emerald-400" />
              <span className="font-mono text-xs uppercase tracking-caps font-bold text-white">
                {isDe ? "NACHHER: SCANRECEIPTS ENGINE (.XLSX)" : "AFTER: SCANRECEIPTS ENGINE (.XLSX)"}
              </span>
            </div>
            <span className="font-mono text-[10px] bg-emerald-500 text-black px-2.5 py-1 font-bold uppercase flex items-center gap-1.5">
              <CheckCircle2 className="w-3.5 h-3.5" />
              <span>{isDe ? "✓ ECHTE DATUMSWERTE & =SUM() FORMELN" : "✓ REAL DATES & =SUM() FORMULAS"}</span>
            </span>
          </div>

          {/* Formatted Excel 365 Application Mockup */}
          <div className="my-auto z-10 space-y-3 max-w-4xl mx-auto w-full">
            {/* Excel Formula Bar */}
            <div className="bg-[#161C22] border border-white/10 px-4 py-2 flex items-center justify-between font-mono text-xs">
              <div className="flex items-center gap-2 text-slate-300">
                <span className="text-emerald-400 font-bold">fx</span>
                <span className="text-white font-bold">=SUM(G2:G10)</span>
              </div>
              <span className="text-emerald-400 text-[10px] font-semibold">
                {isDe ? "NATIVE EXCEL-FORMELN AKTIV" : "NATIVE EXCEL FORMULAS ACTIVE"}
              </span>
            </div>

            {/* Excel Table Grid */}
            <div className="border border-white/10 bg-[#090D12] overflow-x-auto shadow-2xl">
              <table className="w-full text-left font-mono text-xs border-collapse">
                <thead>
                  <tr className="bg-black text-white text-[10px] uppercase tracking-wider border-b border-white/20">
                    <th className="p-2.5 border-r border-white/10">A: {isDe ? "BELEG-ID" : "RECEIPT ID"}</th>
                    <th className="p-2.5 border-r border-white/10">B: {isDe ? "DATUM" : "DATE"}</th>
                    <th className="p-2.5 border-r border-white/10">C: {isDe ? "HÄNDLER" : "MERCHANT"}</th>
                    <th className="p-2.5 border-r border-white/10">D: {isDe ? "KATEGORIE" : "CATEGORY"}</th>
                    <th className="p-2.5 border-r border-white/10 text-right">E: {isDe ? "NETTO" : "NET"}</th>
                    <th className="p-2.5 border-r border-white/10 text-right">F: {isDe ? "MWST 19%" : "TAX 19%"}</th>
                    <th className="p-2.5 text-right">G: {isDe ? "BRUTTO" : "GROSS"}</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-white/10 text-slate-200">
                  <tr className="bg-emerald-500/15 font-semibold">
                    <td className="p-2.5 border-r border-white/10 text-emerald-400">REC-001</td>
                    <td className="p-2.5 border-r border-white/10">2026-05-27</td>
                    <td className="p-2.5 border-r border-white/10 text-white font-bold">ARAL Station Berlin</td>
                    <td className="p-2.5 border-r border-white/10">{isDe ? "KFZ / Treibstoff" : "Fuel & Vehicle"}</td>
                    <td className="p-2.5 border-r border-white/10 text-right">63,45 €</td>
                    <td className="p-2.5 border-r border-white/10 text-right">12,05 €</td>
                    <td className="p-2.5 text-right font-extrabold text-emerald-400">75,50 €</td>
                  </tr>
                  <tr className="hover:bg-white/5 opacity-60">
                    <td className="p-2.5 border-r border-white/10 text-[#94A3B8]">REC-002</td>
                    <td className="p-2.5 border-r border-white/10">2026-08-14</td>
                    <td className="p-2.5 border-r border-white/10">Deutsche Bahn ICE</td>
                    <td className="p-2.5 border-r border-white/10">{isDe ? "Reisekosten" : "Travel & Hotel"}</td>
                    <td className="p-2.5 border-r border-white/10 text-right">82,24 €</td>
                    <td className="p-2.5 border-r border-white/10 text-right">5,76 € (7%)</td>
                    <td className="p-2.5 text-right">88,00 €</td>
                  </tr>
                  <tr className="bg-black text-white font-bold border-t-2 border-emerald-400">
                    <td colSpan={4} className="p-2.5 border-r border-white/10 uppercase tracking-caps text-emerald-400">
                      {isDe ? "SUMMENZEILE (DYNAMISCHE FORMEL =SUM)" : "SUMMARY ROW (DYNAMIC =SUM FORMULA)"}
                    </td>
                    <td className="p-2.5 border-r border-white/10 text-right">145,69 €</td>
                    <td className="p-2.5 border-r border-white/10 text-right">17,81 €</td>
                    <td className="p-2.5 text-right text-emerald-400 font-extrabold text-sm">163,50 €</td>
                  </tr>
                </tbody>
              </table>
            </div>

            {/* Category Mapping Badge */}
            <div className="flex justify-between items-center bg-[#161C22] border border-white/10 px-4 py-2 font-mono text-xs text-[#94A3B8]">
              <span>{isDe ? "Kategorie:" : "Category:"} <strong className="text-white">{isDe ? "KFZ / Treibstoff (aus Beleg)" : "Fuel & Vehicle (auto-tagged)"}</strong></span>
              <span className="text-emerald-400 font-bold">{isDe ? "1-Klick Export Bereit" : "1-Click Export Ready"}</span>
            </div>
          </div>

          {/* Bottom Telemetry Right */}
          <div className="font-mono text-[11px] text-[#94A3B8] flex items-center justify-between border-t border-white/10 pt-3 z-10">
            <span>{isDe ? "Export: Dual-Sheet .xlsx & CSV" : "Export: Dual-Sheet .xlsx & CSV"}</span>
            <span className="text-emerald-400 font-bold">{isDe ? "Summen nachgerechnet" : "Math verified"}</span>
          </div>
        </div>

        {/* ========================================================================= */}
        {/* DRAGGABLE VERTICAL SLIDER HANDLE */}
        {/* ========================================================================= */}
        <div
          className="absolute top-0 bottom-0 w-1 bg-white z-30 pointer-events-none shadow-[0_0_15px_rgba(0,0,0,0.8)]"
          style={{ left: `${sliderPos}%` }}
        >
          <div className="absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-10 h-10 bg-black text-white flex items-center justify-center border-2 border-white shadow-2xl pointer-events-auto cursor-ew-resize hover:scale-110 transition-transform">
            <ArrowLeftRight className="w-5 h-5 text-emerald-400" />
          </div>
        </div>
      </div>
      </div>
    </section>
  );
}



