import { View, Text, Modal, ScrollView, TouchableOpacity, KeyboardAvoidingView, Platform } from 'react-native';
import { useState } 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 { newTerritoryId } from '@/lib/territoryHelpers';

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

export function AddTerritorySheet({ visible, onClose, onSaved }: Props) {
  const [code, setCode] = useState('');
  const [municipality, setMunicipality] = useState('');
  const [barangay, setBarangay] = useState('');
  const [area, setArea] = useState('');
  const [block, setBlock] = useState('');
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [loading, setLoading] = useState(false);

  function reset() { setCode(''); setMunicipality(''); setBarangay(''); setArea(''); setBlock(''); setErrors({}); }

  async function handleSave() {
    const errs: Record<string, string> = {};
    if (!code.trim()) errs.code = 'Territory code is required';
    if (Object.keys(errs).length) { setErrors(errs); return; }

    setLoading(true);
    try {
      const db = await getDatabase();
      const now = Math.floor(Date.now() / 1000);
      await db.runAsync(
        'INSERT INTO territories (id, territory_code, municipality, barangay, area, block, created_at, updated_at) VALUES (?, ?, ?, ?, ?, ?, ?, ?)',
        [newTerritoryId(), code.trim().toUpperCase(), municipality.trim() || null, barangay.trim() || null, area.trim() || null, block.trim() || null, now, now]
      );
      reset();
      onSaved();
    } catch (e: any) {
      if (e?.message?.includes('UNIQUE')) setErrors({ code: 'Territory code already exists' });
    } finally {
      setLoading(false);
    }
  }

  return (
    <Modal visible={visible} animationType="slide" presentationStyle="pageSheet" onRequestClose={() => { reset(); 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={() => { reset(); onClose(); }}><X size={22} color="#2C3E50" /></TouchableOpacity>
            <Text className="text-charcoal font-semibold text-lg">New Territory</Text>
            <View style={{ width: 22 }} />
          </View>
          <ScrollView className="flex-1 px-4 pt-4" keyboardShouldPersistTaps="handled">
            <Input label="Territory Code *" placeholder="e.g. T-01, A-12" value={code} onChangeText={(t) => { setCode(t); setErrors((e) => ({ ...e, code: '' })); }} error={errors.code} autoCapitalize="characters" />
            <Input label="Municipality" placeholder="e.g. San Pedro" value={municipality} onChangeText={setMunicipality} />
            <Input label="Barangay" placeholder="e.g. Barangay 1" value={barangay} onChangeText={setBarangay} />
            <Input label="Area" placeholder="e.g. Zone A" value={area} onChangeText={setArea} />
            <Input label="Block" placeholder="e.g. Block 3" value={block} onChangeText={setBlock} />
            <View className="h-8" />
          </ScrollView>
          <View className="px-4 py-4 border-t border-gray-200 bg-white">
            <Button label="Save Territory" onPress={handleSave} loading={loading} />
          </View>
        </View>
      </KeyboardAvoidingView>
    </Modal>
  );
}