import type { PricingBreakdown } from "@/types/order";
import { formatCurrency } from "@/lib/format";

function Row({
  label,
  value,
  negative,
  strong,
}: {
  label: string;
  value: string;
  negative?: boolean;
  strong?: boolean;
}) {
  return (
    <div
      className={`flex items-center justify-between gap-4 ${
        strong ? "text-base font-semibold" : "text-sm text-kolabora-neutral-dark/70"
      }`}
    >
      <span>{label}</span>
      <span className={negative ? "text-red-600" : undefined}>
        {negative ? "-" : ""}
        {formatCurrency(value)}
      </span>
    </div>
  );
}

/**
 * Renders a pricing breakdown — the one place every checkout summary UI
 * (general checkout, Signature wizard, status/invoice pages) turns numbers
 * into rows, so they can never disagree on layout or rounding. Order rows
 * match the approved "Checkout Summary UI" spec (2026-08-04) exactly.
 */
export function PricingSummary({
  breakdown,
  discountLabel = "Voucher/Promo",
}: {
  breakdown: PricingBreakdown;
  discountLabel?: string;
}) {
  const hasDiscount = Number(breakdown.discount) > 0;

  return (
    <div className="flex flex-col gap-1.5">
      <Row label="Subtotal" value={breakdown.subtotal} />

      {hasDiscount && (
        <>
          <Row label={discountLabel} value={breakdown.discount} negative />
          <div className="my-1 border-t border-kolabora-neutral-dark/10" />
          <Row label="Subtotal After Discount" value={breakdown.discounted_subtotal} />
        </>
      )}

      <div className="mt-1 flex flex-col gap-1.5">
        <Row label="Platform Fee" value={breakdown.platform_fee} />
        <Row label={`Admin Fee (${breakdown.admin_fee_percent}%)`} value={breakdown.admin_fee} />
        <Row label={`Tax (${breakdown.tax_percent}%)`} value={breakdown.tax} />
      </div>

      <div className="my-1 border-t border-kolabora-neutral-dark/10" />
      <Row label="TOTAL" value={breakdown.total} strong />
    </div>
  );
}