import React, { useEffect, useState, useCallback } from 'react';
import { View, Text, StyleSheet, FlatList, RefreshControl, ActivityIndicator, TouchableOpacity } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
import { useAuth } from '@/context/AuthContext';
import { PaymentAPI } from '@/services/api';
import { Card } from '@/components/ui/Card';
import { Badge } from '@/components/ui/Badge';
import { EmptyState } from '@/components/ui/EmptyState';
import { ScreenHeader } from '@/components/ui/ScreenHeader';
import { Colors, FontSize, Spacing, Radius } from '@/constants/theme';

const FILTERS = ['all', 'unpaid', 'paid', 'overdue'] as const;
type Filter = typeof FILTERS[number];

const typeIcons: Record<string, any> = {
  rent: 'home-outline',
  electricity: 'flash-outline',
  water: 'water-outline',
};

export default function PaymentsScreen() {
  const { user } = useAuth();
  const [payments, setPayments] = useState<any[]>([]);
  const [filter, setFilter] = useState<Filter>('all');
  const [loading, setLoading] = useState(true);
  const [refreshing, setRefreshing] = useState(false);

  const load = useCallback(async () => {
    try {
      const d = await PaymentAPI.getByTenant(user!.id);
      setPayments(d.data ?? []);
    } catch (_) {}
    setLoading(false);
    setRefreshing(false);
  }, [user]);

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

  const filtered = filter === 'all' ? payments : payments.filter(p => p.status === filter);
  const totalDue = payments.filter(p => p.status !== 'paid').reduce((s: number, p: any) => s + parseFloat(p.amount || 0), 0);

  if (loading) return <View style={styles.center}><ActivityIndicator color={Colors.primary} size="large" /></View>;

  return (
    <SafeAreaView style={styles.safe} edges={['top']}>
      <ScreenHeader title="Payments" subtitle="Track your monthly dues" showMenu />

      {/* Summary */}
      <View style={styles.summary}>
        <View style={styles.summaryItem}>
          <Text style={styles.summaryValue}>₱{totalDue.toLocaleString()}</Text>
          <Text style={styles.summaryLabel}>Total Outstanding</Text>
        </View>
        <View style={styles.summaryDivider} />
        <View style={styles.summaryItem}>
          <Text style={[styles.summaryValue, { color: Colors.success }]}>{payments.filter(p => p.status === 'paid').length}</Text>
          <Text style={styles.summaryLabel}>Paid</Text>
        </View>
        <View style={styles.summaryDivider} />
        <View style={styles.summaryItem}>
          <Text style={[styles.summaryValue, { color: Colors.danger }]}>{payments.filter(p => p.status === 'overdue').length}</Text>
          <Text style={styles.summaryLabel}>Overdue</Text>
        </View>
      </View>

      {/* Filter Tabs */}
      <View style={styles.filterRow}>
        {FILTERS.map(f => (
          <TouchableOpacity key={f} onPress={() => setFilter(f)} style={[styles.filterBtn, filter === f && styles.filterBtnActive]}>
            <Text style={[styles.filterText, filter === f && styles.filterTextActive]}>{f.charAt(0).toUpperCase() + f.slice(1)}</Text>
          </TouchableOpacity>
        ))}
      </View>

      <FlatList
        data={filtered}
        keyExtractor={item => String(item.id)}
        contentContainerStyle={styles.content}
        refreshControl={<RefreshControl refreshing={refreshing} onRefresh={() => { setRefreshing(true); load(); }} />}
        ListEmptyComponent={<EmptyState icon="card-outline" title="No payments found" />}
        renderItem={({ item }) => (
          <Card style={styles.card}>
            <View style={styles.cardRow}>
              <View style={styles.iconBox}>
                <Ionicons name={typeIcons[item.type] ?? 'cash-outline'} size={22} color={Colors.primary} />
              </View>
              <View style={styles.cardInfo}>
                <Text style={styles.paymentType}>{item.type?.charAt(0).toUpperCase() + item.type?.slice(1)}</Text>
                <Text style={styles.bhName}>{item.boarding_house_name}</Text>
                <Text style={styles.dueDate}>Due: {item.due_date}</Text>
              </View>
              <View style={styles.cardRight}>
                <Text style={styles.amount}>₱{parseFloat(item.amount).toLocaleString()}</Text>
                <Badge label={item.status} variant={item.status as any} />
              </View>
            </View>
            {item.paid_at && (
              <Text style={styles.paidAt}>Paid on {item.paid_at?.split('T')[0]}</Text>
            )}
          </Card>
        )}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safe: { flex: 1, backgroundColor: Colors.background },
  center: { flex: 1, alignItems: 'center', justifyContent: 'center' },
  summary: { flexDirection: 'row', backgroundColor: Colors.primary, padding: Spacing.md },
  summaryItem: { flex: 1, alignItems: 'center' },
  summaryValue: { fontSize: FontSize.xl, fontWeight: '800', color: Colors.textInverse },
  summaryLabel: { fontSize: FontSize.xs, color: 'rgba(255,255,255,0.75)', marginTop: 2 },
  summaryDivider: { width: 1, backgroundColor: 'rgba(255,255,255,0.2)' },
  filterRow: { flexDirection: 'row', backgroundColor: Colors.surface, borderBottomWidth: 1, borderBottomColor: Colors.border },
  filterBtn: { flex: 1, paddingVertical: Spacing.sm, alignItems: 'center' },
  filterBtnActive: { borderBottomWidth: 2, borderBottomColor: Colors.primary },
  filterText: { fontSize: FontSize.sm, color: Colors.textSecondary, fontWeight: '600' },
  filterTextActive: { color: Colors.primary },
  content: { padding: Spacing.md, gap: Spacing.sm, paddingBottom: Spacing.xl },
  card: { padding: Spacing.md },
  cardRow: { flexDirection: 'row', alignItems: 'center', gap: Spacing.md },
  iconBox: { width: 44, height: 44, borderRadius: Radius.md, backgroundColor: Colors.borderLight, alignItems: 'center', justifyContent: 'center' },
  cardInfo: { flex: 1 },
  paymentType: { fontSize: FontSize.md, fontWeight: '700', color: Colors.text },
  bhName: { fontSize: FontSize.sm, color: Colors.textSecondary },
  dueDate: { fontSize: FontSize.xs, color: Colors.textLight, marginTop: 2 },
  cardRight: { alignItems: 'flex-end', gap: 4 },
  amount: { fontSize: FontSize.lg, fontWeight: '700', color: Colors.text },
  paidAt: { fontSize: FontSize.xs, color: Colors.success, marginTop: Spacing.sm },
});