import { Button } from "@/components/atoms/button";
import { AlertBanner } from "@/components/molecules/AlertBanner/AlertBanner";
import type { Address } from "@customer-portal/domain/customer";
import { confirmWithAddress } from "@/shared/utils";

interface CheckoutStatusBannersProps {
  activeInternetWarning: string | null;
  eligibility: {
    isLoading: boolean;
    isError: boolean;
    isPending: boolean;
    isNotRequested: boolean;
    isIneligible: boolean;
    notes?: string | null | undefined;
    requestedAt?: string | null | undefined;
    refetch: () => void;
  };
  eligibilityRequest: {
    isPending: boolean;
    mutate: (data: { address?: Partial<Address> | undefined; notes?: string | undefined }) => void;
  };
  hasServiceAddress: boolean;
  addressLabel: string;
  userAddress?: Partial<Address> | undefined;
  planSku?: string | undefined;
}

export function CheckoutStatusBanners({
  activeInternetWarning,
  eligibility,
  eligibilityRequest,
  hasServiceAddress,
  addressLabel,
  userAddress,
  planSku,
}: CheckoutStatusBannersProps) {
  const renderEligibilityBanner = () => {
    if (eligibility.isLoading) {
      return (
        <AlertBanner variant="info" title="Checking availability…" elevated>
          We're loading your current eligibility status.
        </AlertBanner>
      );
    }

    if (eligibility.isError) {
      return (
        <AlertBanner variant="warning" title="Unable to verify availability right now" elevated>
          <div className="flex flex-col sm:flex-row sm:items-center gap-3">
            <span className="text-sm text-foreground/80">
              Please try again in a moment. If this continues, contact support.
            </span>
            <Button
              type="button"
              size="sm"
              className="sm:ml-auto"
              onClick={() => void eligibility.refetch()}
            >
              Try again
            </Button>
          </div>
        </AlertBanner>
      );
    }

    if (eligibility.isPending) {
      return (
        <AlertBanner variant="info" title="Availability review in progress" elevated>
          <div className="flex flex-col sm:flex-row sm:items-center gap-3">
            <span className="text-sm text-foreground/80">
              We're verifying whether our service is available at your residence. Once eligibility
              is confirmed, you can submit your internet order.
            </span>
            <Button as="a" href="/account/services/internet" size="sm" className="sm:ml-auto">
              View status
            </Button>
          </div>
        </AlertBanner>
      );
    }

    if (eligibility.isNotRequested) {
      return (
        <AlertBanner variant="info" title="Eligibility review required" elevated>
          <div className="flex flex-col sm:flex-row sm:items-center gap-3">
            <span className="text-sm text-foreground/80">
              Request an eligibility review to confirm service availability for your address before
              submitting an internet order.
            </span>
            {hasServiceAddress ? (
              <Button
                type="button"
                size="sm"
                className="sm:ml-auto"
                disabled={eligibilityRequest.isPending}
                isLoading={eligibilityRequest.isPending}
                loadingText="Requesting…"
                onClick={() =>
                  void (async () => {
                    const confirmed = confirmWithAddress(
                      "Request an eligibility review for this address?",
                      addressLabel
                    );
                    if (!confirmed) return;
                    eligibilityRequest.mutate({
                      address: userAddress ?? undefined,
                      notes: planSku
                        ? `Requested during checkout. Selected plan SKU: ${planSku}`
                        : "Requested during checkout.",
                    });
                  })()
                }
              >
                Request review
              </Button>
            ) : (
              <Button as="a" href="/account/settings" size="sm" className="sm:ml-auto">
                Add address
              </Button>
            )}
          </div>
        </AlertBanner>
      );
    }

    if (eligibility.isIneligible) {
      return (
        <AlertBanner variant="warning" title="Service not available" elevated>
          <div className="space-y-2">
            <p className="text-sm text-foreground/80">
              Our team reviewed your address and determined service isn't available right now.
            </p>
            {eligibility.notes ? (
              <p className="text-xs text-muted-foreground">{eligibility.notes}</p>
            ) : eligibility.requestedAt ? (
              <p className="text-xs text-muted-foreground">
                Last updated: {new Date(eligibility.requestedAt).toLocaleString()}
              </p>
            ) : null}
            <Button as="a" href="/account/support/new" size="sm">
              Contact support
            </Button>
          </div>
        </AlertBanner>
      );
    }

    return null;
  };

  return (
    <>
      {activeInternetWarning && (
        <AlertBanner variant="warning" title="Existing Internet Subscription" elevated>
          <span className="text-sm text-foreground/80">{activeInternetWarning}</span>
        </AlertBanner>
      )}

      {renderEligibilityBanner()}
    </>
  );
}
