"use client";

import { CreditCard } from "lucide-react";
import { SubCard } from "@/components/molecules/SubCard/SubCard";
import { Button } from "@/components/atoms/button";
import { AlertBanner } from "@/components/molecules/AlertBanner/AlertBanner";
import { StatusPill } from "@/components/atoms/status-pill";

interface PaymentMethodDisplay {
  title: string;
  subtitle?: string | undefined;
}

interface PaymentMethodSectionProps {
  isLoading: boolean;
  isError: boolean;
  hasPaymentMethod: boolean;
  paymentMethodDisplay: PaymentMethodDisplay | null;
  onManagePayment: () => void;
  onRefresh: () => void;
  isOpeningPortal: boolean;
}

function PaymentActionButtons({
  onRefresh,
  onManagePayment,
  isOpeningPortal,
}: {
  onRefresh: () => void;
  onManagePayment: () => void;
  isOpeningPortal: boolean;
}) {
  return (
    <div className="flex items-center gap-2">
      <Button type="button" size="sm" onClick={onRefresh}>
        Check Again
      </Button>
      <Button
        type="button"
        size="sm"
        onClick={onManagePayment}
        isLoading={isOpeningPortal}
        loadingText="Opening..."
      >
        Add Payment Method
      </Button>
    </div>
  );
}

function PaymentMethodContent(props: PaymentMethodSectionProps) {
  if (props.isLoading) {
    return <div className="text-sm text-muted-foreground">Checking payment methods...</div>;
  }

  if (props.isError) {
    return (
      <AlertBanner variant="warning" title="Unable to verify payment methods" size="sm" elevated>
        <PaymentActionButtons
          onRefresh={props.onRefresh}
          onManagePayment={props.onManagePayment}
          isOpeningPortal={props.isOpeningPortal}
        />
      </AlertBanner>
    );
  }

  if (props.hasPaymentMethod) {
    return (
      <div className="space-y-3">
        {props.paymentMethodDisplay && (
          <div className="rounded-xl border border-border bg-card p-4 shadow-[var(--cp-shadow-1)] transition-shadow duration-200 hover:shadow-[var(--cp-shadow-2)]">
            <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
              <div>
                <p className="text-xs font-semibold uppercase tracking-wide text-primary">
                  Default payment method
                </p>
                <p className="mt-1 text-sm font-semibold text-foreground">
                  {props.paymentMethodDisplay.title}
                </p>
                {props.paymentMethodDisplay.subtitle && (
                  <p className="mt-1 text-xs text-muted-foreground">
                    {props.paymentMethodDisplay.subtitle}
                  </p>
                )}
              </div>
            </div>
          </div>
        )}
        <p className="text-xs text-muted-foreground">
          We securely charge your saved payment method after the order is approved.
        </p>
      </div>
    );
  }

  return (
    <AlertBanner variant="error" title="No payment method on file" size="sm" elevated>
      <PaymentActionButtons
        onRefresh={props.onRefresh}
        onManagePayment={props.onManagePayment}
        isOpeningPortal={props.isOpeningPortal}
      />
    </AlertBanner>
  );
}

export function PaymentMethodSection(props: PaymentMethodSectionProps) {
  return (
    <SubCard
      title="Billing & Payment"
      icon={<CreditCard className="w-5 h-5 text-primary" />}
      right={
        <div className="flex items-center gap-2">
          {props.hasPaymentMethod && <StatusPill label="Verified" variant="success" />}
          <Button
            type="button"
            size="sm"
            variant="outline"
            onClick={props.onManagePayment}
            isLoading={props.isOpeningPortal}
            loadingText="Opening..."
          >
            {props.hasPaymentMethod ? "Change" : "Add"}
          </Button>
        </div>
      }
    >
      <PaymentMethodContent {...props} />
    </SubCard>
  );
}
