"use client";

import React from "react";
import Image from "next/image";
import Link from "next/link";
import { ShieldCheck } from "lucide-react";

/**
 * Inverse-surface side panel for the auth screens (desktop only).
 *
 * Uses the design system's inverse surface plus a blueprint line grid; depth
 * comes from overlapping planes and hairline outlines, never shadows or fills.
 */
export function AuthBrandPanel({ isDe }: { isDe: boolean }) {
  const steps = [
    {
      n: "01",
      title: isDe ? "Beleg ablegen" : "Drop the receipt",
      body: isDe
        ? "Foto, Scan oder PDF — Stapel-Upload inklusive."
        : "Photo, scan or PDF — batch upload included.",
    },
    {
      n: "02",
      title: isDe ? "KI liest & rechnet nach" : "AI reads & re-checks the math",
      body: isDe
        ? "Netto + MwSt = Brutto wird deterministisch geprüft."
        : "Net + VAT = gross is verified deterministically.",
    },
    {
      n: "03",
      title: isDe ? "Excel ist fertig" : "Excel is done",
      body: isDe
        ? "Dual-Sheet .xlsx mit echten Formeln oder CSV."
        : "Dual-sheet .xlsx with real formulas, or CSV.",
    },
  ];

  const stats = [
    { value: "99%", label: isDe ? "Genauigkeit" : "Accuracy" },
    { value: "<8s", label: isDe ? "Pro Beleg" : "Per receipt" },
    { value: "0", label: isDe ? "Zeilen tippen" : "Rows typed" },
  ];

  return (
    <div className="relative h-full overflow-hidden bg-[#161C22] text-white flex flex-col justify-between p-10 xl:p-14">
      {/* Blueprint grid */}
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-0 opacity-[0.16]"
        style={{
          backgroundImage:
            "linear-gradient(to right, rgba(255,255,255,.5) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.5) 1px, transparent 1px)",
          backgroundSize: "56px 56px",
        }}
      />

      {/* Brand lockup */}
      <Link href="/" className="relative flex items-center gap-3.5 group w-fit">
        <div className="w-12 h-12 bg-white p-1 overflow-hidden flex items-center justify-center shrink-0 transition-transform group-hover:scale-95">
          <Image
            src="/icon.png"
            alt=""
            width={48}
            height={48}
            className="w-full h-full object-contain"
            priority
          />
        </div>
        <div className="flex flex-col justify-center">
          <span className="font-display font-black text-lg tracking-tight leading-none">
            SCANRECEIPTS
          </span>
        </div>
      </Link>

      {/* Headline + pipeline visual */}
      <div className="relative my-10">
        <p className="font-mono text-[11px] uppercase tracking-caps text-white/40 mb-4">
          {isDe ? "Beleg → Tabelle" : "Receipt → Spreadsheet"}
        </p>
        <h2 className="font-display text-[34px] xl:text-[42px] font-bold tracking-tighter leading-[1.08] max-w-[13ch]">
          {isDe ? "Fotografieren." : "Snap it."}
          <br />
          <span className="text-white/45">{isDe ? "Excel ist fertig." : "Excel is done."}</span>
        </h2>

        <PipelineVisual isDe={isDe} />

        <ol className="mt-8 space-y-4">
          {steps.map((step) => (
            <li key={step.n} className="flex gap-4">
              <span className="font-mono text-[11px] text-white/35 pt-0.5 tabular-nums">
                {step.n}
              </span>
              <div>
                <p className="text-[14px] font-medium leading-tight">{step.title}</p>
                <p className="text-[13px] text-white/45 leading-snug mt-0.5">{step.body}</p>
              </div>
            </li>
          ))}
        </ol>
      </div>

      {/* Stats + trust */}
      <div className="relative">
        <div className="grid grid-cols-3 border-t border-white/15">
          {stats.map((stat) => (
            <div key={stat.label} className="py-5 pr-4 border-r border-white/15 last:border-r-0">
              <div className="font-display text-2xl font-bold tracking-tight tabular-nums">
                {stat.value}
              </div>
              <div className="font-mono text-[10px] uppercase tracking-caps text-white/40 mt-1">
                {stat.label}
              </div>
            </div>
          ))}
        </div>
        <p className="flex items-center gap-2 mt-5 text-[12px] text-white/45">
          <ShieldCheck className="w-4 h-4 text-emerald-500 shrink-0" aria-hidden="true" />
          {isDe ? "Sicher verschlüsselt" : "SSL encrypted"}
        </p>
      </div>
    </div>
  );
}

/** Receipt strip transforming into spreadsheet rows, with a passing scan line. */
function PipelineVisual({ isDe }: { isDe: boolean }) {
  return (
    <div className="mt-8 grid grid-cols-[minmax(0,88px)_auto_minmax(0,1fr)] items-stretch gap-4">
      {/* Receipt */}
      <div className="relative overflow-hidden bg-white/[0.04] border border-white/15 p-3">
        <div className="space-y-1.5">
          <div className="h-1.5 w-3/4 bg-white/30" />
          <div className="h-1 w-1/2 bg-white/15" />
          <div className="h-px w-full bg-white/15 my-2" />
          {[62, 78, 45, 70, 55].map((width, index) => (
            <div key={index} className="flex items-center gap-1">
              <div className="h-1 bg-white/20" style={{ width: `${width}%` }} />
            </div>
          ))}
          <div className="h-px w-full bg-white/15 my-2" />
          <div className="h-1.5 w-2/3 bg-white/40" />
        </div>
        <div className="auth-scanline" aria-hidden="true" />
      </div>

      {/* Arrow */}
      <div className="flex flex-col items-center justify-center gap-2 px-1">
        <span className="font-mono text-[9px] uppercase tracking-wider text-white/35">OCR</span>
        <div className="h-px w-8 bg-white/25 relative">
          <span className="absolute -right-px -top-[3px] w-[7px] h-[7px] border-t border-r border-white/40 rotate-45" />
        </div>
      </div>

      {/* Spreadsheet */}
      <div className="bg-white/[0.04] border border-white/15">
        <div className="grid grid-cols-4 border-b border-white/15">
          {[
            isDe ? "DATUM" : "DATE",
            isDe ? "HÄNDLER" : "MERCHANT",
            isDe ? "MWST" : "VAT",
            isDe ? "BRUTTO" : "GROSS",
          ].map((header) => (
            <div
              key={header}
              className="px-2 py-1.5 font-mono text-[8px] uppercase tracking-wider text-white/45 border-r border-white/15 last:border-r-0 truncate"
            >
              {header}
            </div>
          ))}
        </div>
        {[0, 1, 2, 3].map((row) => (
          <div key={row} className="grid grid-cols-4 border-b border-white/10 last:border-b-0">
            {[0, 1, 2, 3].map((cell) => (
              <div
                key={cell}
                className="px-2 py-[7px] border-r border-white/10 last:border-r-0"
              >
                <div
                  className="h-1 bg-white/25 auth-cell-in"
                  style={{
                    width: `${[70, 90, 45, 60][cell]}%`,
                    animationDelay: `${row * 0.12 + cell * 0.05}s`,
                  }}
                />
              </div>
            ))}
          </div>
        ))}
        <div className="grid grid-cols-4 bg-white/[0.06]">
          <div className="col-span-3 px-2 py-[7px] font-mono text-[8px] uppercase tracking-wider text-white/40">
            {isDe ? "=SUMME(D2:D5)" : "=SUM(D2:D5)"}
          </div>
          <div className="px-2 py-[7px] border-l border-white/10">
            <div className="h-1 w-3/4 bg-emerald-500/70" />
          </div>
        </div>
      </div>
    </div>
  );
}
