"use client";

import { forwardRef } from "react";
import Link from "next/link";
import {
  CreditCardIcon,
  ExclamationTriangleIcon,
  CheckCircleIcon,
  ClockIcon,
  ArrowRightIcon,
} from "@heroicons/react/24/outline";
import type { BillingSummary } from "@customer-portal/domain/billing";
import { Formatting } from "@customer-portal/domain/toolkit";

const { formatCurrency } = Formatting;
import { cn } from "@/lib/utils";

interface BillingSummaryProps extends React.HTMLAttributes<HTMLDivElement> {
  summary: BillingSummary;
  loading?: boolean;
  compact?: boolean;
}

const BillingSummary = forwardRef<HTMLDivElement, BillingSummaryProps>(
  ({ summary, loading = false, compact = false, className, ...props }, ref) => {
    if (loading) {
      return (
        <div
          ref={ref}
          className={cn("bg-white rounded-lg border border-gray-200 p-6", className)}
          {...props}
        >
          <div className="animate-pulse">
            <div className="flex items-center mb-4">
              <div className="w-8 h-8 bg-gray-200 rounded-lg"></div>
              <div className="ml-3 h-6 bg-gray-200 rounded w-32"></div>
            </div>
            <div className="space-y-3">
              <div className="h-4 bg-gray-200 rounded w-full"></div>
              <div className="h-4 bg-gray-200 rounded w-3/4"></div>
              <div className="h-4 bg-gray-200 rounded w-1/2"></div>
            </div>
          </div>
        </div>
      );
    }

    const formatAmount = (amount: number) => formatCurrency(amount, summary.currency);

    const summaryItems = [
      {
        label: "Outstanding",
        amount: summary.totalOutstanding,
        count: summary.invoiceCount.unpaid,
        variant: summary.totalOutstanding > 0 ? "warning" : "neutral",
        icon: summary.totalOutstanding > 0 ? ClockIcon : CheckCircleIcon,
      },
      {
        label: "Overdue",
        amount: summary.totalOverdue,
        count: summary.invoiceCount.overdue,
        variant: summary.totalOverdue > 0 ? "error" : "neutral",
        icon: summary.totalOverdue > 0 ? ExclamationTriangleIcon : CheckCircleIcon,
      },
      {
        label: "Paid This Period",
        amount: summary.totalPaid,
        count: summary.invoiceCount.paid,
        variant: "success",
        icon: CheckCircleIcon,
      },
    ];

    return (
      <div
        ref={ref}
        className={cn(
          "bg-white rounded-lg border border-gray-200 transition-all duration-200 hover:shadow-sm",
          compact ? "p-4" : "p-6",
          className
        )}
        {...props}
      >
        {/* Header */}
        <div className="flex items-center justify-between mb-6">
          <div className="flex items-center">
            <div className="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
              <CreditCardIcon className="w-5 h-5 text-blue-600" />
            </div>
            <h3 className="ml-3 text-lg font-semibold text-gray-900">Billing Summary</h3>
          </div>
          {!compact && (
            <Link
              href="/billing/invoices"
              className="inline-flex items-center text-sm text-blue-600 hover:text-blue-700 font-medium"
            >
              View All
              <ArrowRightIcon className="ml-1 w-4 h-4" />
            </Link>
          )}
        </div>

        {/* Summary Items */}
        <div className={cn("space-y-4", compact && "space-y-3")}>
          {summaryItems.map((item, index) => {
            const IconComponent = item.icon;

            return (
              <div
                key={index}
                className="flex items-center justify-between p-3 rounded-lg bg-gray-50"
              >
                <div className="flex items-center">
                  <IconComponent
                    className={cn(
                      "w-5 h-5 mr-3",
                      item.variant === "error" && "text-red-500",
                      item.variant === "warning" && "text-yellow-500",
                      item.variant === "success" && "text-green-500",
                      item.variant === "neutral" && "text-gray-500"
                    )}
                  />
                  <div>
                    <div className="text-sm font-medium text-gray-900">{item.label}</div>
                    {!compact && item.count > 0 && (
                      <div className="text-xs text-gray-500">
                        {item.count} invoice{item.count !== 1 ? "s" : ""}
                      </div>
                    )}
                  </div>
                </div>
                <div className="text-right">
                  <div className="text-lg font-semibold text-gray-900">
                    {formatAmount(item.amount)}
                  </div>
                  {compact && item.count > 0 && (
                    <div className="text-xs text-gray-500">
                      {item.count} invoice{item.count !== 1 ? "s" : ""}
                    </div>
                  )}
                </div>
              </div>
            );
          })}
        </div>

        {/* Total Invoices */}
        {!compact && (
          <div className="mt-6 pt-4 border-t border-gray-200">
            <div className="flex items-center justify-between text-sm">
              <span className="text-gray-600">Total Invoices</span>
              <span className="font-medium text-gray-900">{summary.invoiceCount.total}</span>
            </div>
          </div>
        )}

        {/* Quick Actions */}
        {compact && (
          <div className="mt-4 pt-4 border-t border-gray-200">
            <Link
              href="/billing/invoices"
              className="inline-flex items-center text-sm text-blue-600 hover:text-blue-700 font-medium"
            >
              View All Invoices
              <ArrowRightIcon className="ml-1 w-4 h-4" />
            </Link>
          </div>
        )}
      </div>
    );
  }
);

BillingSummary.displayName = "BillingSummary";

export { BillingSummary };
export type { BillingSummaryProps };
