/**
 * Plans & Billing Page - Refactored for Better UX
 * Organized tabs: Current Plan, Plan Limits, Credits, Purchase Credits, Billing History
 */

import { useState, useEffect, useRef } from 'react';
import { 
  CreditCard, Package, TrendingUp, FileText, Wallet, ArrowUpCircle,
  Loader2, AlertCircle, CheckCircle, Download, BarChart3, Zap, Globe, Users
} from 'lucide-react';
import { Card } from '../../components/ui/card';
import Badge from '../../components/ui/badge/Badge';
import Button from '../../components/ui/button/Button';
import { useToast } from '../../components/ui/toast/ToastContainer';
import { PricingPlan } from '../../components/ui/pricing-table';
import PricingTable1 from '../../components/ui/pricing-table/pricing-table-1';
import CreditCostBreakdownPanel from '../../components/billing/CreditCostBreakdownPanel';
import CreditCostsPanel from '../../components/billing/CreditCostsPanel';
import UsageLimitsPanel from '../../components/billing/UsageLimitsPanel';
import {
  getCreditBalance,
  getCreditPackages,
  getInvoices,
  getAvailablePaymentMethods,
  purchaseCreditPackage,
  downloadInvoicePDF,
  getPayments,
  submitManualPayment,
  createPaymentMethod,
  deletePaymentMethod,
  setDefaultPaymentMethod,
  type CreditBalance,
  type CreditPackage,
  type Invoice,
  type PaymentMethod,
  type Payment,
  getPlans,
  getSubscriptions,
  createSubscription,
  cancelSubscription,
  type Plan,
  type Subscription,
} from '../../services/billing.api';
import { useAuthStore } from '../../store/authStore';

type TabType = 'plan' | 'limits' | 'credits' | 'upgrade' | 'invoices';

export default function PlansAndBillingPage() {
  const [activeTab, setActiveTab] = useState<TabType>('plan');
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string>('');
  const [planLoadingId, setPlanLoadingId] = useState<number | null>(null);
  const [purchaseLoadingId, setPurchaseLoadingId] = useState<number | null>(null);

  // 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 [manualPayment, setManualPayment] = useState({
    invoice_id: '',
    amount: '',
    payment_method: '',
    reference: '',
    notes: '',
  });
  const [newPaymentMethod, setNewPaymentMethod] = useState({
    type: 'bank_transfer',
    display_name: '',
    instructions: '',
  });
  const { user } = useAuthStore.getState();
  const hasLoaded = useRef(false);
  const isAwsAdmin = user?.account?.slug === 'aws-admin';
  const handleBillingError = (err: any, fallback: string) => {
    const message = err?.message || fallback;
    setError(message);
    toast?.error?.(message);
  };

  const toast = useToast();

  useEffect(() => {
    if (hasLoaded.current) return;
    hasLoaded.current = true;
    loadData();
  }, []);

  const loadData = async (allowRetry = true) => {
    try {
      setLoading(true);
      // Fetch in controlled sequence to avoid burst 429s on auth/system scopes
      const balanceData = await getCreditBalance();

      // Small gap between auth endpoints to satisfy tight throttles
      const wait = (ms: number) => new Promise((res) => setTimeout(res, ms));

      const packagesPromise = getCreditPackages();
      const invoicesPromise = getInvoices({});
      const paymentsPromise = getPayments({});
      const methodsPromise = getAvailablePaymentMethods();

      const plansData = await getPlans();
      await wait(400);

      // Subscriptions: retry once on 429 after short backoff; do not hard-fail page
      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: [] };
          }
        } else {
          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 || []);

      // Prefer manual payment method id 14 as default (tenant-facing)
      const methods = (methodsData.results || []).filter((m) => m.is_enabled !== false);
      setPaymentMethods(methods);
      if (methods.length > 0) {
        // Preferred ordering: bank_transfer (default), then manual
        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);
      }

      // Surface all active plans (avoid hiding plans and showing empty state)
      const activePlans = (plansData.results || []).filter((p) => p.is_active !== false);
      // Exclude Enterprise plan for non aws-admin accounts
      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;
      });

      // Ensure the user's assigned plan is included even if subscriptions list is empty
      const accountPlan = user?.account?.plan;
      const isAccountEnterprise = (() => {
        if (!accountPlan) return false;
        const name = (accountPlan.name || '').toLowerCase();
        const slug = (accountPlan.slug || '').toLowerCase();
        return name.includes('enterprise') || slug === 'enterprise';
      })();

      const shouldIncludeAccountPlan = accountPlan && (!isAccountEnterprise || isAwsAdmin);
      if (shouldIncludeAccountPlan && !filteredPlans.find((p) => p.id === accountPlan.id)) {
        filteredPlans.push(accountPlan as any);
      }
      setPlans(filteredPlans);
      const subs = subsData.results || [];
      if (subs.length === 0 && shouldIncludeAccountPlan && accountPlan) {
        subs.push({
          id: accountPlan.id || 0,
          plan: accountPlan,
          status: 'active',
        } as any);
      }
      setSubscriptions(subs);
    } catch (err: any) {
      // Handle throttling gracefully: don't block the page on subscriptions throttle
      if (err?.status === 429 && allowRetry) {
        setError('Request was throttled. Retrying...');
        setTimeout(() => loadData(false), 2500);
      } else if (err?.status === 429) {
        setError(''); // suppress lingering banner
      } else {
        setError(err.message || 'Failed to load billing data');
        console.error('Billing load error:', err);
      }
    } finally {
      setLoading(false);
    }
  };

  const handleSelectPlan = async (planId: number) => {
    try {
      if (!selectedPaymentMethod && paymentMethods.length > 0) {
        setError('Select a payment method to continue');
        return;
      }
      setPlanLoadingId(planId);
      await createSubscription({ plan_id: planId, payment_method: selectedPaymentMethod });
      toast?.success?.('Subscription updated');
      await loadData();
    } catch (err: any) {
      handleBillingError(err, 'Failed to update subscription');
    } finally {
      setPlanLoadingId(null);
    }
  };

  const handleCancelSubscription = async () => {
    if (!currentSubscription?.id) {
      setError('No active subscription to cancel');
      return;
    }
    try {
      setPlanLoadingId(currentSubscription.id);
      await cancelSubscription(currentSubscription.id);
      toast?.success?.('Subscription cancellation requested');
      await loadData();
    } catch (err: any) {
      handleBillingError(err, 'Failed to cancel subscription');
    } finally {
      setPlanLoadingId(null);
    }
  };

  const handlePurchase = async (packageId: number) => {
    try {
      if (!selectedPaymentMethod && paymentMethods.length > 0) {
        setError('Select a payment method to continue');
        return;
      }
      setPurchaseLoadingId(packageId);
      await purchaseCreditPackage({
        package_id: packageId,
        payment_method: (selectedPaymentMethod as any) || 'stripe',
      });
      await loadData();
    } catch (err: any) {
      handleBillingError(err, 'Failed to purchase credits');
    } finally {
      setPurchaseLoadingId(null);
      setLoading(false);
    }
  };

  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) {
      handleBillingError(err, 'Failed to download invoice');
    }
  };

  const handleSubmitManualPayment = async () => {
    try {
      const payload = {
        invoice_id: manualPayment.invoice_id ? Number(manualPayment.invoice_id) : undefined,
        amount: manualPayment.amount,
        payment_method: manualPayment.payment_method || (selectedPaymentMethod as any) || 'manual',
        reference: manualPayment.reference,
        notes: manualPayment.notes,
      };
      await submitManualPayment(payload as any);
      toast?.success?.('Manual payment submitted');
      setManualPayment({ invoice_id: '', amount: '', payment_method: '', reference: '', notes: '' });
      await loadData();
    } catch (err: any) {
      handleBillingError(err, 'Failed to submit payment');
    }
  };

  const handleAddPaymentMethod = async () => {
    if (!newPaymentMethod.display_name.trim()) {
      setError('Payment method name is required');
      return;
    }
    try {
      await createPaymentMethod(newPaymentMethod as any);
      toast?.success?.('Payment method added');
    setNewPaymentMethod({ type: 'bank_transfer', display_name: '', instructions: '' });
      await loadData();
    } catch (err: any) {
      handleBillingError(err, 'Failed to add payment method');
    }
  };

  const handleRemovePaymentMethod = async (id: string) => {
    try {
      await deletePaymentMethod(id);
      toast?.success?.('Payment method removed');
      await loadData();
    } catch (err: any) {
      handleBillingError(err, 'Failed to remove payment method');
    }
  };

  const handleSetDefaultPaymentMethod = async (id: string) => {
    try {
      await setDefaultPaymentMethod(id);
      toast?.success?.('Default payment method updated');
      await loadData();
    } catch (err: any) {
      handleBillingError(err, 'Failed to set default');
    }
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <Loader2 className="w-8 h-8 animate-spin text-[var(--color-brand-500)]" />
      </div>
    );
  }

  const currentSubscription = subscriptions.find((sub) => sub.status === 'active') || subscriptions[0];
  const currentPlanId = typeof currentSubscription?.plan === 'object' ? currentSubscription.plan.id : currentSubscription?.plan;
  // Fallback to account plan if subscription is missing
  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 hasPaymentMethods = paymentMethods.length > 0;
  const subscriptionStatus = currentSubscription?.status || (hasActivePlan ? 'active' : 'none');
  const hasPendingManualPayment = payments.some((p) => p.status === 'pending_approval');

  const tabs = [
    { id: 'plan' as TabType, label: 'Current Plan', icon: <Package className="w-4 h-4" /> },
    { id: 'limits' as TabType, label: 'Plan Limits', icon: <BarChart3 className="w-4 h-4" /> },
    { id: 'credits' as TabType, label: 'Credits', icon: <TrendingUp className="w-4 h-4" /> },
    { id: 'upgrade' as TabType, label: 'Purchase/Upgrade', icon: <Wallet className="w-4 h-4" /> },
    { id: 'invoices' as TabType, label: 'History', icon: <FileText className="w-4 h-4" /> },
  ];

  return (
    <div className="p-6">
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Plans & Billing</h1>
        <p className="text-gray-600 dark:text-gray-400 mt-1">
          Manage your subscription, credits, and billing information
        </p>
      </div>

      {/* Activation / pending payment notice */}
      {!hasActivePlan && (
        <div className="mb-4 p-4 rounded-lg border border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-800 dark:bg-amber-900/20 dark:text-amber-200">
          No active plan. Choose a plan below to activate your account.
        </div>
      )}
      {hasPendingManualPayment && (
        <div className="mb-4 p-4 rounded-lg border border-[var(--color-info-200)] bg-[var(--color-info-50)] text-[var(--color-info-800)] dark:border-[var(--color-info-800)] dark:bg-[var(--color-info-900)]/20 dark:text-[var(--color-info-100)]">
          We received your manual payment. It’s pending admin approval; activation will complete once approved.
        </div>
      )}

      {error && (
        <div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg flex items-center gap-3">
          <AlertCircle className="w-5 h-5 text-red-600" />
          <p className="text-red-800 dark:text-red-200">{error}</p>
        </div>
      )}

      {/* Tabs */}
      <div className="mb-6 border-b border-gray-200 dark:border-gray-700">
        <nav className="-mb-px flex space-x-8 overflow-x-auto">
          {tabs.map((tab) => (
            <button
              type="button"
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className={`
                flex items-center gap-2 py-4 px-1 border-b-2 font-medium text-sm whitespace-nowrap
                ${activeTab === tab.id
                  ? 'border-[var(--color-brand-500)] text-[var(--color-brand-500)]'
                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
                }
              `}
            >
              {tab.icon}
              {tab.label}
            </button>
          ))}
        </nav>
      </div>

      {/* Tab Content */}
      <div className="mt-6">
        {/* Current Plan Tab */}
        {activeTab === 'plan' && (
          <div className="space-y-6">
            {/* Current Plan Overview */}
            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
              {/* Main Plan Card */}
              <Card className="p-6 lg:col-span-2">
                <h2 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Your Current Plan</h2>
                {!hasActivePlan && (
                  <div className="p-4 mb-4 rounded-lg border border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-800 dark:bg-amber-900/20 dark:text-amber-200 flex items-start gap-3">
                    <AlertCircle className="w-5 h-5 mt-0.5 flex-shrink-0" />
                    <div>
                      <p className="font-medium">No Active Plan</p>
                      <p className="text-sm mt-1">Choose a plan below to activate your account and unlock all features.</p>
                    </div>
                  </div>
                )}
                <div className="space-y-4">
                  <div className="flex items-center justify-between">
                    <div>
                      <div className="text-2xl font-bold text-gray-900 dark:text-white">
                        {currentPlan?.name || 'No Plan Selected'}
                      </div>
                      <div className="text-gray-600 dark:text-gray-400 mt-1">
                        {currentPlan?.description || 'Select a plan to unlock full access.'}
                      </div>
                    </div>
                    <Badge variant="soft" tone={hasActivePlan ? 'success' : 'warning'} className="text-sm px-3 py-1">
                      {hasActivePlan ? subscriptionStatus : 'Inactive'}
                    </Badge>
                  </div>
                  
                  {/* Quick Stats Grid */}
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
                    <div className="p-4 bg-gradient-to-br from-brand-50 to-brand-100 dark:from-brand-900/20 dark:to-brand-800/10 rounded-lg border border-brand-200 dark:border-brand-700">
                      <div className="flex items-center gap-2 text-sm text-brand-700 dark:text-brand-300 mb-1">
                        <Zap className="w-4 h-4" />
                        Monthly Credits
                      </div>
                      <div className="text-2xl font-bold text-brand-600 dark:text-brand-400">
                        {creditBalance?.plan_credits_per_month?.toLocaleString?.() || 0}
                      </div>
                    </div>
                    <div className="p-4 bg-gradient-to-br from-success-50 to-success-100 dark:from-success-900/20 dark:to-success-800/10 rounded-lg border border-success-200 dark:border-success-700">
                      <div className="flex items-center gap-2 text-sm text-success-700 dark:text-success-300 mb-1">
                        <Wallet className="w-4 h-4" />
                        Current Balance
                      </div>
                      <div className="text-2xl font-bold text-success-600 dark:text-success-400">
                        {creditBalance?.credits?.toLocaleString?.() || 0}
                      </div>
                    </div>
                    <div className="p-4 bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/10 rounded-lg border border-purple-200 dark:border-purple-700">
                      <div className="flex items-center gap-2 text-sm text-purple-700 dark:text-purple-300 mb-1">
                        <Package className="w-4 h-4" />
                        Renewal Date
                      </div>
                      <div className="text-lg font-bold text-purple-600 dark:text-purple-400">
                        {currentSubscription?.current_period_end
                          ? new Date(currentSubscription.current_period_end).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
                          : '—'}
                      </div>
                    </div>
                  </div>

                  {/* Action Buttons */}
                  <div className="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700 flex gap-3">
                    <Button 
                      variant="primary" 
                      tone="brand"
                      onClick={() => setActiveTab('upgrade')}
                      startIcon={<ArrowUpCircle className="w-4 h-4" />}
                    >
                      Purchase Credits
                    </Button>
                    <Button 
                      variant="outline" 
                      tone="neutral"
                      onClick={() => setActiveTab('limits')}
                    >
                      View Limits
                    </Button>
                    {hasActivePlan && (
                      <Button
                        variant="outline"
                        tone="neutral"
                        disabled={planLoadingId === currentSubscription?.id}
                        onClick={handleCancelSubscription}
                      >
                        {planLoadingId === currentSubscription?.id ? (
                          <>
                            <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                            Cancelling...
                          </>
                        ) : (
                          'Cancel Plan'
                        )}
                      </Button>
                    )}
                  </div>
                </div>
              </Card>

              {/* Plan Features Card */}
              <Card className="p-6">
                <h2 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Included Features</h2>
                <div className="space-y-2">
                  {(currentPlan?.features && currentPlan.features.length > 0
                    ? currentPlan.features
                    : ['AI Content Writer', 'Image Generation', 'Auto Publishing', 'Custom Prompts', 'Email Support', 'API Access'])
                    .map((feature: string, index: number) => (
                      <div key={index} className="flex items-start gap-2 text-sm">
                        <CheckCircle className="w-4 h-4 text-success-600 dark:text-success-400 mt-0.5 flex-shrink-0" />
                        <span className="text-gray-700 dark:text-gray-300">{feature}</span>
                      </div>
                    ))}
                </div>
              </Card>
            </div>

            {/* Plan Limits Overview */}
            {hasActivePlan && (
              <Card className="p-6">
                <div className="flex items-center justify-between mb-6">
                  <div>
                    <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Quick Limits Overview</h3>
                    <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
                      Key plan limits at a glance
                    </p>
                  </div>
                  <Button 
                    variant="outline" 
                    tone="brand"
                    size="sm"
                    onClick={() => setActiveTab('limits')}
                  >
                    View All Limits
                  </Button>
                </div>
                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                  <div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
                    <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 mb-2">
                      <Globe className="w-4 h-4" />
                      Sites
                    </div>
                    <div className="text-2xl font-bold text-gray-900 dark:text-white">
                      {currentPlan?.max_sites === 9999 ? '∞' : currentPlan?.max_sites || 0}
                    </div>
                  </div>
                  <div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
                    <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 mb-2">
                      <Users className="w-4 h-4" />
                      Team Members
                    </div>
                    <div className="text-2xl font-bold text-gray-900 dark:text-white">
                      {currentPlan?.max_users === 9999 ? '∞' : currentPlan?.max_users || 0}
                    </div>
                  </div>
                  <div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
                    <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 mb-2">
                      <FileText className="w-4 h-4" />
                      Content Words/mo
                    </div>
                    <div className="text-2xl font-bold text-gray-900 dark:text-white">
                      {currentPlan?.max_content_words === 9999999 
                        ? '∞' 
                        : currentPlan?.max_content_words 
                          ? `${(currentPlan.max_content_words / 1000).toFixed(0)}K`
                          : 0}
                    </div>
                  </div>
                  <div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
                    <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 mb-2">
                      <Zap className="w-4 h-4" />
                      Monthly Credits
                    </div>
                    <div className="text-2xl font-bold text-gray-900 dark:text-white">
                      {currentPlan?.included_credits?.toLocaleString?.() || 0}
                    </div>
                  </div>
                </div>
              </Card>
            )}
          </div>
        )}

        {/* Plan Limits Tab */}
        {activeTab === 'limits' && (
          <div className="space-y-6">
            <UsageLimitsPanel />
          </div>
        )}

        {/* Credits Overview Tab */}
        {activeTab === 'credits' && (
          <div className="space-y-6">
            {/* Credit Balance Cards */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <Card className="p-6 bg-gradient-to-br from-brand-50 to-brand-100 dark:from-brand-900/20 dark:to-brand-800/10 border-brand-200 dark:border-brand-700">
                <div className="flex items-center gap-3 mb-3">
                  <div className="p-2 bg-brand-500 rounded-lg">
                    <Wallet className="w-5 h-5 text-white" />
                  </div>
                  <div className="text-sm font-medium text-brand-700 dark:text-brand-300">Current Balance</div>
                </div>
                <div className="text-4xl font-bold text-brand-600 dark:text-brand-400">
                  {creditBalance?.credits.toLocaleString() || 0}
                </div>
                <div className="text-sm text-brand-600 dark:text-brand-400 mt-2">credits available</div>
              </Card>
              
              <Card className="p-6 bg-gradient-to-br from-red-50 to-red-100 dark:from-red-900/20 dark:to-red-800/10 border-red-200 dark:border-red-700">
                <div className="flex items-center gap-3 mb-3">
                  <div className="p-2 bg-red-500 rounded-lg">
                    <TrendingUp className="w-5 h-5 text-white" />
                  </div>
                  <div className="text-sm font-medium text-red-700 dark:text-red-300">Used This Month</div>
                </div>
                <div className="text-4xl font-bold text-red-600 dark:text-red-400">
                  {creditBalance?.credits_used_this_month.toLocaleString() || 0}
                </div>
                <div className="text-sm text-red-600 dark:text-red-400 mt-2">credits consumed</div>
              </Card>
              
              <Card className="p-6 bg-gradient-to-br from-success-50 to-success-100 dark:from-success-900/20 dark:to-success-800/10 border-success-200 dark:border-success-700">
                <div className="flex items-center gap-3 mb-3">
                  <div className="p-2 bg-success-500 rounded-lg">
                    <Package className="w-5 h-5 text-white" />
                  </div>
                  <div className="text-sm font-medium text-success-700 dark:text-success-300">Monthly Included</div>
                </div>
                <div className="text-4xl font-bold text-success-600 dark:text-success-400">
                  {creditBalance?.plan_credits_per_month.toLocaleString() || 0}
                </div>
                <div className="text-sm text-success-600 dark:text-success-400 mt-2">from your plan</div>
              </Card>
            </div>

            {/* Usage Summary with Progress Bar */}
            <Card className="p-6">
              <h2 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Credit Usage Summary</h2>
              <div className="space-y-4">
                <div className="flex justify-between items-center text-sm">
                  <span className="text-gray-700 dark:text-gray-300">Monthly Allocation</span>
                  <span className="font-semibold text-gray-900 dark:text-white">
                    {creditBalance?.plan_credits_per_month.toLocaleString() || 0} credits
                  </span>
                </div>
                <div className="flex justify-between items-center text-sm">
                  <span className="text-gray-700 dark:text-gray-300">Used This Month</span>
                  <span className="font-semibold text-red-600 dark:text-red-400">
                    {creditBalance?.credits_used_this_month.toLocaleString() || 0} credits
                  </span>
                </div>
                <div className="flex justify-between items-center text-sm">
                  <span className="text-gray-700 dark:text-gray-300">Remaining Balance</span>
                  <span className="font-semibold text-success-600 dark:text-success-400">
                    {creditBalance?.credits_remaining.toLocaleString() || 0} credits
                  </span>
                </div>
                
                {/* Progress Bar */}
                <div className="pt-2">
                  <div className="flex justify-between items-center text-xs text-gray-600 dark:text-gray-400 mb-2">
                    <span>Usage Progress</span>
                    <span>
                      {creditBalance?.credits_used_this_month && creditBalance?.plan_credits_per_month
                        ? `${Math.round((creditBalance.credits_used_this_month / creditBalance.plan_credits_per_month) * 100)}%`
                        : '0%'}
                    </span>
                  </div>
                  <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3">
                    <div 
                      className="bg-gradient-to-r from-brand-500 to-brand-600 h-3 rounded-full transition-all duration-300" 
                      style={{ 
                        width: creditBalance?.credits_used_this_month && creditBalance?.plan_credits_per_month
                          ? `${Math.min((creditBalance.credits_used_this_month / creditBalance.plan_credits_per_month) * 100, 100)}%` 
                          : '0%' 
                      }}
                    ></div>
                  </div>
                </div>
              </div>
            </Card>

            {/* Credit Cost Breakdown */}
            <div className="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700">
              <div className="mb-6">
                <h2 className="text-xl font-semibold text-gray-900 dark:text-white">Credit Cost Analytics</h2>
                <p className="text-gray-600 dark:text-gray-400">Detailed breakdown of credit usage by operation type</p>
              </div>
              <CreditCostBreakdownPanel />
            </div>

            {/* Credit Costs Reference */}
            <div className="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700">
              <CreditCostsPanel />
            </div>
          </div>
        )}

        {/* Purchase/Upgrade Tab */}
        {activeTab === 'upgrade' && (
          <div className="space-y-6">
            {/* Upgrade Plans Section */}
            <div>
              <div className="mb-6">
                <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
                  {hasActivePlan ? 'Upgrade or Change Your Plan' : 'Choose Your Plan'}
                </h2>
                <p className="text-gray-600 dark:text-gray-400 mt-1">
                  Select the plan that best fits your needs
                </p>
              </div>
              <div className="mx-auto" style={{ maxWidth: '1560px' }}>
                <PricingTable1
                  title=""
                  plans={plans
                    .filter(plan => {
                      // Only show paid plans (exclude Free Plan)
                      const planName = (plan.name || '').toLowerCase();
                      const planPrice = plan.price || 0;
                      return planPrice > 0 && !planName.includes('free');
                    })
                    .map(plan => {
                      const discount = plan.annual_discount_percent || 15;
                      
                      // Get custom description based on plan name
                      let description = 'Standard plan';
                      const planName = plan.name.toLowerCase();
                      if (planName.includes('starter')) {
                        description = 'Launch SEO workflows for small teams';
                      } else if (planName.includes('growth')) {
                        description = 'Scale content production with confidence';
                      } else if (planName.includes('scale')) {
                        description = 'Enterprise power for high volume growth';
                      }
                      
                      // Build features array
                      const features: string[] = [];
                      if (plan.max_sites) features.push(`${plan.max_sites === 999999 ? 'Unlimited' : plan.max_sites} Site${plan.max_sites > 1 ? 's' : ''}`);
                      if (plan.max_users) features.push(`${plan.max_users} Team User${plan.max_users > 1 ? 's' : ''}`);
                      if (plan.included_credits) features.push(`${(plan.included_credits / 1000).toFixed(0)}K Monthly Credits`);
                      if (plan.max_content_words) features.push(`${(plan.max_content_words / 1000).toFixed(0)}K Words/Month`);
                      if (plan.max_clusters) features.push(`${plan.max_clusters} AI Keyword Clusters`);
                      if (plan.max_content_ideas) features.push(`${plan.max_content_ideas} Content Ideas`);
                      if (plan.max_images_basic && plan.max_images_premium) {
                        features.push(`${plan.max_images_basic} Basic / ${plan.max_images_premium} Premium Images`);
                      }
                      
                      return {
                        id: plan.id,
                        name: plan.name,
                        monthlyPrice: plan.price || 0,
                        price: plan.price || 0,
                        annualDiscountPercent: discount,
                        period: '/month',
                        description: description,
                        features: features.length > 0 ? features : ['Monthly credits included', 'Module access', 'Email support'],
                        buttonText: plan.id === currentPlanId ? 'Current Plan' : 'Choose Plan',
                        highlighted: plan.is_featured || false,
                        disabled: plan.id === currentPlanId || planLoadingId === plan.id,
                      };
                    })}
                  showToggle={true}
                  onPlanSelect={(plan) => plan.id && handleSelectPlan(plan.id)}
                />
              </div>

              {/* Plan Change Policy */}
              <Card className="p-6 bg-brand-50 dark:bg-brand-900/20 border-brand-200 dark:border-brand-800 mt-6">
                <h3 className="font-semibold text-brand-900 dark:text-brand-100 mb-2 flex items-center gap-2">
                  <AlertCircle className="w-5 h-5" />
                  Plan Change Policy
                </h3>
                <ul className="space-y-2 text-sm text-brand-800 dark:text-brand-200">
                  <li className="flex items-start gap-2">
                    <CheckCircle className="w-4 h-4 mt-0.5 flex-shrink-0" />
                    Upgrades take effect immediately with prorated billing
                  </li>
                  <li className="flex items-start gap-2">
                    <CheckCircle className="w-4 h-4 mt-0.5 flex-shrink-0" />
                    Downgrades take effect at the end of your current billing period
                  </li>
                  <li className="flex items-start gap-2">
                    <CheckCircle className="w-4 h-4 mt-0.5 flex-shrink-0" />
                    Unused credits carry over when changing plans
                  </li>
                  <li className="flex items-start gap-2">
                    <CheckCircle className="w-4 h-4 mt-0.5 flex-shrink-0" />
                    Cancel anytime - no long-term commitments
                  </li>
                </ul>
              </Card>
            </div>

            {/* Purchase Additional Credits Section */}
            <div className="mt-12 pt-8 border-t-2 border-gray-200 dark:border-gray-700">
              <div className="mb-6">
                <h2 className="text-xl font-semibold mb-2 text-gray-900 dark:text-white">Purchase Additional Credits</h2>
                <p className="text-gray-600 dark:text-gray-400">Top up your credit balance with our credit packages</p>
              </div>

              {/* Current Balance Quick View */}
              <Card className="p-6 bg-gradient-to-r from-brand-50 to-purple-50 dark:from-brand-900/20 dark:to-purple-900/20 border-brand-200 dark:border-brand-700">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-4">
                    <div className="p-3 bg-brand-500 rounded-lg">
                      <Wallet className="w-6 h-6 text-white" />
                    </div>
                    <div>
                      <div className="text-sm text-gray-600 dark:text-gray-400">Current Credit Balance</div>
                      <div className="text-3xl font-bold text-gray-900 dark:text-white">
                        {creditBalance?.credits.toLocaleString() || 0}
                      </div>
                    </div>
                  </div>
                  <div className="text-right">
                    <div className="text-sm text-gray-600 dark:text-gray-400">Monthly Allocation</div>
                    <div className="text-xl font-bold text-brand-600 dark:text-brand-400">
                      {creditBalance?.plan_credits_per_month.toLocaleString() || 0}
                    </div>
                  </div>
                </div>
              </Card>

              {/* Credit Packages Grid */}
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6">
                {packages.map((pkg) => (
                  <Card 
                    key={pkg.id} 
                    className="p-6 hover:shadow-lg transition-all duration-200 hover:border-brand-300 dark:hover:border-brand-600"
                  >
                    <div className="mb-4">
                      <div className="inline-flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-brand-500 to-brand-600 shadow-md">
                        <Zap className="w-6 h-6 text-white" />
                      </div>
                    </div>
                    <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
                      {pkg.name}
                    </h3>
                    {pkg.description && (
                      <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
                        {pkg.description}
                      </p>
                    )}
                    <div className="flex items-baseline gap-2 mb-1">
                      <span className="text-4xl font-bold text-brand-600 dark:text-brand-400">
                        {pkg.credits.toLocaleString()}
                      </span>
                      <span className="text-sm text-gray-500 dark:text-gray-400">credits</span>
                    </div>
                    <div className="text-2xl font-semibold text-gray-900 dark:text-white mb-6">
                      ${pkg.price}
                    </div>
                    <Button 
                      variant="primary"
                      tone="brand"
                      onClick={() => handlePurchase(pkg.id)}
                      fullWidth
                      size="md"
                      disabled={purchaseLoadingId === pkg.id || (!hasPaymentMethods && paymentMethods.length > 0)}
                      startIcon={purchaseLoadingId === pkg.id ? <Loader2 className="w-4 h-4 animate-spin" /> : undefined}
                    >
                      {purchaseLoadingId === pkg.id ? 'Processing...' : 'Purchase Now'}
                    </Button>
                  </Card>
                ))}
                {packages.length === 0 && (
                  <div className="col-span-3 text-center py-16">
                    <div className="inline-flex h-16 w-16 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800 mb-4">
                      <Package className="w-8 h-8 text-gray-400" />
                    </div>
                    <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">No Packages Available</h3>
                    <p className="text-gray-500 dark:text-gray-400">Credit packages will be available soon</p>
                  </div>
                )}
              </div>

              {/* Payment Methods Info */}
              {!hasPaymentMethods && paymentMethods.length === 0 && (
                <Card className="p-6 bg-warning-50 dark:bg-warning-900/20 border-warning-200 dark:border-warning-700 mt-6">
                  <div className="flex items-start gap-3">
                    <div className="p-2 bg-warning-100 dark:bg-warning-800/50 rounded-lg">
                      <AlertCircle className="w-5 h-5 text-warning-600 dark:text-warning-400" />
                    </div>
                    <div>
                      <h3 className="font-semibold text-warning-900 dark:text-warning-100 mb-1">
                        Payment Method Required
                      </h3>
                      <p className="text-sm text-warning-800 dark:text-warning-200">
                        Please contact support to set up a payment method before purchasing credits.
                      </p>
                    </div>
                  </div>
                </Card>
              )}
            </div>
          </div>
        )}

        {/* Billing History Tab */}
        {activeTab === 'invoices' && (
          <div className="space-y-6">
            {/* Invoices Section */}
            <Card className="overflow-hidden">
              <div className="p-6 border-b border-gray-200 dark:border-gray-700">
                <h2 className="text-lg font-semibold">Invoices</h2>
              </div>
              <div className="overflow-x-auto">
                <table className="w-full">
                  <thead className="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
                    <tr>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Invoice
                      </th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Date
                      </th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Amount
                      </th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Status
                      </th>
                      <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Actions
                      </th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
                    {invoices.length === 0 ? (
                      <tr>
                        <td colSpan={5} className="px-6 py-8 text-center text-gray-500">
                          <FileText className="w-12 h-12 mx-auto mb-2 text-gray-400" />
                          No invoices yet
                        </td>
                      </tr>
                    ) : (
                      invoices.map((invoice) => (
                        <tr key={invoice.id} className="hover:bg-gray-50 dark:hover:bg-gray-800">
                          <td className="px-6 py-4 font-medium">{invoice.invoice_number}</td>
                          <td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">
                            {new Date(invoice.created_at).toLocaleDateString()}
                          </td>
                          <td className="px-6 py-4 font-semibold">${invoice.total_amount}</td>
                          <td className="px-6 py-4">
                            <Badge 
                              variant="light" 
                              color={invoice.status === 'paid' ? 'success' : 'warning'}
                            >
                              {invoice.status}
                            </Badge>
                          </td>
                          <td className="px-6 py-4 text-right">
                            <Button 
                              variant="ghost" 
                              tone="brand"
                              size="sm"
                              startIcon={<Download className="w-4 h-4" />}
                              className="ml-auto"
                              onClick={() => handleDownloadInvoice(invoice.id)}
                            >
                              Download
                            </Button>
                          </td>
                        </tr>
                      ))
                    )}
                  </tbody>
                </table>
              </div>
            </Card>

            {/* Payments Section */}
            <Card className="overflow-hidden">
              <div className="p-6 border-b border-gray-200 dark:border-gray-700">
                <h2 className="text-lg font-semibold">Payments</h2>
                <p className="text-sm text-gray-600 dark:text-gray-400">Recent payments and manual submissions</p>
              </div>
              <div className="overflow-x-auto">
                <table className="w-full">
                  <thead className="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
                    <tr>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Invoice</th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Method</th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
                    {payments.length === 0 ? (
                      <tr>
                        <td colSpan={5} className="px-6 py-8 text-center text-gray-500">
                          No payments yet
                        </td>
                      </tr>
                    ) : (
                      payments.map((payment) => (
                        <tr key={payment.id} className="hover:bg-gray-50 dark:hover:bg-gray-800">
                          <td className="px-6 py-4 text-sm font-medium text-gray-900 dark:text-white">
                            {payment.invoice_number || payment.invoice_id || '-'}
                          </td>
                          <td className="px-6 py-4 text-sm text-gray-900 dark:text-white">
                            ${payment.amount}
                          </td>
                          <td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">
                            {payment.payment_method}
                          </td>
                          <td className="px-6 py-4">
                            <Badge 
                              variant="light" 
                              color={
                                payment.status === 'succeeded' || payment.status === 'completed'
                                  ? 'success'
                                  : payment.status === 'pending' || payment.status === 'processing'
                                  ? 'warning'
                                  : 'error'
                              }
                            >
                              {payment.status}
                            </Badge>
                          </td>
                          <td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">
                            {new Date(payment.created_at).toLocaleDateString()}
                          </td>
                        </tr>
                      ))
                    )}
                  </tbody>
                </table>
              </div>
            </Card>

            {/* Payment Methods Section */}
            <Card className="p-6">
              <div className="flex items-center justify-between mb-4">
                <div>
                  <h2 className="text-lg font-semibold">Payment Methods</h2>
                  <p className="text-sm text-gray-600 dark:text-gray-400">Manage your payment methods</p>
                </div>
              </div>
              <div className="space-y-4">
                {paymentMethods.map((method) => (
                  <div key={method.id} className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 flex items-center justify-between">
                    <div className="flex items-center gap-4">
                      <CreditCard className="w-8 h-8 text-gray-400" />
                      <div>
                        <div className="font-medium text-gray-900 dark:text-white">{method.display_name}</div>
                        <div className="text-sm text-gray-600 dark:text-gray-400">{method.type}</div>
                        {method.instructions && (
                          <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">{method.instructions}</div>
                        )}
                      </div>
                    </div>
                    <div className="flex items-center gap-2">
                      {method.is_enabled && (
                        <Badge variant="light" color="success">Active</Badge>
                      )}
                      {method.is_default ? (
                        <Badge variant="light" color="info">Default</Badge>
                      ) : (
                        <Button variant="outline" size="sm" onClick={() => handleSetDefaultPaymentMethod(method.id)}>
                          Make Default
                        </Button>
                      )}
                      <Button variant="outline" size="sm" tone="neutral" onClick={() => handleRemovePaymentMethod(method.id)}>
                        Remove
                      </Button>
                    </div>
                  </div>
                ))}
                {paymentMethods.length === 0 && (
                  <div className="text-center py-12 text-gray-500">
                    No payment methods configured
                  </div>
                )}
              </div>
            </Card>
          </div>
        )}
      </div>
    </div>
  );
}