import React from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { CreditCard, Package, Receipt, RefreshCcw, Sparkles } from 'lucide-react';
import { YStack, XStack } from '@tamagui/stacks';
import { SizableText as Text } from '@tamagui/text';
import { Pressable } from '@tamagui/react-native-web-lite';
import { MobileShell } from './components/MobileShell';
import { MobileCard, CTAButton, PillBadge } from './components/Primitives';
import {
  getTenantPackagesOverview,
  getTenantPaddleTransactions,
  TenantPackageSummary,
  PaddleTransactionSummary,
} from '../api';
import { TenantAddonHistoryEntry, getTenantAddonHistory } from '../api';
import { getApiErrorMessage } from '../lib/apiError';
import { adminPath } from '../constants';

export default function MobileBillingPage() {
  const { t } = useTranslation('management');
  const navigate = useNavigate();
  const location = useLocation();
  const [packages, setPackages] = React.useState<TenantPackageSummary[]>([]);
  const [activePackage, setActivePackage] = React.useState<TenantPackageSummary | null>(null);
  const [transactions, setTransactions] = React.useState<PaddleTransactionSummary[]>([]);
  const [addons, setAddons] = React.useState<TenantAddonHistoryEntry[]>([]);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState<string | null>(null);
  const packagesRef = React.useRef<HTMLDivElement | null>(null);
  const invoicesRef = React.useRef<HTMLDivElement | null>(null);

  const load = React.useCallback(async () => {
    setLoading(true);
    try {
      const [pkg, trx, addonHistory] = await Promise.all([
        getTenantPackagesOverview({ force: true }),
        getTenantPaddleTransactions().catch(() => ({ data: [] as PaddleTransactionSummary[] })),
        getTenantAddonHistory().catch(() => ({ data: [] as TenantAddonHistoryEntry[] })),
      ]);
      setPackages(pkg.packages ?? []);
      setActivePackage(pkg.activePackage ?? null);
      setTransactions(trx.data ?? []);
      setAddons(addonHistory.data ?? []);
      setError(null);
    } catch (err) {
      const message = getApiErrorMessage(err, t('billing.errors.load', 'Konnte Abrechnung nicht laden.'));
      setError(message);
    } finally {
      setLoading(false);
    }
  }, [t]);

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

  React.useEffect(() => {
    if (!location.hash) return;
    const hash = location.hash.replace('#', '');
    const target = hash === 'invoices' ? invoicesRef.current : packagesRef.current;
    if (target) {
      target.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  }, [location.hash, loading]);

  return (
    <MobileShell
      activeTab="profile"
      title={t('billing.title', 'Billing & Packages')}
      onBack={() => navigate(-1)}
      headerActions={
        <Pressable onPress={() => load()}>
          <RefreshCcw size={18} color="#0f172a" />
        </Pressable>
      }
    >
      {error ? (
        <MobileCard>
          <Text fontWeight="700" color="#b91c1c">
            {error}
          </Text>
        </MobileCard>
      ) : null}

      <MobileCard space="$2" ref={packagesRef as any}>
        <XStack alignItems="center" space="$2">
          <Package size={18} color="#0f172a" />
          <Text fontSize="$md" fontWeight="800" color="#0f172a">
            {t('billing.sections.packages.title', 'Packages')}
          </Text>
        </XStack>
        {loading ? (
          <Text fontSize="$sm" color="#6b7280">
            {t('common.loading', 'Lädt...')}
          </Text>
        ) : (
          <YStack space="$2">
            {activePackage ? (
              <PackageCard pkg={activePackage} label={t('billing.sections.packages.card.statusActive', 'Aktiv')} />
            ) : null}
            {packages
              .filter((pkg) => !activePackage || pkg.id !== activePackage.id)
              .map((pkg) => (
                <PackageCard key={pkg.id} pkg={pkg} />
              ))}
          </YStack>
        )}
      </MobileCard>

      <MobileCard space="$2" ref={invoicesRef as any}>
        <XStack alignItems="center" space="$2">
          <Receipt size={18} color="#0f172a" />
          <Text fontSize="$md" fontWeight="800" color="#0f172a">
            {t('billing.sections.invoices.title', 'Invoices & Payments')}
          </Text>
        </XStack>
        {loading ? (
          <Text fontSize="$sm" color="#6b7280">
            {t('common.loading', 'Lädt...')}
          </Text>
        ) : transactions.length === 0 ? (
          <Text fontSize="$sm" color="#4b5563">
            {t('billing.sections.invoices.empty', 'Keine Zahlungen gefunden.')}
          </Text>
        ) : (
          <YStack space="$1.5">
            {transactions.slice(0, 8).map((trx) => (
              <XStack key={trx.id} alignItems="center" justifyContent="space-between" borderBottomWidth={1} borderColor="#e5e7eb" paddingVertical="$1.5">
                <YStack>
                  <Text fontSize="$sm" color="#0f172a" fontWeight="700">
                    {trx.status ?? '—'}
                  </Text>
                  <Text fontSize="$xs" color="#6b7280">
                    {formatDate(trx.created_at)}
                  </Text>
                  {trx.origin ? (
                    <Text fontSize="$xs" color="#9ca3af">
                      {trx.origin}
                    </Text>
                  ) : null}
                </YStack>
                <YStack alignItems="flex-end">
                  <Text fontSize="$sm" color="#0f172a" fontWeight="700">
                    {formatAmount(trx.amount, trx.currency)}
                  </Text>
                  {trx.tax ? (
                    <Text fontSize="$xs" color="#6b7280">
                      {t('billing.sections.transactions.labels.tax', { value: formatAmount(trx.tax, trx.currency) })}
                    </Text>
                  ) : null}
                  {trx.receipt_url ? (
                    <a href={trx.receipt_url} target="_blank" rel="noreferrer" style={{ fontSize: 12, color: '#2563eb' }}>
                      {t('billing.sections.transactions.labels.receipt', 'Beleg')}
                    </a>
                  ) : null}
                </YStack>
              </XStack>
            ))}
          </YStack>
        )}
        {null}
      </MobileCard>

      <MobileCard space="$2">
        <XStack alignItems="center" space="$2">
          <Sparkles size={18} color="#0f172a" />
          <Text fontSize="$md" fontWeight="800" color="#0f172a">
            {t('billing.sections.addOns.title', 'Add-ons')}
          </Text>
        </XStack>
        {loading ? (
          <Text fontSize="$sm" color="#6b7280">
            {t('common.loading', 'Lädt...')}
          </Text>
        ) : addons.length === 0 ? (
          <Text fontSize="$sm" color="#4b5563">
            {t('billing.sections.addOns.empty', 'Keine Add-ons gebucht.')}
          </Text>
        ) : (
          <YStack space="$1.5">
            {addons.slice(0, 8).map((addon) => (
              <AddonRow key={addon.id} addon={addon} />
            ))}
          </YStack>
        )}
        {null}
      </MobileCard>
    </MobileShell>
  );
}

function PackageCard({ pkg, label }: { pkg: TenantPackageSummary; label?: string }) {
  const { t } = useTranslation('management');
  const remaining = pkg.remaining_events ?? (pkg.package_limits?.max_events_per_year as number | undefined) ?? 0;
  const expires = pkg.expires_at ? formatDate(pkg.expires_at) : null;
  return (
    <MobileCard borderColor="#e5e7eb" space="$2">
      <XStack alignItems="center" justifyContent="space-between">
        <Text fontSize="$md" fontWeight="800" color="#0f172a">
          {pkg.package_name ?? t('mobileBilling.packageFallback', 'Package')}
        </Text>
        {label ? <PillBadge tone="success">{label}</PillBadge> : null}
      </XStack>
      {expires ? (
        <Text fontSize="$xs" color="#6b7280">
          {expires}
        </Text>
      ) : null}
      <XStack space="$2" marginTop="$2" flexWrap="wrap">
        <PillBadge tone="muted">
          {t('mobileBilling.remainingEvents', '{{count}} events', { count: remaining })}
        </PillBadge>
        {pkg.price !== null && pkg.price !== undefined ? (
          <PillBadge tone="muted">{formatAmount(pkg.price, pkg.currency ?? 'EUR')}</PillBadge>
        ) : null}
        {renderFeatureBadge(pkg, t, 'branding_allowed', t('billing.features.branding', 'Branding'))}
        {renderFeatureBadge(pkg, t, 'watermark_allowed', t('billing.features.watermark', 'Watermark'))}
      </XStack>
      <YStack space="$1.5" marginTop="$2">
        <FeatureList pkg={pkg} />
      </YStack>
    </MobileCard>
  );
}

function renderFeatureBadge(pkg: TenantPackageSummary, t: any, key: string, label: string) {
  const value = (pkg.package_limits as any)?.[key] ?? (pkg as any)[key];
  if (value === undefined || value === null) return null;
  const enabled = value !== false;
  return <PillBadge tone={enabled ? 'success' : 'muted'}>{enabled ? label : `${label} off`}</PillBadge>;
}

function FeatureList({ pkg }: { pkg: TenantPackageSummary }) {
  const { t } = useTranslation('management');
  const limits = pkg.package_limits ?? {};
  const features = (pkg as any).features as string[] | undefined;

  const rows: Array<{ label: string; value: string }> = [];

  if (limits.max_photos !== undefined && limits.max_photos !== null) {
    rows.push({ label: t('billing.features.maxPhotos', 'Max photos'), value: String(limits.max_photos) });
  }
  if (limits.max_guests !== undefined && limits.max_guests !== null) {
    rows.push({ label: t('billing.features.maxGuests', 'Max guests'), value: String(limits.max_guests) });
  }
  if (limits.gallery_days !== undefined && limits.gallery_days !== null) {
    rows.push({ label: t('billing.features.galleryDays', 'Gallery days'), value: String(limits.gallery_days) });
  }
  if (limits.max_tasks !== undefined && limits.max_tasks !== null) {
    rows.push({ label: t('billing.features.maxTasks', 'Max tasks'), value: String(limits.max_tasks) });
  }
  if (Array.isArray(features) && features.length) {
    rows.push({ label: t('billing.features.featureList', 'Included features'), value: features.join(', ') });
  }

  if (!rows.length) return null;

  return (
    <YStack space="$1">
      {rows.map((row) => (
        <XStack key={row.label} alignItems="center" justifyContent="space-between">
          <Text fontSize="$xs" color="#6b7280">
            {row.label}
          </Text>
          <Text fontSize="$xs" color="#0f172a" fontWeight="700">
            {row.value}
          </Text>
        </XStack>
      ))}
    </YStack>
  );
}

function formatAmount(value: number | null | undefined, currency: string | null | undefined): string {
  if (value === null || value === undefined) {
    return '—';
  }
  const cur = currency ?? 'EUR';
  try {
    return new Intl.NumberFormat(undefined, { style: 'currency', currency: cur }).format(value);
  } catch {
    return `${value} ${cur}`;
  }
}

function AddonRow({ addon }: { addon: TenantAddonHistoryEntry }) {
  const { t } = useTranslation('management');
  const labels: Record<TenantAddonHistoryEntry['status'], { tone: 'success' | 'warning' | 'muted'; text: string }> = {
    completed: { tone: 'success', text: t('mobileBilling.status.completed', 'Completed') },
    pending: { tone: 'warning', text: t('mobileBilling.status.pending', 'Pending') },
    failed: { tone: 'muted', text: t('mobileBilling.status.failed', 'Failed') },
  };
  const status = labels[addon.status];
  const eventName =
    (addon.event?.name && typeof addon.event.name === 'string' && addon.event.name) ||
    (addon.event?.name && typeof addon.event.name === 'object' ? addon.event.name?.en ?? addon.event.name?.de ?? Object.values(addon.event.name)[0] : null) ||
    null;

  return (
    <MobileCard borderColor="#e5e7eb" padding="$3" space="$1.5">
      <XStack alignItems="center" justifyContent="space-between">
        <Text fontSize="$sm" fontWeight="700" color="#0f172a">
          {addon.label ?? addon.addon_key}
        </Text>
        <PillBadge tone={status.tone}>{status.text}</PillBadge>
      </XStack>
      <Text fontSize="$xs" color="#6b7280">
        {formatDate(addon.purchased_at)}
      </Text>
      {eventName ? (
        <Text fontSize="$xs" color="#9ca3af">
          {eventName}
        </Text>
      ) : null}
      <XStack space="$2" marginTop="$1">
        {addon.extra_photos ? (
          <PillBadge tone="muted">{t('mobileBilling.extra.photos', '+{{count}} photos', { count: addon.extra_photos })}</PillBadge>
        ) : null}
        {addon.extra_guests ? (
          <PillBadge tone="muted">{t('mobileBilling.extra.guests', '+{{count}} guests', { count: addon.extra_guests })}</PillBadge>
        ) : null}
        {addon.extra_gallery_days ? (
          <PillBadge tone="muted">{t('mobileBilling.extra.days', '+{{count}} days', { count: addon.extra_gallery_days })}</PillBadge>
        ) : null}
      </XStack>
      <Text fontSize="$sm" color="#0f172a" marginTop="$1">
        {formatAmount(addon.amount, addon.currency)}
      </Text>
    </MobileCard>
  );
}
function formatDate(value: string | null | undefined): string {
  if (!value) return '—';
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return '—';
  return date.toLocaleDateString(undefined, { day: '2-digit', month: 'short', year: 'numeric' });
}