"use client";

import {
  CheckCircleIcon,
  ExclamationTriangleIcon,
  ClockIcon,
  DocumentTextIcon,
} from "@heroicons/react/24/outline";
import type { InvoiceStatus } from "@customer-portal/domain/billing";
import { StatusBadge, type StatusConfigMap } from "@/components/molecules";

/**
 * Status configuration for invoice statuses.
 * Maps each status to its visual variant, icon, and label.
 *
 * Status → Semantic color mapping:
 * - Paid → success (green)
 * - Pending, Unpaid → warning (amber)
 * - Draft, Cancelled → neutral (navy)
 * - Overdue, Collections → error (red)
 * - Refunded → info (blue)
 */
const INVOICE_STATUS_CONFIG: StatusConfigMap<InvoiceStatus> = {
  draft: {
    variant: "neutral",
    icon: <DocumentTextIcon className="h-4 w-4" />,
    label: "Draft",
  },
  pending: {
    variant: "warning",
    icon: <ClockIcon className="h-4 w-4" />,
    label: "Pending",
  },
  paid: {
    variant: "success",
    icon: <CheckCircleIcon className="h-4 w-4" />,
    label: "Paid",
  },
  unpaid: {
    variant: "warning",
    icon: <ClockIcon className="h-4 w-4" />,
    label: "Unpaid",
  },
  overdue: {
    variant: "error",
    icon: <ExclamationTriangleIcon className="h-4 w-4" />,
    label: "Overdue",
  },
  cancelled: {
    variant: "neutral",
    icon: <DocumentTextIcon className="h-4 w-4" />,
    label: "Cancelled",
  },
  refunded: {
    variant: "info",
    icon: <CheckCircleIcon className="h-4 w-4" />,
    label: "Refunded",
  },
  collections: {
    variant: "error",
    icon: <ExclamationTriangleIcon className="h-4 w-4" />,
    label: "Collections",
  },
};

const DEFAULT_CONFIG = {
  variant: "neutral" as const,
  icon: <DocumentTextIcon className="h-4 w-4" />,
  label: "Unknown",
};

interface InvoiceStatusBadgeProps {
  status: InvoiceStatus;
}

/**
 * InvoiceStatusBadge - Displays the status of an invoice.
 *
 * @example
 * ```tsx
 * <InvoiceStatusBadge status="Paid" />
 * <InvoiceStatusBadge status="Overdue" />
 * ```
 */
export function InvoiceStatusBadge({ status }: InvoiceStatusBadgeProps) {
  return (
    <StatusBadge status={status} configMap={INVOICE_STATUS_CONFIG} defaultConfig={DEFAULT_CONFIG} />
  );
}
