import React from 'react';
import { CreditCard, Download } from 'lucide-react';
import { Button, Panel, StatusBadge, UsageMeter } from '../../ui';
import { useBilling } from '../../../hooks/usePlanUsage';
import { useSetIsUpgradeModalOpen } from '../../../contexts/UIContext';
import { manageSubscription, updatePaymentMethod } from '../../../featureStubs';

const BillingSettingsSection: React.FC = () => {
  const billing = useBilling();
  const openUpgrade = useSetIsUpgradeModalOpen();
  const isPro = billing.plan === 'pro';
  const { paymentMethod, invoices } = billing;

  return (
    <div className="space-y-4">
      {/* Current plan */}
      <Panel className="space-y-4 p-4">
        <div className="flex flex-wrap items-center justify-between gap-3">
          <div>
            <div className="flex items-center gap-2">
              <h4 className="text-sm font-semibold text-app-text">{isPro ? 'Pro' : 'Free'} plan</h4>
              <StatusBadge tone={isPro ? 'brand' : 'neutral'}>{billing.priceLabel}</StatusBadge>
            </div>
            <p className="mt-0.5 text-xs text-app-muted">
              {isPro ? `Renews ${billing.renewsAt}.` : `Usage resets ${billing.renewsAt}.`}
            </p>
          </div>
          {isPro ? (
            <Button onClick={manageSubscription}>Manage plan</Button>
          ) : (
            <Button variant="primary" onClick={() => openUpgrade(true)}>Upgrade</Button>
          )}
        </div>
        <UsageMeter used={billing.usage.used} limit={billing.usage.limit} unlimited={billing.usage.unlimited} />
      </Panel>

      {/* Usage credits */}
      <Panel className="flex flex-wrap items-center justify-between gap-3 p-4">
        <div>
          <h4 className="text-sm font-semibold text-app-text">Usage credits</h4>
          <p className="mt-0.5 text-xs text-app-muted">{billing.credits.toLocaleString()} credits remaining</p>
        </div>
        <Button onClick={() => openUpgrade(true)}>Buy credits</Button>
      </Panel>

      {/* Payment method */}
      <Panel className="flex flex-wrap items-center justify-between gap-3 p-4">
        <div className="flex items-center gap-3">
          <span className="flex h-9 w-9 items-center justify-center rounded-md bg-app-surface-muted text-app-muted">
            <CreditCard size={18} />
          </span>
          <div>
            <h4 className="text-sm font-semibold text-app-text">Payment method</h4>
            <p className="mt-0.5 text-xs text-app-muted">
              {paymentMethod
                ? `${paymentMethod.brand} •••• ${paymentMethod.last4} · Exp ${paymentMethod.expMonth}/${paymentMethod.expYear}`
                : 'No payment method on file'}
            </p>
          </div>
        </div>
        <Button onClick={updatePaymentMethod}>{paymentMethod ? 'Update' : 'Add'}</Button>
      </Panel>

      {/* Billing history */}
      {invoices.length > 0 && (
        <Panel className="overflow-hidden p-0">
          <h4 className="border-b border-app-border px-4 py-3 text-sm font-semibold text-app-text">Billing history</h4>
          <ul className="divide-y divide-app-border">
            {invoices.map((invoice) => (
              <li key={invoice.id} className="flex items-center justify-between px-4 py-3 text-sm">
                <div className="flex items-center gap-3">
                  <span className="text-app-text">{invoice.date}</span>
                  <StatusBadge tone={invoice.status === 'paid' ? 'success' : 'warning'}>{invoice.status}</StatusBadge>
                </div>
                <div className="flex items-center gap-3">
                  <span className="text-app-muted">{invoice.amount}</span>
                  <button
                    type="button"
                    aria-label={`Download invoice from ${invoice.date}`}
                    className="text-app-muted transition-colors hover:text-app-text focus:outline-none focus-visible:ring-2 focus-visible:ring-brand"
                  >
                    <Download size={15} />
                  </button>
                </div>
              </li>
            ))}
          </ul>
        </Panel>
      )}

      <p className="px-1 text-xs text-app-muted">
        Billing isn’t live yet — this previews the upcoming plans, credits &amp; invoices UI.
      </p>
    </div>
  );
};

export default BillingSettingsSection;