import { View, Text, Modal, ScrollView, TouchableOpacity, KeyboardAvoidingView, Platform } from 'react-native';
import { useState, useEffect } from 'react';
import { X } from 'lucide-react-native';
import { Input } from '@/components/ui/Input';
import { Button } from '@/components/ui/Button';
import { getDatabase } from '@/lib/database';
import { Territory } from '@/lib/territoryHelpers';

interface Props { territory: Territory; visible: boolean; onClose: () => void; onSaved: () => void; }

export function EditTerritorySheet({ territory, visible, onClose, onSaved }: Props) {
  const [municipality, setMunicipality] = useState(territory.municipality ?? '');
  const [barangay, setBarangay] = useState(territory.barangay ?? '');
  const [area, setArea] = useState(territory.area ?? '');
  const [block, setBlock] = useState(territory.block ?? '');
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setMunicipality(territory.municipality ?? '');
    setBarangay(territory.barangay ?? '');
    setArea(territory.area ?? '');
    setBlock(territory.block ?? '');
  }, [territory]);

  async function handleSave() {
    setLoading(true);
    try {
      const db = await getDatabase();
      const now = Math.floor(Date.now() / 1000);
      await db.runAsync(
        'UPDATE territories SET municipality=?, barangay=?, area=?, block=?, updated_at=? WHERE id=?',
        [municipality.trim() || null, barangay.trim() || null, area.trim() || null, block.trim() || null, now, territory.id]
      );
      onSaved();
    } finally { setLoading(false); }
  }

  return (
    <Modal visible={visible} animationType="slide" presentationStyle="pageSheet" onRequestClose={onClose}>
      <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} className="flex-1">
        <View className="flex-1 bg-secondary">
          <View className="flex-row items-center justify-between px-4 py-4 border-b border-gray-200 bg-white">
            <TouchableOpacity onPress={onClose}><X size={22} color="#2C3E50" /></TouchableOpacity>
            <Text className="text-charcoal font-semibold text-lg">Edit Territory</Text>
            <View style={{ width: 22 }} />
          </View>
          <ScrollView className="flex-1 px-4 pt-4" keyboardShouldPersistTaps="handled">
            <View className="mb-4 bg-gray-100 rounded-xl px-4 py-3">
              <Text className="text-gray-500 text-sm">Territory Code</Text>
              <Text className="text-charcoal font-bold text-lg">{territory.territoryCode}</Text>
            </View>
            <Input label="Municipality" value={municipality} onChangeText={setMunicipality} />
            <Input label="Barangay" value={barangay} onChangeText={setBarangay} />
            <Input label="Area" value={area} onChangeText={setArea} />
            <Input label="Block" value={block} onChangeText={setBlock} />
          </ScrollView>
          <View className="px-4 py-4 border-t border-gray-200 bg-white">
            <Button label="Save Changes" onPress={handleSave} loading={loading} />
          </View>
        </View>
      </KeyboardAvoidingView>
    </Modal>
  );
}