import React from 'react';
import { CreditCard, Download, Loader2, RefreshCw, Sparkles } 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 { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Separator } from '@/components/ui/separator';

import { AdminLayout } from '../components/AdminLayout';
import {
  CreditLedgerEntry,
  getCreditBalance,
  getCreditLedger,
  getTenantPackagesOverview,
  PaginationMeta,
  TenantPackageSummary,
} from '../api';
import { isAuthError } from '../auth/tokens';

type LedgerState = {
  entries: CreditLedgerEntry[];
  meta: PaginationMeta | null;
};

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 [balance, setBalance] = React.useState<number>(0);
  const [packages, setPackages] = React.useState<TenantPackageSummary[]>([]);
  const [activePackage, setActivePackage] = React.useState<TenantPackageSummary | null>(null);
  const [ledger, setLedger] = React.useState<LedgerState>({ entries: [], meta: null });
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState<string | null>(null);
  const [loadingMore, setLoadingMore] = React.useState(false);

  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 resolveReason = React.useCallback(
    (reason: string) => {
      switch (reason) {
        case 'purchase':
          return t('management.billing.ledger.reasons.purchase', 'Credit Kauf');
        case 'usage':
          return t('management.billing.ledger.reasons.usage', 'Verbrauch');
        case 'manual':
          return t('management.billing.ledger.reasons.manual', 'Manuelle Anpassung');
        default:
          return reason;
      }
    },
    [t]
  );

  const packageLabels = React.useMemo(
    () => ({
      statusActive: t('management.billing.packages.card.statusActive', 'Aktiv'),
      statusInactive: t('management.billing.packages.card.statusInactive', 'Inaktiv'),
      used: t('management.billing.packages.card.used', 'Genutzte Events'),
      available: t('management.billing.packages.card.available', 'Verfügbar'),
      expires: t('management.billing.packages.card.expires', 'Ablauf'),
    }),
    [t]
  );

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

  async function loadAll() {
    setLoading(true);
    setError(null);
    try {
      const [balanceResult, packagesResult, ledgerResult] = await Promise.all([
        safeCall(() => getCreditBalance()),
        safeCall(() => getTenantPackagesOverview()),
        safeCall(() => getCreditLedger(1)),
      ]);

      if (balanceResult?.balance !== undefined) {
        setBalance(balanceResult.balance);
      }

      if (packagesResult) {
        setPackages(packagesResult.packages);
        setActivePackage(packagesResult.activePackage);
      }

      if (ledgerResult) {
        setLedger({ entries: ledgerResult.data, meta: ledgerResult.meta });
      } else {
        setLedger({ entries: [], meta: null });
      }
    } catch (err) {
      if (!isAuthError(err)) {
        setError(t('management.billing.errors.load', 'Billing Daten konnten nicht geladen werden.'));
      }
    } finally {
      setLoading(false);
    }
  }

  async function loadMore() {
    if (!ledger.meta || loadingMore) {
      return;
    }
    const { current_page, last_page } = ledger.meta;
    if (current_page >= last_page) {
      return;
    }

    setLoadingMore(true);
    try {
      const next = await getCreditLedger(current_page + 1);
      setLedger({
        entries: [...ledger.entries, ...next.data],
        meta: next.meta,
      });
    } catch (err) {
      if (!isAuthError(err)) {
        setError(t('management.billing.errors.more', 'Weitere Ledger Eintraege konnten nicht geladen werden.'));
      }
    } finally {
      setLoadingMore(false);
    }
  }

  const actions = (
    <Button variant="outline" onClick={() => void loadAll()} disabled={loading}>
      {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
      {t('management.billing.actions.refresh', 'Aktualisieren')}
    </Button>
  );

  return (
    <AdminLayout
      title={t('management.billing.title', 'Billing und Credits')}
      subtitle={t('management.billing.subtitle', 'Verwalte Guthaben, Pakete und Abrechnungen.')}
      actions={actions}
    >
      {error && (
        <Alert variant="destructive">
          <AlertTitle>{t('dashboard.alerts.errorTitle', 'Fehler')}</AlertTitle>
          <AlertDescription>{error}</AlertDescription>
        </Alert>
      )}

      {loading ? (
        <BillingSkeleton />
      ) : (
        <>
          <Card className="border-0 bg-white/85 shadow-xl shadow-pink-100/60">
            <CardHeader className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
              <div>
                <CardTitle className="flex items-center gap-2 text-xl text-slate-900">
                  <CreditCard className="h-5 w-5 text-pink-500" />
                  {t('management.billing.sections.overview.title', 'Credits und Status')}
                </CardTitle>
                <CardDescription className="text-sm text-slate-600">
                  {t('management.billing.sections.overview.description', 'Dein aktuelles Guthaben und das aktive Reseller Paket.')}
                </CardDescription>
              </div>
              <Badge className={activePackage ? 'bg-pink-500/10 text-pink-700' : 'bg-slate-200 text-slate-700'}>
                {activePackage ? activePackage.package_name : 'Kein aktives Paket'}
              </Badge>
            </CardHeader>
            <CardContent className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
              <InfoCard
                label={t('management.billing.sections.overview.cards.balance.label', 'Verfügbare Credits')}
                value={balance}
                tone="pink"
              />
              <InfoCard
                label={t('management.billing.sections.overview.cards.used.label', 'Genutzte Events')}
                value={activePackage?.used_events ?? 0}
                tone="amber"
                helper={t('management.billing.sections.overview.cards.used.helper', {
                  count: activePackage?.remaining_events ?? 0,
                })}
              />
              <InfoCard
                label={t('management.billing.sections.overview.cards.price.label', 'Preis (netto)')}
                value={formatCurrency(activePackage?.price ?? null, activePackage?.currency ?? 'EUR')}
                tone="sky"
                helper={activePackage?.currency ?? 'EUR'}
              />
              <InfoCard
                label={t('management.billing.sections.overview.cards.expires.label', 'Ablauf')}
                value={formatDate(activePackage?.expires_at)}
                tone="emerald"
                helper={t('management.billing.sections.overview.cards.expires.helper', 'Automatisch verlängern, falls aktiv')}
              />
            </CardContent>
          </Card>

          <Card className="border-0 bg-white/85 shadow-xl shadow-amber-100/60">
            <CardHeader>
              <CardTitle className="flex items-center gap-2 text-xl text-slate-900">
                <Sparkles className="h-5 w-5 text-amber-500" />
                {t('management.billing.packages.title', 'Paket Historie')}
              </CardTitle>
              <CardDescription className="text-sm text-slate-600">
                {t('management.billing.packages.description', 'Übersicht über aktive und vergangene Reseller Pakete.')}
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-3">
              {packages.length === 0 ? (
                <EmptyState message={t('management.billing.packages.empty', 'Noch keine Pakete gebucht.')} />
              ) : (
                packages.map((pkg) => (
                  <PackageCard
                    key={pkg.id}
                    pkg={pkg}
                    isActive={Boolean(pkg.active)}
                    labels={packageLabels}
                    formatDate={formatDate}
                    formatCurrency={formatCurrency}
                  />
                ))
              )}
            </CardContent>
          </Card>

          <Card className="border-0 bg-white/85 shadow-xl shadow-sky-100/60">
            <CardHeader className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
              <div>
                <CardTitle className="flex items-center gap-2 text-xl text-slate-900">
                  <Sparkles className="h-5 w-5 text-sky-500" />
                  {t('management.billing.ledger.title', 'Credit Ledger')}
                </CardTitle>
                <CardDescription className="text-sm text-slate-600">
                  {t('management.billing.ledger.description', 'Alle Zu- und Abbuchungen deines Credits-Kontos.')}
                </CardDescription>
              </div>
              <Button variant="outline" size="sm">
                <Download className="h-4 w-4" />
                {t('management.billing.actions.exportCsv', 'Export als CSV')}
              </Button>
            </CardHeader>
            <CardContent className="space-y-2">
              {ledger.entries.length === 0 ? (
                <EmptyState message={t('management.billing.ledger.empty', 'Noch keine Ledger-Einträge vorhanden.')} />
              ) : (
                <>
                  {ledger.entries.map((entry) => (
                    <LedgerRow
                      key={`${entry.id}-${entry.created_at}`}
                      entry={entry}
                      resolveReason={resolveReason}
                      formatDate={formatDate}
                    />
                  ))}
                  {ledger.meta && ledger.meta.current_page < ledger.meta.last_page && (
                    <Button variant="outline" className="w-full" onClick={() => void loadMore()} disabled={loadingMore}>
                    {loadingMore ? <Loader2 className="h-4 w-4 animate-spin" /> : t('management.billing.ledger.loadMore', 'Mehr laden')}
                    </Button>
                  )}
                </>
              )}
            </CardContent>
          </Card>
        </>
      )}
    </AdminLayout>
  );
}

async function safeCall<T>(callback: () => Promise<T>): Promise<T | null> {
  try {
    return await callback();
  } catch (error) {
    if (!isAuthError(error)) {
      console.warn('[Tenant Billing] optional endpoint fehlgeschlagen', error);
    }
    return null;
  }
}

function InfoCard({
  label,
  value,
  helper,
  tone,
}: {
  label: string;
  value: string | number | null | undefined;
  helper?: string;
  tone: 'pink' | 'amber' | 'sky' | 'emerald';
}) {
  const toneClass = {
    pink: 'from-pink-50 to-rose-100 text-pink-700',
    amber: 'from-amber-50 to-yellow-100 text-amber-700',
    sky: 'from-sky-50 to-blue-100 text-sky-700',
    emerald: 'from-emerald-50 to-green-100 text-emerald-700',
  }[tone];

  return (
    <div className={`rounded-2xl border border-white/60 bg-gradient-to-br ${toneClass} p-5 shadow-sm`}>
      <span className="text-xs uppercase tracking-wide text-slate-600/90">{label}</span>
      <div className="mt-3 text-xl font-semibold">{value ?? '--'}</div>
      {helper && <p className="mt-2 text-xs text-slate-600/80">{helper}</p>}
    </div>
  );
}

function PackageCard({
  pkg,
  isActive,
  labels,
  formatDate,
  formatCurrency,
}: {
  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;
}) {
  return (
    <div className="rounded-2xl border border-amber-100 bg-white/90 p-4 shadow-sm">
      <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">{pkg.package_name}</h3>
          <p className="text-xs text-slate-600">
            {formatDate(pkg.purchased_at)} · {formatCurrency(pkg.price, pkg.currency ?? 'EUR')}
          </p>
        </div>
        <Badge className={isActive ? 'bg-amber-500/10 text-amber-700' : 'bg-slate-200 text-slate-700'}>
          {isActive ? labels.statusActive : labels.statusInactive}
        </Badge>
      </div>
      <Separator className="my-3" />
      <div className="grid gap-2 text-xs text-slate-600 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>
    </div>
  );
}

function LedgerRow({
  entry,
  resolveReason,
  formatDate,
}: {
  entry: CreditLedgerEntry;
  resolveReason: (reason: string) => string;
  formatDate: (value: string | null | undefined) => string;
}) {
  const positive = entry.delta >= 0;
  return (
    <div className="flex flex-col gap-2 rounded-2xl border border-slate-100 bg-white/90 p-4 shadow-sm sm:flex-row sm:items-center sm:justify-between">
      <div>
        <p className="text-sm font-semibold text-slate-900">{resolveReason(entry.reason)}</p>
        {entry.note && <p className="text-xs text-slate-500">{entry.note}</p>}
      </div>
      <div className="flex items-center gap-4">
        <span className={`text-sm font-semibold ${positive ? 'text-emerald-600' : 'text-rose-600'}`}>
          {positive ? '+' : ''}
          {entry.delta}
        </span>
        <span className="text-xs text-slate-500">{formatDate(entry.created_at)}</span>
      </div>
    </div>
  );
}

function EmptyState({ message }: { message: string }) {
  return (
    <div className="flex flex-col items-center justify-center gap-3 rounded-2xl border border-dashed border-slate-200 bg-white/70 p-8 text-center">
      <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">{message}</p>
    </div>
  );
}

function BillingSkeleton() {
  return (
    <div className="grid gap-6">
      {Array.from({ length: 3 }).map((_, index) => (
        <div key={index} className="space-y-4 rounded-2xl border border-white/60 bg-white/70 p-6 shadow-sm">
          <div className="h-6 w-48 animate-pulse rounded bg-gradient-to-r from-white/40 via-white/60 to-white/40" />
          <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/40 via-white/60 to-white/40"
              />
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}