"use client";

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

type StatusConfig = {
  icon: ReactElement;
  color: string;
  label: string;
};

const STATUS_CONFIG: Record<InvoiceStatus, StatusConfig> = {
  Draft: {
    icon: <DocumentTextIcon className="h-5 w-5 text-gray-500" />,
    color: "bg-gray-100 text-gray-800 border-gray-200",
    label: "Draft",
  },
  Pending: {
    icon: <ClockIcon className="h-5 w-5 text-blue-500" />,
    color: "bg-blue-100 text-blue-800 border-blue-200",
    label: "Pending",
  },
  Paid: {
    icon: <CheckCircleIcon className="h-5 w-5 text-green-500" />,
    color: "bg-green-100 text-green-800 border-green-200",
    label: "Paid",
  },
  Unpaid: {
    icon: <ClockIcon className="h-5 w-5 text-yellow-500" />,
    color: "bg-yellow-100 text-yellow-800 border-yellow-200",
    label: "Unpaid",
  },
  Overdue: {
    icon: <ExclamationTriangleIcon className="h-5 w-5 text-red-500" />,
    color: "bg-red-100 text-red-800 border-red-200",
    label: "Overdue",
  },
  Cancelled: {
    icon: <DocumentTextIcon className="h-5 w-5 text-gray-500" />,
    color: "bg-gray-100 text-gray-800 border-gray-200",
    label: "Cancelled",
  },
  Refunded: {
    icon: <CheckCircleIcon className="h-5 w-5 text-emerald-500" />,
    color: "bg-emerald-100 text-emerald-800 border-emerald-200",
    label: "Refunded",
  },
  Collections: {
    icon: <ExclamationTriangleIcon className="h-5 w-5 text-red-600" />,
    color: "bg-red-100 text-red-900 border-red-200",
    label: "Collections",
  },
};

const DEFAULT_STATUS: StatusConfig = {
  icon: <DocumentTextIcon className="h-5 w-5 text-gray-500" />,
  color: "bg-gray-100 text-gray-800 border-gray-200",
  label: "Unknown",
};

export function InvoiceStatusBadge({ status }: { status: InvoiceStatus }) {
  const config = STATUS_CONFIG[status] ?? DEFAULT_STATUS;

  return (
    <span
      className={`inline-flex items-center px-2.5 py-1 text-xs font-medium rounded-full border ${config.color}`}
    >
      {config.icon}
      <span className="ml-1">{config.label}</span>
    </span>
  );
}
