"use client";

import { BadgeCheck, CreditCard } from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { useI18n, useT } from "@/i18n";
import { formatDateTime } from "@/lib/format";
import type { Order } from "@/types/order";

/**
 * How this order is paid for, and whether the money has actually moved.
 *
 * The two are different questions and the screen must not merge them. **The method** is a fact
 * about the arrangement — cash on delivery means the captain collects, prepaid means they must
 * not — and until now it appeared nowhere on this page: an operator could read the amounts and
 * still not know whether anyone is supposed to hand over money. **The status** is a fact about
 * the money, and it can be unknown.
 *
 * `null` status is drawn as "not recorded", never as unpaid. Every order written before the
 * field existed has none, and showing those as unpaid would send a dispatcher chasing a
 * customer who settled weeks ago.
 */
export function OrderPayment({ order }: { order: Order }) {
  const t = useT();
  const { locale } = useI18n();

  // The method is required on every order, so this card is never empty — which is the point:
  // "nobody collects anything here" is information, not an absence worth hiding.
  const method = order.payment_method_label ?? order.payment_method ?? null;

  if (method === null) {
    return null;
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <CreditCard className="h-4 w-4 text-primary" aria-hidden />
          {t("orders.payment.title")}
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-2 text-sm">
        <Row label={t("orders.payment.method")} value={method} />

        <Row
          label={t("orders.payment.status")}
          value={order.payment_status_label ?? order.payment_status ?? null}
          // Said out loud rather than left as an em dash, because an empty cell reads as a
          // screen that failed to load rather than as a fact nobody recorded.
          fallback={t("orders.payment.notRecorded")}
        />

        {order.payment_reference ? (
          <Row label={t("orders.payment.reference")} value={order.payment_reference} mono />
        ) : null}

        {order.payment_verified_at ? (
          <p className="flex items-center gap-1.5 pt-1 text-xs text-muted-foreground">
            <BadgeCheck className="h-3.5 w-3.5 shrink-0 text-success" aria-hidden />
            {t("orders.payment.verifiedAt", {
              at: formatDateTime(order.payment_verified_at, locale),
            })}
          </p>
        ) : null}
      </CardContent>
    </Card>
  );
}

function Row({
  label,
  value,
  fallback,
  mono = false,
}: {
  label: string;
  value: string | null;
  fallback?: string;
  mono?: boolean;
}) {
  return (
    <p className="flex flex-wrap items-baseline justify-between gap-2">
      <span className="text-muted-foreground">{label}</span>
      <span className={value === null ? "text-muted-foreground" : mono ? "font-mono text-xs" : "font-medium"}>
        {value ?? fallback ?? "—"}
      </span>
    </p>
  );
}