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

const FILTERS = ['all', 'pending', 'approved', 'leave_requested', 'rejected', 'left'] as const;
type Filter = typeof FILTERS[number];

export default function TenantsScreen() {
  const { user } = useAuth();
  const [reservations, setReservations] = 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 ReservationAPI.getByLandlord(user!.id);
      setReservations(d.data ?? []);
    } catch (_) {}
    setLoading(false);
    setRefreshing(false);
  }, [user]);

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

  async function handleAction(id: number, status: 'approved' | 'rejected' | 'left', extra?: object) {
    try {
      await ReservationAPI.updateStatus(id, status, extra);
      load();
    } catch (err: any) {
      Alert.alert('Error', err.message);
    }
  }

  const filtered = filter === 'all' ? reservations : reservations.filter(r => r.status === filter);

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

  return (
    <SafeAreaView style={styles.safe} edges={['top']}>
      <ScreenHeader title="Tenants" subtitle={`${reservations.length} total requests`} showMenu />

      {/* Filter */}
      <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="people-outline" title="No tenants found" />}
        renderItem={({ item }) => (
          <Card style={styles.card}>
            <View style={styles.cardHeader}>
              <View style={styles.avatar}>
                <Text style={styles.avatarText}>{item.tenant_name?.charAt(0)}</Text>
              </View>
              <View style={styles.info}>
                <Text style={styles.tenantName}>{item.tenant_name}</Text>
                <Text style={styles.tenantEmail}>{item.tenant_email}</Text>
                <Text style={styles.bhName}>{item.boarding_house_name}</Text>
              </View>
              <Badge label={item.status} variant={item.status as any} />
            </View>
            <View style={styles.meta}>
              <View style={styles.metaItem}>
                <Ionicons name="calendar-outline" size={13} color={Colors.textSecondary} />
                <Text style={styles.metaText}>{item.created_at?.split('T')[0]}</Text>
              </View>
              <View style={styles.metaItem}>
                <Ionicons name="cash-outline" size={13} color={Colors.textSecondary} />
                <Text style={styles.metaText}>₱{parseFloat(item.rent_price).toLocaleString()}/mo</Text>
              </View>
            </View>
            {item.status === 'pending' && (
              <View style={styles.actions}>
                <Button title="Reject" variant="outline" size="sm" onPress={() => handleAction(item.id, 'rejected')} style={styles.actionBtn} />
                <Button title="Approve" size="sm" onPress={() => handleAction(item.id, 'approved')} style={styles.actionBtn} />
              </View>
            )}
            {item.status === 'leave_requested' && (
              <View>
                {item.leave_reason && (
                  <View style={styles.leaveNote}>
                    <Ionicons name="exit-outline" size={14} color={Colors.warning} />
                    <Text style={styles.leaveText}>Reason: {item.leave_reason}</Text>
                  </View>
                )}
                <View style={styles.actions}>
                  <Button title="Reject Leave" variant="outline" size="sm" onPress={() => handleAction(item.id, 'approved')} style={styles.actionBtn} />
                  <Button title="Approve Leave" size="sm" onPress={() => Alert.alert('Confirm', "Approve this tenant's leave request?", [
                    { text: 'Cancel', style: 'cancel' },
                    { text: 'Approve', style: 'destructive', onPress: () => handleAction(item.id, 'left') },
                  ])} style={{ ...styles.actionBtn, backgroundColor: Colors.warning }} />
                </View>
              </View>
            )}
          </Card>
        )}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safe: { flex: 1, backgroundColor: Colors.background },
  center: { flex: 1, alignItems: 'center', justifyContent: 'center' },
  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.xs, color: Colors.textSecondary, fontWeight: '600' },
  filterTextActive: { color: Colors.primary },
  content: { padding: Spacing.md, gap: Spacing.sm, paddingBottom: Spacing.xl },
  card: { padding: Spacing.md, gap: Spacing.sm },
  cardHeader: { flexDirection: 'row', alignItems: 'center', gap: Spacing.md },
  avatar: { width: 44, height: 44, borderRadius: 22, backgroundColor: Colors.primary, alignItems: 'center', justifyContent: 'center' },
  avatarText: { fontSize: FontSize.lg, fontWeight: '700', color: Colors.textInverse },
  info: { flex: 1 },
  tenantName: { fontSize: FontSize.md, fontWeight: '700', color: Colors.text },
  tenantEmail: { fontSize: FontSize.xs, color: Colors.textSecondary },
  bhName: { fontSize: FontSize.sm, color: Colors.primary, fontWeight: '600', marginTop: 2 },
  meta: { flexDirection: 'row', gap: Spacing.lg },
  metaItem: { flexDirection: 'row', alignItems: 'center', gap: 4 },
  metaText: { fontSize: FontSize.xs, color: Colors.textSecondary },
  actions: { flexDirection: 'row', gap: Spacing.sm, marginTop: Spacing.xs },
  actionBtn: { flex: 1 },
  leaveNote: { flexDirection: 'row', alignItems: 'flex-start', gap: 6, backgroundColor: '#FEF3C7', borderRadius: Radius.sm, padding: Spacing.sm, marginBottom: Spacing.xs },
  leaveText: { fontSize: FontSize.sm, color: Colors.warning, flex: 1 },
});