'use client';

import { useState, useEffect } from 'react';
import { useLanguage } from '@/context/LanguageContext';
import { paymentsApi, adminApi, eventsApi, PaymentWithDetails, Event, ExportedPayment, FinancialSummary } from '@/lib/api';
import { isManualProvider } from '@/lib/api/payments';
import { parseDate, formatRucDisplay } from '@/lib/utils';
import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import { AdminPageSkeleton } from '@/components/ui/Skeleton';
import Input from '@/components/ui/Input';
import { BottomSheet, MoreMenu, DropdownItem, AdminMobileStyles } from '@/components/admin/MobileComponents';
import { 
  CheckCircleIcon, 
  ArrowPathIcon, 
  ArrowDownTrayIcon, 
  DocumentArrowDownIcon,
  XCircleIcon,
  ClockIcon,
  ExclamationTriangleIcon,
  ChatBubbleLeftIcon,
  BoltIcon,
  BanknotesIcon,
  BuildingLibraryIcon,
  CalendarDaysIcon,
  CreditCardIcon,
  EnvelopeIcon,
  FunnelIcon,
  MagnifyingGlassIcon,
  XMarkIcon,
} from '@heroicons/react/24/outline';
import toast from 'react-hot-toast';
import clsx from 'clsx';

type Tab = 'pending_approval' | 'all';

export default function AdminPaymentsPage() {
  const { t, locale } = useLanguage();
  const [payments, setPayments] = useState<PaymentWithDetails[]>([]);
  const [pendingApprovalPayments, setPendingApprovalPayments] = useState<PaymentWithDetails[]>([]);
  // Manual-gateway payments still in bare 'pending': the customer may have paid
  // without clicking "I've paid" — approvable directly from the approval tab.
  const [unclaimedManualPayments, setUnclaimedManualPayments] = useState<PaymentWithDetails[]>([]);
  const [events, setEvents] = useState<Event[]>([]);
  const [loading, setLoading] = useState(true);
  const [activeTab, setActiveTab] = useState<Tab>('pending_approval');
  const [statusFilter, setStatusFilter] = useState<string>('');
  const [providerFilter, setProviderFilter] = useState<string>('');
  const [eventFilter, setEventFilter] = useState<string[]>([]);
  const [searchQuery, setSearchQuery] = useState('');
  const [mobileFilterOpen, setMobileFilterOpen] = useState(false);
  
  // Modal state
  const [selectedPayment, setSelectedPayment] = useState<PaymentWithDetails | null>(null);
  const [noteText, setNoteText] = useState('');
  const [processing, setProcessing] = useState(false);
  const [sendEmail, setSendEmail] = useState(true);
  const [sendingReminder, setSendingReminder] = useState(false);
  
  // Export state
  const [showExportModal, setShowExportModal] = useState(false);
  const [exporting, setExporting] = useState(false);
  const [exportData, setExportData] = useState<{ payments: ExportedPayment[]; summary: FinancialSummary } | null>(null);
  const [exportFilters, setExportFilters] = useState({
    startDate: '',
    endDate: '',
    eventId: '',
  });

  useEffect(() => {
    loadData();
  }, [statusFilter, providerFilter, eventFilter]);

  const loadData = async () => {
    try {
      setLoading(true);
      const [pendingRes, allRes, unclaimedRes, eventsRes] = await Promise.all([
        paymentsApi.getPendingApproval(),
        paymentsApi.getAll({
          status: statusFilter || undefined,
          provider: providerFilter || undefined,
          eventIds: eventFilter.length > 0 ? eventFilter : undefined,
        }),
        paymentsApi.getAll({ status: 'pending' }),
        eventsApi.getAll(),
      ]);
      setPendingApprovalPayments(pendingRes.payments);
      setPayments(allRes.payments);
      setUnclaimedManualPayments(unclaimedRes.payments.filter(p => isManualProvider(p.provider)));
      setEvents(eventsRes.events);
    } catch (error) {
      toast.error('Failed to load payments');
    } finally {
      setLoading(false);
    }
  };

  // Approve with over-capacity confirmation: the backend rejects an approval
  // that would overbook the event unless the admin explicitly allows it.
  const approveWithCapacityConfirm = async (id: string, note?: string, email?: boolean) => {
    try {
      await paymentsApi.approve(id, note, email);
    } catch (error: any) {
      if (error?.code !== 'EVENT_OVER_CAPACITY') throw error;
      const seatsLeft = error?.data?.availableSeats ?? 0;
      const requested = error?.data?.requestedSeats ?? 1;
      const message = locale === 'es'
        ? `El evento está lleno (quedan ${seatsLeft} lugares, esta reserva necesita ${requested}). ¿Aprobar de todas formas y sobrevender?`
        : `This event is full (${seatsLeft} seat(s) left, this booking needs ${requested}). Approve anyway and overbook?`;
      if (!confirm(message)) return false;
      await paymentsApi.approve(id, note, email, true);
    }
    return true;
  };

  const handleApprove = async (payment: PaymentWithDetails) => {
    setProcessing(true);
    try {
      const approved = await approveWithCapacityConfirm(payment.id, noteText, sendEmail);
      if (approved) {
        toast.success(locale === 'es' ? 'Pago aprobado' : 'Payment approved');
        setSelectedPayment(null);
        setNoteText('');
        setSendEmail(true);
        loadData();
      }
    } catch (error: any) {
      toast.error(error.message || 'Failed to approve payment');
    } finally {
      setProcessing(false);
    }
  };

  const handleReject = async (payment: PaymentWithDetails) => {
    setProcessing(true);
    try {
      await paymentsApi.reject(payment.id, noteText, sendEmail);
      toast.success(locale === 'es' ? 'Pago rechazado' : 'Payment rejected');
      setSelectedPayment(null);
      setNoteText('');
      setSendEmail(true);
      loadData();
    } catch (error: any) {
      toast.error(error.message || 'Failed to reject payment');
    } finally {
      setProcessing(false);
    }
  };

  const handleSendReminder = async (payment: PaymentWithDetails) => {
    setSendingReminder(true);
    try {
      const result = await paymentsApi.sendReminder(payment.id);
      toast.success(locale === 'es' ? 'Recordatorio enviado' : 'Reminder sent');
      // Update the selected payment with the new reminderSentAt timestamp
      if (result.reminderSentAt) {
        setSelectedPayment({ ...payment, reminderSentAt: result.reminderSentAt });
      }
      // Also refresh the data to update the lists
      loadData();
    } catch (error: any) {
      toast.error(error.message || 'Failed to send reminder');
    } finally {
      setSendingReminder(false);
    }
  };

  const handleConfirmPayment = async (id: string) => {
    try {
      const approved = await approveWithCapacityConfirm(id);
      if (approved) {
        toast.success('Payment confirmed');
        loadData();
      }
    } catch (error: any) {
      toast.error(error.message || 'Failed to confirm payment');
    }
  };

  const handleReactivate = async (payment: PaymentWithDetails) => {
    setProcessing(true);
    try {
      await paymentsApi.reactivate(payment.id);
      toast.success(locale === 'es' ? 'Reserva reactivada' : 'Booking reactivated');
      setSelectedPayment(null);
      loadData();
    } catch (error: any) {
      toast.error(error.message || 'Failed to reactivate booking');
    } finally {
      setProcessing(false);
    }
  };

  const handleReopen = async (payment: PaymentWithDetails) => {
    setProcessing(true);
    try {
      await paymentsApi.reopen(payment.id, noteText);
      toast.success(locale === 'es' ? 'Pago cambiado a pendiente' : 'Payment changed to pending');
      setSelectedPayment(null);
      setNoteText('');
      setSendEmail(true);
      loadData();
    } catch (error: any) {
      toast.error(error.message || (locale === 'es' ? 'No se pudo reabrir el pago' : 'Failed to reopen payment'));
    } finally {
      setProcessing(false);
    }
  };

  const handleRefund = async (id: string) => {
    if (!confirm('Are you sure you want to process this refund?')) return;

    try {
      await paymentsApi.refund(id);
      toast.success('Refund processed');
      loadData();
    } catch (error: any) {
      toast.error(error.message || 'Failed to process refund');
    }
  };

  const handleExport = async () => {
    setExporting(true);
    try {
      const data = await adminApi.exportFinancial({
        startDate: exportFilters.startDate || undefined,
        endDate: exportFilters.endDate || undefined,
        eventId: exportFilters.eventId || undefined,
      });
      setExportData(data);
    } catch (error) {
      toast.error('Failed to generate export');
    } finally {
      setExporting(false);
    }
  };

  const downloadCSV = () => {
    if (!exportData) return;
    
    const headers = ['Payment ID', 'Amount', 'Currency', 'Provider', 'Status', 'Reference', 'Paid At', 'Created At', 'Attendee Name', 'Attendee Email', 'RUC', 'Event Title', 'Event Date'];
    const rows = exportData.payments.map(p => [
      p.paymentId,
      p.amount,
      p.currency,
      p.provider,
      p.status,
      p.reference || '',
      p.paidAt || '',
      p.createdAt,
      `${p.attendeeFirstName} ${p.attendeeLastName || ''}`.trim(),
      p.attendeeEmail || '',
      formatRucDisplay(p.attendeeRuc) || '',
      p.eventTitle,
      p.eventDate,
    ]);
    
    const csvContent = [headers, ...rows].map(row => row.map(cell => `"${cell}"`).join(',')).join('\n');
    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = `financial-export-${new Date().toISOString().split('T')[0]}.csv`;
    link.click();
    toast.success('CSV downloaded');
  };

  const formatDate = (dateStr: string) => {
    return parseDate(dateStr).toLocaleDateString(locale === 'es' ? 'es-ES' : 'en-US', {
      month: 'short',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit',
      timeZone: 'America/Asuncion',
    });
  };

  const formatCurrency = (amount: number, currency: string) => {
    return `${amount.toLocaleString()} ${currency}`;
  };

  const getStatusBadge = (status: string) => {
    const styles: Record<string, string> = {
      pending: 'bg-gray-100 text-gray-700',
      pending_approval: 'bg-yellow-100 text-yellow-700',
      paid: 'bg-green-100 text-green-700',
      refunded: 'bg-blue-100 text-blue-700',
      failed: 'bg-red-100 text-red-700',
      cancelled: 'bg-gray-100 text-gray-700',
      on_hold: 'bg-slate-100 text-slate-600',
    };
    const labels: Record<string, string> = {
      pending: locale === 'es' ? 'Pendiente' : 'Pending',
      pending_approval: locale === 'es' ? 'Esperando Aprobación' : 'Pending Approval',
      paid: locale === 'es' ? 'Pagado' : 'Paid',
      refunded: locale === 'es' ? 'Reembolsado' : 'Refunded',
      failed: locale === 'es' ? 'Fallido' : 'Failed',
      cancelled: locale === 'es' ? 'Cancelado' : 'Cancelled',
      on_hold: locale === 'es' ? 'En Espera' : 'On Hold',
    };
    return (
      <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${styles[status] || 'bg-gray-100 text-gray-700'}`}>
        {labels[status] || status}
      </span>
    );
  };

  const getProviderIcon = (provider: string) => {
    const icons: Record<string, typeof BoltIcon> = {
      lightning: BoltIcon,
      cash: BanknotesIcon,
      bank_transfer: BuildingLibraryIcon,
      tpago: CreditCardIcon,
      bancard: CreditCardIcon,
    };
    const Icon = icons[provider] || CreditCardIcon;
    return <Icon className="w-4 h-4" />;
  };

  const getProviderLabel = (provider: string) => {
    const labels: Record<string, string> = {
      cash: locale === 'es' ? 'Efectivo' : 'Cash',
      bank_transfer: locale === 'es' ? 'Transferencia Bancaria' : 'Bank Transfer',
      lightning: 'Lightning',
      tpago: 'TPago',
      bancard: 'Bancard',
    };
    return labels[provider] || provider;
  };

  // Manual gateways need admin verification; automatic ones confirm themselves.
  const getProviderKindBadge = (provider: string) => (
    isManualProvider(provider) ? (
      <span className="inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-medium bg-orange-50 text-orange-600">
        {locale === 'es' ? 'Manual' : 'Manual'}
      </span>
    ) : (
      <span className="inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-medium bg-blue-50 text-blue-600">
        {locale === 'es' ? 'Automático' : 'Auto'}
      </span>
    )
  );

  // Age of a claim/booking, e.g. "3h" / "2d"; used to surface rotting approvals.
  const getAgeInfo = (dateStr?: string | null) => {
    if (!dateStr) return null;
    const ms = Date.now() - parseDate(dateStr).getTime();
    if (ms < 0) return null;
    const hours = Math.floor(ms / (60 * 60 * 1000));
    const label = hours < 1
      ? (locale === 'es' ? 'hace <1 h' : '<1h ago')
      : hours < 48
        ? (locale === 'es' ? `hace ${hours} h` : `${hours}h ago`)
        : (locale === 'es' ? `hace ${Math.floor(hours / 24)} días` : `${Math.floor(hours / 24)}d ago`);
    return { hours, label, stale: hours >= 48 };
  };

  // Helper to get booking info for a payment (ticket count and total)
  const getBookingInfo = (payment: PaymentWithDetails) => {
    if (!payment.ticket?.bookingId) {
      return { ticketCount: 1, bookingTotal: payment.amount };
    }
    
    // Count all payments with the same bookingId
    const bookingPayments = payments.filter(
      p => p.ticket?.bookingId === payment.ticket?.bookingId
    );
    
    return {
      ticketCount: bookingPayments.length,
      bookingTotal: bookingPayments.reduce((sum, p) => sum + Number(p.amount), 0),
    };
  };

  // Hide pending-approval payments whose event has already ended.
  // Fall back to startDatetime when endDatetime is absent; keep visible when we
  // can't classify (event missing from list and no startDatetime on payment.event).
  const visiblePendingApprovalPayments = (() => {
    const now = new Date();
    return pendingApprovalPayments.filter((payment) => {
      const eventId = payment.event?.id;
      const fullEvent = eventId ? events.find((e) => e.id === eventId) : undefined;
      const endIso = fullEvent?.endDatetime
        || fullEvent?.startDatetime
        || payment.event?.startDatetime;
      if (!endIso) return true;
      return parseDate(endIso).getTime() >= now.getTime();
    });
  })();

  // Manual payments never claimed by the customer — they may have paid and
  // forgotten to press "I've paid", so they stay directly approvable here.
  // Hidden once the event has ended (same rule as pending approvals above).
  const visibleUnclaimedManualPayments = (() => {
    const now = new Date();
    return unclaimedManualPayments.filter((payment) => {
      const eventId = payment.event?.id;
      const fullEvent = eventId ? events.find((e) => e.id === eventId) : undefined;
      const endIso = fullEvent?.endDatetime
        || fullEvent?.startDatetime
        || payment.event?.startDatetime;
      if (!endIso) return true;
      return parseDate(endIso).getTime() >= now.getTime();
    });
  })();

  // Get booking info for pending approval payments
  const getPendingBookingInfo = (payment: PaymentWithDetails) => {
    if (!payment.ticket?.bookingId) {
      return { ticketCount: 1, bookingTotal: payment.amount };
    }
    
    // Count all pending payments with the same bookingId
    const bookingPayments = visiblePendingApprovalPayments.filter(
      p => p.ticket?.bookingId === payment.ticket?.bookingId
    );
    
    return {
      ticketCount: bookingPayments.length,
      bookingTotal: bookingPayments.reduce((sum, p) => sum + Number(p.amount), 0),
    };
  };

  // Calculate totals (sum all individual payment amounts).
  // Claimed ('pending_approval') money is probably already in the account and
  // just needs verification; bare 'pending' money may never arrive — keep the
  // two apart so the totals don't overstate what's owed.
  const totalAwaitingVerification = payments
    .filter(p => p.status === 'pending_approval')
    .reduce((sum, p) => sum + Number(p.amount), 0);
  const totalUnclaimed = payments
    .filter(p => p.status === 'pending')
    .reduce((sum, p) => sum + Number(p.amount), 0);
  const totalPaid = payments
    .filter(p => p.status === 'paid')
    .reduce((sum, p) => sum + Number(p.amount), 0);
  
  // Get unique booking count (for summary display)
  const getUniqueBookingsCount = (paymentsList: PaymentWithDetails[]) => {
    const seen = new Set<string>();
    let count = 0;
    paymentsList.forEach(p => {
      const bookingKey = p.ticket?.bookingId || p.id;
      if (!seen.has(bookingKey)) {
        seen.add(bookingKey);
        count++;
      }
    });
    return count;
  };
  
  const paidBookingsCount = getUniqueBookingsCount(
    payments.filter(p => p.status === 'paid')
  );
  const pendingApprovalBookingsCount = getUniqueBookingsCount(visiblePendingApprovalPayments);
  const onHoldPayments = payments.filter(p => p.status === 'on_hold');
  const onHoldBookingsCount = getUniqueBookingsCount(onHoldPayments);

  if (loading) {
    return <AdminPageSkeleton cols={7} />;
  }

  return (
    <div>
      <div className="flex items-center justify-between mb-6">
        <h1 className="text-xl md:text-2xl font-bold text-primary-dark">{t('admin.payments.title')}</h1>
        <Button onClick={() => setShowExportModal(true)} size="sm" className="min-h-[44px] md:min-h-0">
          <DocumentArrowDownIcon className="w-4 h-4 mr-1.5" />
          <span className="hidden md:inline">{locale === 'es' ? 'Exportar Datos' : 'Export Data'}</span>
          <span className="md:hidden">{locale === 'es' ? 'Exportar' : 'Export'}</span>
        </Button>
      </div>

      {/* Approval Detail Modal */}
      {selectedPayment && (() => {
        const modalBookingInfo = getBookingInfo(selectedPayment);
        return (
        <div className="fixed inset-0 bg-black/50 z-50 flex items-end md:items-center justify-center p-0 md:p-4">
          <Card className="w-full md:max-w-lg max-h-[90vh] flex flex-col overflow-hidden rounded-t-2xl md:rounded-card">
            <div className="flex items-center justify-between p-4 border-b border-secondary-light-gray flex-shrink-0">
              <h2 className="text-base font-bold">
                {locale === 'es' ? 'Verificar Pago' : 'Verify Payment'}
              </h2>
              <button onClick={() => { setSelectedPayment(null); setNoteText(''); setSendEmail(true); }}
                className="p-2 hover:bg-gray-100 rounded-btn min-h-[44px] min-w-[44px] flex items-center justify-center">
                <XMarkIcon className="w-5 h-5" />
              </button>
            </div>
            <div className="p-4 overflow-y-auto flex-1 min-h-0">
            
            <div className="space-y-4 mb-6">
              <div className="bg-gray-50 rounded-lg p-4">
                <div className="grid grid-cols-2 gap-4 text-sm">
                  <div>
                    <p className="text-gray-500">{locale === 'es' ? 'Monto Total' : 'Total Amount'}</p>
                    <p className="font-bold text-lg">{formatCurrency(modalBookingInfo.bookingTotal, selectedPayment.currency)}</p>
                    {modalBookingInfo.ticketCount > 1 && (
                      <div className="mt-2 p-2 bg-purple-50 rounded">
                        <p className="text-xs text-purple-700">
                          📦 {modalBookingInfo.ticketCount} tickets × {formatCurrency(selectedPayment.amount, selectedPayment.currency)}
                        </p>
                      </div>
                    )}
                  </div>
                  <div>
                    <p className="text-gray-500">{locale === 'es' ? 'Método' : 'Method'}</p>
                    <p className="font-medium flex items-center gap-2">
                      {getProviderIcon(selectedPayment.provider)}
                      {getProviderLabel(selectedPayment.provider)}
                    </p>
                  </div>
                </div>
              </div>
              
              {selectedPayment.ticket && (
                <div className="border rounded-lg p-4">
                  <h4 className="font-medium mb-2">{locale === 'es' ? 'Asistente' : 'Attendee'}</h4>
                  <p className="font-bold">
                    {selectedPayment.ticket.attendeeFirstName} {selectedPayment.ticket.attendeeLastName}
                  </p>
                  <p className="text-sm text-gray-600">{selectedPayment.ticket.attendeeEmail}</p>
                  {selectedPayment.ticket.attendeePhone && (
                    <p className="text-sm text-gray-600">{selectedPayment.ticket.attendeePhone}</p>
                  )}
                  {selectedPayment.ticket.attendeeRuc && (
                    <p className="text-sm text-gray-600">RUC: {formatRucDisplay(selectedPayment.ticket.attendeeRuc)}</p>
                  )}
                </div>
              )}
              
              {selectedPayment.event && (
                <div className="border rounded-lg p-4">
                  <h4 className="font-medium mb-2">{locale === 'es' ? 'Evento' : 'Event'}</h4>
                  <p className="font-bold">{selectedPayment.event.title}</p>
                  <p className="text-sm text-gray-600">{formatDate(selectedPayment.event.startDatetime)}</p>
                </div>
              )}
              
              {/* Always shown — for payments the customer never confirmed, this
                  is the only timestamp there is. */}
              {(() => {
                const age = getAgeInfo(selectedPayment.createdAt);
                return (
                  <div className="flex items-center gap-2 text-sm text-gray-600">
                    <CalendarDaysIcon className="w-4 h-4" />
                    {locale === 'es' ? 'Reserva realizada:' : 'Booking made:'} {formatDate(selectedPayment.createdAt)}
                    {age && <span className="text-gray-400">({age.label})</span>}
                  </div>
                );
              })()}

              {selectedPayment.userMarkedPaidAt && (() => {
                const age = getAgeInfo(selectedPayment.userMarkedPaidAt);
                return (
                  <div className="flex items-center gap-2 text-sm text-gray-600">
                    <ClockIcon className="w-4 h-4" />
                    {locale === 'es' ? 'Usuario marcó como pagado:' : 'User marked as paid:'} {formatDate(selectedPayment.userMarkedPaidAt)}
                    {age && <span className="text-gray-400">({age.label})</span>}
                  </div>
                );
              })()}
              
              {selectedPayment.reminderSentAt && (
                <div className="flex items-center gap-2 text-sm text-amber-600">
                  <EnvelopeIcon className="w-4 h-4" />
                  {locale === 'es' ? 'Recordatorio enviado:' : 'Reminder sent:'} {formatDate(selectedPayment.reminderSentAt)}
                </div>
              )}
              
              {selectedPayment.payerName && (
                <div className="bg-amber-50 border border-amber-200 rounded-lg p-3">
                  <p className="text-sm text-amber-800 font-medium">
                    {locale === 'es' ? '⚠️ Pagado por otra persona:' : '⚠️ Paid by someone else:'}
                  </p>
                  <p className="text-amber-900 font-bold">{selectedPayment.payerName}</p>
                </div>
              )}
              
              <div>
                <label className="block text-sm font-medium mb-1">
                  {locale === 'es' ? 'Nota interna (opcional)' : 'Internal note (optional)'}
                </label>
                <textarea
                  value={noteText}
                  onChange={(e) => setNoteText(e.target.value)}
                  rows={2}
                  className="w-full px-4 py-2 rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
                  placeholder={locale === 'es' ? 'Agregar nota...' : 'Add a note...'}
                />
              </div>
              
              <div className="flex items-center gap-2">
                <input
                  type="checkbox"
                  id="sendEmail"
                  checked={sendEmail}
                  onChange={(e) => setSendEmail(e.target.checked)}
                  className="w-4 h-4 text-primary-yellow border-gray-300 rounded focus:ring-primary-yellow"
                />
                <label htmlFor="sendEmail" className="text-sm text-gray-700">
                  {locale === 'es' ? 'Enviar email de notificación' : 'Send notification email'}
                </label>
              </div>
            </div>
            
            {selectedPayment.status === 'on_hold' && (
              <div className="mb-3">
                <Button variant="outline" onClick={() => handleReactivate(selectedPayment)} isLoading={processing} className="w-full min-h-[44px]">
                  <ArrowPathIcon className="w-5 h-5 mr-2" />
                  {locale === 'es' ? 'Reactivar (volver a pendiente)' : 'Reactivate (back to pending)'}
                </Button>
              </div>
            )}

            {selectedPayment.status === 'failed' ? (
              <div className="flex gap-3">
                <Button onClick={() => handleApprove(selectedPayment)} isLoading={processing} className="flex-1 min-h-[44px]">
                  <CheckCircleIcon className="w-5 h-5 mr-2" />
                  {locale === 'es' ? 'Confirmar pago' : 'Confirm payment'}
                </Button>
                <Button variant="outline" onClick={() => handleReopen(selectedPayment)} isLoading={processing} className="flex-1 min-h-[44px]">
                  <ArrowPathIcon className="w-5 h-5 mr-2" />
                  {locale === 'es' ? 'Cambiar a pendiente' : 'Change to pending'}
                </Button>
              </div>
            ) : (
              <div className="flex gap-3">
                <Button onClick={() => handleApprove(selectedPayment)} isLoading={processing} className="flex-1 min-h-[44px]">
                  <CheckCircleIcon className="w-5 h-5 mr-2" />
                  {locale === 'es' ? 'Aprobar' : 'Approve'}
                </Button>
                <Button variant="outline" onClick={() => handleReject(selectedPayment)} isLoading={processing}
                  className="flex-1 border-red-300 text-red-600 hover:bg-red-50 min-h-[44px]">
                  <XCircleIcon className="w-5 h-5 mr-2" />
                  {locale === 'es' ? 'Rechazar' : 'Reject'}
                </Button>
              </div>
            )}

            {!['on_hold', 'failed'].includes(selectedPayment.status) && (
              <div className="pt-2 border-t">
                <Button variant="outline" onClick={() => handleSendReminder(selectedPayment)} isLoading={sendingReminder} className="w-full min-h-[44px]">
                  <EnvelopeIcon className="w-5 h-5 mr-2" />
                  {locale === 'es' ? 'Enviar recordatorio' : 'Send reminder'}
                </Button>
              </div>
            )}
            </div>
          </Card>
        </div>
        );
      })()}

      {/* Export Modal */}
      {showExportModal && (
        <div className="fixed inset-0 bg-black/50 z-50 flex items-end md:items-center justify-center p-0 md:p-4">
          <Card className="w-full md:max-w-2xl max-h-[90vh] flex flex-col overflow-hidden rounded-t-2xl md:rounded-card">
            <div className="flex items-center justify-between p-4 border-b border-secondary-light-gray flex-shrink-0">
              <h2 className="text-base font-bold">{locale === 'es' ? 'Exportar Datos Financieros' : 'Export Financial Data'}</h2>
              <button onClick={() => { setShowExportModal(false); setExportData(null); }}
                className="p-2 hover:bg-gray-100 rounded-btn min-h-[44px] min-w-[44px] flex items-center justify-center">
                <XMarkIcon className="w-5 h-5" />
              </button>
            </div>
            <div className="p-4 overflow-y-auto flex-1 min-h-0">
            
            {!exportData ? (
              <div className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <Input
                    label={locale === 'es' ? 'Fecha Inicio' : 'Start Date'}
                    type="date"
                    value={exportFilters.startDate}
                    onChange={(e) => setExportFilters({ ...exportFilters, startDate: e.target.value })}
                  />
                  <Input
                    label={locale === 'es' ? 'Fecha Fin' : 'End Date'}
                    type="date"
                    value={exportFilters.endDate}
                    onChange={(e) => setExportFilters({ ...exportFilters, endDate: e.target.value })}
                  />
                </div>
                
                <div>
                  <label className="block text-sm font-medium mb-1">{locale === 'es' ? 'Evento (opcional)' : 'Event (optional)'}</label>
                  <select
                    value={exportFilters.eventId}
                    onChange={(e) => setExportFilters({ ...exportFilters, eventId: e.target.value })}
                    className="w-full px-4 py-3 rounded-btn border border-secondary-light-gray"
                  >
                    <option value="">{locale === 'es' ? 'Todos los Eventos' : 'All Events'}</option>
                    {events.map((event) => (
                      <option key={event.id} value={event.id}>{event.title}</option>
                    ))}
                  </select>
                </div>
                
                <div className="flex gap-3 pt-4">
                  <Button onClick={handleExport} isLoading={exporting} className="flex-1 min-h-[44px]">
                    {locale === 'es' ? 'Generar Reporte' : 'Generate Report'}
                  </Button>
                  <Button variant="outline" onClick={() => setShowExportModal(false)} className="flex-1 min-h-[44px]">
                    {locale === 'es' ? 'Cancelar' : 'Cancel'}
                  </Button>
                </div>
              </div>
            ) : (
              <div className="space-y-6">
                {/* Summary */}
                <div className="bg-secondary-gray rounded-btn p-4">
                  <h3 className="font-semibold mb-4">{locale === 'es' ? 'Resumen Financiero' : 'Financial Summary'}</h3>
                  <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
                    <div>
                      <p className="text-gray-500">{locale === 'es' ? 'Total Pagado' : 'Total Paid'}</p>
                      <p className="text-xl font-bold text-green-600">{exportData.summary.totalPaid.toLocaleString()} PYG</p>
                      <p className="text-xs text-gray-500">{exportData.summary.paidCount} {locale === 'es' ? 'pagos' : 'payments'}</p>
                    </div>
                    <div>
                      <p className="text-gray-500">{locale === 'es' ? 'Total Pendiente' : 'Total Pending'}</p>
                      <p className="text-xl font-bold text-yellow-600">{exportData.summary.totalPending.toLocaleString()} PYG</p>
                      <p className="text-xs text-gray-500">{exportData.summary.pendingCount} {locale === 'es' ? 'pagos' : 'payments'}</p>
                    </div>
                    <div>
                      <p className="text-gray-500">{locale === 'es' ? 'Total Reembolsado' : 'Total Refunded'}</p>
                      <p className="text-xl font-bold text-blue-600">{exportData.summary.totalRefunded.toLocaleString()} PYG</p>
                      <p className="text-xs text-gray-500">{exportData.summary.refundedCount} {locale === 'es' ? 'pagos' : 'payments'}</p>
                    </div>
                    <div>
                      <p className="text-gray-500">{locale === 'es' ? 'Total Registros' : 'Total Records'}</p>
                      <p className="text-xl font-bold">{exportData.summary.totalPayments}</p>
                    </div>
                  </div>
                </div>
                
                {/* By Provider */}
                <div className="bg-secondary-gray rounded-btn p-4">
                  <h3 className="font-semibold mb-4">{locale === 'es' ? 'Ingresos por Método' : 'Revenue by Method'}</h3>
                  <div className="grid grid-cols-2 md:grid-cols-5 gap-4 text-sm">
                    <div>
                      <p className="text-gray-500">{locale === 'es' ? 'Efectivo' : 'Cash'}</p>
                      <p className="text-lg font-bold">{exportData.summary.byProvider.cash?.toLocaleString() || 0} PYG</p>
                    </div>
                    <div>
                      <p className="text-gray-500">Lightning</p>
                      <p className="text-lg font-bold">{exportData.summary.byProvider.lightning?.toLocaleString() || 0} PYG</p>
                    </div>
                    <div>
                      <p className="text-gray-500">{locale === 'es' ? 'Transferencia' : 'Bank Transfer'}</p>
                      <p className="text-lg font-bold">{(exportData.summary.byProvider as any).bank_transfer?.toLocaleString() || 0} PYG</p>
                    </div>
                    <div>
                      <p className="text-gray-500">TPago</p>
                      <p className="text-lg font-bold">{(exportData.summary.byProvider as any).tpago?.toLocaleString() || 0} PYG</p>
                    </div>
                    <div>
                      <p className="text-gray-500">Bancard</p>
                      <p className="text-lg font-bold">{exportData.summary.byProvider.bancard?.toLocaleString() || 0} PYG</p>
                    </div>
                  </div>
                </div>
                
                <div className="flex flex-wrap gap-3">
                  <Button onClick={downloadCSV} className="min-h-[44px]">
                    <ArrowDownTrayIcon className="w-4 h-4 mr-2" />
                    {locale === 'es' ? 'Descargar CSV' : 'Download CSV'}
                  </Button>
                  <Button variant="outline" onClick={() => setExportData(null)} className="min-h-[44px]">
                    {locale === 'es' ? 'Nuevo Reporte' : 'New Report'}
                  </Button>
                  <Button variant="outline" onClick={() => { setShowExportModal(false); setExportData(null); }} className="min-h-[44px]">
                    {locale === 'es' ? 'Cerrar' : 'Close'}
                  </Button>
                </div>
              </div>
            )}
            </div>
          </Card>
        </div>
      )}

      {/* Summary Cards */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4 mb-6">
        <Card className="p-4">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center">
              <ExclamationTriangleIcon className="w-5 h-5 text-yellow-600" />
            </div>
            <div>
              <p className="text-sm text-gray-500">{locale === 'es' ? 'Pendientes de Aprobación' : 'Pending Approval'}</p>
              <p className="text-xl font-bold text-yellow-600">{pendingApprovalBookingsCount}</p>
              {visiblePendingApprovalPayments.length !== pendingApprovalBookingsCount && (
                <p className="text-xs text-gray-400">({visiblePendingApprovalPayments.length} tickets)</p>
              )}
            </div>
          </div>
        </Card>
        <Card className="p-4">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-slate-100 rounded-full flex items-center justify-center">
              <ClockIcon className="w-5 h-5 text-slate-600" />
            </div>
            <div>
              <p className="text-sm text-gray-500">{locale === 'es' ? 'En Espera' : 'On Hold'}</p>
              <p className="text-xl font-bold text-slate-600">{onHoldBookingsCount}</p>
              {onHoldPayments.length !== onHoldBookingsCount && (
                <p className="text-xs text-gray-400">({onHoldPayments.length} tickets)</p>
              )}
            </div>
          </div>
        </Card>
        <Card className="p-4">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center">
              <ClockIcon className="w-5 h-5 text-gray-600" />
            </div>
            <div>
              <p className="text-sm text-gray-500">{locale === 'es' ? 'Por Verificar' : 'Awaiting Verification'}</p>
              <p className="text-xl font-bold text-yellow-600">{formatCurrency(totalAwaitingVerification, 'PYG')}</p>
              <p className="text-xs text-gray-400">
                {locale === 'es' ? 'Sin pagar (sin reclamar): ' : 'Unpaid (unclaimed): '}
                {formatCurrency(totalUnclaimed, 'PYG')}
              </p>
            </div>
          </div>
        </Card>
        <Card className="p-4">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
              <CheckCircleIcon className="w-5 h-5 text-green-600" />
            </div>
            <div>
              <p className="text-sm text-gray-500">{locale === 'es' ? 'Total Pagado' : 'Total Paid'}</p>
              <p className="text-xl font-bold text-green-600">{formatCurrency(totalPaid, 'PYG')}</p>
              <p className="text-xs text-gray-400">{paidBookingsCount} {locale === 'es' ? 'reservas' : 'bookings'}</p>
            </div>
          </div>
        </Card>
        <Card className="p-4">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
              <BoltIcon className="w-5 h-5 text-blue-600" />
            </div>
            <div>
              <p className="text-sm text-gray-500">{locale === 'es' ? 'Total Tickets' : 'Total Tickets'}</p>
              <p className="text-xl font-bold">{payments.length}</p>
            </div>
          </div>
        </Card>
      </div>

      {/* Tabs */}
      <div className="border-b mb-6 overflow-x-auto scrollbar-hide">
        <nav className="flex gap-4 min-w-max">
          <button onClick={() => setActiveTab('pending_approval')}
            className={clsx('pb-3 px-1 text-sm font-medium border-b-2 transition-colors whitespace-nowrap min-h-[44px]',
              activeTab === 'pending_approval' ? 'border-primary-yellow text-primary-dark' : 'border-transparent text-gray-500 hover:text-gray-700')}>
            {locale === 'es' ? 'Pendientes' : 'Pending Approval'}
            {visiblePendingApprovalPayments.length > 0 && (
              <span className="ml-2 bg-yellow-100 text-yellow-700 px-2 py-0.5 rounded-full text-xs">{visiblePendingApprovalPayments.length}</span>
            )}
          </button>
          <button onClick={() => setActiveTab('all')}
            className={clsx('pb-3 px-1 text-sm font-medium border-b-2 transition-colors whitespace-nowrap min-h-[44px]',
              activeTab === 'all' ? 'border-primary-yellow text-primary-dark' : 'border-transparent text-gray-500 hover:text-gray-700')}>
            {locale === 'es' ? 'Todos los Pagos' : 'All Payments'}
          </button>
        </nav>
      </div>

      {/* Pending Approval Tab */}
      {activeTab === 'pending_approval' && (
        <>
          {visiblePendingApprovalPayments.length === 0 ? (
            <Card className="p-12 text-center">
              <CheckCircleIcon className="w-12 h-12 text-green-400 mx-auto mb-4" />
              <p className="text-gray-500">
                {locale === 'es' 
                  ? 'No hay pagos pendientes de aprobación' 
                  : 'No payments pending approval'}
              </p>
            </Card>
          ) : (
            <div className="space-y-4">
              {visiblePendingApprovalPayments.map((payment) => {
                const bookingInfo = getPendingBookingInfo(payment);
                return (
                  <Card key={payment.id} className="p-4">
                    <div className="flex items-start justify-between">
                      <div className="flex items-start gap-4">
                        <div className="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center flex-shrink-0">
                          {getProviderIcon(payment.provider)}
                        </div>
                        <div>
                          <div className="flex items-center gap-2 mb-1">
                            <p className="font-bold text-lg">{formatCurrency(bookingInfo.bookingTotal, payment.currency)}</p>
                            {bookingInfo.ticketCount > 1 && (
                              <span className="text-xs bg-purple-100 text-purple-700 px-2 py-0.5 rounded-full">
                                📦 {bookingInfo.ticketCount} tickets × {formatCurrency(payment.amount, payment.currency)}
                              </span>
                            )}
                            {getStatusBadge(payment.status)}
                          </div>
                          {payment.ticket && (
                            <p className="text-sm font-medium">
                              {payment.ticket.attendeeFirstName} {payment.ticket.attendeeLastName}
                              {bookingInfo.ticketCount > 1 && <span className="text-gray-400 font-normal"> +{bookingInfo.ticketCount - 1} {locale === 'es' ? 'más' : 'more'}</span>}
                            </p>
                          )}
                          {payment.event && (
                            <p className="text-sm text-gray-500">{payment.event.title}</p>
                          )}
                          <div className="flex items-center gap-4 mt-2 text-xs text-gray-400">
                            <span className="flex items-center gap-1">
                              {getProviderIcon(payment.provider)}
                              {getProviderLabel(payment.provider)}
                              {getProviderKindBadge(payment.provider)}
                            </span>
                            {payment.userMarkedPaidAt && (() => {
                              const age = getAgeInfo(payment.userMarkedPaidAt);
                              return (
                                <span className={clsx('flex items-center gap-1', age?.stale && 'text-amber-600 font-medium')}>
                                  <ClockIcon className="w-3 h-3" />
                                  {locale === 'es' ? 'Marcado:' : 'Marked:'} {formatDate(payment.userMarkedPaidAt)}
                                  {age && <span>({age.label})</span>}
                                </span>
                              );
                            })()}
                          </div>
                          {payment.payerName && (
                            <p className="text-xs text-amber-600 mt-1 font-medium">
                              ⚠️ {locale === 'es' ? 'Pago por:' : 'Paid by:'} {payment.payerName}
                            </p>
                          )}
                        </div>
                      </div>
                      <Button onClick={() => setSelectedPayment(payment)} size="sm" className="min-h-[44px] md:min-h-0 flex-shrink-0">
                        {locale === 'es' ? 'Revisar' : 'Review'}
                      </Button>
                    </div>
                  </Card>
                );
              })}
            </div>
          )}

          {/* Manual payments the customer never confirmed — they may have paid
              (bank transfer / TPago received) without pressing "I've paid".
              Approving one claims a seat, so it goes through the same
              over-capacity confirmation as any approval. */}
          {visibleUnclaimedManualPayments.length > 0 && (
            <details className="mt-8">
              <summary className="cursor-pointer text-sm font-medium text-gray-600 select-none">
                {locale === 'es'
                  ? `Pagos manuales sin confirmar por el cliente (${visibleUnclaimedManualPayments.length})`
                  : `Manual payments not yet confirmed by customer (${visibleUnclaimedManualPayments.length})`}
                <span className="block text-xs font-normal text-gray-400 mt-0.5">
                  {locale === 'es'
                    ? 'Puede que hayan pagado sin presionar "Ya pagué". No reservan lugar hasta ser aprobados.'
                    : 'They may have paid without pressing "I\'ve paid". These hold no seat until approved.'}
                </span>
              </summary>
              <div className="space-y-3 mt-4">
                {visibleUnclaimedManualPayments.map((payment) => {
                  const age = getAgeInfo(payment.createdAt);
                  return (
                    <Card key={payment.id} className="p-3">
                      <div className="flex items-center justify-between gap-3">
                        <div className="flex items-center gap-3 min-w-0">
                          <div className="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center flex-shrink-0">
                            {getProviderIcon(payment.provider)}
                          </div>
                          <div className="min-w-0">
                            <p className="text-sm font-medium truncate">
                              {payment.ticket?.attendeeFirstName} {payment.ticket?.attendeeLastName}
                              <span className="text-gray-400 font-normal"> · {formatCurrency(payment.amount, payment.currency)}</span>
                            </p>
                            <p className="text-xs text-gray-400 truncate">
                              {payment.event?.title}
                              {' · '}{getProviderLabel(payment.provider)}
                              {age && <span> · {age.label}</span>}
                            </p>
                          </div>
                        </div>
                        <Button onClick={() => setSelectedPayment(payment)} size="sm" variant="outline" className="flex-shrink-0 min-h-[40px]">
                          {locale === 'es' ? 'Revisar' : 'Review'}
                        </Button>
                      </div>
                    </Card>
                  );
                })}
              </div>
            </details>
          )}
        </>
      )}

      {/* All Payments Tab */}
      {activeTab === 'all' && (() => {
        const q = searchQuery.trim().toLowerCase();
        const filteredPayments = q
          ? payments.filter((p) => {
              const name = `${p.ticket?.attendeeFirstName || ''} ${p.ticket?.attendeeLastName || ''}`.trim().toLowerCase();
              const email = (p.ticket?.attendeeEmail || '').toLowerCase();
              const phone = (p.ticket?.attendeePhone || '').toLowerCase();
              const eventTitle = (p.event?.title || '').toLowerCase();
              const payerName = (p.payerName || '').toLowerCase();
              const reference = (p.reference || '').toLowerCase();
              const id = (p.id || '').toLowerCase();
              return name.includes(q) || email.includes(q) || phone.includes(q) ||
                eventTitle.includes(q) || payerName.includes(q) || reference.includes(q) || id.includes(q);
            })
          : payments;

        return (
        <>
          {/* Desktop Filters */}
          <Card className="p-4 mb-6 hidden md:block">
            <div className="flex flex-wrap gap-4">
              <div className="flex-1 min-w-[200px]">
                <label className="block text-sm font-medium mb-1">{locale === 'es' ? 'Buscar' : 'Search'}</label>
                <div className="relative">
                  <MagnifyingGlassIcon className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
                  <input
                    type="text"
                    placeholder={locale === 'es' ? 'Nombre, email, evento...' : 'Name, email, event...'}
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    className="w-full pl-9 pr-3 py-2 rounded-btn border border-secondary-light-gray text-sm focus:outline-none focus:ring-2 focus:ring-primary-yellow min-w-[200px]"
                  />
                </div>
              </div>
              <div>
                <label className="block text-sm font-medium mb-1">Status</label>
                <select value={statusFilter} onChange={(e) => setStatusFilter(e.target.value)}
                  className="px-4 py-2 rounded-btn border border-secondary-light-gray min-w-[150px] text-sm">
                  <option value="">{locale === 'es' ? 'Todos los Estados' : 'All Statuses'}</option>
                  <option value="pending">{locale === 'es' ? 'Pendiente' : 'Pending'}</option>
                  <option value="pending_approval">{locale === 'es' ? 'Esperando Aprobación' : 'Pending Approval'}</option>
                  <option value="paid">{locale === 'es' ? 'Pagado' : 'Paid'}</option>
                  <option value="refunded">{locale === 'es' ? 'Reembolsado' : 'Refunded'}</option>
                  <option value="failed">{locale === 'es' ? 'Fallido' : 'Failed'}</option>
                  <option value="on_hold">{locale === 'es' ? 'En Espera' : 'On Hold'}</option>
                </select>
              </div>
              <div>
                <label className="block text-sm font-medium mb-1">{locale === 'es' ? 'Método' : 'Provider'}</label>
                <select value={providerFilter} onChange={(e) => setProviderFilter(e.target.value)}
                  className="px-4 py-2 rounded-btn border border-secondary-light-gray min-w-[150px] text-sm">
                  <option value="">{locale === 'es' ? 'Todos los Métodos' : 'All Providers'}</option>
                  <option value="lightning">Lightning</option>
                  <option value="cash">{locale === 'es' ? 'Efectivo' : 'Cash'}</option>
                  <option value="bank_transfer">{locale === 'es' ? 'Transferencia' : 'Bank Transfer'}</option>
                  <option value="tpago">TPago</option>
                </select>
              </div>
              <div className="flex-1 min-w-[200px]">
                <label className="block text-sm font-medium mb-1">{locale === 'es' ? 'Evento(s)' : 'Event(s)'}</label>
                <select
                  value=""
                  onChange={(e) => {
                    const id = e.target.value;
                    if (id && !eventFilter.includes(id)) setEventFilter([...eventFilter, id]);
                    e.target.value = '';
                  }}
                  className="px-4 py-2 rounded-btn border border-secondary-light-gray w-full text-sm"
                >
                  <option value="">{locale === 'es' ? 'Agregar evento...' : 'Add event...'}</option>
                  {events.filter(e => !eventFilter.includes(e.id)).map((event) => (
                    <option key={event.id} value={event.id}>{event.title}</option>
                  ))}
                </select>
                {eventFilter.length > 0 && (
                  <div className="flex flex-wrap gap-1.5 mt-2">
                    {eventFilter.map((id) => {
                      const ev = events.find(e => e.id === id);
                      return (
                        <span key={id} className="inline-flex items-center gap-1 px-2 py-0.5 bg-primary-yellow/20 rounded text-xs">
                          {ev?.title || id}
                          <button type="button" onClick={() => setEventFilter(eventFilter.filter(x => x !== id))} className="hover:text-red-600">×</button>
                        </span>
                      );
                    })}
                    <button type="button" onClick={() => setEventFilter([])} className="text-xs text-gray-500 hover:text-primary-dark">
                      {locale === 'es' ? 'Limpiar' : 'Clear'}
                    </button>
                  </div>
                )}
              </div>
            </div>
          </Card>

          {/* Mobile Search & Filter Toolbar */}
          <div className="md:hidden mb-4 space-y-2">
            <div className="relative">
              <MagnifyingGlassIcon className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
              <input
                type="text"
                placeholder={locale === 'es' ? 'Nombre, email, evento...' : 'Name, email, event...'}
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full pl-9 pr-3 py-2.5 rounded-btn border border-secondary-light-gray text-sm focus:outline-none focus:ring-2 focus:ring-primary-yellow"
              />
            </div>
            <div className="flex items-center gap-2">
              <button onClick={() => setMobileFilterOpen(true)}
                className={clsx('flex items-center gap-1.5 px-3 py-2 rounded-btn border text-sm min-h-[44px]',
                  (statusFilter || providerFilter || eventFilter.length > 0) ? 'border-primary-yellow bg-yellow-50 text-primary-dark' : 'border-secondary-light-gray text-gray-600')}>
                <FunnelIcon className="w-4 h-4" /> Filters
              </button>
              {(statusFilter || providerFilter || eventFilter.length > 0 || searchQuery) && (
                <button onClick={() => { setStatusFilter(''); setProviderFilter(''); setEventFilter([]); setSearchQuery(''); }}
                  className="text-xs text-primary-yellow min-h-[44px] flex items-center">Clear</button>
              )}
            </div>
          </div>

          {/* Desktop: Table */}
          <Card className="overflow-hidden hidden md:block">
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead className="bg-secondary-gray">
                  <tr>
                    <th className="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">{locale === 'es' ? 'Asistente' : 'Attendee'}</th>
                    <th className="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">RUC</th>
                    <th className="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">{locale === 'es' ? 'Evento' : 'Event'}</th>
                    <th className="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">{locale === 'es' ? 'Monto' : 'Amount'}</th>
                    <th className="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">{locale === 'es' ? 'Método' : 'Method'}</th>
                    <th className="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                    <th className="text-right px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">{locale === 'es' ? 'Acciones' : 'Actions'}</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-secondary-light-gray">
                  {filteredPayments.length === 0 ? (
                    <tr><td colSpan={7} className="px-4 py-12 text-center text-gray-500 text-sm">{locale === 'es' ? 'No se encontraron pagos' : 'No payments found'}</td></tr>
                  ) : (
                    filteredPayments.map((payment) => {
                      const bookingInfo = getBookingInfo(payment);
                      return (
                        <tr key={payment.id} className="hover:bg-gray-50">
                          <td className="px-4 py-3">
                            {payment.ticket ? (
                              <div>
                                <p className="font-medium text-sm">{payment.ticket.attendeeFirstName} {payment.ticket.attendeeLastName}</p>
                                <p className="text-xs text-gray-500 truncate max-w-[180px]">{payment.ticket.attendeeEmail}</p>
                              </div>
                            ) : <span className="text-gray-400 text-sm">-</span>}
                          </td>
                          <td className="px-4 py-3 text-sm text-gray-600">{payment.ticket?.attendeeRuc || '-'}</td>
                          <td className="px-4 py-3 text-sm truncate max-w-[150px]">{payment.event?.title || '-'}</td>
                          <td className="px-4 py-3">
                            <p className="font-medium text-sm">{formatCurrency(bookingInfo.bookingTotal, payment.currency)}</p>
                            {bookingInfo.ticketCount > 1 && <p className="text-[10px] text-purple-600">{bookingInfo.ticketCount} tickets</p>}
                          </td>
                          <td className="px-4 py-3">
                            <div className="flex items-center gap-1.5 text-xs text-gray-600">
                              {getProviderIcon(payment.provider)} {getProviderLabel(payment.provider)}
                              {getProviderKindBadge(payment.provider)}
                            </div>
                          </td>
                          <td className="px-4 py-3">{getStatusBadge(payment.status)}</td>
                          <td className="px-4 py-3">
                            <div className="flex items-center justify-end gap-1">
                              {(payment.status === 'pending' || payment.status === 'pending_approval' || payment.status === 'on_hold' || payment.status === 'failed') && (
                                <Button size="sm" onClick={() => setSelectedPayment(payment)} className="text-xs px-2 py-1">
                                  {locale === 'es' ? 'Revisar' : 'Review'}
                                </Button>
                              )}
                              {payment.status === 'on_hold' && (
                                <Button size="sm" variant="outline" onClick={() => handleReactivate(payment)} className="text-xs px-2 py-1">
                                  {locale === 'es' ? 'Reactivar' : 'Reactivate'}
                                </Button>
                              )}
                              {payment.status === 'paid' && (
                                <Button size="sm" variant="outline" onClick={() => handleRefund(payment.id)} className="text-xs px-2 py-1">
                                  {t('admin.payments.refund')}
                                </Button>
                              )}
                            </div>
                          </td>
                        </tr>
                      );
                    })
                  )}
                </tbody>
              </table>
            </div>
          </Card>
          {(searchQuery || filteredPayments.length !== payments.length) && (
            <p className="hidden md:block text-sm text-gray-500 mb-2">
              {locale === 'es' ? 'Mostrando' : 'Showing'} {filteredPayments.length} {locale === 'es' ? 'de' : 'of'} {payments.length}
            </p>
          )}

          {/* Mobile: Card List */}
          <div className="md:hidden space-y-2">
            {filteredPayments.length === 0 ? (
              <div className="text-center py-10 text-gray-500 text-sm">{locale === 'es' ? 'No se encontraron pagos' : 'No payments found'}</div>
            ) : (
              filteredPayments.map((payment) => {
                const bookingInfo = getBookingInfo(payment);
                return (
                  <Card key={payment.id} className="p-3">
                    <div className="flex items-start justify-between gap-2">
                      <div className="min-w-0 flex-1">
                        {payment.ticket ? (
                          <p className="font-medium text-sm truncate">{payment.ticket.attendeeFirstName} {payment.ticket.attendeeLastName}</p>
                        ) : <p className="text-sm text-gray-400">-</p>}
                        <p className="text-xs text-gray-500 truncate">{payment.event?.title || '-'}</p>
                      </div>
                      <div className="flex items-center gap-1.5 flex-shrink-0">
                        {getStatusBadge(payment.status)}
                      </div>
                    </div>
                    <div className="mt-2 flex items-center gap-2 text-xs text-gray-500">
                      <span className="font-medium text-gray-700">{formatCurrency(bookingInfo.bookingTotal, payment.currency)}</span>
                      <span className="text-gray-300">|</span>
                      <span className="flex items-center gap-1">{getProviderIcon(payment.provider)} {getProviderLabel(payment.provider)} {getProviderKindBadge(payment.provider)}</span>
                      {bookingInfo.ticketCount > 1 && (
                        <><span className="text-gray-300">|</span><span className="text-purple-600">{bookingInfo.ticketCount} tickets</span></>
                      )}
                    </div>
                    <div className="flex items-center justify-between mt-2 pt-2 border-t border-gray-100">
                      <p className="text-[10px] text-gray-400">{formatDate(payment.createdAt)}</p>
                      <div className="flex items-center gap-1">
                        {(payment.status === 'pending' || payment.status === 'pending_approval' || payment.status === 'on_hold' || payment.status === 'failed') && (
                          <Button size="sm" onClick={() => setSelectedPayment(payment)} className="text-xs px-2.5 py-1.5 min-h-[36px]">
                            {locale === 'es' ? 'Revisar' : 'Review'}
                          </Button>
                        )}
                        {payment.status === 'on_hold' && (
                          <Button size="sm" variant="outline" onClick={() => handleReactivate(payment)} className="text-xs px-2.5 py-1.5 min-h-[36px]">
                            {locale === 'es' ? 'Reactivar' : 'Reactivate'}
                          </Button>
                        )}
                        {payment.status === 'paid' && (
                          <Button size="sm" variant="outline" onClick={() => handleRefund(payment.id)} className="text-xs px-2.5 py-1.5 min-h-[36px]">
                            {t('admin.payments.refund')}
                          </Button>
                        )}
                      </div>
                    </div>
                  </Card>
                );
              })
            )}
          </div>

          {/* Mobile Filter BottomSheet */}
          <BottomSheet open={mobileFilterOpen} onClose={() => setMobileFilterOpen(false)} title={locale === 'es' ? 'Filtros' : 'Filters'}>
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">{locale === 'es' ? 'Evento(s)' : 'Event(s)'}</label>
                <div className="max-h-40 overflow-y-auto border border-secondary-light-gray rounded-btn p-2 space-y-1">
                  {events.map((event) => (
                    <label key={event.id} className="flex items-center gap-2 py-1.5 cursor-pointer">
                      <input
                        type="checkbox"
                        checked={eventFilter.includes(event.id)}
                        onChange={(e) => {
                          if (e.target.checked) setEventFilter([...eventFilter, event.id]);
                          else setEventFilter(eventFilter.filter(id => id !== event.id));
                        }}
                        className="w-4 h-4 rounded border-gray-300 text-primary-yellow focus:ring-primary-yellow"
                      />
                      <span className="text-sm">{event.title}</span>
                    </label>
                  ))}
                </div>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Status</label>
                <select value={statusFilter} onChange={(e) => setStatusFilter(e.target.value)}
                  className="w-full px-3 py-2.5 rounded-btn border border-secondary-light-gray text-sm min-h-[44px]">
                  <option value="">{locale === 'es' ? 'Todos los Estados' : 'All Statuses'}</option>
                  <option value="pending">{locale === 'es' ? 'Pendiente' : 'Pending'}</option>
                  <option value="pending_approval">{locale === 'es' ? 'Esperando Aprobación' : 'Pending Approval'}</option>
                  <option value="paid">{locale === 'es' ? 'Pagado' : 'Paid'}</option>
                  <option value="refunded">{locale === 'es' ? 'Reembolsado' : 'Refunded'}</option>
                  <option value="failed">{locale === 'es' ? 'Fallido' : 'Failed'}</option>
                  <option value="on_hold">{locale === 'es' ? 'En Espera' : 'On Hold'}</option>
                </select>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">{locale === 'es' ? 'Método' : 'Provider'}</label>
                <select value={providerFilter} onChange={(e) => setProviderFilter(e.target.value)}
                  className="w-full px-3 py-2.5 rounded-btn border border-secondary-light-gray text-sm min-h-[44px]">
                  <option value="">{locale === 'es' ? 'Todos los Métodos' : 'All Providers'}</option>
                  <option value="lightning">Lightning</option>
                  <option value="cash">{locale === 'es' ? 'Efectivo' : 'Cash'}</option>
                  <option value="bank_transfer">{locale === 'es' ? 'Transferencia' : 'Bank Transfer'}</option>
                  <option value="tpago">TPago</option>
                </select>
              </div>
              <div className="flex gap-3 pt-2">
                <Button variant="outline" onClick={() => { setStatusFilter(''); setProviderFilter(''); setEventFilter([]); setSearchQuery(''); setMobileFilterOpen(false); }} className="flex-1 min-h-[44px]">Clear</Button>
                <Button onClick={() => setMobileFilterOpen(false)} className="flex-1 min-h-[44px]">Apply</Button>
              </div>
            </div>
          </BottomSheet>
        </>
        );
      })()}

      <AdminMobileStyles />
    </div>
  );
}