import React from 'react';
import { 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 { getTenantPackagesOverview, getTenantPaddleTransactions, PaddleTransactionSummary, TenantPackageSummary } from '../api';
import { isAuthError } from '../auth/tokens';

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 [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 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 () => {
    setLoading(true);
    setError(null);
    try {
      const [packagesResult, paddleTransactions] = await Promise.all([
        getTenantPackagesOverview(),
        getTenantPaddleTransactions().catch((err) => {
          console.warn('Failed to load Paddle transactions', err);
          return { data: [] as PaddleTransactionSummary[], nextCursor: null, hasMore: false };
        }),
      ]);
      setPackages(packagesResult.packages);
      setActivePackage(packagesResult.activePackage);
      setTransactions(paddleTransactions.data);
      setTransactionCursor(paddleTransactions.nextCursor);
      setTransactionsHasMore(paddleTransactions.hasMore);
    } 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]);

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

  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('billing.actions.refresh')}
    </Button>
  );

  return (
    <AdminLayout
      title={t('billing.title')}
      subtitle={t('billing.subtitle')}
      actions={actions}
    >
      {error && (
        <Alert variant="destructive">
          <AlertTitle>{t('dashboard:alerts.errorTitle')}</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">
                  <Sparkles className="h-5 w-5 text-pink-500" />
                  {t('billing.sections.overview.title')}
                </CardTitle>
                <CardDescription className="text-sm text-slate-600">
                  {t('billing.sections.overview.description')}
                </CardDescription>
              </div>
              <Badge className={activePackage ? 'bg-pink-500/10 text-pink-700' : 'bg-slate-200 text-slate-700'}>
                {activePackage ? activePackage.package_name : t('billing.sections.overview.emptyBadge')}
              </Badge>
            </CardHeader>
            <CardContent>
              {activePackage ? (
                <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>
              ) : (
                <EmptyState message={t('billing.sections.overview.empty')} />
              )}
            </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('billing.sections.packages.title')}
              </CardTitle>
              <CardDescription className="text-sm text-slate-600">
                {t('billing.sections.packages.description')}
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-3">
              {packages.length === 0 ? (
                <EmptyState message={t('billing.sections.packages.empty')} />
              ) : (
                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>
              <CardTitle className="flex items-center gap-2 text-xl text-slate-900">
                <Sparkles className="h-5 w-5 text-sky-500" />
                {t('billing.sections.transactions.title')}
              </CardTitle>
              <CardDescription className="text-sm text-slate-600">
                {t('billing.sections.transactions.description')}
              </CardDescription>
            </CardHeader>
            <CardContent 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>
              )}
            </CardContent>
          </Card>

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

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

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 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>
  );
}