"use client";

import React, { useId } from "react";
import { CreditCard, Lock, ShieldCheck, Wifi } from "lucide-react";

export type CardData = {
  holder: string;
  number: string;
  expiry: string;
  cvv: string;
  brand: "visa" | "mastercard" | "troy" | "generic";
};

type Props = {
  card: CardData;
  onChange: (card: CardData) => void;
};

export function detectCardBrand(number: string): CardData["brand"] {
  const clean = number.replace(/\s+/g, "");
  if (/^4/.test(clean)) return "visa";
  if (/^(5[1-5]|2[2-7])/.test(clean)) return "mastercard";
  if (/^9792/.test(clean)) return "troy";
  return "generic";
}

export function CreditCardPreviewAndInputs({ card, onChange }: Props) {
  const nameId = useId();
  const numId = useId();
  const expId = useId();
  const cvvId = useId();

  function handleNumberChange(e: React.ChangeEvent<HTMLInputElement>) {
    const raw = e.target.value.replace(/\D/g, "").slice(0, 16);
    const formatted = raw.replace(/(\d{4})(?=\d)/g, "$1 ");
    const brand = detectCardBrand(raw);
    onChange({ ...card, number: formatted, brand });
  }

  function handleExpiryChange(e: React.ChangeEvent<HTMLInputElement>) {
    let raw = e.target.value.replace(/\D/g, "").slice(0, 4);
    if (raw.length >= 2) {
      const month = parseInt(raw.slice(0, 2), 10);
      if (month > 12) raw = "12" + raw.slice(2);
      if (month === 0) raw = "01" + raw.slice(2);
      raw = raw.slice(0, 2) + "/" + raw.slice(2);
    }
    onChange({ ...card, expiry: raw });
  }

  function handleCvvChange(e: React.ChangeEvent<HTMLInputElement>) {
    const raw = e.target.value.replace(/\D/g, "").slice(0, 3);
    onChange({ ...card, cvv: raw });
  }

  function handleHolderChange(e: React.ChangeEvent<HTMLInputElement>) {
    onChange({ ...card, holder: e.target.value.toUpperCase() });
  }

  const inputCls =
    "w-full rounded-2xl border-2 border-sand-dark bg-cream/50 px-4 py-3 text-sm font-bold text-ink outline-none transition-colors placeholder:text-latte focus:border-brand-400 focus:bg-white";

  return (
    <div className="space-y-6">
      {/* 3D KART GÖRSELİ (CANLI ÖNİZLEME) */}
      <div className="relative mx-auto max-w-sm overflow-hidden rounded-3xl bg-gradient-to-tr from-slate-950 via-slate-900 to-amber-950 p-6 text-white shadow-2xl shadow-brand-500/20 ring-1 ring-white/10 sm:max-w-md">
        {/* Dekoratif Işık Efekti */}
        <div className="pointer-events-none absolute -right-12 -top-12 size-48 rounded-full bg-brand-500/20 blur-2xl" />
        <div className="pointer-events-none absolute -bottom-12 -left-12 size-48 rounded-full bg-amber-500/20 blur-2xl" />

        <div className="relative z-10 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <span className="grid size-9 place-items-center rounded-xl bg-white/10 backdrop-blur-md">
              <CreditCard className="size-5 text-amber-400" />
            </span>
            <span className="text-xs font-black tracking-widest text-slate-300">
              PETMARKET PLATINUM
            </span>
          </div>
          <Wifi className="size-5 rotate-90 text-slate-400" />
        </div>

        {/* Çip */}
        <div className="relative z-10 mt-6 flex items-center justify-between">
          <div className="h-9 w-12 rounded-lg bg-gradient-to-br from-amber-200 via-amber-300 to-amber-500 shadow-inner ring-1 ring-amber-600/50">
            <div className="grid h-full grid-cols-2 grid-rows-2 gap-1 p-1 opacity-40">
              <div className="border-b border-r border-slate-900" />
              <div className="border-b border-slate-900" />
              <div className="border-r border-slate-900" />
              <div />
            </div>
          </div>

          {/* Kart Marka Rozeti */}
          <div className="text-right">
            {card.brand === "visa" && (
              <span className="font-serif text-2xl font-black italic tracking-tighter text-white">
                VISA
              </span>
            )}
            {card.brand === "mastercard" && (
              <div className="flex items-center -space-x-2">
                <div className="size-7 rounded-full bg-red-500/90" />
                <div className="size-7 rounded-full bg-amber-400/90" />
              </div>
            )}
            {card.brand === "troy" && (
              <span className="rounded bg-sky-600 px-2 py-0.5 text-xs font-black tracking-wider text-white">
                troy
              </span>
            )}
            {card.brand === "generic" && (
              <span className="text-[11px] font-bold tracking-widest text-slate-400">
                DEBIT / CREDIT
              </span>
            )}
          </div>
        </div>

        {/* Kart Numarası */}
        <div className="relative z-10 mt-6">
          <p className="font-mono text-xl font-bold tracking-[0.22em] text-white drop-shadow sm:text-2xl">
            {card.number || "•••• •••• •••• ••••"}
          </p>
        </div>

        {/* Alt Bilgiler: Kart Sahibi & SKT */}
        <div className="relative z-10 mt-6 flex items-end justify-between text-xs">
          <div className="max-w-[65%] truncate">
            <span className="block text-[9px] font-extrabold uppercase tracking-widest text-slate-400">
              Kart Sahibi
            </span>
            <span className="block truncate font-mono text-sm font-bold uppercase tracking-wider text-white">
              {card.holder || "AD SOYAD"}
            </span>
          </div>
          <div>
            <span className="block text-[9px] font-extrabold uppercase tracking-widest text-slate-400">
              Son Kullanma
            </span>
            <span className="block font-mono text-sm font-bold text-white">
              {card.expiry || "AA/YY"}
            </span>
          </div>
        </div>
      </div>

      {/* FORM INPUTLARI */}
      <div className="grid gap-4 sm:grid-cols-2">
        <div className="sm:col-span-2">
          <label
            htmlFor={nameId}
            className="mb-1.5 block text-xs font-extrabold uppercase tracking-wider text-mocha"
          >
            Kart Üzerindeki İsim
          </label>
          <input
            id={nameId}
            required
            value={card.holder}
            onChange={handleHolderChange}
            placeholder="Kart üzerinde yazan Ad Soyad"
            autoComplete="cc-name"
            className={inputCls}
          />
        </div>

        <div className="sm:col-span-2">
          <label
            htmlFor={numId}
            className="mb-1.5 block text-xs font-extrabold uppercase tracking-wider text-mocha"
          >
            Kart Numarası
          </label>
          <div className="relative">
            <input
              id={numId}
              required
              value={card.number}
              onChange={handleNumberChange}
              placeholder="0000 0000 0000 0000"
              maxLength={19}
              inputMode="numeric"
              autoComplete="cc-number"
              className={`${inputCls} font-mono`}
            />
            <div className="pointer-events-none absolute right-4 top-1/2 -translate-y-1/2 text-xs font-black uppercase text-mocha">
              {card.brand !== "generic" && card.brand}
            </div>
          </div>
        </div>

        <div>
          <label
            htmlFor={expId}
            className="mb-1.5 block text-xs font-extrabold uppercase tracking-wider text-mocha"
          >
            Son Kullanma Tarihi
          </label>
          <input
            id={expId}
            required
            value={card.expiry}
            onChange={handleExpiryChange}
            placeholder="AA / YY"
            maxLength={5}
            inputMode="numeric"
            autoComplete="cc-exp"
            className={`${inputCls} font-mono text-center`}
          />
        </div>

        <div>
          <label
            htmlFor={cvvId}
            className="mb-1.5 flex items-center justify-between text-xs font-extrabold uppercase tracking-wider text-mocha"
          >
            <span>Güvenlik Kodu (CVV)</span>
            <span className="text-[10px] font-bold text-latte lowercase">kartın arkasındaki 3 hane</span>
          </label>
          <input
            id={cvvId}
            required
            type="password"
            value={card.cvv}
            onChange={handleCvvChange}
            placeholder="•••"
            maxLength={3}
            inputMode="numeric"
            autoComplete="cc-csc"
            className={`${inputCls} font-mono text-center tracking-widest`}
          />
        </div>

        <div className="sm:col-span-2">
          <div className="flex items-center gap-2 rounded-xl bg-emerald-50 p-3 text-xs font-bold text-emerald-800 ring-1 ring-emerald-200">
            <ShieldCheck className="size-4 shrink-0 text-emerald-600" />
            <span>
              Ödemeniz <strong>Banka 3D Secure Güvenlik Sistemi</strong> ile SMS şifresi doğrulaması yapılarak tamamlanacaktır.
            </span>
          </div>
        </div>
      </div>
    </div>
  );
}