territory-log/components/contacts/AddContactSheet.tsx

import { View, Text, Modal, ScrollView, TouchableOpacity, KeyboardAvoidingView, Platform } from 'react-native';
import { useState } from 'react';
import { X } from 'lucide-react-native';
import * as Location from 'expo-location';
import { Input } from '@/components/ui/Input';
import { Button } from '@/components/ui/Button';
import { useUserStore } from '@/store/useUserStore';
import { getDatabase } from '@/lib/database';
import { newContactId } from '@/lib/contactHelpers';

const STATUS_OPTIONS = ['Active', 'Return Visit', 'Bible Study', 'Not Interested', 'Do Not Call'];
const CATEGORY_OPTIONS = ['Adult', 'Teenager', 'Kid'];

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

export function AddContactSheet({ visible, onClose, onSaved }: Props) {
  const user = useUserStore((s) => s.user);
  const [fullName, setFullName] = useState('');
  const [address, setAddress] = useState('');
  const [status, setStatus] = useState('Active');
  const [category, setCategory] = useState('Adult');
  const [notes, setNotes] = useState('');
  const [territoryCode, setTerritoryCode] = useState('');
  const [coords, setCoords] = useState<{ lat: number; lng: number } | null>(null);
  const [loading, setLoading] = useState(false);
  const [errors, setErrors] = useState<Record<string, string>>({});

  function reset() {
    setFullName(''); setAddress(''); setStatus('Active');
    setCategory('Adult'); setNotes(''); setErrors({});
    setTerritoryCode(''); setCoords(null);
  }

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

    setLoading(true);
    try {
      const db = await getDatabase();
      const now = Math.floor(Date.now() / 1000);
      const id = newContactId();
      await db.runAsync(
        `INSERT INTO contacts (id, owner_id, full_name, address, category, status, tags, notes, territory_code, latitude, longitude, household_count, created_at, updated_at)
         VALUES (?, ?, ?, ?, ?, ?, '[]', ?, ?, ?, ?, 1, ?, ?)`,
        [id, user?.id ?? 'unknown', fullName.trim(), address.trim() || null, category, status, notes.trim() || null, territoryCode.trim().toUpperCase() || null, coords?.lat ?? null, coords?.lng ?? null, now, now]
      );
      reset();
      onSaved();
    } catch (e) {
      console.error('Save contact error:', e);
    } 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">
          {/* Header */}
          <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 Contact</Text>
            <View style={{ width: 22 }} />
          </View>

          <ScrollView className="flex-1 px-4 pt-4" keyboardShouldPersistTaps="handled">
            <Input label="Full Name *" placeholder="e.g. Maria Santos" value={fullName} onChangeText={(t) => { setFullName(t); setErrors((e) => ({ ...e, fullName: '' })); }} error={errors.fullName} />
            <Input label="Address" placeholder="e.g. 123 Rizal St, Barangay..." value={address} onChangeText={setAddress} />

            {/* Status */}
            <Text className="text-charcoal font-medium mb-2">Status</Text>
            <View className="flex-row flex-wrap gap-2 mb-4">
              {STATUS_OPTIONS.map((s) => (
                <TouchableOpacity key={s} onPress={() => setStatus(s)} className={`px-3 py-1.5 rounded-full border ${status === s ? 'bg-primary border-primary' : 'bg-white border-gray-200'}`}>
                  <Text className={`text-sm ${status === s ? 'text-white' : 'text-charcoal'}`}>{s}</Text>
                </TouchableOpacity>
              ))}
            </View>

            {/* Category */}
            <Text className="text-charcoal font-medium mb-2">Category</Text>
            <View className="flex-row gap-2 mb-4">
              {CATEGORY_OPTIONS.map((c) => (
                <TouchableOpacity key={c} onPress={() => setCategory(c)} className={`px-3 py-1.5 rounded-full border ${category === c ? 'bg-primary border-primary' : 'bg-white border-gray-200'}`}>
                  <Text className={`text-sm ${category === c ? 'text-white' : 'text-charcoal'}`}>{c}</Text>
                </TouchableOpacity>
              ))}
            </View>

            {/* Territory Code */}
            <Input label="Territory Code" placeholder="e.g. T-01" value={territoryCode} onChangeText={setTerritoryCode} autoCapitalize="characters" />

            {/* GPS Tag */}
            <TouchableOpacity
              onPress={async () => {
                const { status } = await Location.requestForegroundPermissionsAsync();
                if (status !== 'granted') { alert('Location permission denied'); return; }
                const loc = await Location.getCurrentPositionAsync({});
                setCoords({ lat: loc.coords.latitude, lng: loc.coords.longitude });
              }}
              className={`flex-row items-center border rounded-xl px-4 py-3 mb-4 ${coords ? 'border-primary bg-primary/5' : 'border-gray-200 bg-white'}`}
            >
              <Text className="text-lg mr-2">📍</Text>
              <Text className={coords ? 'text-primary font-medium' : 'text-gray-400'}>
                {coords ? `GPS: ${coords.lat.toFixed(5)}, ${coords.lng.toFixed(5)}` : 'Tag GPS Location (optional)'}
              </Text>
            </TouchableOpacity>

            <Input label="Notes" placeholder="Any additional notes..." value={notes} onChangeText={setNotes} multiline numberOfLines={3} />
            <View className="h-8" />
          </ScrollView>

          <View className="px-4 py-4 border-t border-gray-200 bg-white">
            <Button label="Save Contact" onPress={handleSave} loading={loading} />
          </View>
        </View>
      </KeyboardAvoidingView>
    </Modal>
  );
}