PaymentMethodCard

"use client";

import * as React from "react";
import { useFinePointer, useReducedMotion } from "@/hooks/ledger/use-media-query";
import { cn } from "@/lib/ledger/cn";

export interface PaymentMethodCardProps extends Omit<React.ComponentPropsWithoutRef<"div">, "onChange"> {
  cvv?: string;
  expiry: string;
  holder: string;
  last4: string;
  network: "visa" | "mastercard" | "amex";
  tint?: string;
}

/**
 * The physical object, at ISO/IEC 7810 ID-1 proportions.
 *
 * 85.60 × 53.98 mm → aspect-ratio 1.586, radius 3.18mm → 3.7% of width, 5.9% of height.
 * A card at 16:9 with a 24px radius reads as a rectangle, not as a card.
 *
 * The pointer tilt is decorative and is licensed only because the card
 * itself is decorative. The same effect on a KpiCard is a review failure.
 */
export const PaymentMethodCard = React.forwardRef<HTMLDivElement, PaymentMethodCardProps>(
  ({ className, holder, last4, expiry, network, cvv, tint = "oklch(0.34 0.06 258)", ...props }, ref) => {
    const [flipped, setFlipped] = React.useState(false);
    const [tilt, setTilt] = React.useState({ sheen: 0, x: 0, y: 0 });
    /* Two motions share one transform. The tilt follows the pointer, so it has
       to land almost at once or the card lags behind the hand; the flip is a
       turn the reader asked for and wants to watch. Each gets its own curve. */
    const [turning, setTurning] = React.useState(false);
    const fine = useFinePointer();
    const reduced = useReducedMotion();

    const onMove = (e: React.PointerEvent<HTMLDivElement>) => {
      if (!fine || reduced) return;
      const rect = e.currentTarget.getBoundingClientRect();
      const px = (e.clientX - rect.left) / rect.width - 0.5;
      const py = (e.clientY - rect.top) / rect.height - 0.5;
      setTilt({ sheen: 0.12, x: -py * 8, y: px * 8 });
    };

    const onLeave = () => setTilt({ sheen: 0, x: 0, y: 0 });

    return (
      <div className={cn("w-full max-w-[360px] [perspective:1200px]", className)} ref={ref} {...props}>
        <div
          className="relative w-full [transform-style:preserve-3d]"
          onPointerLeave={onLeave}
          onPointerMove={onMove}
          onTransitionEnd={(e) => {
            if (e.target === e.currentTarget) setTurning(false);
          }}
          style={{
            aspectRatio: "1.586",
            transform: `rotateX(${tilt.x}deg) rotateY(${tilt.y + (flipped ? 180 : 0)}deg)`,
            transition: reduced
              ? "none"
              : turning
                ? "transform 480ms var(--ease-in-out)"
                : "transform var(--duration-3) var(--ease-out)",
          }}
        >
          {/* Face */}
          <div
            className="absolute inset-0 flex flex-col justify-between overflow-hidden p-5 [backface-visibility:hidden]"
            style={{
              background: tint,
              borderRadius: "3.7% / 5.9%",
              color: "oklch(0.98 0.005 258)",
            }}
          >
            <div
              aria-hidden="true"
              className="pointer-events-none absolute inset-0 transition-opacity duration-2 ease-out"
              style={{
                background:
                  "linear-gradient(115deg, transparent 30%, oklch(1 0 0 / 0.5) 50%, transparent 70%)",
                opacity: tilt.sheen,
              }}
            />
            <div className="flex items-start justify-between">
              <div aria-hidden="true" className="h-7 w-9 rounded-[3px] bg-[oklch(0.82_0.08_85)]" />
              <NetworkMark network={network} />
            </div>
            <div>
              <p className="reference-numeric text-title-md">
                <span aria-hidden="true">•••• •••• •••• {last4}</span>
                <span className="sr-only">card ending {last4}</span>
              </p>
              <div className="mt-3 flex items-end justify-between">
                <p className="text-label uppercase tracking-[0.06em]">{holder}</p>
                <p className="reference-numeric text-label">{expiry}</p>
              </div>
            </div>
          </div>

          {/* Reverse — the CVV is not in the DOM until revealed. */}
          <div
            className="absolute inset-0 flex flex-col justify-center gap-4 overflow-hidden py-5 [backface-visibility:hidden] [transform:rotateY(180deg)]"
            style={{ background: tint, borderRadius: "3.7% / 5.9%", color: "oklch(0.98 0.005 258)" }}
          >
            <div aria-hidden="true" className="h-10 w-full bg-[oklch(0.2_0.01_258)]" />
            <div className="flex items-center justify-end gap-3 px-5">
              <span className="text-caption opacity-80">CVV</span>
              <span className="reference-numeric rounded-xs bg-[oklch(1_0_0/0.9)] px-3 py-1 text-label text-[oklch(0.2_0.01_258)]">
                {flipped && cvv ? cvv : "•••"}
              </span>
            </div>
          </div>
        </div>

        <button
          aria-pressed={flipped}
          className="mt-3 text-label font-medium text-accent hover:underline"
          onClick={() => {
            setTurning(!reduced);
            setFlipped((f) => !f);
          }}
          type="button"
        >
          {flipped ? "Hide security code" : "Show security code"}
        </button>
      </div>
    );
  },
);
PaymentMethodCard.displayName = "PaymentMethodCard";

function NetworkMark({ network }: { network: "visa" | "mastercard" | "amex" }) {
  if (network === "mastercard") {
    return (
      <svg aria-label="Mastercard" height="24" role="img" viewBox="0 0 40 24" width="40">
        <circle cx="15" cy="12" fill="oklch(0.7 0.17 40)" r="8" />
        <circle cx="25" cy="12" fill="oklch(0.75 0.15 75)" opacity="0.85" r="8" />
      </svg>
    );
  }
  return (
    <span className="text-label font-semibold uppercase tracking-[0.08em]">
      {network === "amex" ? "Amex" : "Visa"}
    </span>
  );
}