import { useState } from 'react';
import {
  View, Text, ScrollView, RefreshControl, ActivityIndicator, TouchableOpacity,
  Linking, Alert, Modal, TextInput, KeyboardAvoidingView, Platform
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useQueries, useQueryClient } from '@tanstack/react-query';
import { router } from 'expo-router';
import { api } from '../../services/api';
import { useAuthStore } from '../../stores/authStore';
import { SlideToConfirm } from '../../components/SlideToConfirm';

const LEAD_STATUS: Record<string, { label: string; color: string; bg: string }> = {
  NEW:        { label: 'New',        color: '#0891B2', bg: '#ECFEFF' },
  CONTACTED:  { label: 'Contacted',  color: '#D97706', bg: '#FEF3C7' },
  INTERESTED: { label: 'Interested', color: '#7C3AED', bg: '#F5F3FF' },
  CONVERTED:  { label: 'Converted',  color: '#166534', bg: '#DCFCE7' },
  LOST:       { label: 'Lost',       color: '#6B7280', bg: '#F1F5F9' },
};

const PRIORITY_COLOR: Record<string, string> = { HIGH: '#DC2626', NORMAL: '#0891B2' };
const PRIORITY_BG: Record<string, string>    = { HIGH: '#FEE2E2', NORMAL: '#ECFEFF' };
const TYPE_COLOR: Record<string, string>     = { INSTALLATION: '#0891B2', SUPPORT: '#7C3AED', BILLING: '#D97706' };
const METHODS = [
  { id: 'CASH',         label: 'Cash' },
  { id: 'GCASH',        label: 'GCash' },
  { id: 'MAYA',         label: 'Maya' },
  { id: 'BANK_TRANSFER',label: 'Bank Transfer' },
];

function KpiCard({ label, value, color, bg }: any) {
  return (
    <View style={{ flex: 1, marginHorizontal: 5, borderRadius: 16, padding: 16, backgroundColor: bg }}>
      <Text style={{ fontSize: 11, fontWeight: '700', color, marginBottom: 6, textTransform: 'uppercase', letterSpacing: 0.5 }}>{label}</Text>
      <Text style={{ fontSize: 26, fontWeight: '800', color }}>{value}</Text>
    </View>
  );
}

function TicketRow({ task, onPress }: { task: any; onPress: () => void }) {
  const typeColor = TYPE_COLOR[task.type] ?? '#6B7280';
  return (
    <TouchableOpacity onPress={onPress} activeOpacity={0.7}
      style={{ backgroundColor: '#FFF', borderRadius: 14, padding: 16, marginBottom: 10, borderWidth: 1, borderColor: '#F1F5F9', borderLeftWidth: 4, borderLeftColor: typeColor }}
    >
      <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
        <View style={{ flexDirection: 'row', gap: 6, alignItems: 'center' }}>
          <View style={{ borderRadius: 20, paddingHorizontal: 8, paddingVertical: 3, backgroundColor: `${typeColor}20` }}>
            <Text style={{ fontSize: 11, fontWeight: '700', color: typeColor }}>{task.type}</Text>
          </View>
          {task.priority === 'HIGH' && (
            <View style={{ borderRadius: 20, paddingHorizontal: 8, paddingVertical: 3, backgroundColor: PRIORITY_BG.HIGH }}>
              <Text style={{ fontSize: 11, fontWeight: '700', color: PRIORITY_COLOR.HIGH }}>HIGH</Text>
            </View>
          )}
        </View>
        <Text style={{ fontSize: 12, fontWeight: '600', color: '#64748B' }}>{task.status?.replace('_', ' ')}</Text>
      </View>
      <Text style={{ fontSize: 15, fontWeight: '700', color: '#0F172A' }} numberOfLines={1}>{task.subject}</Text>
      <Text style={{ fontSize: 13, color: '#64748B', marginTop: 3 }}>
        {task.client?.firstName} {task.client?.lastName}
        {task.assignedTo ? ` · ${task.assignedTo.firstName}` : ' · Unassigned'}
      </Text>
    </TouchableOpacity>
  );
}

function InvoiceRow({ inv, onPay }: { inv: any; onPay: () => void }) {
  const dueDate   = inv.dueDate ? new Date(inv.dueDate) : null;
  const today     = new Date();
  const isOverdue = dueDate && dueDate < today;
  const daysLeft  = dueDate ? Math.ceil((dueDate.getTime() - today.getTime()) / 86400000) : null;

  const navigate = () => {
    const lat = inv.client?.lat, lng = inv.client?.lng;
    if (!lat || !lng) { Alert.alert('No Location', 'No recorded location for this client.'); return; }
    Alert.alert('Navigate', `Open navigation to ${inv.client?.firstName} ${inv.client?.lastName}?`, [
      { text: 'Google Maps', onPress: () => Linking.openURL(`https://www.google.com/maps/dir/?api=1&destination=${lat},${lng}`) },
      { text: 'Waze',        onPress: () => Linking.openURL(`waze://?ll=${lat},${lng}&navigate=yes`) },
      { text: 'Cancel', style: 'cancel' },
    ]);
  };

  return (
    <View style={{ backgroundColor: '#FFF', borderRadius: 14, padding: 16, marginBottom: 10, borderWidth: 1, borderColor: isOverdue ? '#FCA5A5' : '#F1F5F9', borderLeftWidth: 4, borderLeftColor: isOverdue ? '#DC2626' : '#F59E0B' }}>
      <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <View style={{ flex: 1, marginRight: 10 }}>
          <Text style={{ fontSize: 15, fontWeight: '700', color: '#0F172A' }}>
            {inv.client?.firstName} {inv.client?.lastName}
          </Text>
          <Text style={{ fontSize: 13, color: '#64748B', marginTop: 2 }}>{inv.invoiceNumber}</Text>
          <Text style={{ fontSize: 13, color: isOverdue ? '#DC2626' : '#D97706', fontWeight: '600', marginTop: 3 }}>
            {isOverdue
              ? `Overdue by ${Math.abs(daysLeft ?? 0)} day${Math.abs(daysLeft ?? 0) !== 1 ? 's' : ''}`
              : daysLeft !== null ? `Due in ${daysLeft} day${daysLeft !== 1 ? 's' : ''}` : 'No due date'}
          </Text>
        </View>
        <View style={{ alignItems: 'flex-end', gap: 6 }}>
          <Text style={{ fontSize: 16, fontWeight: '800', color: '#991B1B' }}>₱{Number(inv.balance).toLocaleString()}</Text>
          <View style={{ flexDirection: 'row', gap: 6 }}>
            <TouchableOpacity onPress={navigate}
              style={{ backgroundColor: '#ECFEFF', borderRadius: 8, paddingHorizontal: 10, paddingVertical: 6 }}>
              <Text style={{ fontSize: 12, fontWeight: '700', color: '#0891B2' }}>📍 Navigate</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={onPay}
              style={{ backgroundColor: '#059669', borderRadius: 8, paddingHorizontal: 10, paddingVertical: 6 }}>
              <Text style={{ fontSize: 12, fontWeight: '700', color: '#fff' }}>💳 Pay</Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    </View>
  );
}

export default function DashboardScreen() {
  const { user } = useAuthStore();
  const qc = useQueryClient();
  const role = user?.roles?.[0] ?? user?.role ?? '';
  const isAdminOrStaff = role === 'ADMIN' || role === 'STAFF';
  const hour = new Date().getHours();
  const greeting = hour < 12 ? 'Good morning' : hour < 18 ? 'Good afternoon' : 'Good evening';

  // Payment modal state
  const [payModal, setPayModal]     = useState(false);
  const [payInvoice, setPayInvoice] = useState<any>(null);
  const [payAmount, setPayAmount]   = useState('');
  const [payMethod, setPayMethod]   = useState('CASH');
  const [payNote,   setPayNote]     = useState('');
  const [paying,    setPaying]      = useState(false);

  const openPay = (inv: any) => {
    setPayInvoice(inv);
    setPayAmount(String(Number(inv.balance)));
    setPayMethod('CASH');
    setPayNote('');
    setPaying(false);
    setPayModal(true);
  };
  const closePay = () => { if (!paying) setPayModal(false); };

  const submitPayment = async () => {
    if (!payInvoice) return;
    const amt = parseFloat(payAmount);
    if (!amt || amt <= 0) { Alert.alert('Invalid Amount', 'Please enter a valid amount.'); return; }
    setPaying(true);
    try {
      await api.post('/api/v1/payments', {
        clientId:  payInvoice.clientId,
        invoiceId: payInvoice.id,
        amount:    amt,
        channel:   payMethod,
        ...(payNote.trim() ? { notes: payNote.trim() } : {}),
        paymentDate: new Date().toISOString(),
      });
      setPayModal(false);
      qc.invalidateQueries({ queryKey: ['dashboard-invoices'] });
      qc.invalidateQueries({ queryKey: ['dashboard'] });
      Alert.alert('Payment Recorded ✓', `₱${amt.toLocaleString()} payment recorded for ${payInvoice.client?.firstName} ${payInvoice.client?.lastName}.`);
    } catch (e: any) {
      const msg = e?.response?.data?.message ?? 'Could not record payment.';
      Alert.alert('Error', Array.isArray(msg) ? msg.join('\n') : msg);
    } finally {
      setPaying(false);
    }
  };

  const [summaryQ, ticketsQ, invoicesQ, leadsQ] = useQueries({
    queries: [
      { queryKey: ['dashboard'],         queryFn: () => api.get('/api/v1/dashboard/summary').then(r => r.data) },
      {
        queryKey: ['dashboard-tickets'],
        queryFn: async () => {
          const res = await api.get('/api/v1/tickets?limit=20');
          const all: any[] = res.data?.data ?? res.data ?? [];
          return all.filter((t: any) => t.status === 'OPEN' || t.status === 'IN_PROGRESS');
        },
      },
      {
        queryKey: ['dashboard-invoices'],
        queryFn: async () => {
          const res = await api.get('/api/v1/invoices?limit=20');
          const all: any[] = res.data?.data ?? res.data ?? [];
          const unpaid = all.filter((inv: any) => ['SENT','PARTIAL','OVERDUE'].includes(inv.status) && Number(inv.balance) > 0);
          unpaid.sort((a: any, b: any) => {
            const da = a.dueDate ? new Date(a.dueDate).getTime() : Infinity;
            const db = b.dueDate ? new Date(b.dueDate).getTime() : Infinity;
            return da - db;
          });
          return unpaid.slice(0, 5);
        },
      },
      {
        queryKey: ['dashboard-leads'],
        queryFn: async () => {
          const res = await api.get('/api/v1/leads?limit=20');
          const all: any[] = res.data?.data ?? res.data ?? [];
          return all.filter((l: any) => l.status !== 'CONVERTED' && l.status !== 'LOST').slice(0, 5);
        },
      },
    ],
  });

  const isLoading    = summaryQ.isLoading    || ticketsQ.isLoading    || invoicesQ.isLoading;
  const isRefetching = summaryQ.isRefetching || ticketsQ.isRefetching || invoicesQ.isRefetching;
  const summary          = summaryQ.data  ?? {};
  const allActiveTickets = ticketsQ.data  ?? [];
  const unpaidInvoices   = invoicesQ.data ?? [];
  const activeLeads      = leadsQ.data    ?? [];

  const unassigned   = (allActiveTickets as any[]).filter((t: any) => !t.assignedToId);
  const assignedToMe = (allActiveTickets as any[]).filter((t: any) => t.assignedToId === user?.id);
  const seen = new Set<string>();
  const mergedTickets = [...assignedToMe, ...unassigned].filter((t: any) => {
    if (seen.has(t.id)) return false; seen.add(t.id); return true;
  }).slice(0, 5).sort((a: any, b: any) => (a.priority === 'HIGH' ? -1 : 1) - (b.priority === 'HIGH' ? -1 : 1));

  const refetchAll = () => { summaryQ.refetch(); ticketsQ.refetch(); invoicesQ.refetch(); leadsQ.refetch(); };

  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: '#0891B2' }} edges={['top']}>
      <ScrollView style={{ flex: 1, backgroundColor: '#F8FAFC' }}
        refreshControl={<RefreshControl refreshing={isRefetching} onRefresh={refetchAll} tintColor="#0891B2" />}
      >
        {/* Header */}
        <View style={{ backgroundColor: '#0891B2', paddingHorizontal: 20, paddingTop: 16, paddingBottom: 24 }}>
          <Text style={{ color: '#A5F3FC', fontSize: 15, fontWeight: '500' }}>{greeting},</Text>
          <Text style={{ color: '#FFF', fontSize: 28, fontWeight: '800', marginTop: 2 }}>{user?.firstName ?? 'Field Staff'}</Text>
        </View>

        {isLoading ? (
          <View style={{ paddingVertical: 80, alignItems: 'center' }}><ActivityIndicator color="#0891B2" size="large" /></View>
        ) : (
          <View style={{ padding: 16 }}>
            <View style={{ flexDirection: 'row', marginBottom: 10 }}>
              <KpiCard label="Subscribers"    value={summary?.subscribers?.total  ?? '—'} color="#0E7490" bg="#ECFEFF" />
              <KpiCard label="Active"         value={summary?.subscribers?.active ?? '—'} color="#166534" bg="#F0FDF4" />
            </View>
            <View style={{ flexDirection: 'row', marginBottom: 16 }}>
              <KpiCard label="Unpaid Invoices" value={summary?.billing?.unpaidInvoices ?? '—'} color="#991B1B" bg="#FEF2F2" />
              <KpiCard label="Open Tickets"    value={summary?.support?.openTickets    ?? '—'} color="#92400E" bg="#FFFBEB" />
            </View>

            {isAdminOrStaff && summary?.revenue?.thisMonth != null && (
              <View style={{ backgroundColor: '#FFF', borderRadius: 16, padding: 18, marginBottom: 16, borderWidth: 1, borderColor: '#F1F5F9', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
                <View>
                  <Text style={{ fontSize: 12, fontWeight: '700', color: '#94A3B8', textTransform: 'uppercase', letterSpacing: 0.4, marginBottom: 4 }}>This Month's Revenue</Text>
                  <Text style={{ fontSize: 24, fontWeight: '800', color: '#166534' }}>₱{Number(summary.revenue.thisMonth).toLocaleString()}</Text>
                </View>
                {summary.revenue.growth !== undefined && (
                  <View style={{ backgroundColor: '#F0FDF4', borderRadius: 12, paddingHorizontal: 12, paddingVertical: 6 }}>
                    <Text style={{ fontSize: 15, fontWeight: '800', color: '#16A34A' }}>+{summary.revenue.growth}%</Text>
                  </View>
                )}
              </View>
            )}

            {/* Tickets */}
            <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                <Text style={{ fontSize: 17, fontWeight: '800', color: '#0F172A' }}>Tickets</Text>
                {mergedTickets.length > 0 && (
                  <View style={{ backgroundColor: '#ECFEFF', borderRadius: 20, paddingHorizontal: 8, paddingVertical: 2, marginLeft: 8 }}>
                    <Text style={{ fontSize: 12, fontWeight: '700', color: '#0891B2' }}>{mergedTickets.length}</Text>
                  </View>
                )}
              </View>
              <TouchableOpacity onPress={() => router.push('/(app)/tasks')} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
                <Text style={{ fontSize: 14, fontWeight: '600', color: '#0891B2' }}>View all</Text>
              </TouchableOpacity>
            </View>
            {mergedTickets.length === 0 ? (
              <View style={{ backgroundColor: '#FFF', borderRadius: 14, padding: 20, alignItems: 'center', marginBottom: 20, borderWidth: 1, borderColor: '#F1F5F9' }}>
                <Text style={{ fontSize: 15, color: '#94A3B8' }}>No active tickets 🎉</Text>
              </View>
            ) : (
              <View style={{ marginBottom: 4 }}>
                {mergedTickets.map((t: any) => (
                  <TicketRow key={t.id} task={t} onPress={() => router.push(`/(app)/tasks/${t.id}`)} />
                ))}
                <TouchableOpacity onPress={() => router.push('/(app)/tasks')} style={{ alignItems: 'center', paddingVertical: 10, marginBottom: 12 }}>
                  <Text style={{ fontSize: 13, color: '#0891B2', fontWeight: '600' }}>View all tickets →</Text>
                </TouchableOpacity>
              </View>
            )}

            {/* Unpaid Invoices */}
            <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
              <Text style={{ fontSize: 17, fontWeight: '800', color: '#0F172A' }}>Unpaid Invoices</Text>
              <TouchableOpacity onPress={() => router.push('/(app)/payments')} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
                <Text style={{ fontSize: 14, fontWeight: '600', color: '#0891B2' }}>View all</Text>
              </TouchableOpacity>
            </View>
            {unpaidInvoices.length === 0 ? (
              <View style={{ backgroundColor: '#FFF', borderRadius: 14, padding: 20, alignItems: 'center', marginBottom: 20, borderWidth: 1, borderColor: '#F1F5F9' }}>
                <Text style={{ fontSize: 15, color: '#94A3B8' }}>No unpaid invoices 🎉</Text>
              </View>
            ) : (
              <View style={{ marginBottom: 4 }}>
                {(unpaidInvoices as any[]).map((inv: any) => (
                  <InvoiceRow key={inv.id} inv={inv} onPay={() => openPay(inv)} />
                ))}
                <TouchableOpacity onPress={() => router.push('/(app)/payments')} style={{ alignItems: 'center', paddingVertical: 10, marginBottom: 12 }}>
                  <Text style={{ fontSize: 13, color: '#0891B2', fontWeight: '600' }}>View all unpaid invoices →</Text>
                </TouchableOpacity>
              </View>
            )}
            {/* ── Leads ── */}
            <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                <Text style={{ fontSize: 17, fontWeight: '800', color: '#0F172A' }}>Leads</Text>
                {(activeLeads as any[]).length > 0 && (
                  <View style={{ backgroundColor: '#F5F3FF', borderRadius: 20, paddingHorizontal: 8, paddingVertical: 2, marginLeft: 8 }}>
                    <Text style={{ fontSize: 12, fontWeight: '700', color: '#7C3AED' }}>{(activeLeads as any[]).length}</Text>
                  </View>
                )}
              </View>
              <TouchableOpacity
                onPress={() => router.push('/(app)/leads')}
                hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
              >
                <Text style={{ fontSize: 14, fontWeight: '600', color: '#0891B2' }}>View all</Text>
              </TouchableOpacity>
            </View>

            {(activeLeads as any[]).length === 0 ? (
              <TouchableOpacity
                onPress={() => router.push('/(app)/leads')}
                style={{ backgroundColor: '#fff', borderRadius: 14, padding: 20, alignItems: 'center', marginBottom: 20, borderWidth: 1, borderColor: '#F1F5F9', borderStyle: 'dashed' }}
              >
                <Text style={{ fontSize: 15, color: '#94A3B8' }}>No active leads — <Text style={{ color: '#0891B2', fontWeight: '700' }}>+ Add one</Text></Text>
              </TouchableOpacity>
            ) : (
              <View style={{ marginBottom: 20 }}>
                {(activeLeads as any[]).map((l: any) => {
                  const cfg = LEAD_STATUS[l.status] ?? LEAD_STATUS.NEW;
                  return (
                    <TouchableOpacity
                      key={l.id}
                      onPress={() => router.push(`/(app)/leads/${l.id}`)}
                      activeOpacity={0.7}
                      style={{ backgroundColor: '#fff', borderRadius: 14, padding: 14, marginBottom: 10, borderWidth: 1, borderColor: '#F1F5F9', flexDirection: 'row', alignItems: 'center' }}
                    >
                      <View style={{ width: 40, height: 40, borderRadius: 20, backgroundColor: '#F5F3FF', alignItems: 'center', justifyContent: 'center', marginRight: 12 }}>
                        <Text style={{ fontSize: 16, fontWeight: '800', color: '#7C3AED' }}>{l.firstName?.[0]?.toUpperCase()}</Text>
                      </View>
                      <View style={{ flex: 1 }}>
                        <Text style={{ fontSize: 15, fontWeight: '700', color: '#0F172A' }}>{l.firstName} {l.lastName !== '—' ? l.lastName : ''}</Text>
                        <Text style={{ fontSize: 13, color: '#64748B', marginTop: 1 }}>{l.phone}</Text>
                      </View>
                      <View style={{ backgroundColor: cfg.bg, borderRadius: 20, paddingHorizontal: 10, paddingVertical: 4 }}>
                        <Text style={{ fontSize: 12, fontWeight: '700', color: cfg.color }}>{cfg.label}</Text>
                      </View>
                    </TouchableOpacity>
                  );
                })}
                <TouchableOpacity
                  onPress={() => router.push('/(app)/leads')}
                  style={{ alignItems: 'center', paddingVertical: 10 }}
                >
                  <Text style={{ fontSize: 14, fontWeight: '600', color: '#0891B2' }}>+ Add New Lead</Text>
                </TouchableOpacity>
              </View>
            )}

            <View style={{ height: 24 }} />
          </View>
        )}
      </ScrollView>

      {/* ── Payment Modal ──────────────────────────────────────────────────── */}
      <Modal visible={payModal} transparent animationType="slide" onRequestClose={closePay}>
        <View style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.4)', justifyContent: 'flex-end' }}>
          {/* Tap outside to dismiss — only on the dark area above the sheet */}
          <TouchableOpacity style={{ flex: 1 }} activeOpacity={1} onPress={closePay} />
          <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
          <View style={{ backgroundColor: '#fff', borderTopLeftRadius: 24, borderTopRightRadius: 24, padding: 24, paddingBottom: 40 }}>
            {/* Handle */}
            <View style={{ width: 40, height: 4, backgroundColor: '#E2E8F0', borderRadius: 2, alignSelf: 'center', marginBottom: 20 }} />

            <Text style={{ fontSize: 18, fontWeight: '800', color: '#1E293B', marginBottom: 2 }}>Record Payment</Text>
            {payInvoice && (
              <Text style={{ fontSize: 14, color: '#64748B', marginBottom: 20 }}>
                {payInvoice.client?.firstName} {payInvoice.client?.lastName} · {payInvoice.invoiceNumber}
              </Text>
            )}

            {/* Amount */}
            <Text style={{ fontSize: 13, fontWeight: '600', color: '#64748B', marginBottom: 6 }}>Amount (Balance: ₱{Number(payInvoice?.balance ?? 0).toLocaleString()})</Text>
            <TextInput
              value={payAmount}
              onChangeText={setPayAmount}
              keyboardType="decimal-pad"
              style={{ borderWidth: 1.5, borderColor: '#E2E8F0', borderRadius: 12, paddingHorizontal: 14, paddingVertical: 13, fontSize: 20, fontWeight: '700', color: '#059669', marginBottom: 16, backgroundColor: '#F8FAFC' }}
              placeholder="0.00"
            />

            {/* Method */}
            <Text style={{ fontSize: 13, fontWeight: '600', color: '#64748B', marginBottom: 8 }}>Payment Method</Text>
            <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8, marginBottom: 16 }}>
              {METHODS.map(m => (
                <TouchableOpacity key={m.id} onPress={() => setPayMethod(m.id)}
                  style={{ paddingHorizontal: 14, paddingVertical: 8, borderRadius: 20, borderWidth: 1.5, borderColor: payMethod === m.id ? '#0891B2' : '#E2E8F0', backgroundColor: payMethod === m.id ? '#ECFEFF' : '#F8FAFC' }}
                >
                  <Text style={{ fontSize: 14, fontWeight: '600', color: payMethod === m.id ? '#0891B2' : '#64748B' }}>{m.label}</Text>
                </TouchableOpacity>
              ))}
            </View>

            {/* Notes */}
            <Text style={{ fontSize: 13, fontWeight: '600', color: '#64748B', marginBottom: 6 }}>Notes (optional)</Text>
            <TextInput
              value={payNote} onChangeText={setPayNote}
              placeholder="Reference number, remarks..."
              placeholderTextColor="#94A3B8"
              style={{ borderWidth: 1, borderColor: '#E2E8F0', borderRadius: 10, paddingHorizontal: 14, paddingVertical: 10, fontSize: 15, color: '#1E293B', marginBottom: 24, backgroundColor: '#F8FAFC' }}
            />

            <SlideToConfirm
              label={`Slide to record ₱${parseFloat(payAmount || '0').toLocaleString()} payment`}
              color="#059669"
              onConfirm={submitPayment}
              disabled={paying || !payAmount || parseFloat(payAmount) <= 0}
            />
          </View>
        </KeyboardAvoidingView>
        </View>
      </Modal>
    </SafeAreaView>
  );
}