/**
 * Plans & Billing Page - Unified Subscription & Payment Management
 * Comprehensive dashboard for all billing-related features
 * Rich, actionable, data-driven UX following UsageDashboard patterns
 */

import { useState, useEffect, useRef } from 'react';
import { Link } from 'react-router-dom';
import {
  CreditCardIcon,
  TrendingUpIcon,
  FileTextIcon,
  WalletIcon,
  ArrowUpIcon,
  Loader2Icon,
  AlertCircleIcon,
  CheckCircleIcon,
  DownloadIcon,
  ZapIcon,
  GlobeIcon,
  UsersIcon,
  XIcon,
  CalendarIcon,
  RefreshCwIcon,
  ChevronRightIcon,
  PlusIcon,
  Building2Icon,
  TagIcon,
  LockIcon,
  ShootingStarIcon,
} from '../../icons';
import { Card } from '../../components/ui/card';
import Badge from '../../components/ui/badge/Badge';
import Button from '../../components/ui/button/Button';
import PageMeta from '../../components/common/PageMeta';
import PageHeader from '../../components/common/PageHeader';
import { useToast } from '../../components/ui/toast/ToastContainer';
import { usePageLoading } from '../../context/PageLoadingContext';
import { formatCurrency } from '../../utils';
import {
  getCreditBalance,
  getCreditPackages,
  getInvoices,
  getAvailablePaymentMethods,
  purchaseCreditPackage,
  downloadInvoicePDF,
  getPayments,
  type CreditBalance,
  type CreditPackage,
  type Invoice,
  type PaymentMethod,
  type Payment,
  getPlans,
  getSubscriptions,
  createSubscription,
  cancelSubscription,
  type Plan,
  type Subscription,
  // Payment gateway methods
  subscribeToPlan,
  purchaseCredits,
  openStripeBillingPortal,
  getAvailablePaymentGateways,
  type PaymentGateway,
} from '../../services/billing.api';
import { useAuthStore } from '../../store/authStore';

export default function PlansAndBillingPage() {
  const { startLoading, stopLoading } = usePageLoading();
  const toast = useToast();
  const hasLoaded = useRef(false);
  const { user } = useAuthStore.getState();
  const isAwsAdmin = user?.account?.slug === 'aws-admin';

  // UI States
  const [error, setError] = useState<string>('');
  const [planLoadingId, setPlanLoadingId] = useState<number | null>(null);
  const [purchaseLoadingId, setPurchaseLoadingId] = useState<number | null>(null);
  const [showCancelConfirm, setShowCancelConfirm] = useState(false);
  const [showUpgradeModal, setShowUpgradeModal] = useState(false);
  const [selectedBillingCycle, setSelectedBillingCycle] = useState<'monthly' | 'annual'>('monthly');
  const [selectedGateway, setSelectedGateway] = useState<PaymentGateway>('stripe');

  // Data States
  const [creditBalance, setCreditBalance] = useState<CreditBalance | null>(null);
  const [packages, setPackages] = useState<CreditPackage[]>([]);
  const [invoices, setInvoices] = useState<Invoice[]>([]);
  const [payments, setPayments] = useState<Payment[]>([]);
  const [paymentMethods, setPaymentMethods] = useState<PaymentMethod[]>([]);
  const [plans, setPlans] = useState<Plan[]>([]);
  const [subscriptions, setSubscriptions] = useState<Subscription[]>([]);
  const [selectedPaymentMethod, setSelectedPaymentMethod] = useState<string | undefined>(undefined);
  const [availableGateways, setAvailableGateways] = useState<{ stripe: boolean; paypal: boolean; manual: boolean }>({
    stripe: false,
    paypal: false,
    manual: true,
  });

  useEffect(() => {
    if (hasLoaded.current) return;
    hasLoaded.current = true;
    loadData();

    // Handle payment gateway return URLs
    const params = new URLSearchParams(window.location.search);
    const success = params.get('success');
    const canceled = params.get('canceled');
    const purchase = params.get('purchase');

    if (success === 'true') {
      toast?.success?.('Subscription activated successfully!');
      // Clean up URL
      window.history.replaceState({}, '', window.location.pathname);
    } else if (canceled === 'true') {
      toast?.info?.('Payment was cancelled');
      window.history.replaceState({}, '', window.location.pathname);
    } else if (purchase === 'success') {
      toast?.success?.('Credits purchased successfully!');
      window.history.replaceState({}, '', window.location.pathname);
    } else if (purchase === 'canceled') {
      toast?.info?.('Credit purchase was cancelled');
      window.history.replaceState({}, '', window.location.pathname);
    }
  }, []);

  const handleError = (err: any, fallback: string) => {
    const message = err?.message || fallback;
    setError(message);
    toast?.error?.(message);
  };

  const loadData = async (allowRetry = true) => {
    try {
      startLoading('Loading billing data...');
      const wait = (ms: number) => new Promise((res) => setTimeout(res, ms));

      const balanceData = await getCreditBalance();
      const packagesPromise = getCreditPackages();
      const invoicesPromise = getInvoices({});
      const paymentsPromise = getPayments({});
      const methodsPromise = getAvailablePaymentMethods();
      const plansData = await getPlans();
      await wait(400);

      let subsData: { results: Subscription[] } = { results: [] };
      try {
        subsData = await getSubscriptions();
      } catch (subErr: any) {
        if (subErr?.status === 429 && allowRetry) {
          await wait(2500);
          try { subsData = await getSubscriptions(); } catch { subsData = { results: [] }; }
        }
      }

      const [packagesData, invoicesData, paymentsData, methodsData] = await Promise.all([
        packagesPromise, invoicesPromise, paymentsPromise, methodsPromise
      ]);

      setCreditBalance(balanceData);
      setPackages(packagesData.results || []);
      setInvoices(invoicesData.results || []);
      setPayments(paymentsData.results || []);

      const methods = (methodsData.results || []).filter((m) => m.is_enabled !== false);
      setPaymentMethods(methods);
      if (methods.length > 0) {
        const bank = methods.find((m) => m.type === 'bank_transfer');
        const manual = methods.find((m) => m.type === 'manual');
        const selected = bank || manual || methods.find((m) => m.is_default) || methods[0];
        setSelectedPaymentMethod((prev) => prev || selected.type || selected.id);
      }

      // Filter plans
      const activePlans = (plansData.results || []).filter((p) => p.is_active !== false);
      const filteredPlans = activePlans.filter((p) => {
        const name = (p.name || '').toLowerCase();
        const slug = (p.slug || '').toLowerCase();
        const isEnterprise = name.includes('enterprise') || slug === 'enterprise';
        return isAwsAdmin ? true : !isEnterprise;
      });

      const accountPlan = user?.account?.plan;
      if (accountPlan && !filteredPlans.find((p) => p.id === accountPlan.id)) {
        filteredPlans.push(accountPlan as any);
      }
      setPlans(filteredPlans);

      const subs = subsData.results || [];
      if (subs.length === 0 && accountPlan) {
        subs.push({ id: accountPlan.id || 0, plan: accountPlan, status: 'active' } as any);
      }
      setSubscriptions(subs);

      // Load available payment gateways
      try {
        const gateways = await getAvailablePaymentGateways();
        setAvailableGateways(gateways);
        // Auto-select first available gateway
        if (gateways.stripe) {
          setSelectedGateway('stripe');
        } else if (gateways.paypal) {
          setSelectedGateway('paypal');
        } else {
          setSelectedGateway('manual');
        }
      } catch {
        // Non-critical - just keep defaults
        console.log('Could not load payment gateways, using defaults');
      }
    } catch (err: any) {
      if (err?.status === 429 && allowRetry) {
        setError('Request was throttled. Retrying...');
        setTimeout(() => loadData(false), 2500);
      } else if (err?.status !== 429) {
        setError(err.message || 'Failed to load billing data');
      }
    } finally {
      stopLoading();
    }
  };

  const handleSelectPlan = async (planId: number) => {
    try {
      setPlanLoadingId(planId);

      // Use payment gateway integration for Stripe/PayPal
      if (selectedGateway === 'stripe' || selectedGateway === 'paypal') {
        const { redirect_url } = await subscribeToPlan(planId.toString(), selectedGateway);
        window.location.href = redirect_url;
        return;
      }

      // Fall back to manual/bank transfer flow
      await createSubscription({ plan_id: planId, payment_method: selectedPaymentMethod });
      toast?.success?.('Plan upgraded successfully!');
      setShowUpgradeModal(false);
      await loadData();
    } catch (err: any) {
      handleError(err, 'Failed to upgrade plan');
    } finally {
      setPlanLoadingId(null);
    }
  };

  const handleCancelSubscription = async () => {
    if (!currentSubscription?.id) return;
    try {
      setPlanLoadingId(currentSubscription.id);
      await cancelSubscription(currentSubscription.id);
      toast?.success?.('Subscription cancelled');
      setShowCancelConfirm(false);
      await loadData();
    } catch (err: any) {
      handleError(err, 'Failed to cancel subscription');
    } finally {
      setPlanLoadingId(null);
    }
  };

  const handlePurchaseCredits = async (packageId: number) => {
    try {
      setPurchaseLoadingId(packageId);

      // Use payment gateway integration for Stripe/PayPal
      if (selectedGateway === 'stripe' || selectedGateway === 'paypal') {
        const { redirect_url } = await purchaseCredits(packageId.toString(), selectedGateway);
        window.location.href = redirect_url;
        return;
      }

      // Fall back to manual/bank transfer flow
      await purchaseCreditPackage({ package_id: packageId, payment_method: selectedPaymentMethod as any || 'manual' });
      toast?.success?.('Credits purchased successfully!');
      await loadData();
    } catch (err: any) {
      handleError(err, 'Failed to purchase credits');
    } finally {
      setPurchaseLoadingId(null);
    }
  };

  const handleManageSubscription = async () => {
    try {
      const { portal_url } = await openStripeBillingPortal();
      window.location.href = portal_url;
    } catch (err: any) {
      handleError(err, 'Failed to open billing portal');
    }
  };

  const handleDownloadInvoice = async (invoiceId: number) => {
    try {
      const blob = await downloadInvoicePDF(invoiceId);
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = `invoice-${invoiceId}.pdf`;
      document.body.appendChild(link);
      link.click();
      link.remove();
      window.URL.revokeObjectURL(url);
    } catch (err: any) {
      handleError(err, 'Failed to download invoice');
    }
  };

  // Computed values
  const currentSubscription = subscriptions.find((sub) => sub.status === 'active') || subscriptions[0];
  const currentPlanId = typeof currentSubscription?.plan === 'object' ? currentSubscription.plan.id : currentSubscription?.plan;
  const accountPlanId = user?.account?.plan?.id;
  const effectivePlanId = currentPlanId || accountPlanId;
  const currentPlan = plans.find((p) => p.id === effectivePlanId) || user?.account?.plan;
  const hasActivePlan = Boolean(effectivePlanId);
  const hasPendingPayment = payments.some((p) => p.status === 'pending_approval');

  // Credit usage percentage
  const creditUsage = creditBalance && creditBalance.plan_credits_per_month > 0
    ? Math.round((creditBalance.credits_used_this_month / creditBalance.plan_credits_per_month) * 100)
    : 0;

  // Upgrade plans (exclude current and free)
  const upgradePlans = plans.filter(p => {
    const price = Number(p.price) || 0;
    return price > 0 && p.id !== effectivePlanId;
  }).sort((a, b) => (Number(a.price) || 0) - (Number(b.price) || 0));

  return (
    <>
      <PageMeta title="Plans & Billing" description="Manage your subscription and payments" />
      <PageHeader
        title="Plans & Billing"
        description="Manage your subscription, credits, and payment history"
        badge={{ icon: <CreditCardIcon className="w-4 h-4" />, color: 'blue' }}
        actions={
          <Button
            size="sm"
            variant="outline"
            tone="neutral"
            onClick={() => loadData()}
            startIcon={<RefreshCwIcon className="w-4 h-4" />}
          >
            Refresh
          </Button>
        }
      />

      {/* Alerts */}
      {!hasActivePlan && (
        <div className="mb-6 p-4 rounded-xl border border-warning-200 bg-warning-50 dark:border-warning-800 dark:bg-warning-900/20 flex items-start gap-3">
          <AlertCircleIcon className="w-5 h-5 text-warning-600 dark:text-warning-400 mt-0.5 shrink-0" />
          <div>
            <p className="font-medium text-warning-800 dark:text-warning-200">No Active Plan</p>
            <p className="text-sm text-warning-700 dark:text-warning-300 mt-1">Choose a plan below to activate your account and unlock all features.</p>
          </div>
        </div>
      )}
      {hasPendingPayment && (
        <div className="mb-6 p-4 rounded-xl border border-info-200 bg-info-50 dark:border-info-800 dark:bg-info-900/20 flex items-start gap-3">
          <Loader2Icon className="w-5 h-5 text-info-600 dark:text-info-400 mt-0.5 shrink-0 animate-spin" />
          <div>
            <p className="font-medium text-info-800 dark:text-info-200">Payment Pending Review</p>
            <p className="text-sm text-info-700 dark:text-info-300 mt-1">Your payment is being processed. Credits will be added once approved.</p>
          </div>
        </div>
      )}
      {error && (
        <div className="mb-6 p-4 rounded-xl border border-error-200 bg-error-50 dark:border-error-800 dark:bg-error-900/20 flex items-start gap-3">
          <AlertCircleIcon className="w-5 h-5 text-error-600 dark:text-error-400 mt-0.5 shrink-0" />
          <p className="text-error-800 dark:text-error-200">{error}</p>
        </div>
      )}

      <div className="space-y-6">
        {/* SECTION 1: Current Plan Hero */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* Main Plan Card */}
          <Card className="lg:col-span-2 p-6 bg-gradient-to-br from-brand-50 to-purple-50 dark:from-brand-900/20 dark:to-purple-900/20 border-0">
            <div className="flex items-start justify-between mb-6">
              <div>
                <div className="flex items-center gap-3 mb-2">
                  <h2 className="text-2xl font-bold text-gray-900 dark:text-white">
                    {currentPlan?.name || 'No Plan'}
                  </h2>
                  <Badge variant="soft" tone={hasActivePlan ? 'success' : 'warning'}>
                    {hasActivePlan ? 'Active' : 'Inactive'}
                  </Badge>
                </div>
                <p className="text-gray-600 dark:text-gray-400">
                  {currentPlan?.description || 'Select a plan to unlock features'}
                </p>
              </div>
              <div className="flex items-center gap-2">
                {availableGateways.stripe && hasActivePlan && (
                  <Button
                    variant="outline"
                    tone="neutral"
                    onClick={handleManageSubscription}
                    startIcon={<CreditCardIcon className="w-4 h-4" />}
                  >
                    Manage Billing
                  </Button>
                )}
                <Button
                  variant="primary"
                  tone="brand"
                  onClick={() => setShowUpgradeModal(true)}
                  startIcon={<ArrowUpIcon className="w-4 h-4" />}
                >
                  Upgrade
                </Button>
              </div>
            </div>

            {/* Quick Stats */}
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              <div className="p-4 bg-white/60 dark:bg-gray-800/40 rounded-xl">
                <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 mb-1">
                  <ZapIcon className="w-4 h-4 text-brand-500" />
                  Credits
                </div>
                <div className="text-2xl font-bold text-gray-900 dark:text-white">
                  {creditBalance?.credits?.toLocaleString() || 0}
                </div>
                <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">Available now</div>
              </div>
              <div className="p-4 bg-white/60 dark:bg-gray-800/40 rounded-xl">
                <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 mb-1">
                  <TrendingUpIcon className="w-4 h-4 text-purple-500" />
                  Used
                </div>
                <div className="text-2xl font-bold text-gray-900 dark:text-white">
                  {creditBalance?.credits_used_this_month?.toLocaleString() || 0}
                </div>
                <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">This month ({creditUsage}%)</div>
              </div>
              <div className="p-4 bg-white/60 dark:bg-gray-800/40 rounded-xl">
                <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 mb-1">
                  <CalendarIcon className="w-4 h-4 text-success-500" />
                  Renews
                </div>
                <div className="text-2xl font-bold text-gray-900 dark:text-white">
                  {currentSubscription?.current_period_end
                    ? new Date(currentSubscription.current_period_end).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
                    : '—'}
                </div>
                <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">Next billing</div>
              </div>
              <div className="p-4 bg-white/60 dark:bg-gray-800/40 rounded-xl">
                <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 mb-1">
                  <WalletIcon className="w-4 h-4 text-warning-500" />
                  Monthly
                </div>
                <div className="text-2xl font-bold text-gray-900 dark:text-white">
                  ${Number(currentPlan?.price || 0).toFixed(0)}
                </div>
                <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">Per month</div>
              </div>
            </div>

            {/* Credit Usage Bar */}
            <div className="mt-6 pt-6 border-t border-white/30 dark:border-gray-700/30">
              <div className="flex justify-between text-sm mb-2">
                <span className="text-gray-600 dark:text-gray-400">Credit Usage</span>
                <span className="font-medium text-gray-900 dark:text-white">
                  {creditBalance?.credits_used_this_month?.toLocaleString() || 0} / {creditBalance?.plan_credits_per_month?.toLocaleString() || 0}
                </span>
              </div>
              <div className="h-3 bg-white/50 dark:bg-gray-800/50 rounded-full overflow-hidden">
                <div
                  className={`h-full rounded-full transition-all duration-500 ${
                    creditUsage >= 90 ? 'bg-error-500' : creditUsage >= 70 ? 'bg-warning-500' : 'bg-gradient-to-r from-brand-500 to-purple-500'
                  }`}
                  style={{ width: `${Math.min(creditUsage, 100)}%` }}
                />
              </div>
            </div>
          </Card>

          {/* Plan Limits Summary */}
          <Card className="p-6">
            <div className="flex items-center justify-between mb-4">
              <h3 className="font-semibold text-gray-900 dark:text-white">Plan Limits</h3>
              <Link to="/account/usage" className="text-sm text-brand-600 dark:text-brand-400 hover:underline flex items-center gap-1">
                View Usage <ChevronRightIcon className="w-4 h-4" />
              </Link>
            </div>
            <div className="space-y-4">
              <div className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800/50 rounded-lg">
                <div className="flex items-center gap-3">
                  <div className="p-2 bg-brand-100 dark:bg-brand-900/30 rounded-lg">
                    <GlobeIcon className="w-4 h-4 text-brand-600 dark:text-brand-400" />
                  </div>
                  <span className="text-sm text-gray-700 dark:text-gray-300">Sites</span>
                </div>
                <span className="font-bold text-gray-900 dark:text-white">
                  {currentPlan?.max_sites === 9999 ? '∞' : currentPlan?.max_sites || 0}
                </span>
              </div>
              <div className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800/50 rounded-lg">
                <div className="flex items-center gap-3">
                  <div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
                    <UsersIcon className="w-4 h-4 text-purple-600 dark:text-purple-400" />
                  </div>
                  <span className="text-sm text-gray-700 dark:text-gray-300">Team Members</span>
                </div>
                <span className="font-bold text-gray-900 dark:text-white">
                  {currentPlan?.max_users === 9999 ? '∞' : currentPlan?.max_users || 0}
                </span>
              </div>
              <div className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800/50 rounded-lg">
                <div className="flex items-center gap-3">
                  <div className="p-2 bg-success-100 dark:bg-success-900/30 rounded-lg">
                    <TagIcon className="w-4 h-4 text-success-600 dark:text-success-400" />
                  </div>
                  <span className="text-sm text-gray-700 dark:text-gray-300">Keywords</span>
                </div>
                <span className="font-bold text-gray-900 dark:text-white">
                  {currentPlan?.max_keywords ? currentPlan.max_keywords.toLocaleString() : 0}
                </span>
              </div>
              <div className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800/50 rounded-lg">
                <div className="flex items-center gap-3">
                  <div className="p-2 bg-warning-100 dark:bg-warning-900/30 rounded-lg">
                    <ZapIcon className="w-4 h-4 text-warning-600 dark:text-warning-400" />
                  </div>
                  <span className="text-sm text-gray-700 dark:text-gray-300">Monthly Credits</span>
                </div>
                <span className="font-bold text-gray-900 dark:text-white">
                  {currentPlan?.included_credits?.toLocaleString() || 0}
                </span>
              </div>
            </div>

            {hasActivePlan && (
              <button
                onClick={() => setShowCancelConfirm(true)}
                className="mt-4 w-full text-sm text-gray-500 dark:text-gray-400 hover:text-error-600 dark:hover:text-error-400 transition-colors"
              >
                Cancel Subscription
              </button>
            )}
          </Card>
        </div>

        {/* SECTION 2: Buy Credits + Quick Upgrade */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {/* Buy Additional Credits */}
          <Card className="p-6">
            <div className="flex items-center justify-between mb-4">
              <div className="flex items-center gap-3">
                <div className="p-2 bg-success-100 dark:bg-success-900/30 rounded-lg">
                  <PlusIcon className="w-5 h-5 text-success-600 dark:text-success-400" />
                </div>
                <div>
                  <h3 className="font-semibold text-gray-900 dark:text-white">Buy Credits</h3>
                  <p className="text-xs text-gray-500 dark:text-gray-400">Top up your credit balance</p>
                </div>
              </div>
              {/* Compact Payment Gateway Selector for Credits */}
              {(availableGateways.stripe || availableGateways.paypal) && (
                <div className="flex items-center gap-1 bg-gray-100 dark:bg-gray-800 p-1 rounded-lg">
                  {availableGateways.stripe && (
                    <button
                      onClick={() => setSelectedGateway('stripe')}
                      className={`p-1.5 rounded-md transition-colors ${
                        selectedGateway === 'stripe'
                          ? 'bg-white dark:bg-gray-700 shadow-sm'
                          : 'hover:bg-white/50 dark:hover:bg-gray-700/50'
                      }`}
                      title="Pay with Card"
                    >
                      <CreditCardIcon className={`w-4 h-4 ${selectedGateway === 'stripe' ? 'text-brand-600' : 'text-gray-500'}`} />
                    </button>
                  )}
                  {availableGateways.paypal && (
                    <button
                      onClick={() => setSelectedGateway('paypal')}
                      className={`p-1.5 rounded-md transition-colors ${
                        selectedGateway === 'paypal'
                          ? 'bg-white dark:bg-gray-700 shadow-sm'
                          : 'hover:bg-white/50 dark:hover:bg-gray-700/50'
                      }`}
                      title="Pay with PayPal"
                    >
                      <WalletIcon className={`w-4 h-4 ${selectedGateway === 'paypal' ? 'text-blue-600' : 'text-gray-500'}`} />
                    </button>
                  )}
                </div>
              )}
            </div>
            <div className="grid grid-cols-2 gap-3">
              {packages.slice(0, 4).map((pkg) => (
                <button
                  key={pkg.id}
                  onClick={() => handlePurchaseCredits(pkg.id)}
                  disabled={purchaseLoadingId === pkg.id}
                  className="p-4 border border-gray-200 dark:border-gray-700 rounded-xl hover:border-brand-500 dark:hover:border-brand-500 hover:bg-brand-50/50 dark:hover:bg-brand-900/20 transition-all text-left group"
                >
                  <div className="flex items-center justify-between mb-2">
                    <span className="text-lg font-bold text-gray-900 dark:text-white">
                      {pkg.credits.toLocaleString()}
                    </span>
                  </div>
                  <div className="text-sm text-gray-500 dark:text-gray-400 mb-1">credits</div>
                  <div className="font-semibold text-brand-600 dark:text-brand-400 group-hover:text-brand-700 dark:group-hover:text-brand-300">
                    ${pkg.price}
                  </div>
                  {purchaseLoadingId === pkg.id && (
                    <Loader2Icon className="w-4 h-4 animate-spin mt-2" />
                  )}
                </button>
              ))}
            </div>
          </Card>

          {/* Quick Upgrade Options */}
          <Card className="p-6">
            <div className="flex items-center justify-between mb-4">
              <div className="flex items-center gap-3">
                <div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
                  <ShootingStarIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" />
                </div>
                <div>
                  <h3 className="font-semibold text-gray-900 dark:text-white">Upgrade Plan</h3>
                  <p className="text-xs text-gray-500 dark:text-gray-400">Get more features & credits</p>
                </div>
              </div>
              <Button
                size="sm"
                variant="outline"
                tone="brand"
                onClick={() => setShowUpgradeModal(true)}
              >
                View All
              </Button>
            </div>
            <div className="space-y-3">
              {upgradePlans.slice(0, 3).map((plan) => (
                <div
                  key={plan.id}
                  className="p-4 border border-gray-200 dark:border-gray-700 rounded-xl flex items-center justify-between hover:border-purple-300 dark:hover:border-purple-700 transition-colors"
                >
                  <div>
                    <div className="font-semibold text-gray-900 dark:text-white">{plan.name}</div>
                    <div className="text-sm text-gray-500 dark:text-gray-400">
                      {plan.included_credits?.toLocaleString() || 0} credits/mo
                    </div>
                  </div>
                  <div className="text-right">
                    <div className="font-bold text-gray-900 dark:text-white">${plan.price}/mo</div>
                    <Button
                      size="sm"
                      variant="ghost"
                      tone="brand"
                      onClick={() => handleSelectPlan(plan.id)}
                      disabled={planLoadingId === plan.id}
                    >
                      {planLoadingId === plan.id ? <Loader2Icon className="w-4 h-4 animate-spin" /> : 'Select'}
                    </Button>
                  </div>
                </div>
              ))}
              {upgradePlans.length === 0 && (
                <div className="text-center py-8 text-gray-500 dark:text-gray-400">
                  <CheckCircleIcon className="w-8 h-8 mx-auto mb-2 text-success-500" />
                  <p>You're on the best plan!</p>
                </div>
              )}
            </div>
          </Card>
        </div>

        {/* SECTION 3: Billing History */}
        <Card className="overflow-hidden">
          <div className="p-6 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
            <div className="flex items-center gap-3">
              <div className="p-2 bg-gray-100 dark:bg-gray-800 rounded-lg">
                <FileTextIcon className="w-5 h-5 text-gray-600 dark:text-gray-400" />
              </div>
              <div>
                <h3 className="font-semibold text-gray-900 dark:text-white">Billing History</h3>
                <p className="text-xs text-gray-500 dark:text-gray-400">Recent invoices and transactions</p>
              </div>
            </div>
          </div>
          <div className="overflow-x-auto">
            <table className="igny8-table-compact min-w-full w-full">
              <thead className="border-b border-gray-100 dark:border-white/[0.05]">
                <tr>
                  <th className="px-6 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400">Invoice</th>
                  <th className="px-6 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400">Date</th>
                  <th className="px-6 py-3 font-medium text-gray-500 text-center text-theme-xs dark:text-gray-400">Amount</th>
                  <th className="px-6 py-3 font-medium text-gray-500 text-center text-theme-xs dark:text-gray-400">Status</th>
                  <th className="px-6 py-3 font-medium text-gray-500 text-end text-theme-xs dark:text-gray-400">Actions</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-100 dark:divide-white/[0.05]">
                {invoices.length === 0 ? (
                  <tr>
                    <td colSpan={5}>
                      <div className="text-center py-12">
                        <FileTextIcon className="w-10 h-10 mx-auto text-gray-300 dark:text-gray-600 mb-3" />
                        <h4 className="text-base font-medium text-gray-900 dark:text-white mb-1">No invoices yet</h4>
                        <p className="text-sm text-gray-500 dark:text-gray-400">Your billing history will appear here</p>
                      </div>
                    </td>
                  </tr>
                ) : (
                  invoices.slice(0, 5).map((invoice) => (
                    <tr key={invoice.id} className="igny8-data-row">
                      <td className="px-6 py-3 font-medium text-gray-900 dark:text-white">{invoice.invoice_number}</td>
                      <td className="px-6 py-3 text-gray-600 dark:text-gray-400">
                        {new Date(invoice.created_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
                      </td>
                      <td className="px-6 py-3 text-center font-semibold text-gray-900 dark:text-white">{formatCurrency(invoice.total_amount, invoice.currency)}</td>
                      <td className="px-6 py-3 text-center">
                        <Badge variant="soft" tone={invoice.status === 'paid' ? 'success' : 'warning'}>
                          {invoice.status}
                        </Badge>
                      </td>
                      <td className="px-6 py-3 text-end">
                        <Button
                          size="sm"
                          variant="ghost"
                          tone="neutral"
                          startIcon={<DownloadIcon className="w-4 h-4" />}
                          onClick={() => handleDownloadInvoice(invoice.id)}
                        >
                          PDF
                        </Button>
                      </td>
                    </tr>
                  ))
                )}
              </tbody>
            </table>
          </div>
        </Card>

        {/* SECTION 4: Payment Methods */}
        <Card className="p-6">
          <div className="flex items-center justify-between mb-4">
            <div className="flex items-center gap-3">
              <div className="p-2 bg-info-100 dark:bg-info-900/30 rounded-lg">
                <CreditCardIcon className="w-5 h-5 text-info-600 dark:text-info-400" />
              </div>
              <div>
                <h3 className="font-semibold text-gray-900 dark:text-white">Payment Methods</h3>
                <p className="text-xs text-gray-500 dark:text-gray-400">Manage how you pay</p>
              </div>
            </div>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {paymentMethods.map((method) => (
              <div
                key={method.id}
                className={`p-4 border rounded-xl transition-all ${
                  selectedPaymentMethod === method.type
                    ? 'border-brand-500 bg-brand-50/50 dark:bg-brand-900/20'
                    : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
                }`}
              >
                <div className="flex items-start justify-between mb-3">
                  <div className="flex items-center gap-3">
                    {method.type === 'bank_transfer' ? (
                      <Building2Icon className="w-6 h-6 text-gray-500" />
                    ) : (
                      <CreditCardIcon className="w-6 h-6 text-gray-500" />
                    )}
                    <div>
                      <div className="font-medium text-gray-900 dark:text-white">{method.display_name}</div>
                      <div className="text-xs text-gray-500 dark:text-gray-400 capitalize">{method.type?.replace('_', ' ')}</div>
                    </div>
                  </div>
                  {method.is_default && (
                    <Badge variant="soft" tone="success" size="sm">Default</Badge>
                  )}
                </div>
                {selectedPaymentMethod !== method.type && (
                  <Button
                    size="sm"
                    variant="outline"
                    tone="neutral"
                    className="w-full"
                    onClick={() => setSelectedPaymentMethod(method.type)}
                  >
                    Select
                  </Button>
                )}
                {selectedPaymentMethod === method.type && (
                  <div className="flex items-center gap-2 text-sm text-brand-600 dark:text-brand-400">
                    <CheckCircleIcon className="w-4 h-4" />
                    Selected for payment
                  </div>
                )}
              </div>
            ))}
            {paymentMethods.length === 0 && (
              <div className="col-span-full text-center py-8 text-gray-500 dark:text-gray-400">
                No payment methods available
              </div>
            )}
          </div>
        </Card>
      </div>

      {/* Upgrade Modal */}
      {showUpgradeModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white dark:bg-gray-900 rounded-2xl shadow-2xl w-full max-w-4xl max-h-[90vh] overflow-auto">
            <div className="sticky top-0 bg-white dark:bg-gray-900 flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700 z-10">
              <div>
                <h2 className="text-xl font-bold text-gray-900 dark:text-white">Choose Your Plan</h2>
                <p className="text-sm text-gray-500 dark:text-gray-400">Select the plan that fits your needs</p>
              </div>
              <button
                onClick={() => setShowUpgradeModal(false)}
                className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors"
              >
                <XIcon className="w-5 h-5 text-gray-500" />
              </button>
            </div>

            {/* Billing Toggle & Payment Gateway */}
            <div className="flex flex-col sm:flex-row items-center justify-center gap-4 py-6">
              {/* Billing Cycle Toggle */}
              <div className="bg-gray-100 dark:bg-gray-800 p-1 rounded-lg flex gap-1">
                <button
                  onClick={() => setSelectedBillingCycle('monthly')}
                  className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
                    selectedBillingCycle === 'monthly'
                      ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm'
                      : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
                  }`}
                >
                  Monthly
                </button>
                <button
                  onClick={() => setSelectedBillingCycle('annual')}
                  className={`px-4 py-2 rounded-md text-sm font-medium transition-colors flex items-center gap-2 ${
                    selectedBillingCycle === 'annual'
                      ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm'
                      : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
                  }`}
                >
                  Annual
                  <Badge variant="soft" tone="success" size="sm">Save 20%</Badge>
                </button>
              </div>

              {/* Payment Gateway Selector */}
              {(availableGateways.stripe || availableGateways.paypal) && (
                <div className="bg-gray-100 dark:bg-gray-800 p-1 rounded-lg flex gap-1">
                  {availableGateways.stripe && (
                    <button
                      onClick={() => setSelectedGateway('stripe')}
                      className={`px-4 py-2 rounded-md text-sm font-medium transition-colors flex items-center gap-2 ${
                        selectedGateway === 'stripe'
                          ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm'
                          : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
                      }`}
                    >
                      <CreditCardIcon className="w-4 h-4" />
                      Card
                    </button>
                  )}
                  {availableGateways.paypal && (
                    <button
                      onClick={() => setSelectedGateway('paypal')}
                      className={`px-4 py-2 rounded-md text-sm font-medium transition-colors flex items-center gap-2 ${
                        selectedGateway === 'paypal'
                          ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm'
                          : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
                      }`}
                    >
                      <WalletIcon className="w-4 h-4" />
                      PayPal
                    </button>
                  )}
                  {availableGateways.manual && (
                    <button
                      onClick={() => setSelectedGateway('manual')}
                      className={`px-4 py-2 rounded-md text-sm font-medium transition-colors flex items-center gap-2 ${
                        selectedGateway === 'manual'
                          ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm'
                          : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
                      }`}
                    >
                      <Building2Icon className="w-4 h-4" />
                      Bank
                    </button>
                  )}
                </div>
              )}
            </div>

            {/* Plans Grid */}
            <div className="p-6 grid grid-cols-1 md:grid-cols-3 gap-4">
              {upgradePlans.map((plan, index) => {
                const isPopular = index === 1;
                const planPrice = Number(plan.price) || 0;
                const annualPrice = planPrice * 0.8 * 12;
                const displayPrice = selectedBillingCycle === 'annual' ? (annualPrice / 12).toFixed(0) : planPrice;
                
                return (
                  <div
                    key={plan.id}
                    className={`relative p-6 border rounded-2xl transition-all ${
                      isPopular
                        ? 'border-brand-500 bg-brand-50/50 dark:bg-brand-900/20 shadow-lg scale-105'
                        : 'border-gray-200 dark:border-gray-700 hover:border-brand-300 dark:hover:border-brand-700'
                    }`}
                  >
                    {isPopular && (
                      <div className="absolute -top-3 left-1/2 -translate-x-1/2">
                        <Badge variant="solid" tone="brand">Most Popular</Badge>
                      </div>
                    )}
                    <div className="text-center mb-6">
                      <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">{plan.name}</h3>
                      <div className="flex items-baseline justify-center gap-1">
                        <span className="text-4xl font-bold text-gray-900 dark:text-white">${displayPrice}</span>
                        <span className="text-gray-500 dark:text-gray-400">/mo</span>
                      </div>
                      {selectedBillingCycle === 'annual' && (
                        <div className="text-sm text-success-600 dark:text-success-400 mt-1">
                          ${annualPrice.toFixed(0)} billed annually
                        </div>
                      )}
                    </div>
                    <ul className="space-y-3 mb-6">
                      <li className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
                        <CheckCircleIcon className="w-4 h-4 text-success-500 shrink-0" />
                        {plan.included_credits?.toLocaleString() || 0} credits/month
                      </li>
                      <li className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
                        <CheckCircleIcon className="w-4 h-4 text-success-500 shrink-0" />
                        {plan.max_sites === 9999 ? 'Unlimited' : plan.max_sites} sites
                      </li>
                      <li className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
                        <CheckCircleIcon className="w-4 h-4 text-success-500 shrink-0" />
                        {plan.max_users === 9999 ? 'Unlimited' : plan.max_users} team members
                      </li>
                      <li className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
                        <CheckCircleIcon className="w-4 h-4 text-success-500 shrink-0" />
                        {plan.max_keywords?.toLocaleString() || 0} keywords
                      </li>
                    </ul>
                    <Button
                      variant={isPopular ? 'primary' : 'outline'}
                      tone="brand"
                      className="w-full"
                      onClick={() => handleSelectPlan(plan.id)}
                      disabled={planLoadingId === plan.id}
                    >
                      {planLoadingId === plan.id ? (
                        <Loader2Icon className="w-4 h-4 animate-spin" />
                      ) : (
                        'Choose Plan'
                      )}
                    </Button>
                  </div>
                );
              })}
            </div>

            {/* Policy Info */}
            <div className="p-6 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50 rounded-b-2xl">
              <div className="flex items-start gap-3">
                <LockIcon className="w-5 h-5 text-success-500 mt-0.5 shrink-0" />
                <div className="text-sm text-gray-600 dark:text-gray-400">
                  <strong className="text-gray-900 dark:text-white">Flexible billing:</strong> Upgrades take effect immediately with prorated billing. 
                  Downgrades apply at the end of your billing period. Cancel anytime with no penalties.
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Cancel Confirmation Modal */}
      {showCancelConfirm && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-md">
            <div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
              <h2 className="text-xl font-semibold text-gray-900 dark:text-white">Cancel Subscription</h2>
              <button
                onClick={() => setShowCancelConfirm(false)}
                className="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
              >
                <XIcon className="w-5 h-5 text-gray-500" />
              </button>
            </div>
            <div className="p-6 space-y-4">
              <div className="flex items-start gap-3 p-4 bg-warning-50 dark:bg-warning-900/20 border border-warning-200 dark:border-warning-800 rounded-lg">
                <AlertCircleIcon className="w-5 h-5 text-warning-600 dark:text-warning-400 mt-0.5 shrink-0" />
                <div className="text-sm text-warning-800 dark:text-warning-200">
                  <p className="font-medium mb-1">Are you sure?</p>
                  <p>Your subscription will remain active until the end of your billing period.</p>
                </div>
              </div>
              <ul className="text-sm text-gray-600 dark:text-gray-400 space-y-2 pl-2">
                <li className="flex items-start gap-2">
                  <span className="text-error-500 mt-1">•</span>
                  <span>You'll lose access to premium features</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-error-500 mt-1">•</span>
                  <span>Remaining credits preserved for 30 days</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-success-500 mt-1">•</span>
                  <span>Resubscribe anytime to restore access</span>
                </li>
              </ul>
            </div>
            <div className="flex items-center justify-end gap-3 p-6 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50 rounded-b-xl">
              <Button variant="outline" tone="neutral" onClick={() => setShowCancelConfirm(false)}>
                Keep Subscription
              </Button>
              <Button
                variant="primary"
                tone="danger"
                onClick={handleCancelSubscription}
                disabled={planLoadingId === currentSubscription?.id}
              >
                {planLoadingId === currentSubscription?.id ? (
                  <><Loader2Icon className="w-4 h-4 mr-2 animate-spin" />Cancelling...</>
                ) : (
                  'Yes, Cancel'
                )}
              </Button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}