"use client";

import { forwardRef } from "react";
import {
  CheckCircleIcon,
  ExclamationTriangleIcon,
  ClockIcon,
  DocumentTextIcon,
  XCircleIcon,
} from "@heroicons/react/24/outline";
import { StatusPill } from "@/components/atoms/status-pill";
import type { StatusPillProps } from "@/components/atoms/status-pill";

interface BillingStatusBadgeProps extends Omit<StatusPillProps, "variant" | "icon" | "label"> {
  status: string;
  showIcon?: boolean;
}

const getStatusConfig = (status: string) => {
  switch (status.toLowerCase()) {
    case "paid":
      return {
        variant: "success" as const,
        icon: <CheckCircleIcon className="h-4 w-4" />,
        label: "Paid",
      };
    case "overdue":
      return {
        variant: "error" as const,
        icon: <ExclamationTriangleIcon className="h-4 w-4" />,
        label: "Overdue",
      };
    case "unpaid":
      return {
        variant: "warning" as const,
        icon: <ClockIcon className="h-4 w-4" />,
        label: "Unpaid",
      };
    case "cancelled":
    case "canceled":
      return {
        variant: "neutral" as const,
        icon: <XCircleIcon className="h-4 w-4" />,
        label: "Cancelled",
      };
    case "draft":
      return {
        variant: "neutral" as const,
        icon: <DocumentTextIcon className="h-4 w-4" />,
        label: "Draft",
      };
    case "refunded":
      return {
        variant: "info" as const,
        icon: <CheckCircleIcon className="h-4 w-4" />,
        label: "Refunded",
      };
    case "collections":
      return {
        variant: "error" as const,
        icon: <ExclamationTriangleIcon className="h-4 w-4" />,
        label: "Collections",
      };
    case "payment pending":
      return {
        variant: "warning" as const,
        icon: <ClockIcon className="h-4 w-4" />,
        label: "Payment Pending",
      };
    default:
      return {
        variant: "neutral" as const,
        icon: <DocumentTextIcon className="h-4 w-4" />,
        label: status,
      };
  }
};

const BillingStatusBadge = forwardRef<HTMLSpanElement, BillingStatusBadgeProps>(
  ({ status, showIcon = true, children, ...props }, ref) => {
    const config = getStatusConfig(status);

    return (
      <StatusPill
        ref={ref}
        variant={config.variant}
        icon={showIcon ? config.icon : undefined}
        label={typeof children === "string" ? children : config.label}
        {...props}
      />
    );
  }
);

BillingStatusBadge.displayName = "BillingStatusBadge";

export { BillingStatusBadge };
export type { BillingStatusBadgeProps };
