import { ReceiptText } from "lucide-react";
import { cn } from "@/lib/utils";
import { DetailCard } from "./detail-card";
import { formatCurrency } from "../../lib/format-utils";
import type { Order } from "../../types";

interface OrderSummaryCardProps {
  order: Order;
}

function SummaryLine({
  label,
  value,
  className,
}: {
  label: React.ReactNode;
  value: React.ReactNode;
  className?: string;
}) {
  return (
    <div className={cn("flex items-start justify-between gap-4", className)}>
      <span className="text-sm text-muted-foreground">{label}</span>
      <span className="font-mono text-sm">{value}</span>
    </div>
  );
}

/**
 * Price breakdown for the order. Free shipping and coupons are called
 * out explicitly so discounts don't look like errors.
 */
export function OrderSummaryCard({ order }: OrderSummaryCardProps) {
  return (
    <DetailCard title="Order summary" icon={<ReceiptText className="h-4 w-4 text-muted-foreground" />}>
      <dl className="space-y-2.5">
        <SummaryLine label="Subtotal" value={formatCurrency(order.subtotal)} />
        <SummaryLine
          label={
            <span>
              Shipping{" "}
              {order.shippingCost === 0 && (
                <span className="ml-1 rounded bg-green-500/10 px-1.5 py-0.5 text-xs font-medium text-green-700 dark:text-green-400">
                  Free
                </span>
              )}
            </span>
          }
          value={
            order.shippingCost === 0 ? "—" : formatCurrency(order.shippingCost)
          }
        />
        <SummaryLine
          label={
            order.couponCode ? (
              <span>
                Discount{" "}
                <span className="ml-1 rounded bg-muted px-1.5 py-0.5 text-xs font-medium text-muted-foreground">
                  {order.couponCode}
                </span>
              </span>
            ) : (
              "Discount"
            )
          }
          value={
            order.discount > 0 ? (
              <span className="text-green-600 dark:text-green-400">
                −{formatCurrency(order.discount)}
              </span>
            ) : (
              "—"
            )
          }
        />
        <SummaryLine label="Tax (VAT 5%)" value={formatCurrency(order.tax)} />
      </dl>

      <div className="my-4 h-px bg-border/70" />

      <div className="flex items-center justify-between">
        <span className="text-sm font-semibold">Grand total</span>
        <span className="text-lg font-bold tracking-tight">
          {formatCurrency(order.grandTotal)}
        </span>
      </div>
    </DetailCard>
  );
}