import React, { useEffect, useState, useCallback } from 'react';
import {
  View, Text, StyleSheet, FlatList, RefreshControl,
  ActivityIndicator, Alert, TextInput, Modal,
} 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, Shadow } from '@/constants/theme';

export default function ReservationsScreen() {
  const { user } = useAuth();
  const [reservations, setReservations] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [refreshing, setRefreshing] = useState(false);
  const [leaveModal, setLeaveModal] = useState<{ visible: boolean; id: number | null }>({ visible: false, id: null });
  const [leaveReason, setLeaveReason] = useState('');
  const [submitting, setSubmitting] = useState(false);

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

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

  async function requestLeave() {
    if (!leaveReason.trim()) {
      Alert.alert('Required', 'Please provide a reason for leaving.');
      return;
    }
    setSubmitting(true);
    try {
      await ReservationAPI.updateStatus(leaveModal.id!, 'leave_requested', { leave_reason: leaveReason.trim() });
      setLeaveModal({ visible: false, id: null });
      setLeaveReason('');
      load();
    } catch (err: any) {
      Alert.alert('Error', err.message);
    } finally {
      setSubmitting(false);
    }
  }

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

  return (
    <SafeAreaView style={styles.safe} edges={['top']}>
      <ScreenHeader title="My Reservations" subtitle={`${reservations.length} total`} showMenu />
      <FlatList
        data={reservations}
        keyExtractor={item => String(item.id)}
        contentContainerStyle={styles.content}
        refreshControl={<RefreshControl refreshing={refreshing} onRefresh={() => { setRefreshing(true); load(); }} />}
        ListEmptyComponent={
          <EmptyState icon="calendar-outline" title="No reservations yet" message="Browse boarding houses and send a reservation request." />
        }
        renderItem={({ item }) => (
          <Card style={styles.card}>
            <View style={styles.cardHeader}>
              <View style={styles.iconBox}>
                <Ionicons name="home" size={24} color={Colors.primary} />
              </View>
              <View style={styles.cardInfo}>
                <Text style={styles.bhName}>{item.boarding_house_name}</Text>
                <Text style={styles.bhAddress}>{item.address}</Text>
              </View>
              <Badge
                label={item.status === 'leave_requested' ? 'Leaving' : item.status}
                variant={item.status === 'leave_requested' ? 'pending' : item.status as any}
              />
            </View>
            <View style={styles.divider} />
            <View style={styles.cardDetails}>
              <View style={styles.detailItem}>
                <Ionicons name="calendar-outline" size={14} color={Colors.textSecondary} />
                <Text style={styles.detailText}>Requested: {item.created_at?.split('T')[0]}</Text>
              </View>
              <View style={styles.detailItem}>
                <Ionicons name="cash-outline" size={14} color={Colors.textSecondary} />
                <Text style={styles.detailText}>{'\u20B1'}{parseFloat(item.rent_price).toLocaleString()}/month</Text>
              </View>
            </View>
            {item.status === 'rejected' && item.rejection_reason ? (
              <View style={styles.noteBox}>
                <Ionicons name="close-circle-outline" size={14} color={Colors.danger} />
                <Text style={[styles.noteText, { color: Colors.danger }]}>{item.rejection_reason}</Text>
              </View>
            ) : null}
            {item.status === 'leave_requested' && item.leave_reason ? (
              <View style={[styles.noteBox, { backgroundColor: '#FEF3C7' }]}>
                <Ionicons name="time-outline" size={14} color={Colors.warning} />
                <Text style={[styles.noteText, { color: Colors.warning }]}>Leave pending: {item.leave_reason}</Text>
              </View>
            ) : null}
            {item.status === 'approved' ? (
              <Button
                title="Request to Leave"
                variant="outline"
                size="sm"
                onPress={() => { setLeaveModal({ visible: true, id: item.id }); setLeaveReason(''); }}
                style={{ marginTop: Spacing.sm }}
              />
            ) : null}
          </Card>
        )}
      />
      <Modal visible={leaveModal.visible} transparent animationType="fade">
        <View style={styles.modalOverlay}>
          <View style={styles.modalBox}>
            <Text style={styles.modalTitle}>Request to Leave</Text>
            <Text style={styles.modalSubtitle}>Your landlord will review and approve or reject your request.</Text>
            <TextInput
              style={styles.modalInput}
              placeholder="Reason for leaving..."
              placeholderTextColor={Colors.textLight}
              value={leaveReason}
              onChangeText={setLeaveReason}
              multiline
              numberOfLines={3}
            />
            <View style={styles.modalActions}>
              <Button title="Cancel" variant="outline" size="sm" onPress={() => setLeaveModal({ visible: false, id: null })} style={{ flex: 1 }} />
              <Button title="Submit" size="sm" loading={submitting} onPress={requestLeave} style={{ flex: 1 }} />
            </View>
          </View>
        </View>
      </Modal>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safe: { flex: 1, backgroundColor: Colors.background },
  center: { flex: 1, alignItems: 'center', justifyContent: 'center' },
  content: { padding: Spacing.md, gap: Spacing.sm, paddingBottom: Spacing.xl },
  card: { padding: Spacing.md },
  cardHeader: { flexDirection: 'row', alignItems: 'center', gap: Spacing.md },
  iconBox: { width: 48, height: 48, borderRadius: Radius.md, backgroundColor: Colors.borderLight, alignItems: 'center', justifyContent: 'center' },
  cardInfo: { flex: 1 },
  bhName: { fontSize: FontSize.md, fontWeight: '700', color: Colors.text },
  bhAddress: { fontSize: FontSize.sm, color: Colors.textSecondary, marginTop: 2 },
  divider: { height: 1, backgroundColor: Colors.border, marginVertical: Spacing.sm },
  cardDetails: { flexDirection: 'row', gap: Spacing.lg },
  detailItem: { flexDirection: 'row', alignItems: 'center', gap: 4 },
  detailText: { fontSize: FontSize.sm, color: Colors.textSecondary },
  noteBox: { flexDirection: 'row', alignItems: 'flex-start', gap: 6, marginTop: Spacing.sm, backgroundColor: '#FEE2E2', borderRadius: Radius.sm, padding: Spacing.sm },
  noteText: { fontSize: FontSize.sm, flex: 1 },
  modalOverlay: { flex: 1, backgroundColor: 'rgba(0,0,0,0.5)', justifyContent: 'center', padding: Spacing.lg },
  modalBox: { backgroundColor: Colors.surface, borderRadius: Radius.xl, padding: Spacing.lg, gap: Spacing.md, ...Shadow.lg },
  modalTitle: { fontSize: FontSize.lg, fontWeight: '700', color: Colors.text },
  modalSubtitle: { fontSize: FontSize.sm, color: Colors.textSecondary },
  modalInput: { borderWidth: 1.5, borderColor: Colors.border, borderRadius: Radius.md, padding: Spacing.md, fontSize: FontSize.md, color: Colors.text, minHeight: 80, textAlignVertical: 'top' },
  modalActions: { flexDirection: 'row', gap: Spacing.sm },
});