"use client";

import { Cpu, Wifi } from "lucide-react";

import { cn } from "@/lib/utils";

type Brand = "visa" | "mastercard" | "amex" | "troy" | "unknown";

function detectBrand(num: string): Brand {
  const n = num.replace(/\s/g, "");
  if (/^4/.test(n)) return "visa";
  if (/^(5[1-5]|2[2-7])/.test(n)) return "mastercard";
  if (/^3[47]/.test(n)) return "amex";
  if (/^(9792|65)/.test(n)) return "troy";
  return "unknown";
}

function BrandLogo({ brand }: { brand: Brand }) {
  const base = "text-white/95 font-black tracking-tight";
  if (brand === "visa") {
    return <span className={cn(base, "text-2xl italic font-serif")}>VISA</span>;
  }
  if (brand === "mastercard") {
    return (
      <div className="flex items-center">
        <div className="size-7 rounded-full bg-red-500" />
        <div className="-ml-3 size-7 rounded-full bg-amber-400 mix-blend-screen" />
      </div>
    );
  }
  if (brand === "amex") {
    return <span className={cn(base, "text-base")}>AMEX</span>;
  }
  if (brand === "troy") {
    return <span className={cn(base, "text-xl tracking-widest")}>troy</span>;
  }
  return (
    <div className="size-8 rounded-full border-2 border-white/40 border-dashed" />
  );
}

function maskedNumber(num: string): string {
  const digits = num.replace(/\D/g, "").slice(0, 16);
  const padded = digits.padEnd(16, "•");
  return padded.match(/.{1,4}/g)?.join(" ") ?? "";
}

type Props = {
  number: string;
  name: string;
  expiry: string;
  cvc: string;
  flipped: boolean;
};

export function CreditCardVisual({ number, name, expiry, cvc, flipped }: Props) {
  const brand = detectBrand(number);
  const display = maskedNumber(number);
  const cvcDisplay = cvc.padEnd(3, "•").slice(0, 4);

  return (
    <div className="w-full" style={{ perspective: "1200px" }}>
      <div
        className={cn(
          "relative aspect-[1.586/1] w-full transition-transform duration-700 will-change-transform",
        )}
        style={{
          transformStyle: "preserve-3d",
          transform: flipped ? "rotateY(180deg)" : "rotateY(0deg)",
        }}
      >
        {/* FRONT */}
        <div
          className="absolute inset-0 rounded-2xl p-5 sm:p-6 shadow-xl overflow-hidden"
          style={{
            backfaceVisibility: "hidden",
            background:
              "linear-gradient(135deg, oklch(0.32 0.04 260) 0%, oklch(0.20 0.04 260) 60%, oklch(0.12 0.03 260) 100%)",
          }}
        >
          <div
            className="absolute inset-0 opacity-30 mix-blend-overlay"
            style={{
              background:
                "radial-gradient(circle at 20% 0%, rgba(255,255,255,0.4), transparent 40%), radial-gradient(circle at 80% 100%, rgba(255,255,255,0.2), transparent 50%)",
            }}
          />

          <div className="relative flex h-full flex-col justify-between text-white">
            <div className="flex items-start justify-between">
              <div className="flex items-center gap-3">
                <Cpu className="size-9 text-amber-300/80" strokeWidth={1.25} />
                <Wifi className="size-5 rotate-90 text-white/60" />
              </div>
              <BrandLogo brand={brand} />
            </div>

            <div className="space-y-3">
              <div className="font-mono text-lg tracking-[0.2em] sm:text-xl">
                {display}
              </div>
              <div className="grid grid-cols-[1fr_auto] gap-4 text-xs sm:text-sm">
                <div>
                  <div className="text-white/50 text-[10px] uppercase tracking-wider">
                    Kart sahibi
                  </div>
                  <div className="font-medium uppercase truncate">
                    {name || "AD SOYAD"}
                  </div>
                </div>
                <div className="text-right">
                  <div className="text-white/50 text-[10px] uppercase tracking-wider">
                    Son kullanma
                  </div>
                  <div className="font-mono">{expiry || "AA/YY"}</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* BACK */}
        <div
          className="absolute inset-0 rounded-2xl shadow-xl overflow-hidden"
          style={{
            backfaceVisibility: "hidden",
            transform: "rotateY(180deg)",
            background:
              "linear-gradient(135deg, oklch(0.28 0.04 260) 0%, oklch(0.18 0.04 260) 60%, oklch(0.10 0.03 260) 100%)",
          }}
        >
          <div className="mt-6 h-12 w-full bg-black/80" />
          <div className="px-5 pt-5 sm:px-6">
            <div className="flex items-center gap-3">
              <div className="bg-white/90 flex h-9 flex-1 items-center justify-end rounded-sm px-3 font-mono text-sm text-slate-800">
                {cvcDisplay}
              </div>
              <div className="text-white/70 text-[10px] uppercase tracking-wider">
                CVC
              </div>
            </div>
            <div className="text-white/40 mt-6 text-[10px] leading-relaxed">
              Bu kart yalnızca İşletmem mock test akışı içindir. Gerçek bir banka kartı
              değildir, hiçbir tahsilat yapılmaz.
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
