CardInput

"use client";

import * as React from "react";
import { cn } from "@/lib/ledger/cn";

type Network = "visa" | "mastercard" | "amex" | "discover" | null;

/** IIN detection — the mark appears inline as soon as it is knowable. */
function detectNetwork(pan: string): Network {
  const d = pan.replace(/\D/g, "");
  if (/^4/.test(d)) return "visa";
  if (/^(5[1-5]|2[2-7])/.test(d)) return "mastercard";
  if (/^3[47]/.test(d)) return "amex";
  if (/^6(?:011|5)/.test(d)) return "discover";
  return null;
}

function luhn(pan: string): boolean {
  const d = pan.replace(/\D/g, "");
  if (d.length < 12) return false;
  let sum = 0;
  let double = false;
  for (let i = d.length - 1; i >= 0; i--) {
    let n = Number(d[i]);
    if (double) {
      n *= 2;
      if (n > 9) n -= 9;
    }
    sum += n;
    double = !double;
  }
  return sum % 10 === 0;
}

function groupPan(pan: string, network: Network): string {
  const d = pan.replace(/\D/g, "").slice(0, network === "amex" ? 15 : 19);
  if (network === "amex") {
    return [d.slice(0, 4), d.slice(4, 10), d.slice(10, 15)].filter(Boolean).join(" ");
  }
  return (d.match(/.{1,4}/g) ?? []).join(" ");
}

export interface CardInputProps {
  className?: string;
  onChange?: (value: { pan: string; expiry: string; cvc: string; valid: boolean }) => void;
}

/**
 * Correct autocomplete tokens, Luhn validation, IIN detection, auto-advance —
 * and backspace returning to the previous field, the detail everyone forgets.
 */
export function CardInput({ className, onChange }: CardInputProps) {
  const [pan, setPan] = React.useState("");
  const [expiry, setExpiry] = React.useState("");
  const [cvc, setCvc] = React.useState("");
  const panRef = React.useRef<HTMLInputElement>(null);
  const expRef = React.useRef<HTMLInputElement>(null);
  const cvcRef = React.useRef<HTMLInputElement>(null);

  const network = detectNetwork(pan);
  const cvcLength = network === "amex" ? 4 : 3;
  const panDigits = pan.replace(/\D/g, "");
  const panValid = luhn(pan);

  React.useEffect(() => {
    onChange?.({
      cvc,
      expiry,
      pan: panDigits,
      valid: panValid && /^\d{2}\/\d{2}$/.test(expiry) && cvc.length === cvcLength,
    });
  }, [panDigits, expiry, cvc, panValid, cvcLength, onChange]);

  return (
    <div className={cn("grid grid-cols-2 gap-3", className)}>
      <label className="col-span-2 block">
        <span className="mb-2 block text-label font-medium text-text-secondary">Card number</span>
        <span
          className={cn(
            "flex items-center gap-2 rounded-sm border bg-surface px-3",
            pan && !panValid ? "border-negative" : "border-border focus-within:border-accent",
          )}
        >
          <input
            aria-invalid={pan.length > 0 && !panValid}
            aria-label="Card number"
            autoComplete="cc-number"
            className="reference-numeric h-10 w-0 min-w-0 flex-1 bg-transparent text-body outline-none"
            inputMode="numeric"
            onChange={(e) => {
              const next = e.target.value;
              setPan(next);
              const digits = next.replace(/\D/g, "");
              const full = detectNetwork(next) === "amex" ? 15 : 16;
              if (digits.length >= full) expRef.current?.focus();
            }}
            placeholder="1234 5678 9012 3456"
            ref={panRef}
            type="text"
            value={groupPan(pan, network)}
          />
          {network ? (
            <span className="ledger-crossfade text-caption font-semibold uppercase text-text-secondary">
              {network}
              <span className="sr-only"> card</span>
            </span>
          ) : null}
        </span>
      </label>

      <label className="block">
        <span className="mb-2 block text-label font-medium text-text-secondary">Expiry</span>
        <input
          aria-label="Expiry date, month and year"
          autoComplete="cc-exp"
          className="reference-numeric h-10 w-full rounded-sm border border-border bg-surface px-3 text-body outline-none focus-visible:border-accent"
          inputMode="numeric"
          onChange={(e) => {
            const d = e.target.value.replace(/\D/g, "").slice(0, 4);
            const next = d.length > 2 ? `${d.slice(0, 2)}/${d.slice(2)}` : d;
            setExpiry(next);
            if (d.length === 4) cvcRef.current?.focus();
          }}
          onKeyDown={(e) => {
            if (e.key === "Backspace" && expiry === "") panRef.current?.focus();
          }}
          placeholder="MM/YY"
          ref={expRef}
          type="text"
          value={expiry}
        />
      </label>

      <label className="block">
        <span className="mb-2 block text-label font-medium text-text-secondary">Security code</span>
        <input
          aria-label="Security code"
          autoComplete="cc-csc"
          className="reference-numeric h-10 w-full rounded-sm border border-border bg-surface px-3 text-body outline-none focus-visible:border-accent"
          inputMode="numeric"
          onChange={(e) => setCvc(e.target.value.replace(/\D/g, "").slice(0, cvcLength))}
          onKeyDown={(e) => {
            if (e.key === "Backspace" && cvc === "") expRef.current?.focus();
          }}
          placeholder={"•".repeat(cvcLength)}
          ref={cvcRef}
          type="text"
          value={cvc}
        />
      </label>

      {pan && !panValid ? (
        <p className="col-span-2 text-caption text-negative" role="alert">
          That card number doesn’t look right — check the digits.
        </p>
      ) : null}
    </div>
  );
}