E-commerce Storefront with Test-Mode Checkout Demo

/**
 * The storefront "server". Each export mirrors one NestJS controller method; the body is what the
 * service layer would do inside PostgreSQL. Handlers are pure: they take the current DB and return
 * the next one, so a failed transaction simply returns the untouched DB (that is the ROLLBACK).
 *
 * Every response carries `sql`: the statements the production service would send, in order.
 */
import { z } from "zod";
import {
  findVariant,
  fromPrice,
  totals,
  totalStock,
  variantLabel,
  type Category,
  type DB,
  type Order,
  type OrderLine,
  type PaymentIntent,
  type Product,
} from "./db";

export type ApiError = { error: string; message: string; fields?: Record<string, string> };
export type Res<T> =
  | { ok: true; status: number; body: T; sql: string[]; headers?: Record<string, string> }
  | { ok: false; status: number; body: ApiError; sql: string[]; headers?: Record<string, string> };
export type Handled<T> = { db: DB; res: Res<T> };

const ok = <T>(db: DB, status: number, body: T, sql: string[], headers?: Record<string, string>): Handled<T> => ({
  db,
  res: { ok: true, status, body, sql, headers },
});
const fail = <T>(db: DB, status: number, error: string, message: string, sql: string[], fields?: Record<string, string>): Handled<T> => ({
  db,
  res: { ok: false, status, body: { error, message, fields }, sql },
});

/* ------------------------------------------------------------------ */
/* GET /api/products                                                   */
/* ------------------------------------------------------------------ */

export type Sort = "featured" | "price-asc" | "price-desc" | "name";
export type ProductQuery = { q: string; category: Category | "all"; min: number | null; max: number | null; sort: Sort; inStock: boolean };

export function listProducts(db: DB, query: ProductQuery): Handled<Product[]> {
  const where: string[] = [];
  const having: string[] = [];
  const params: (string | number)[] = [];
  const p = (v: string | number) => (params.push(v), `$${params.length}`);

  let rows = db.products;
  if (query.category !== "all") {
    where.push(`p.category = ${p(query.category)}`);
    rows = rows.filter((r) => r.category === query.category);
  }
  const q = query.q.trim().toLowerCase();
  if (q) {
    where.push(`p.search @@ websearch_to_tsquery('simple', ${p(q)})`);
    const terms = q.split(/\s+/);
    rows = rows.filter((r) => {
      const hay = `${r.name} ${r.brand} ${r.description} ${r.category}`.toLowerCase();
      return terms.every((t) => hay.includes(t));
    });
  }
  if (query.min !== null) {
    having.push(`min(v.price_cents) >= ${p(query.min * 100)}`);
    rows = rows.filter((r) => fromPrice(r) >= query.min! * 100);
  }
  if (query.max !== null) {
    having.push(`min(v.price_cents) <= ${p(query.max * 100)}`);
    rows = rows.filter((r) => fromPrice(r) <= query.max! * 100);
  }
  if (query.inStock) {
    having.push("sum(v.stock) > 0");
    rows = rows.filter((r) => totalStock(r) > 0);
  }
  const order = {
    featured: "p.rank ASC",
    "price-asc": "from_price ASC, p.id",
    "price-desc": "from_price DESC, p.id",
    name: "p.name ASC",
  }[query.sort];
  rows = [...rows].sort((a, b) => {
    switch (query.sort) {
      case "price-asc":
        return fromPrice(a) - fromPrice(b) || a.id.localeCompare(b.id);
      case "price-desc":
        return fromPrice(b) - fromPrice(a) || a.id.localeCompare(b.id);
      case "name":
        return a.name.localeCompare(b.name);
      default:
        return a.rank - b.rank;
    }
  });

  const sql = [
    [
      "SELECT p.id, p.name, p.brand, min(v.price_cents) AS from_price, sum(v.stock) AS stock",
      "FROM products p JOIN variants v ON v.product_id = p.id",
      where.length ? `WHERE ${where.join("\n  AND ")}` : null,
      "GROUP BY p.id",
      having.length ? `HAVING ${having.join(" AND ")}` : null,
      `ORDER BY ${order}`,
      "LIMIT 24;",
    ]
      .filter(Boolean)
      .join("\n"),
    `-- params: ${JSON.stringify(params)}  (${rows.length} rows)`,
  ];
  return ok(db, 200, rows, sql);
}

/* ------------------------------------------------------------------ */
/* GET /api/products/:id                                               */
/* ------------------------------------------------------------------ */

export function getProduct(db: DB, id: string): Handled<Product> {
  const sql = [
    "SELECT p.*, json_agg(v ORDER BY v.sku) AS variants\nFROM products p JOIN variants v ON v.product_id = p.id\nWHERE p.id = $1 GROUP BY p.id;",
    `-- params: ["${id}"]`,
  ];
  const product = db.products.find((p) => p.id === id);
  if (!product) return fail(db, 404, "not_found", `Product "${id}" does not exist.`, sql);
  return ok(db, 200, product, sql);
}

/* ------------------------------------------------------------------ */
/* POST /api/cart/quote  — price a cart from the catalogue             */
/* ------------------------------------------------------------------ */

/** What the browser sends. `unitCents` is what the browser *thinks* the price is; the server ignores it. */
export type CartLineInput = { sku: string; qty: number; unitCents?: number };

export type QuotedLine = OrderLine & { available: number; clientUnitCents?: number };
export type Quote = { lines: QuotedLine[]; subtotalCents: number; warnings: string[] };

function priceLines(db: DB, input: CartLineInput[]): { lines: QuotedLine[]; missing: string[]; warnings: string[] } {
  const lines: QuotedLine[] = [];
  const missing: string[] = [];
  const warnings: string[] = [];
  for (const l of input) {
    const hit = findVariant(db.products, l.sku);
    if (!hit) {
      missing.push(l.sku);
      continue;
    }
    const { product, variant } = hit;
    if (l.unitCents !== undefined && l.unitCents !== variant.priceCents) {
      warnings.push(
        `Ignored client price ${(l.unitCents / 100).toFixed(2)} for ${variant.sku}; catalogue price is ${(variant.priceCents / 100).toFixed(2)}.`,
      );
    }
    lines.push({
      sku: variant.sku,
      productId: product.id,
      name: product.name,
      variantLabel: variantLabel(variant),
      qty: l.qty,
      unitCents: variant.priceCents,
      available: variant.stock,
      clientUnitCents: l.unitCents,
    });
  }
  return { lines, missing, warnings };
}

export function quoteCart(db: DB, input: CartLineInput[]): Handled<Quote> {
  const { lines, missing, warnings } = priceLines(db, input);
  const sql = [
    "SELECT v.sku, v.price_cents, v.stock, p.name\nFROM variants v JOIN products p ON p.id = v.product_id\nWHERE v.sku = ANY($1);",
    `-- params: [${JSON.stringify(input.map((l) => l.sku))}]`,
    "-- unit prices in the request body are discarded; only sku and qty are read",
  ];
  if (missing.length) warnings.push(`Removed unknown SKU(s): ${missing.join(", ")}.`);
  return ok(db, 200, { lines, subtotalCents: lines.reduce((n, l) => n + l.unitCents * l.qty, 0), warnings }, sql);
}

/* ------------------------------------------------------------------ */
/* POST /api/orders  — validate, reserve stock, create order (one tx)  */
/* ------------------------------------------------------------------ */

export const COUNTRIES = ["United Kingdom", "Ireland", "Germany", "Netherlands", "Pakistan", "United States"] as const;

/** The DTO. In NestJS this is a class with class-validator decorators behind a global ValidationPipe; zod here. */
export const checkoutSchema = z.object({
  email: z.string().trim().email("Enter a valid email address, such as you@example.com."),
  fullName: z.string().trim().min(2, "Enter your full name."),
  address: z.string().trim().min(5, "Enter your street address."),
  city: z.string().trim().min(2, "Enter your town or city."),
  postcode: z
    .string()
    .trim()
    .regex(/^[A-Za-z0-9][A-Za-z0-9 -]{2,9}$/, "Enter a valid postcode (3–10 letters or digits)."),
  country: z.enum(COUNTRIES, { errorMap: () => ({ message: "Choose a country we ship to." }) }),
  shipping: z.enum(["standard", "express"]),
});
export type CheckoutInput = z.infer<typeof checkoutSchema>;

export function fieldErrors(err: z.ZodError): Record<string, string> {
  const out: Record<string, string> = {};
  for (const i of err.issues) {
    const k = String(i.path[0] ?? "form");
    out[k] ??= i.message;
  }
  return out;
}

export function createOrder(
  db: DB,
  input: { customer: unknown; lines: CartLineInput[]; now: number },
): Handled<{ order: Order; warnings: string[] }> {
  const parsed = checkoutSchema.safeParse(input.customer);
  if (!parsed.success) {
    return fail(db, 422, "validation_failed", "Some fields need attention.", ["-- rejected by ValidationPipe: no query was sent"], fieldErrors(parsed.error));
  }
  const cart = input.lines.filter((l) => Number.isInteger(l.qty) && l.qty > 0 && l.qty <= 99);
  if (!cart.length || cart.length !== input.lines.length) {
    return fail(db, 422, "validation_failed", "The cart is empty or has an invalid quantity (1–99 per line).", ["-- rejected by ValidationPipe: no query was sent"]);
  }

  // Work on a copy: nothing reaches `db` unless every statement succeeds.
  const tx = structuredClone(db);
  const skus = [...new Set(cart.map((l) => l.sku))].sort();
  const sql = [
    "BEGIN;",
    `SELECT sku, price_cents, stock FROM variants\nWHERE sku = ANY($1) ORDER BY sku\nFOR UPDATE;  -- row locks; sorted to avoid deadlocks\n-- params: [${JSON.stringify(skus)}]`,
  ];
  const { lines, missing, warnings } = priceLines(tx, cart);
  if (missing.length) {
    sql.push("ROLLBACK;");
    return fail(db, 404, "sku_not_found", `These items no longer exist: ${missing.join(", ")}.`, sql);
  }

  for (const line of lines) {
    const variant = findVariant(tx.products, line.sku)!.variant;
    if (variant.stock < line.qty) {
      sql.push(`-- ${line.sku}: requested ${line.qty}, in stock ${variant.stock}`, "ROLLBACK;");
      return fail(
        db,
        409,
        "insufficient_stock",
        variant.stock === 0
          ? `${line.name} (${line.variantLabel}) just sold out.`
          : `Only ${variant.stock} left of ${line.name} (${line.variantLabel}). Lower the quantity and try again.`,
        sql,
      );
    }
    variant.stock -= line.qty;
    sql.push(`UPDATE variants SET stock = stock - $2 WHERE sku = $1;  -- [${line.sku}, ${line.qty}] → ${variant.stock} left`);
  }

  const c = parsed.data;
  const subtotal = lines.reduce((n, l) => n + l.unitCents * l.qty, 0);
  const t = totals(subtotal, c.shipping);
  const id = tx.nextOrderId++;
  const order: Order = {
    id,
    number: String(1000 + id),
    status: "pending_payment",
    ...c,
    lines: lines.map(({ sku, productId, name, variantLabel, qty, unitCents }) => ({ sku, productId, name, variantLabel, qty, unitCents })),
    ...t,
    createdAt: input.now,
    paidAt: null,
    paymentIntentId: null,
    card: null,
  };
  tx.orders.unshift(order);
  sql.push(
    `INSERT INTO orders (email, full_name, address, shipping, subtotal_cents, shipping_cents, tax_cents, total_cents, status)\nVALUES ($1, $2, $3, '${c.shipping}', ${t.subtotalCents}, ${t.shippingCents}, ${t.taxCents}, ${t.totalCents}, 'pending_payment')\nRETURNING id;  -- ${id}`,
    `INSERT INTO order_lines (order_id, sku, qty, unit_cents) VALUES\n${order.lines.map((l) => `  (${id}, '${l.sku}', ${l.qty}, ${l.unitCents})`).join(",\n")};`,
    "COMMIT;",
  );
  return ok(tx, 201, { order, warnings }, sql);
}

/* ------------------------------------------------------------------ */
/* POST /api/orders/:id/cancel  — release reserved stock               */
/* ------------------------------------------------------------------ */

export function cancelOrder(db: DB, orderId: number): Handled<Order> {
  const sql = ["BEGIN;", `SELECT status FROM orders WHERE id = $1 FOR UPDATE;  -- [${orderId}]`];
  const tx = structuredClone(db);
  const order = tx.orders.find((o) => o.id === orderId);
  if (!order) return fail(db, 404, "not_found", `Order ${orderId} does not exist.`, [...sql, "ROLLBACK;"]);
  if (order.status !== "pending_payment") {
    return fail(db, 409, "invalid_state", `Order #${order.number} is ${order.status.replace("_", " ")} and cannot be cancelled here.`, [...sql, "ROLLBACK;"]);
  }
  for (const l of order.lines) {
    const hit = findVariant(tx.products, l.sku);
    if (hit) hit.variant.stock += l.qty;
  }
  order.status = "cancelled";
  const intent = tx.intents.find((i) => i.orderId === orderId && i.status !== "succeeded");
  if (intent) intent.status = "canceled";
  sql.push(
    "UPDATE variants v SET stock = v.stock + ol.qty\nFROM order_lines ol WHERE ol.order_id = $1 AND ol.sku = v.sku;",
    "UPDATE orders SET status = 'cancelled' WHERE id = $1;",
    ...(intent ? [`UPDATE payment_intents SET status = 'canceled' WHERE id = '${intent.id}';`, `-- → payment provider: POST /v1/payment_intents/${intent.id}/cancel`] : []),
    "COMMIT;",
  );
  return ok(tx, 200, order, sql);
}

/* ------------------------------------------------------------------ */
/* POST /api/payments/intents   (Idempotency-Key header)               */
/* ------------------------------------------------------------------ */

export function createIntent(db: DB, input: { orderId: number; idempotencyKey: string }): Handled<PaymentIntent> {
  const key = input.idempotencyKey;
  const sql = [`SELECT intent_id FROM idempotency_keys WHERE key = $1;  -- ['${key}']`];
  const replay = db.idempotency[key];
  if (replay) {
    const intent = db.intents.find((i) => i.id === replay)!;
    sql.push("-- key seen before: return the stored response, create nothing");
    return ok(db, 200, intent, sql, { "Idempotent-Replayed": "true" });
  }

  const tx = structuredClone(db);
  const order = tx.orders.find((o) => o.id === input.orderId);
  sql.push("BEGIN;", `SELECT id, status, total_cents FROM orders WHERE id = $1 FOR UPDATE;  -- [${input.orderId}]`);
  if (!order) return fail(db, 404, "not_found", `Order ${input.orderId} does not exist.`, [...sql, "ROLLBACK;"]);
  if (order.status !== "pending_payment") {
    return fail(db, 409, "invalid_state", `Order #${order.number} is already ${order.status.replace("_", " ")}.`, [...sql, "ROLLBACK;"]);
  }

  // One open intent per order: a second tab or a retried request reuses it instead of charging twice.
  let intent = tx.intents.find((i) => i.orderId === order.id && i.status !== "canceled");
  if (intent) {
    sql.push(`SELECT id FROM payment_intents WHERE order_id = $1 AND status <> 'canceled';  -- reuse ${intent.id}`);
  } else {
    intent = {
      id: `pi_test_${(order.id * 7919).toString(36)}${tx.intents.length}`,
      orderId: order.id,
      amountCents: order.totalCents, // amount comes from the order row, never from the browser
      status: "requires_payment_method",
      lastError: null,
    };
    tx.intents.push(intent);
    order.paymentIntentId = intent.id;
    sql.push(
      `-- → payment provider: POST /v1/payment_intents amount=${order.totalCents} currency=usd (Idempotency-Key forwarded)`,
      `INSERT INTO payment_intents (id, order_id, amount_cents, status) VALUES ('${intent.id}', ${order.id}, ${order.totalCents}, 'requires_payment_method');`,
      `UPDATE orders SET payment_intent_id = '${intent.id}' WHERE id = ${order.id};`,
    );
  }
  tx.idempotency[key] = intent.id;
  sql.push(`INSERT INTO idempotency_keys (key, intent_id) VALUES ('${key}', '${intent.id}');`, "COMMIT;");
  return ok(tx, 201, intent, sql);
}

/* ------------------------------------------------------------------ */
/* Browser-side tokenisation (stand-in for the provider's JS SDK)      */
/* ------------------------------------------------------------------ */

export const TEST_CARDS = [
  { number: "4242 4242 4242 4242", pm: "pm_card_visa", outcome: "Succeeds" },
  { number: "4000 0000 0000 0002", pm: "pm_card_chargeDeclined", outcome: "Declined" },
  { number: "4000 0000 0000 3220", pm: "pm_card_threeDSecure2Required", outcome: "Asks for 3-D Secure" },
] as const;
export type PaymentMethodId = (typeof TEST_CARDS)[number]["pm"];

export function luhn(digits: string): boolean {
  let sum = 0;
  for (let i = 0; i < digits.length; i++) {
    let d = Number(digits[digits.length - 1 - i]);
    if (i % 2 === 1) {
      d *= 2;
      if (d > 9) d -= 9;
    }
    sum += d;
  }
  return digits.length >= 12 && sum % 10 === 0;
}

/**
 * Turns card fields into a payment-method id. In production this runs inside the provider's iframe,
 * so card numbers never touch our servers. Here it only accepts the published test numbers.
 */
export function tokenizeCard(
  input: { number: string; expiry: string; cvc: string },
  now: Date,
): { ok: true; pm: PaymentMethodId; last4: string } | { ok: false; fields: Record<string, string> } {
  const fields: Record<string, string> = {};
  const digits = input.number.replace(/\D/g, "");
  const card = TEST_CARDS.find((c) => c.number.replace(/\s/g, "") === digits);
  if (!digits) fields.number = "Enter a card number.";
  else if (!luhn(digits)) fields.number = "That card number is not valid.";
  else if (!card) fields.number = "Test mode only accepts the test cards listed above. Never enter a real card here.";

  const m = /^(\d{2})\s*\/\s*(\d{2})$/.exec(input.expiry.trim());
  if (!m) fields.expiry = "Use MM / YY.";
  else {
    const month = Number(m[1]);
    const year = 2000 + Number(m[2]);
    const endOfMonth = new Date(year, month, 1);
    if (month < 1 || month > 12) fields.expiry = "Month must be 01–12.";
    else if (endOfMonth <= now) fields.expiry = "This card has expired.";
  }
  if (!/^\d{3,4}$/.test(input.cvc.trim())) fields.cvc = "Enter the 3 or 4 digit security code.";

  if (Object.keys(fields).length || !card) return { ok: false, fields };
  return { ok: true, pm: card.pm, last4: digits.slice(-4) };
}

/* ------------------------------------------------------------------ */
/* POST /api/payments/intents/:id/confirm                              */
/* ------------------------------------------------------------------ */

export type ConfirmBody = PaymentIntent & { nextAction?: "three_d_secure" };

export function confirmIntent(db: DB, input: { intentId: string; pm: PaymentMethodId; last4: string }): Handled<ConfirmBody> {
  const tx = structuredClone(db);
  const intent = tx.intents.find((i) => i.id === input.intentId);
  const sql = [`-- → payment provider: POST /v1/payment_intents/${input.intentId}/confirm payment_method=${input.pm}`];
  if (!intent) return fail(db, 404, "not_found", "Payment intent not found.", sql);
  if (intent.status === "succeeded") return ok(db, 200, intent, [...sql, "-- already succeeded: nothing to do"]);
  if (intent.status === "canceled") return fail(db, 409, "intent_canceled", "This payment was cancelled. Start checkout again.", sql);

  const order = tx.orders.find((o) => o.id === intent.orderId);
  if (order) order.card = `•••• ${input.last4}`;

  if (input.pm === "pm_card_chargeDeclined") {
    intent.status = "requires_payment_method";
    intent.lastError = "card_declined";
    sql.push(
      "-- ← 402 card_declined (decline_code: generic_decline)",
      `UPDATE payment_intents SET status = 'requires_payment_method', last_error = 'card_declined' WHERE id = '${intent.id}';`,
      "-- order stays pending_payment; reserved stock is held until the reservation expires",
    );
    return { db: tx, res: { ok: false, status: 402, body: { error: "card_declined", message: "Your card was declined. Try a different card." }, sql } };
  }
  if (input.pm === "pm_card_threeDSecure2Required") {
    intent.status = "requires_action";
    sql.push(
      "-- ← 200 status=requires_action next_action=use_stripe_sdk",
      `UPDATE payment_intents SET status = 'requires_action' WHERE id = '${intent.id}';`,
    );
    return ok(tx, 200, { ...intent, nextAction: "three_d_secure" }, sql);
  }
  intent.status = "succeeded";
  intent.lastError = null;
  sql.push(
    "-- ← 200 status=succeeded",
    `UPDATE payment_intents SET status = 'succeeded' WHERE id = '${intent.id}';`,
    "-- the order is NOT marked paid here: the signed webhook is the source of truth",
  );
  return ok(tx, 200, intent, sql);
}

/* ------------------------------------------------------------------ */
/* 3-D Secure challenge result (happens on the provider's page)        */
/* ------------------------------------------------------------------ */

export function completeAuthentication(db: DB, input: { intentId: string; approve: boolean }): Handled<PaymentIntent> {
  const tx = structuredClone(db);
  const intent = tx.intents.find((i) => i.id === input.intentId);
  const sql = [`-- → payment provider: 3-D Secure challenge for ${input.intentId} (${input.approve ? "approved" : "failed"})`];
  if (!intent || intent.status !== "requires_action") return fail(db, 409, "invalid_state", "No authentication is pending.", sql);
  if (!input.approve) {
    intent.status = "requires_payment_method";
    intent.lastError = "authentication_failed";
    sql.push(`UPDATE payment_intents SET status = 'requires_payment_method', last_error = 'authentication_failed' WHERE id = '${intent.id}';`);
    return { db: tx, res: { ok: false, status: 402, body: { error: "authentication_failed", message: "Authentication failed, so the card was not charged." }, sql } };
  }
  intent.status = "succeeded";
  intent.lastError = null;
  sql.push(`UPDATE payment_intents SET status = 'succeeded' WHERE id = '${intent.id}';`);
  return ok(tx, 200, intent, sql);
}

/* ------------------------------------------------------------------ */
/* POST /webhooks/payments  — payment_intent.succeeded                 */
/* ------------------------------------------------------------------ */

export const eventIdFor = (intentId: string) => `evt_${intentId.slice(3)}_succeeded`;

export function handleWebhook(
  db: DB,
  event: { id: string; type: "payment_intent.succeeded"; intentId: string; signatureValid: boolean },
  now: number,
): Handled<{ received: true; duplicate: boolean; orderStatus?: string }> {
  const sql = ["-- verify signature header with the endpoint secret (HMAC-SHA256, 5 min tolerance)"];
  if (!event.signatureValid) return fail(db, 400, "bad_signature", "Signature check failed; event ignored.", sql);

  sql.push("BEGIN;", `INSERT INTO webhook_events (id) VALUES ($1) ON CONFLICT (id) DO NOTHING RETURNING id;  -- ['${event.id}']`);
  if (db.events.includes(event.id)) {
    sql.push("-- 0 rows: event already processed, skip side effects", "COMMIT;");
    return ok(db, 200, { received: true, duplicate: true }, sql);
  }
  const tx = structuredClone(db);
  tx.events.push(event.id);
  const intent = tx.intents.find((i) => i.id === event.intentId);
  const order = intent ? tx.orders.find((o) => o.id === intent.orderId) : undefined;
  if (order && order.status === "pending_payment") {
    order.status = "paid";
    order.paidAt = now;
  }
  sql.push(
    `UPDATE orders SET status = 'paid', paid_at = now()\nWHERE payment_intent_id = $1 AND status = 'pending_payment';  -- ['${event.intentId}'] ${order?.status === "paid" ? "1 row" : "0 rows"}`,
    "-- enqueue: send-confirmation-email (outbox row, same transaction)",
    "COMMIT;",
  );
  return ok(tx, 200, { received: true, duplicate: false, orderStatus: order?.status }, sql);
}

/**
 * In-memory stand-in for the PostgreSQL schema of the storefront.
 * Every table below maps to a real table in the production design:
 *
 *   products (id, name, brand, category, description)
 *   variants (sku PK, product_id FK, colour, size, price_cents, stock CHECK (stock >= 0))
 *   orders (id bigserial, status, email, totals…, payment_intent_id)
 *   order_lines (order_id, sku, qty, unit_cents)          -- price copied at purchase time
 *   payment_intents (id, order_id, amount_cents, status)
 *   idempotency_keys (key PK, intent_id)                   -- replays return the stored response
 *   webhook_events (id PK)                                 -- dedupes provider retries
 */

export type Category = "apparel" | "footwear" | "home" | "accessories";
export const CATEGORIES: { id: Category; label: string }[] = [
  { id: "apparel", label: "Apparel" },
  { id: "footwear", label: "Footwear" },
  { id: "home", label: "Home" },
  { id: "accessories", label: "Accessories" },
];

export type Shape =
  | "tee"
  | "hoodie"
  | "socks"
  | "cap"
  | "beanie"
  | "sneaker"
  | "mug"
  | "lamp"
  | "plant"
  | "blanket"
  | "bag"
  | "bottle"
  | "watch"
  | "notebook"
  | "wallet";

export type Variant = {
  sku: string;
  colour: string;
  hex: string;
  size: string | null;
  priceCents: number;
  stock: number;
};

export type Product = {
  id: string;
  name: string;
  brand: string;
  category: Category;
  description: string;
  shape: Shape;
  /** Position in the "featured" sort. */
  rank: number;
  variants: Variant[];
};

export type OrderLine = {
  sku: string;
  productId: string;
  name: string;
  variantLabel: string;
  qty: number;
  unitCents: number;
};

export type ShippingMethod = "standard" | "express";

export type OrderStatus = "pending_payment" | "paid" | "cancelled";

export type Order = {
  id: number;
  number: string;
  status: OrderStatus;
  email: string;
  fullName: string;
  address: string;
  city: string;
  postcode: string;
  country: string;
  shipping: ShippingMethod;
  lines: OrderLine[];
  subtotalCents: number;
  shippingCents: number;
  taxCents: number;
  totalCents: number;
  createdAt: number;
  paidAt: number | null;
  paymentIntentId: string | null;
  card: string | null;
};

export type IntentStatus = "requires_payment_method" | "requires_action" | "succeeded" | "canceled";

export type PaymentIntent = {
  id: string;
  orderId: number;
  amountCents: number;
  status: IntentStatus;
  lastError: string | null;
};

export type DB = {
  products: Product[];
  orders: Order[];
  intents: PaymentIntent[];
  /** idempotency_keys: key -> payment intent id */
  idempotency: Record<string, string>;
  /** webhook_events: processed event ids */
  events: string[];
  nextOrderId: number;
};

/* ------------------------------------------------------------------ */
/* Seed                                                                */
/* ------------------------------------------------------------------ */

type Colour = [name: string, hex: string];

/** Deterministic pseudo-random stock so the server and client render the same catalogue. */
function stockFor(sku: string): number {
  let h = 7;
  for (const ch of sku) h = (h * 31 + ch.charCodeAt(0)) % 9973;
  const r = h % 20;
  if (r === 0) return 0;
  if (r < 3) return r; // a few nearly sold-out variants (1–2 left)
  return 4 + (h % 23);
}

function product(
  id: string,
  rank: number,
  p: Omit<Product, "id" | "rank" | "variants">,
  colours: Colour[],
  sizes: (string | null)[],
  basePrice: number,
  sizeDelta: Record<string, number> = {},
  colourDelta: Record<string, number> = {},
): Product {
  const prefix = id.toUpperCase().slice(0, 6);
  const variants: Variant[] = [];
  for (const [colour, hex] of colours) {
    for (const size of sizes) {
      const sku = [prefix, colour.slice(0, 3).toUpperCase(), size?.replace(/\s+/g, "").toUpperCase()]
        .filter(Boolean)
        .join("-");
      variants.push({
        sku,
        colour,
        hex,
        size,
        priceCents: basePrice + (size ? (sizeDelta[size] ?? 0) : 0) + (colourDelta[colour] ?? 0),
        stock: stockFor(sku),
      });
    }
  }
  return { id, rank, ...p, variants };
}

const APPAREL = ["S", "M", "L", "XL"];
const SHOES = ["40", "41", "42", "43", "44"];

export function seedProducts(): Product[] {
  return [
    product(
      "cotton-tee",
      1,
      {
        name: "Everyday Cotton Tee",
        brand: "Fieldline",
        category: "apparel",
        shape: "tee",
        description: "Midweight organic cotton with a relaxed fit. Pre-shrunk, so the size you order stays the size you wear.",
      },
      [["Black", "#27272a"], ["White", "#f4f4f5"], ["Sage", "#86a789"]],
      APPAREL,
      2400,
      { XL: 200 },
    ),
    product(
      "heavy-hoodie",
      3,
      {
        name: "Heavyweight Hoodie",
        brand: "Fieldline",
        category: "apparel",
        shape: "hoodie",
        description: "Brushed fleece inside, double-layer hood, and ribbed cuffs that keep their shape after many washes.",
      },
      [["Charcoal", "#3f3f46"], ["Sand", "#d6c4a1"]],
      APPAREL,
      6400,
      { XL: 400 },
    ),
    product(
      "merino-socks",
      9,
      {
        name: "Merino Crew Socks, 3-pack",
        brand: "Fieldline",
        category: "apparel",
        shape: "socks",
        description: "Soft merino blend with a cushioned sole. Three pairs of the same colour per pack.",
      },
      [["Grey", "#9ca3af"], ["Navy", "#1e3a8a"]],
      ["S/M", "L/XL"],
      1800,
    ),
    product(
      "work-cap",
      11,
      {
        name: "Canvas Work Cap",
        brand: "Trailhead Supply",
        category: "accessories",
        shape: "cap",
        description: "Waxed cotton canvas, six panels and a brass buckle at the back. One size fits most.",
      },
      [["Olive", "#6b7a3a"], ["Navy", "#1e3a8a"], ["Rust", "#b45309"]],
      [null],
      2800,
    ),
    product(
      "wool-beanie",
      14,
      {
        name: "Ribbed Wool Beanie",
        brand: "Fieldline",
        category: "apparel",
        shape: "beanie",
        description: "Lambswool rib knit with a deep turn-up. Warm without being itchy.",
      },
      [["Rust", "#b45309"], ["Cream", "#f5f0e1"], ["Charcoal", "#3f3f46"]],
      [null],
      2600,
    ),
    product(
      "court-sneaker",
      2,
      {
        name: "Court Low Sneaker",
        brand: "Stride Lab",
        category: "footwear",
        shape: "sneaker",
        description: "Full-grain leather upper on a stitched rubber cupsole. Runs true to size.",
      },
      [["White", "#f4f4f5"], ["Black", "#27272a"]],
      SHOES,
      8900,
    ),
    product(
      "trail-runner",
      5,
      {
        name: "Trail Runner",
        brand: "Stride Lab",
        category: "footwear",
        shape: "sneaker",
        description: "Lugged outsole, rock plate and a breathable mesh upper for mixed terrain.",
      },
      [["Slate", "#475569"], ["Orange", "#ea580c"]],
      SHOES,
      11900,
    ),
    product(
      "wool-slipper",
      15,
      {
        name: "Felted Wool Slipper",
        brand: "Stride Lab",
        category: "footwear",
        shape: "sneaker",
        description: "Boiled wool with a thin leather sole for indoors and the occasional trip to the bins.",
      },
      [["Grey", "#9ca3af"]],
      ["S", "M", "L"],
      4500,
    ),
    product(
      "stoneware-mug",
      4,
      {
        name: "Stoneware Mug 350 ml",
        brand: "Kiln Studio",
        category: "home",
        shape: "mug",
        description: "Wheel-thrown and glazed by hand, so every mug is slightly different. Dishwasher safe.",
      },
      [["Speckle", "#e7e0d4"], ["Midnight", "#1e293b"], ["Clay", "#c2410c"]],
      [null],
      1600,
    ),
    product(
      "table-lamp",
      7,
      {
        name: "Linen Table Lamp",
        brand: "Lumen Works",
        category: "home",
        shape: "lamp",
        description: "Ceramic base with a linen drum shade. Takes an E27 bulb; a warm 2700 K LED is included.",
      },
      [["Oat", "#e2d6bf"], ["Black", "#27272a"]],
      [null],
      7900,
    ),
    product(
      "plant-pot",
      12,
      {
        name: "Desk Plant Pot",
        brand: "Kiln Studio",
        category: "home",
        shape: "plant",
        description: "Unglazed terracotta or matte white with a drainage hole and matching saucer. Plant not included.",
      },
      [["Terracotta", "#c2410c"], ["White", "#f4f4f5"]],
      ["12 cm", "16 cm"],
      2200,
      { "16 cm": 700 },
    ),
    product(
      "weighted-throw",
      8,
      {
        name: "Weighted Throw Blanket",
        brand: "Harbor & Co",
        category: "home",
        shape: "blanket",
        description: "Glass-bead fill in quilted pockets so the weight stays even. Removable, washable cover.",
      },
      [["Grey", "#9ca3af"], ["Blue", "#3b82f6"]],
      ["5 kg", "7 kg"],
      9500,
      { "7 kg": 2000 },
    ),
    product(
      "rolltop-pack",
      6,
      {
        name: "Roll-top Backpack 20 L",
        brand: "Trailhead Supply",
        category: "accessories",
        shape: "bag",
        description: "Water-resistant recycled nylon, a padded laptop sleeve and a roll-top that expands to 24 L.",
      },
      [["Black", "#27272a"], ["Olive", "#6b7a3a"]],
      [null],
      9800,
    ),
    product(
      "steel-bottle",
      10,
      {
        name: "Insulated Bottle 750 ml",
        brand: "Trailhead Supply",
        category: "accessories",
        shape: "bottle",
        description: "Double-wall steel keeps drinks cold for a day or hot for half of one. Leak-proof lid.",
      },
      [["Steel", "#a1a1aa"], ["Forest", "#166534"], ["Coral", "#f97316"]],
      [null],
      3200,
    ),
    product(
      "field-watch",
      13,
      {
        name: "Field Watch 38 mm",
        brand: "Harbor & Co",
        category: "accessories",
        shape: "watch",
        description: "Quartz movement, sapphire-coated glass and a quick-release strap. Water resistant to 100 m.",
      },
      [["Leather", "#92400e"], ["Canvas", "#6b7a3a"]],
      [null],
      14900,
      {},
      { Canvas: -1000 },
    ),
    product(
      "dot-notebook",
      16,
      {
        name: "Dot-grid Notebook A5",
        brand: "Paper Mill & Co",
        category: "accessories",
        shape: "notebook",
        description: "192 numbered pages of 100 gsm paper that takes fountain pen ink without bleeding through.",
      },
      [["Black", "#27272a"], ["Sand", "#d6c4a1"]],
      [null],
      1400,
    ),
    product(
      "card-holder",
      17,
      {
        name: "Leather Card Holder",
        brand: "Harbor & Co",
        category: "accessories",
        shape: "wallet",
        description: "Vegetable-tanned leather, four card slots and a centre pocket for folded notes.",
      },
      [["Tan", "#b45309"], ["Black", "#27272a"]],
      [null],
      3900,
    ),
    product(
      "pour-over",
      18,
      {
        name: "Pour-over Coffee Set",
        brand: "Kiln Studio",
        category: "home",
        shape: "mug",
        description: "Ceramic dripper, 600 ml carafe and 50 paper filters. Makes two cups at a time.",
      },
      [["White", "#f4f4f5"]],
      [null],
      4800,
    ),
  ];
}

export function seedDb(): DB {
  return { products: seedProducts(), orders: [], intents: [], idempotency: {}, events: [], nextOrderId: 42 };
}

/* ------------------------------------------------------------------ */
/* Helpers shared by the API and the UI                                */
/* ------------------------------------------------------------------ */

export const money = (cents: number) =>
  `$${(cents / 100).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;

export const variantLabel = (v: Variant) => [v.colour, v.size].filter(Boolean).join(" / ");

export function findVariant(products: Product[], sku: string): { product: Product; variant: Variant } | null {
  for (const product of products) {
    const variant = product.variants.find((v) => v.sku === sku);
    if (variant) return { product, variant };
  }
  return null;
}

export const fromPrice = (p: Product) => Math.min(...p.variants.map((v) => v.priceCents));
export const totalStock = (p: Product) => p.variants.reduce((n, v) => n + v.stock, 0);

export const SHIPPING: Record<ShippingMethod, { label: string; eta: string; cents: number }> = {
  standard: { label: "Standard", eta: "3–5 working days", cents: 499 },
  express: { label: "Express", eta: "1–2 working days", cents: 1499 },
};
export const FREE_SHIPPING_FROM = 7500;
export const TAX_RATE = 0.08;

/** The one pricing function. The server calls it with catalogue prices; the browser only uses it for display. */
export function totals(subtotalCents: number, shipping: ShippingMethod) {
  const shippingCents = shipping === "standard" && subtotalCents >= FREE_SHIPPING_FROM ? 0 : SHIPPING[shipping].cents;
  const taxCents = Math.round(subtotalCents * TAX_RATE);
  return { subtotalCents, shippingCents, taxCents, totalCents: subtotalCents + shippingCents + taxCents };
}

"use client";

import { useEffect, useRef, useState } from "react";
import {
  COUNTRIES,
  TEST_CARDS,
  checkoutSchema,
  completeAuthentication,
  confirmIntent,
  createIntent,
  createOrder,
  eventIdFor,
  fieldErrors,
  handleWebhook,
  quoteCart,
  tokenizeCard,
  type CartLineInput,
  type CheckoutInput,
  type Handled,
  type Quote,
  type Res,
} from "./api";
import { FREE_SHIPPING_FROM, SHIPPING, money, totals, type DB, type Order, type PaymentIntent } from "./db";
import type { LogEntry } from "./DevPanel";

export type Exec = <T>(
  method: LogEntry["method"],
  path: string,
  fn: (db: DB) => Handled<T>,
  extra?: { headers?: Record<string, string>; note?: string },
) => Res<T>;

const input =
  "mt-1 w-full rounded-md border border-border bg-bg-elev px-3 py-2 text-sm outline-none focus:border-accent aria-[invalid=true]:border-danger";
const wait = (ms: number) => new Promise((r) => setTimeout(r, ms));

const EMPTY: CheckoutInput = { email: "", fullName: "", address: "", city: "", postcode: "", country: "United Kingdom", shipping: "standard" };
const SAMPLE: CheckoutInput = {
  email: "alex.morgan@example.com",
  fullName: "Alex Morgan",
  address: "14 Example Street",
  city: "Manchester",
  postcode: "M1 2AB",
  country: "United Kingdom",
  shipping: "standard",
};

function Field({ id, label, error, children }: { id: string; label: string; error?: string; children: React.ReactNode }) {
  return (
    <div>
      <label htmlFor={id} className="text-sm font-medium">
        {label}
      </label>
      {children}
      {error && (
        <p id={`${id}-err`} className="mt-1 text-xs text-danger">
          {error}
        </p>
      )}
    </div>
  );
}

function Summary({ lines, shipping, title }: { lines: { name: string; variantLabel: string; qty: number; unitCents: number; sku: string }[]; shipping: CheckoutInput["shipping"]; title: string }) {
  const t = totals(
    lines.reduce((n, l) => n + l.unitCents * l.qty, 0),
    shipping,
  );
  return (
    <aside aria-label={title} className="h-fit rounded-lg border border-border bg-bg-elev p-4 text-sm">
      <h3 className="font-mono text-xs text-fg-muted">{title}</h3>
      <ul className="mt-2 space-y-2">
        {lines.map((l) => (
          <li key={l.sku} className="flex justify-between gap-3">
            <span>
              {l.qty} × {l.name}
              <span className="block text-xs text-fg-muted">{l.variantLabel}</span>
            </span>
            <span className="font-mono">{money(l.unitCents * l.qty)}</span>
          </li>
        ))}
      </ul>
      <dl className="mt-3 space-y-1 border-t border-border pt-3 font-mono text-xs">
        <div className="flex justify-between"><dt className="text-fg-muted">Subtotal</dt><dd>{money(t.subtotalCents)}</dd></div>
        <div className="flex justify-between"><dt className="text-fg-muted">Shipping ({SHIPPING[shipping].label})</dt><dd>{t.shippingCents ? money(t.shippingCents) : "Free"}</dd></div>
        <div className="flex justify-between"><dt className="text-fg-muted">Tax (8%)</dt><dd>{money(t.taxCents)}</dd></div>
        <div className="flex justify-between text-sm font-semibold"><dt>Total</dt><dd>{money(t.totalCents)}</dd></div>
      </dl>
    </aside>
  );
}

/* ------------------------------------------------------------------ */
/* Step 1: details                                                     */
/* ------------------------------------------------------------------ */

export function DetailsStep({
  cart,
  exec,
  onCreated,
  onBack,
}: {
  cart: CartLineInput[];
  exec: Exec;
  onCreated: (order: Order) => void;
  onBack: () => void;
}) {
  const [form, setForm] = useState<CheckoutInput>(EMPTY);
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [formError, setFormError] = useState<string | null>(null);
  const [quote, setQuote] = useState<Quote | null>(null);
  const [skipClient, setSkipClient] = useState(false);
  const [busy, setBusy] = useState(false);
  const quoted = useRef(false);

  // Price the cart on the "server" once when checkout opens.
  useEffect(() => {
    if (quoted.current) return;
    quoted.current = true;
    const res = exec("POST", "/api/cart/quote", (db) => quoteCart(db, cart), {
      note: cart.some((l) => l.unitCents === 1) ? "request body contains a tampered unit price" : undefined,
    });
    if (res.ok) setQuote(res.body);
  }, [cart, exec]);

  const set = <K extends keyof CheckoutInput>(k: K, v: CheckoutInput[K]) => {
    setForm((f) => ({ ...f, [k]: v }));
    if (errors[k]) setErrors((e) => ({ ...e, [k]: "" }));
  };

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    setFormError(null);
    if (!skipClient) {
      const parsed = checkoutSchema.safeParse(form);
      if (!parsed.success) {
        const fe = fieldErrors(parsed.error);
        setErrors(fe);
        document.getElementById(`co-${Object.keys(fe)[0]}`)?.focus();
        return;
      }
    }
    setBusy(true);
    await wait(450);
    const res = exec("POST", "/api/orders", (db) => createOrder(db, { customer: form, lines: cart, now: Date.now() }));
    setBusy(false);
    if (res.ok) {
      onCreated(res.body.order);
      return;
    }
    if (res.body.fields) {
      setErrors(res.body.fields);
      setFormError(`${res.status}: ${res.body.message}`);
    } else {
      setFormError(`${res.status}: ${res.body.message}`);
    }
  }

  const err = (k: keyof CheckoutInput) => errors[k] || undefined;
  const a = (k: keyof CheckoutInput) => ({
    id: `co-${k}`,
    "aria-invalid": !!err(k),
    "aria-describedby": err(k) ? `co-${k}-err` : undefined,
  });

  return (
    <div className="grid gap-6 p-4 sm:p-6 lg:grid-cols-[1fr_18rem]">
      <form onSubmit={submit} noValidate className="space-y-4">
        <div className="flex flex-wrap items-center justify-between gap-2">
          <h2 className="text-lg font-semibold">Checkout · details</h2>
          <button type="button" onClick={() => { setForm(SAMPLE); setErrors({}); }} className="rounded border border-border px-2 py-1 font-mono text-xs hover:border-accent hover:text-accent">
            fill sample details
          </button>
        </div>
        {quote && quote.warnings.length > 0 && (
          <div role="status" className="rounded-md border border-warn-fg/40 bg-warn-bg p-3 text-sm text-warn-fg">
            <p className="font-medium">The server re-priced your cart from the catalogue.</p>
            <ul className="mt-1 list-disc pl-5 text-xs">
              {quote.warnings.map((w) => (
                <li key={w}>{w}</li>
              ))}
            </ul>
          </div>
        )}
        <div className="grid gap-4 sm:grid-cols-2">
          <Field id="co-email" label="Email" error={err("email")}>
            <input {...a("email")} type="email" autoComplete="email" value={form.email} onChange={(e) => set("email", e.target.value)} className={input} />
          </Field>
          <Field id="co-fullName" label="Full name" error={err("fullName")}>
            <input {...a("fullName")} autoComplete="name" value={form.fullName} onChange={(e) => set("fullName", e.target.value)} className={input} />
          </Field>
          <div className="sm:col-span-2">
            <Field id="co-address" label="Street address" error={err("address")}>
              <input {...a("address")} autoComplete="street-address" value={form.address} onChange={(e) => set("address", e.target.value)} className={input} />
            </Field>
          </div>
          <Field id="co-city" label="Town or city" error={err("city")}>
            <input {...a("city")} autoComplete="address-level2" value={form.city} onChange={(e) => set("city", e.target.value)} className={input} />
          </Field>
          <Field id="co-postcode" label="Postcode" error={err("postcode")}>
            <input {...a("postcode")} autoComplete="postal-code" value={form.postcode} onChange={(e) => set("postcode", e.target.value)} className={input} />
          </Field>
          <Field id="co-country" label="Country" error={err("country")}>
            <select {...a("country")} autoComplete="country-name" value={form.country} onChange={(e) => set("country", e.target.value as CheckoutInput["country"])} className={input}>
              {COUNTRIES.map((c) => (
                <option key={c}>{c}</option>
              ))}
            </select>
          </Field>
        </div>

        <fieldset>
          <legend className="text-sm font-medium">Delivery</legend>
          <div className="mt-2 grid gap-2 sm:grid-cols-2">
            {(Object.keys(SHIPPING) as CheckoutInput["shipping"][]).map((m) => {
              const free = m === "standard" && (quote?.subtotalCents ?? 0) >= FREE_SHIPPING_FROM;
              return (
                <label key={m} className={`flex cursor-pointer items-start gap-3 rounded-md border p-3 text-sm focus-within:ring-2 focus-within:ring-accent ${form.shipping === m ? "border-accent bg-accent-soft/50" : "border-border"}`}>
                  <input type="radio" name="shipping" value={m} checked={form.shipping === m} onChange={() => set("shipping", m)} className="mt-1 accent-[var(--accent)]" />
                  <span className="flex-1">
                    <span className="font-medium">{SHIPPING[m].label}</span>
                    <span className="block text-xs text-fg-muted">{SHIPPING[m].eta}</span>
                  </span>
                  <span className="font-mono text-xs">{free ? "Free" : money(SHIPPING[m].cents)}</span>
                </label>
              );
            })}
          </div>
          <p className="mt-1 text-xs text-fg-muted">Standard delivery is free on orders over {money(FREE_SHIPPING_FROM)}.</p>
        </fieldset>

        <label className="flex items-center gap-2 text-xs text-fg-muted">
          <input type="checkbox" checked={skipClient} onChange={(e) => setSkipClient(e.target.checked)} />
          Skip browser validation (send the form as-is and see the server answer 422)
        </label>

        {formError && (
          <p role="alert" className="rounded-md border border-danger/40 p-3 text-sm text-danger">
            {formError}
          </p>
        )}

        <div className="flex flex-wrap gap-3">
          <button type="button" onClick={onBack} className="rounded-md border border-border px-4 py-2 text-sm hover:border-accent">
            ← Back to shop
          </button>
          <button type="submit" disabled={busy || !cart.length} className="rounded-md bg-accent px-4 py-2 text-sm font-medium text-accent-fg hover:opacity-90 disabled:opacity-50">
            {busy ? "Reserving stock…" : "Continue to payment"}
          </button>
        </div>
      </form>
      {quote ? <Summary lines={quote.lines} shipping={form.shipping} title="Order summary (server prices)" /> : <p className="text-sm text-fg-muted">Pricing your cart…</p>}
    </div>
  );
}

/* ------------------------------------------------------------------ */
/* Step 2: payment (TEST MODE)                                         */
/* ------------------------------------------------------------------ */

function formatCard(v: string) {
  return v.replace(/\D/g, "").slice(0, 16).replace(/(\d{4})(?=\d)/g, "$1 ");
}
function formatExpiry(v: string) {
  const d = v.replace(/\D/g, "").slice(0, 4);
  return d.length > 2 ? `${d.slice(0, 2)} / ${d.slice(2)}` : d;
}

export function PaymentStep({ order, exec, onPaid, onCancel }: { order: Order; exec: Exec; onPaid: (orderId: number) => void; onCancel: (orderId: number) => void }) {
  const [intent, setIntent] = useState<PaymentIntent | null>(null);
  const [key, setKey] = useState("");
  // Card fields live only in this component's state: never persisted, never logged.
  const [card, setCard] = useState({ number: "", expiry: "", cvc: "" });
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [alert, setAlert] = useState<string | null>(null);
  const [busy, setBusy] = useState<null | "pay" | "3ds">(null);
  const [challenge, setChallenge] = useState(false);
  const started = useRef(false);
  const dialogRef = useRef<HTMLDivElement>(null);
  const payRef = useRef<HTMLButtonElement>(null);

  const startIntent = (k: string) => {
    const res = exec("POST", "/api/payments/intents", (db) => createIntent(db, { orderId: order.id, idempotencyKey: k }), {
      headers: { "Idempotency-Key": k },
    });
    if (res.ok) setIntent(res.body);
    else setAlert(`${res.status}: ${res.body.message}`);
  };

  useEffect(() => {
    if (started.current) return;
    started.current = true;
    const k = `idem_${order.id}_${Math.random().toString(36).slice(2, 10)}`;
    setKey(k);
    startIntent(k);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    if (challenge) dialogRef.current?.querySelector<HTMLButtonElement>("button")?.focus();
  }, [challenge]);

  async function succeed(intentId: string) {
    await wait(500);
    exec(
      "POST",
      "/webhooks/payments",
      (db) => handleWebhook(db, { id: eventIdFor(intentId), type: "payment_intent.succeeded", intentId, signatureValid: true }, Date.now()),
      { headers: { "Payment-Signature": "t=…,v1=hmac_sha256(…)" }, note: "event payment_intent.succeeded" },
    );
    setCard({ number: "", expiry: "", cvc: "" });
    onPaid(order.id);
  }

  async function pay(e: React.FormEvent) {
    e.preventDefault();
    if (!intent) return;
    setAlert(null);
    const tok = tokenizeCard(card, new Date());
    if (!tok.ok) {
      setErrors(tok.fields);
      document.getElementById(`pay-${Object.keys(tok.fields)[0]}`)?.focus();
      return;
    }
    setErrors({});
    setBusy("pay");
    await wait(700);
    const res = exec("POST", `/api/payments/intents/${intent.id}/confirm`, (db) => confirmIntent(db, { intentId: intent.id, pm: tok.pm, last4: tok.last4 }), {
      note: `payment_method=${tok.pm} (card number stayed in the browser)`,
    });
    setBusy(null);
    if (!res.ok) {
      setAlert(res.status === 402 ? `Payment declined: ${res.body.message} Try 4242 4242 4242 4242.` : `${res.status}: ${res.body.message}`);
      payRef.current?.focus();
      return;
    }
    setIntent(res.body);
    if (res.body.nextAction === "three_d_secure") {
      setChallenge(true);
      return;
    }
    await succeed(intent.id);
  }

  async function authenticate(approve: boolean) {
    if (!intent) return;
    setBusy("3ds");
    await wait(500);
    const res = exec("POST", `/api/payments/intents/${intent.id}/authenticate`, (db) => completeAuthentication(db, { intentId: intent.id, approve }));
    setBusy(null);
    setChallenge(false);
    if (!res.ok) {
      setAlert(`Payment not completed: ${res.body.message}`);
      payRef.current?.focus();
      return;
    }
    setIntent(res.body);
    await succeed(intent.id);
  }

  function trap(e: React.KeyboardEvent) {
    if (e.key === "Escape") {
      e.preventDefault();
      void authenticate(false);
    }
    if (e.key !== "Tab") return;
    const btns = [...(dialogRef.current?.querySelectorAll<HTMLButtonElement>("button") ?? [])];
    const first = btns[0];
    const last = btns.at(-1);
    if (e.shiftKey && document.activeElement === first) {
      e.preventDefault();
      last?.focus();
    } else if (!e.shiftKey && document.activeElement === last) {
      e.preventDefault();
      first?.focus();
    }
  }

  const a = (k: string) => ({ id: `pay-${k}`, "aria-invalid": !!errors[k], "aria-describedby": errors[k] ? `pay-${k}-err` : undefined });

  return (
    <div className="grid gap-6 p-4 sm:p-6 lg:grid-cols-[1fr_18rem]">
      <div className="space-y-4">
        <h2 className="text-lg font-semibold">Checkout · payment for order #{order.number}</h2>
        <div role="note" className="rounded-md border border-warn-fg/50 bg-warn-bg p-3 text-sm text-warn-fg">
          <p className="font-mono text-xs font-bold tracking-wide">TEST MODE: no real payment, no card data leaves your browser</p>
          <p className="mt-1 text-xs">This is a simulated payment step. Use one of the test cards below with any future expiry and any CVC. Real card numbers are refused.</p>
          <ul className="mt-2 space-y-1">
            {TEST_CARDS.map((c) => (
              <li key={c.number} className="flex flex-wrap items-center gap-2 text-xs">
                <code className="font-mono">{c.number}</code>
                <span>{c.outcome}</span>
                <button
                  type="button"
                  onClick={() => {
                    setCard({ number: c.number, expiry: "12 / 34", cvc: "123" });
                    setErrors({});
                  }}
                  className="rounded border border-warn-fg/50 px-1.5 font-mono hover:bg-warn-fg/10"
                  aria-label={`Use test card ${c.number} (${c.outcome})`}
                >
                  use
                </button>
              </li>
            ))}
          </ul>
        </div>

        <form onSubmit={pay} noValidate className="space-y-4 rounded-lg border border-border p-4">
          <Field id="pay-number" label="Card number" error={errors.number}>
            <input
              {...a("number")}
              inputMode="numeric"
              autoComplete="off"
              placeholder="4242 4242 4242 4242"
              value={card.number}
              onChange={(e) => setCard((c) => ({ ...c, number: formatCard(e.target.value) }))}
              className={`${input} font-mono`}
            />
          </Field>
          <div className="grid grid-cols-2 gap-4">
            <Field id="pay-expiry" label="Expiry (MM / YY)" error={errors.expiry}>
              <input {...a("expiry")} inputMode="numeric" autoComplete="off" placeholder="12 / 34" value={card.expiry} onChange={(e) => setCard((c) => ({ ...c, expiry: formatExpiry(e.target.value) }))} className={`${input} font-mono`} />
            </Field>
            <Field id="pay-cvc" label="CVC" error={errors.cvc}>
              <input {...a("cvc")} inputMode="numeric" autoComplete="off" placeholder="123" maxLength={4} value={card.cvc} onChange={(e) => setCard((c) => ({ ...c, cvc: e.target.value.replace(/\D/g, "") }))} className={`${input} font-mono`} />
            </Field>
          </div>
          <div aria-live="assertive">
            {alert && (
              <p role="alert" className="rounded-md border border-danger/40 p-3 text-sm text-danger">
                {alert}
              </p>
            )}
          </div>
          <button ref={payRef} type="submit" disabled={!intent || busy !== null} className="w-full rounded-md bg-accent px-4 py-2.5 font-medium text-accent-fg hover:opacity-90 disabled:opacity-50">
            {busy === "pay" ? "Processing…" : `Pay ${money(order.totalCents)} (test)`}
          </button>
        </form>

        <div className="space-y-2 rounded-md border border-border bg-bg-muted p-3 font-mono text-xs text-fg-muted">
          <p>
            intent: <span className="text-fg">{intent?.id ?? "creating…"}</span> · status: <span className="text-accent">{intent?.status ?? "…"}</span>
          </p>
          <p className="break-all">Idempotency-Key: {key || "…"}</p>
          <div className="flex flex-wrap gap-2">
            <button type="button" onClick={() => startIntent(key)} disabled={!key} className="rounded border border-border px-2 py-1 hover:border-accent hover:text-accent">
              resend create-intent (same key)
            </button>
            <button type="button" onClick={() => onCancel(order.id)} className="rounded border border-border px-2 py-1 hover:border-danger hover:text-danger">
              cancel order &amp; release stock
            </button>
          </div>
        </div>
      </div>
      <Summary lines={order.lines} shipping={order.shipping} title={`Order #${order.number}`} />

      {challenge && (
        <div className="fixed inset-0 z-50 grid place-items-center bg-black/60 p-4">
          <div ref={dialogRef} role="dialog" aria-modal="true" aria-labelledby="tds-title" onKeyDown={trap} className="w-full max-w-sm rounded-lg border border-border bg-bg p-5 shadow-xl">
            <p className="font-mono text-[10px] font-bold tracking-wide text-warn-fg">TEST MODE · SIMULATED BANK PAGE</p>
            <h3 id="tds-title" className="mt-2 text-lg font-semibold">
              Confirm this payment
            </h3>
            <p className="mt-2 text-sm text-fg-muted">
              Card 4000 0000 0000 3220 requires 3-D Secure. A real bank would ask you to approve {money(order.totalCents)} in its app. Choose an outcome:
            </p>
            <div className="mt-4 flex flex-wrap gap-2">
              <button type="button" disabled={busy !== null} onClick={() => void authenticate(true)} className="rounded-md bg-accent px-4 py-2 text-sm font-medium text-accent-fg hover:opacity-90">
                Complete authentication
              </button>
              <button type="button" disabled={busy !== null} onClick={() => void authenticate(false)} className="rounded-md border border-border px-4 py-2 text-sm hover:border-danger hover:text-danger">
                Fail authentication
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}