import React from 'react';
import { AlertTriangle, Loader2, RefreshCw, Sparkles, ArrowUpRight } from 'lucide-react';
import { useTranslation } from 'react-i18next';

import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Separator } from '@/components/ui/separator';

import { AdminLayout } from '../components/AdminLayout';
import {
  getTenantPackagesOverview,
  getTenantPaddleTransactions,
  getTenantAddonHistory,
  PaddleTransactionSummary,
  TenantAddonHistoryEntry,
  TenantPackageSummary,
  PaginationMeta,
} from '../api';
import { isAuthError } from '../auth/tokens';
import {
  TenantHeroCard,
  FrostedSurface,
  tenantHeroPrimaryButtonClass,
  tenantHeroSecondaryButtonClass,
  SectionCard,
  SectionHeader,
} from '../components/tenant';

type PackageWarning = { id: string; tone: 'warning' | 'danger'; message: string };

export default function BillingPage() {
  const { t, i18n } = useTranslation(['management', 'dashboard']);
  const locale = React.useMemo(
    () => (i18n.language?.startsWith('en') ? 'en-GB' : 'de-DE'),
    [i18n.language]
  );

  const [packages, setPackages] = React.useState<TenantPackageSummary[]>([]);
  const [activePackage, setActivePackage] = React.useState<TenantPackageSummary | null>(null);
  const [transactions, setTransactions] = React.useState<PaddleTransactionSummary[]>([]);
  const [transactionCursor, setTransactionCursor] = React.useState<string | null>(null);
  const [transactionsHasMore, setTransactionsHasMore] = React.useState(false);
  const [transactionsLoading, setTransactionsLoading] = React.useState(false);
  const [addonHistory, setAddonHistory] = React.useState<TenantAddonHistoryEntry[]>([]);
  const [addonMeta, setAddonMeta] = React.useState<PaginationMeta | null>(null);
  const [addonsLoading, setAddonsLoading] = React.useState(false);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState<string | null>(null);

  const formatDate = React.useCallback(
    (value: string | null | undefined) => {
      if (!value) return '--';
      const date = new Date(value);
      if (Number.isNaN(date.getTime())) return '--';
      return date.toLocaleDateString(locale, { day: '2-digit', month: 'short', year: 'numeric' });
    },
    [locale]
  );

  const formatCurrency = React.useCallback(
    (value: number | null | undefined, currency = 'EUR') => {
      if (value === null || value === undefined) return '--';
      return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(value);
    },
    [locale]
  );

  const resolveEventName = React.useCallback(
    (event: TenantAddonHistoryEntry['event']) => {
      const fallback = t('billing.sections.addOns.table.eventFallback', 'Event removed');
      if (!event) {
        return fallback;
      }

      if (typeof event.name === 'string' && event.name.trim().length > 0) {
        return event.name;
      }

      if (event.name && typeof event.name === 'object') {
        const lang = i18n.language?.split('-')[0] ?? 'de';
        return (
          event.name[lang] ??
          event.name.de ??
          event.name.en ??
          Object.values(event.name)[0] ??
          fallback
        );
      }

      return fallback;
    },
    [i18n.language, t]
  );

  const packageLabels = React.useMemo(
    () => ({
      statusActive: t('billing.sections.packages.card.statusActive'),
      statusInactive: t('billing.sections.packages.card.statusInactive'),
      used: t('billing.sections.packages.card.used'),
      available: t('billing.sections.packages.card.available'),
      expires: t('billing.sections.packages.card.expires'),
    }),
    [t]
  );

  const loadAll = React.useCallback(async (force = false) => {
    setLoading(true);
    setError(null);
    try {
      const [packagesResult, paddleTransactions, addonHistoryResult] = await Promise.all([
        getTenantPackagesOverview(force ? { force: true } : undefined),
        getTenantPaddleTransactions().catch((err) => {
          console.warn('Failed to load Paddle transactions', err);
          return { data: [] as PaddleTransactionSummary[], nextCursor: null, hasMore: false };
        }),
        getTenantAddonHistory().catch((err) => {
          console.warn('Failed to load add-on history', err);
          return { data: [] as TenantAddonHistoryEntry[], meta: { current_page: 1, last_page: 1, per_page: 25, total: 0 } };
        }),
      ]);
      setPackages(packagesResult.packages);
      setActivePackage(packagesResult.activePackage);
      setTransactions(paddleTransactions.data);
      setTransactionCursor(paddleTransactions.nextCursor);
      setTransactionsHasMore(paddleTransactions.hasMore);
      setAddonHistory(addonHistoryResult.data);
      setAddonMeta(addonHistoryResult.meta);
    } catch (err) {
      if (!isAuthError(err)) {
        setError(t('billing.errors.load'));
      }
    } finally {
      setLoading(false);
    }
  }, [t]);

  const loadMoreTransactions = React.useCallback(async () => {
    if (!transactionsHasMore || transactionsLoading || !transactionCursor) {
      return;
    }

    setTransactionsLoading(true);
    try {
      const result = await getTenantPaddleTransactions(transactionCursor);
      setTransactions((current) => [...current, ...result.data]);
      setTransactionCursor(result.nextCursor);
      setTransactionsHasMore(result.hasMore && Boolean(result.nextCursor));
    } catch (error) {
      console.warn('Failed to load additional Paddle transactions', error);
      setTransactionsHasMore(false);
    } finally {
      setTransactionsLoading(false);
    }
  }, [transactionCursor, transactionsHasMore, transactionsLoading]);

  const loadMoreAddons = React.useCallback(async () => {
    if (addonsLoading || !addonMeta || addonMeta.current_page >= addonMeta.last_page) {
      return;
    }

    setAddonsLoading(true);
    try {
      const nextPage = addonMeta.current_page + 1;
      const result = await getTenantAddonHistory(nextPage);
      setAddonHistory((current) => [...current, ...result.data]);
      setAddonMeta(result.meta);
    } catch (error) {
      console.warn('Failed to load additional add-on history', error);
    } finally {
      setAddonsLoading(false);
    }
  }, [addonMeta, addonsLoading]);

  React.useEffect(() => {
    void loadAll();
  }, [loadAll]);

  const activeWarnings = React.useMemo(
    () => buildPackageWarnings(activePackage, t, formatDate, 'billing.sections.overview.warnings'),
    [activePackage, t, formatDate],
  );
  const hasMoreAddons = React.useMemo(() => {
    if (!addonMeta) {
      return false;
    }
    return addonMeta.current_page < addonMeta.last_page;
  }, [addonMeta]);

  const heroBadge = t('billing.hero.badge', 'Abrechnung');
  const heroDescription = t('billing.hero.description', 'Behalte Laufzeiten, Rechnungen und Limits deiner Pakete im Blick.');
  const heroSupporting: string[] = [
    activePackage
      ? t('billing.hero.summary.active', 'Aktives Paket: {{name}}', { name: activePackage.package_name })
      : t('billing.hero.summary.inactive', 'Noch kein aktives Paket – wählt ein Kontingent, das zu euch passt.'),
    t('billing.hero.summary.transactions', '{{count}} Zahlungen synchronisiert', { count: transactions.length })
  ];
  const packagesHref = `/${i18n.language?.split('-')[0] ?? 'de'}/packages`;
  const heroPrimaryAction = (
    <Button
      size="sm"
      className={tenantHeroPrimaryButtonClass}
      onClick={() => void loadAll(true)}
      disabled={loading}
    >
      {loading ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <RefreshCw className="mr-2 h-4 w-4" />}
      {t('billing.actions.refresh')}
    </Button>
  );
  const heroSecondaryAction = (
    <Button
      size="sm"
      className={tenantHeroSecondaryButtonClass}
      onClick={() => window.location.assign(packagesHref)}
    >
      {t('billing.actions.explorePackages', 'Pakete vergleichen')}
      <ArrowUpRight className="ml-2 h-4 w-4" />
    </Button>
  );
  const nextRenewalLabel = t('billing.hero.nextRenewal', 'Verlängerung am');
  const topWarning = activeWarnings[0];
  const heroAside = (
    <FrostedSurface className="space-y-4 border-white/25 p-5 text-slate-900 shadow-lg shadow-rose-300/20 dark:border-slate-800/70 dark:bg-slate-950/85">
      <div>
        <p className="text-xs uppercase tracking-wide text-slate-500 dark:text-slate-400">
          {t('billing.hero.activePackage', 'Aktuelles Paket')}
        </p>
        <p className="mt-1 text-lg font-semibold text-slate-900 dark:text-slate-100">
          {activePackage?.package_name ?? t('billing.hero.activeFallback', 'Noch nicht ausgewählt')}
        </p>
      </div>
      <div>
        <p className="text-xs uppercase tracking-wide text-slate-500 dark:text-slate-400">{nextRenewalLabel}</p>
        <p className="mt-1 text-sm font-medium text-slate-800 dark:text-slate-200">{formatDate(activePackage?.expires_at)}</p>
      </div>
      {topWarning ? (
        <div className="rounded-xl border border-amber-200/60 bg-amber-50/80 p-3 text-xs text-amber-800 shadow-inner shadow-amber-200/40 dark:border-amber-500/50 dark:bg-amber-500/15 dark:text-amber-200">
          {topWarning.message}
        </div>
      ) : null}
    </FrostedSurface>
  );

  return (
    <AdminLayout title={t('billing.title')} subtitle={t('billing.subtitle')}>
      <TenantHeroCard
        badge={heroBadge}
        title={t('billing.title')}
        description={heroDescription}
        supporting={heroSupporting}
        primaryAction={heroPrimaryAction}
        secondaryAction={heroSecondaryAction}
        aside={heroAside}
      />

      {error && (
        <Alert variant="destructive">
          <AlertTitle>{t('dashboard:alerts.errorTitle')}</AlertTitle>
          <AlertDescription>{error}</AlertDescription>
        </Alert>
      )}

      {loading ? (
        <BillingSkeleton />
      ) : (
        <>
          <SectionCard className="mt-6 space-y-5">
            <SectionHeader
              eyebrow={t('billing.sections.overview.badge', 'Aktuelles Paket')}
              title={t('billing.sections.overview.title')}
              description={t('billing.sections.overview.description')}
              endSlot={(
                <Badge className={activePackage ? 'bg-pink-500/10 text-pink-700 dark:bg-pink-500/20 dark:text-pink-200' : 'bg-slate-200 text-slate-700 dark:bg-slate-800 dark:text-slate-200'}>
                  {activePackage ? activePackage.package_name : t('billing.sections.overview.emptyBadge')}
                </Badge>
              )}
            />
            {activePackage ? (
              <div className="space-y-4">
                {activeWarnings.length > 0 && (
                    <div className="space-y-2">
                      {activeWarnings.map((warning) => (
                        <Alert
                          key={warning.id}
                          variant={warning.tone === 'danger' ? 'destructive' : 'default'}
                          className={warning.tone === 'warning' ? 'border-amber-400/40 bg-amber-50 text-amber-900 dark:border-amber-500/60 dark:bg-amber-500/15 dark:text-amber-200' : 'dark:border-slate-800/70 dark:bg-slate-950/80'}
                        >
                          <AlertDescription className="flex items-center gap-2 text-sm">
                            <AlertTriangle className="h-4 w-4" />
                            {warning.message}
                          </AlertDescription>
                        </Alert>
                      ))}
                    </div>
                  )}

                  <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                    <InfoCard
                      label={t('billing.sections.overview.cards.package.label')}
                      value={activePackage.package_name}
                      tone="pink"
                      helper={t('billing.sections.overview.cards.package.helper')}
                    />
                    <InfoCard
                      label={t('billing.sections.overview.cards.used.label')}
                      value={activePackage.used_events ?? 0}
                      tone="amber"
                      helper={t('billing.sections.overview.cards.used.helper', {
                        count: activePackage.remaining_events ?? 0,
                      })}
                    />
                    <InfoCard
                      label={t('billing.sections.overview.cards.price.label')}
                      value={formatCurrency(activePackage.price ?? null, activePackage.currency ?? 'EUR')}
                      tone="sky"
                      helper={activePackage.currency ?? 'EUR'}
                    />
                    <InfoCard
                      label={t('billing.sections.overview.cards.expires.label')}
                      value={formatDate(activePackage.expires_at)}
                      tone="emerald"
                      helper={t('billing.sections.overview.cards.expires.helper')}
                    />
                  </div>
                </div>
              ) : (
                <EmptyState message={t('billing.sections.overview.empty')} />
              )}
            </SectionCard>

          <SectionCard className="space-y-4">
            <SectionHeader
              eyebrow={t('billing.sections.packages.badge', 'Pakete')}
              title={t('billing.sections.packages.title')}
              description={t('billing.sections.packages.description')}
            />
            <div className="space-y-3">
              {packages.length === 0 ? (
                <EmptyState message={t('billing.sections.packages.empty')} />
              ) : (
                packages.map((pkg) => {
                  const warnings = buildPackageWarnings(pkg, t, formatDate, 'billing.sections.packages.card.warnings');
                  return (
                    <PackageCard
                      key={pkg.id}
                      pkg={pkg}
                      isActive={Boolean(pkg.active)}
                      labels={packageLabels}
                      formatDate={formatDate}
                      formatCurrency={formatCurrency}
                      warnings={warnings}
                    />
                  );
                })
              )}
            </div>
          </SectionCard>

          <SectionCard className="space-y-4">
            <SectionHeader
              eyebrow={t('billing.sections.addOns.badge', 'Add-ons')}
              title={t('billing.sections.addOns.title')}
              description={t('billing.sections.addOns.description')}
            />
            {addonHistory.length === 0 ? (
              <EmptyState message={t('billing.sections.addOns.empty')} />
            ) : (
              <AddonHistoryTable
                items={addonHistory}
                formatCurrency={formatCurrency}
                formatDate={formatDate}
                resolveEventName={resolveEventName}
                locale={locale}
                t={t}
              />
            )}
            {hasMoreAddons && (
              <Button variant="outline" onClick={() => void loadMoreAddons()} disabled={addonsLoading}>
                {addonsLoading ? (
                  <>
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                    {t('billing.sections.addOns.loadingMore', 'Loading add-ons...')}
                  </>
                ) : (
                  t('billing.sections.addOns.loadMore', 'Load more add-ons')
                )}
              </Button>
            )}
          </SectionCard>

          <SectionCard className="space-y-4">
            <SectionHeader
              eyebrow={t('billing.sections.transactions.badge', 'Transaktionen')}
              title={t('billing.sections.transactions.title')}
              description={t('billing.sections.transactions.description')}
            />
            <div className="space-y-3">
              {transactions.length === 0 ? (
                <EmptyState message={t('billing.sections.transactions.empty')} />
              ) : (
                <div className="grid gap-3">
                  {transactions.map((transaction) => (
                    <TransactionCard
                      key={transaction.id ?? Math.random().toString(36).slice(2)}
                      transaction={transaction}
                      formatCurrency={formatCurrency}
                      formatDate={formatDate}
                      locale={locale}
                      t={t}
                    />
                  ))}
                </div>
              )}
              {transactionsHasMore && (
                <Button
                  variant="outline"
                  onClick={() => void loadMoreTransactions()}
                  disabled={transactionsLoading}
                >
                  {transactionsLoading ? (
                    <>
                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                      {t('billing.sections.transactions.loadingMore')}
                    </>
                  ) : (
                    t('billing.sections.transactions.loadMore')
                  )}
                </Button>
              )}
            </div>
          </SectionCard>

        </>
      )}
    </AdminLayout>
  );
}

function AddonHistoryTable({
  items,
  formatCurrency,
  formatDate,
  resolveEventName,
  locale,
  t,
}: {
  items: TenantAddonHistoryEntry[];
  formatCurrency: (value: number | null | undefined, currency?: string) => string;
  formatDate: (value: string | null | undefined) => string;
  resolveEventName: (event: TenantAddonHistoryEntry['event']) => string;
  locale: string;
  t: (key: string, options?: Record<string, unknown>) => string;
}) {
  const extrasLabel = (key: 'photos' | 'guests' | 'gallery', count: number) =>
    t(`billing.sections.addOns.extras.${key}`, { count });

  return (
    <FrostedSurface className="overflow-x-auto border border-slate-200/60 p-0 dark:border-slate-800/70">
      <table className="min-w-full divide-y divide-slate-200 text-sm dark:divide-slate-800">
        <thead className="bg-slate-50/60 text-left text-xs font-semibold uppercase tracking-wide text-slate-500 dark:bg-slate-900/20 dark:text-slate-400">
          <tr>
            <th className="px-4 py-3">{t('billing.sections.addOns.table.addon')}</th>
            <th className="px-4 py-3">{t('billing.sections.addOns.table.event')}</th>
            <th className="px-4 py-3">{t('billing.sections.addOns.table.amount')}</th>
            <th className="px-4 py-3">{t('billing.sections.addOns.table.status')}</th>
            <th className="px-4 py-3">{t('billing.sections.addOns.table.purchased')}</th>
          </tr>
        </thead>
        <tbody className="divide-y divide-slate-100 dark:divide-slate-800/70">
          {items.map((item) => {
            const extras: string[] = [];
            if (item.extra_photos > 0) {
              extras.push(extrasLabel('photos', item.extra_photos));
            }
            if (item.extra_guests > 0) {
              extras.push(extrasLabel('guests', item.extra_guests));
            }
            if (item.extra_gallery_days > 0) {
              extras.push(extrasLabel('gallery', item.extra_gallery_days));
            }

            const purchasedLabel = item.purchased_at
              ? new Date(item.purchased_at).toLocaleString(locale, {
                  year: 'numeric',
                  month: 'short',
                  day: '2-digit',
                  hour: '2-digit',
                  minute: '2-digit',
                })
              : formatDate(item.purchased_at);

            const statusKey = `billing.sections.addOns.status.${item.status}`;
            const statusLabel = t(statusKey, { defaultValue: item.status });
            const statusTone: Record<string, string> = {
              completed: 'bg-emerald-500/15 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-200',
              pending: 'bg-amber-500/15 text-amber-700 dark:bg-amber-500/20 dark:text-amber-200',
              failed: 'bg-rose-500/15 text-rose-700 dark:bg-rose-500/20 dark:text-rose-200',
            };

            return (
              <tr key={item.id} className="bg-white even:bg-slate-50/40 dark:bg-slate-950/50 dark:even:bg-slate-900/40">
                <td className="px-4 py-3 align-top">
                  <div className="flex items-center gap-2 text-slate-900 dark:text-slate-100">
                    <span className="font-semibold">{item.label ?? item.addon_key}</span>
                    {item.quantity > 1 ? (
                      <Badge variant="outline" className="border-slate-200/70 text-[11px] font-medium dark:border-slate-700">
                        ×{item.quantity}
                      </Badge>
                    ) : null}
                  </div>
                  {extras.length > 0 ? (
                    <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">{extras.join(' · ')}</p>
                  ) : null}
                </td>
                <td className="px-4 py-3 align-top">
                  <p className="font-medium text-slate-800 dark:text-slate-200">{resolveEventName(item.event)}</p>
                  {item.event?.slug ? (
                    <p className="text-xs text-slate-500 dark:text-slate-500">{item.event.slug}</p>
                  ) : null}
                </td>
                <td className="px-4 py-3 align-top">
                  <p className="font-semibold text-slate-900 dark:text-slate-100">
                    {formatCurrency(item.amount, item.currency ?? 'EUR')}
                  </p>
                  {item.receipt_url ? (
                    <a
                      href={item.receipt_url}
                      target="_blank"
                      rel="noreferrer"
                      className="text-xs text-sky-600 hover:text-sky-700 dark:text-sky-300 dark:hover:text-sky-200"
                    >
                      {t('billing.sections.transactions.labels.receipt')}
                    </a>
                  ) : null}
                </td>
                <td className="px-4 py-3 align-top">
                  <Badge className={statusTone[item.status] ?? 'bg-slate-200 text-slate-700 dark:bg-slate-800 dark:text-slate-200'}>
                    {statusLabel}
                  </Badge>
                </td>
                <td className="px-4 py-3 align-top text-sm text-slate-600 dark:text-slate-300">{purchasedLabel}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </FrostedSurface>
  );
}

function TransactionCard({
  transaction,
  formatCurrency,
  formatDate,
  locale,
  t,
}: {
  transaction: PaddleTransactionSummary;
  formatCurrency: (value: number | null | undefined, currency?: string) => string;
  formatDate: (value: string | null | undefined) => string;
  locale: string;
  t: (key: string, options?: Record<string, unknown>) => string;
}) {
  const amount = transaction.grand_total ?? transaction.amount ?? null;
  const currency = transaction.currency ?? 'EUR';
  const createdAtIso = transaction.created_at ?? null;
  const createdAt = createdAtIso ? new Date(createdAtIso) : null;
  const createdLabel = createdAt
    ? createdAt.toLocaleString(locale, {
        year: 'numeric',
        month: 'short',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
      })
    : formatDate(createdAtIso);
  const statusKey = transaction.status ? `billing.sections.transactions.status.${transaction.status}` : 'billing.sections.transactions.status.unknown';
  const statusText = t(statusKey, {
    defaultValue: (transaction.status ?? 'unknown').replace(/_/g, ' '),
  });

  return (
    <FrostedSurface className="flex flex-col gap-3 border border-slate-200/60 p-4 text-slate-900 shadow-md shadow-slate-200/10 transition-colors duration-200 dark:border-slate-800/70 dark:bg-slate-950/80 md:flex-row md:items-center md:justify-between">
      <div className="space-y-1">
        <p className="text-sm font-semibold text-slate-800 dark:text-slate-100">
          {t('billing.sections.transactions.labels.transactionId', { id: transaction.id ?? '—' })}
        </p>
        <p className="text-xs uppercase tracking-wide text-slate-500 dark:text-slate-400">{createdLabel}</p>
        {transaction.checkout_id ? (
          <p className="text-xs text-slate-500 dark:text-slate-400">
            {t('billing.sections.transactions.labels.checkoutId', { id: transaction.checkout_id })}
          </p>
        ) : null}
        {transaction.origin ? (
          <p className="text-xs text-slate-500 dark:text-slate-400">
            {t('billing.sections.transactions.labels.origin', { origin: transaction.origin })}
          </p>
        ) : null}
      </div>
      <div className="flex flex-col items-start gap-2 text-sm font-medium text-slate-700 dark:text-slate-300 md:flex-row md:items-center md:gap-4">
        <Badge className="bg-sky-100 text-sky-700 dark:bg-sky-500/20 dark:text-sky-200">
          {statusText}
        </Badge>
        <div className="text-base font-semibold text-slate-900 dark:text-slate-100">
          {formatCurrency(amount, currency)}
        </div>
        {transaction.tax !== undefined && transaction.tax !== null ? (
          <span className="text-xs text-slate-500 dark:text-slate-400">
            {t('billing.sections.transactions.labels.tax', { value: formatCurrency(transaction.tax, currency) })}
          </span>
        ) : null}
        {transaction.receipt_url ? (
          <a
            href={transaction.receipt_url}
            target="_blank"
            rel="noreferrer"
            className="text-xs font-medium text-sky-600 transition hover:text-sky-700 dark:text-sky-300 dark:hover:text-sky-200"
          >
            {t('billing.sections.transactions.labels.receipt')}
          </a>
        ) : null}
      </div>
    </FrostedSurface>
  );
}

function InfoCard({
  label,
  value,
  helper,
  tone,
}: {
  label: string;
  value: string | number | null | undefined;
  helper?: string;
  tone: 'pink' | 'amber' | 'sky' | 'emerald';
}) {
  const toneBorders: Record<'pink' | 'amber' | 'sky' | 'emerald', string> = {
    pink: 'border-pink-200/60 shadow-rose-200/30',
    amber: 'border-amber-200/60 shadow-amber-200/30',
    sky: 'border-sky-200/60 shadow-sky-200/30',
    emerald: 'border-emerald-200/60 shadow-emerald-200/30',
  } as const;

  return (
    <FrostedSurface className={`border ${toneBorders[tone]} p-5 text-slate-900 shadow-md transition-colors duration-200 dark:text-slate-100`}>
      <span className="text-xs uppercase tracking-wide text-slate-500 dark:text-slate-400">{label}</span>
      <div className="mt-3 text-xl font-semibold">{value ?? '--'}</div>
      {helper ? <p className="mt-2 text-xs text-slate-600 dark:text-slate-400">{helper}</p> : null}
    </FrostedSurface>
  );
}

function PackageCard({
  pkg,
  isActive,
  labels,
  formatDate,
  formatCurrency,
  warnings = [],
}: {
  pkg: TenantPackageSummary;
  isActive: boolean;
  labels: {
    statusActive: string;
    statusInactive: string;
    used: string;
    available: string;
    expires: string;
  };
  formatDate: (value: string | null | undefined) => string;
  formatCurrency: (value: number | null | undefined, currency?: string) => string;
  warnings?: PackageWarning[];
}) {
  return (
    <FrostedSurface className={`space-y-4 border ${isActive ? 'border-amber-200/60 shadow-amber-200/20' : 'border-slate-200/60 shadow-slate-200/20'} p-5 text-slate-900 dark:text-slate-100`}>
      {warnings.length > 0 && (
        <div className="mb-3 space-y-2">
          {warnings.map((warning) => (
            <Alert
              key={warning.id}
              variant={warning.tone === 'danger' ? 'destructive' : 'default'}
              className={warning.tone === 'warning' ? 'border-amber-400/40 bg-amber-50 text-amber-900 dark:border-amber-500/50 dark:bg-amber-500/15 dark:text-amber-200' : 'dark:border-slate-800/70 dark:bg-slate-950/80'}
            >
              <AlertDescription className="flex items-center gap-2 text-xs">
                <AlertTriangle className="h-4 w-4" />
                {warning.message}
              </AlertDescription>
            </Alert>
          ))}
        </div>
      )}
      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h3 className="text-sm font-semibold text-slate-900 dark:text-slate-100">{pkg.package_name}</h3>
          <p className="text-xs text-slate-600 dark:text-slate-400">
            {formatDate(pkg.purchased_at)} · {formatCurrency(pkg.price, pkg.currency ?? 'EUR')}
          </p>
        </div>
        <Badge className={isActive ? 'bg-amber-500/15 text-amber-700 dark:bg-amber-500/20 dark:text-amber-200' : 'bg-slate-200 text-slate-700 dark:bg-slate-800 dark:text-slate-200'}>
          {isActive ? labels.statusActive : labels.statusInactive}
        </Badge>
      </div>
      <Separator className="my-3 dark:border-slate-800/70" />
      <div className="grid gap-2 text-xs text-slate-600 dark:text-slate-400 sm:grid-cols-3">
        <span>
          {labels.used}: {pkg.used_events}
        </span>
        <span>
          {labels.available}: {pkg.remaining_events ?? '--'}
        </span>
        <span>
          {labels.expires}: {formatDate(pkg.expires_at)}
        </span>
      </div>
    </FrostedSurface>
  );
}

function EmptyState({ message }: { message: string }) {
  return (
    <FrostedSurface className="flex flex-col items-center justify-center gap-3 border border-dashed border-slate-200/70 p-8 text-center shadow-inner dark:border-slate-700/60">
      <div className="rounded-full bg-pink-100 p-3 text-pink-600 shadow-inner shadow-pink-200/80">
        <Sparkles className="h-5 w-5" />
      </div>
      <p className="text-sm text-slate-600 dark:text-slate-400">{message}</p>
    </FrostedSurface>
  );
}

function buildPackageWarnings(
  pkg: TenantPackageSummary | null | undefined,
  translate: (key: string, options?: Record<string, unknown>) => string,
  formatDate: (value: string | null | undefined) => string,
  keyPrefix: string,
): PackageWarning[] {
  if (!pkg) {
    return [];
  }

  const warnings: PackageWarning[] = [];
  const remaining = typeof pkg.remaining_events === 'number' ? pkg.remaining_events : null;

  if (remaining !== null) {
    if (remaining <= 0) {
      warnings.push({
        id: `${pkg.id}-no-events`,
        tone: 'danger',
        message: translate(`${keyPrefix}.noEvents`),
      });
    } else if (remaining <= 2) {
      warnings.push({
        id: `${pkg.id}-low-events`,
        tone: 'warning',
        message: translate(`${keyPrefix}.lowEvents`, { remaining }),
      });
    }
  }

  const expiresAt = pkg.expires_at ? new Date(pkg.expires_at) : null;
  if (expiresAt && !Number.isNaN(expiresAt.getTime())) {
    const now = new Date();
    const diffMillis = expiresAt.getTime() - now.getTime();
    const diffDays = Math.ceil(diffMillis / (1000 * 60 * 60 * 24));
    const formatted = formatDate(pkg.expires_at);

    if (diffDays < 0) {
      warnings.push({
        id: `${pkg.id}-expired`,
        tone: 'danger',
        message: translate(`${keyPrefix}.expired`, { date: formatted }),
      });
    } else if (diffDays <= 14) {
      warnings.push({
        id: `${pkg.id}-expires`,
        tone: 'warning',
        message: translate(`${keyPrefix}.expiresSoon`, { date: formatted }),
      });
    }
  }

  return warnings;
}

function BillingSkeleton() {
  return (
    <div className="grid gap-6">
      {Array.from({ length: 3 }).map((_, index) => (
        <FrostedSurface
          key={index}
          className="space-y-4 border border-white/20 p-6 shadow-md shadow-rose-200/10 dark:border-slate-800/70 dark:bg-slate-950/80"
        >
          <div className="h-6 w-48 animate-pulse rounded bg-gradient-to-r from-white/30 via-white/60 to-white/30 dark:from-slate-700 dark:via-slate-600 dark:to-slate-700" />
          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
            {Array.from({ length: 4 }).map((__, placeholderIndex) => (
              <div
                key={placeholderIndex}
                className="h-24 animate-pulse rounded-2xl bg-gradient-to-r from-white/30 via-white/55 to-white/30 dark:from-slate-800 dark:via-slate-700 dark:to-slate-800"
              />
            ))}
          </div>
        </FrostedSurface>
      ))}
    </div>
  );
}