"use client";

import React from "react";
import { Skeleton } from "@/components/atoms/loading-skeleton";
import { ServerIcon, ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";

interface InvoicePaymentActionsProps {
  status: string;
  onManagePaymentMethods: () => void;
  onPay: () => void;
  loadingPaymentMethods?: boolean;
  loadingPayment?: boolean;
}

export function InvoicePaymentActions({
  status,
  onManagePaymentMethods,
  onPay,
  loadingPaymentMethods,
  loadingPayment,
}: InvoicePaymentActionsProps) {
  const canPay = status === "Unpaid" || status === "Overdue";
  if (!canPay) return null;

  return (
    <div className="space-y-4">
      {/* Primary Payment Action */}
      <button
        onClick={onPay}
        disabled={loadingPayment}
        className={`w-full inline-flex items-center justify-center px-6 py-4 text-base font-semibold rounded-2xl text-white transition-all duration-200 shadow-lg ${
          status === "Overdue"
            ? "bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 shadow-red-500/25"
            : "bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 shadow-blue-500/25"
        }`}
      >
        {loadingPayment ? (
          <Skeleton className="h-5 w-5 rounded-full mr-3" />
        ) : (
          <ArrowTopRightOnSquareIcon className="h-5 w-5 mr-3" />
        )}
        {status === "Overdue" ? "Pay Overdue Invoice" : "Pay Invoice Now"}
      </button>

      {/* Secondary Action */}
      <button
        onClick={onManagePaymentMethods}
        disabled={loadingPaymentMethods}
        className="w-full inline-flex items-center justify-center px-4 py-3 border-2 border-slate-200 text-sm font-medium rounded-xl text-slate-700 bg-white hover:bg-slate-50 hover:border-slate-300 disabled:opacity-50 transition-all duration-200"
      >
        {loadingPaymentMethods ? (
          <Skeleton className="h-4 w-4 rounded-full mr-2" />
        ) : (
          <ServerIcon className="h-4 w-4 mr-2" />
        )}
        Manage Payment Methods
      </button>

      {/* Payment Info */}
      <div className="text-center">
        <p className="text-sm text-slate-500">
          {status === "Overdue"
            ? "This invoice is overdue. Please pay as soon as possible to avoid service interruption."
            : "Secure payment processing with multiple payment options available."}
        </p>
      </div>
    </div>
  );
}

export type { InvoicePaymentActionsProps };
