import { View, Text, FlatList, TouchableOpacity, TextInput } from 'react-native';
import { useState, useCallback } from 'react';
import { useFocusEffect } from 'expo-router';
import { Plus, Search, X, ChevronRight } from 'lucide-react-native';
import { getDatabase } from '@/lib/database';
import { Territory, dbToTerritory } from '@/lib/territoryHelpers';
import { AddTerritorySheet } from '@/components/territories/AddTerritorySheet';
import { router } from 'expo-router';

export default function TerritoriesScreen() {
  const [territories, setTerritories] = useState<Territory[]>([]);
  const [search, setSearch] = useState('');
  const [showAdd, setShowAdd] = useState(false);

  async function loadTerritories() {
    const db = await getDatabase();
    const rows = await db.getAllAsync<any>('SELECT * FROM territories ORDER BY territory_code ASC');
    setTerritories(rows.map(dbToTerritory));
  }

  useFocusEffect(useCallback(() => { loadTerritories(); }, []));

  const filtered = territories.filter((t) =>
    t.territoryCode.toLowerCase().includes(search.toLowerCase()) ||
    (t.barangay?.toLowerCase().includes(search.toLowerCase()) ?? false) ||
    (t.municipality?.toLowerCase().includes(search.toLowerCase()) ?? false)
  );

  return (
    <View className="flex-1 bg-secondary">
      <View className="bg-primary pt-14 pb-4 px-4">
        <View className="flex-row justify-between items-center mb-3">
          <Text className="text-white text-2xl font-bold">Territories</Text>
          <TouchableOpacity onPress={() => setShowAdd(true)} className="bg-white/20 rounded-full p-2">
            <Plus size={22} color="white" />
          </TouchableOpacity>
        </View>
        <View className="flex-row items-center bg-white/20 rounded-xl px-3 py-2">
          <Search size={16} color="rgba(255,255,255,0.7)" />
          <TextInput
            className="flex-1 text-white ml-2"
            placeholder="Search territories..."
            placeholderTextColor="rgba(255,255,255,0.6)"
            value={search}
            onChangeText={setSearch}
          />
          {search ? <TouchableOpacity onPress={() => setSearch('')}><X size={16} color="rgba(255,255,255,0.7)" /></TouchableOpacity> : null}
        </View>
      </View>

      <FlatList
        data={filtered}
        keyExtractor={(item) => item.id}
        contentContainerStyle={{ paddingHorizontal: 16, paddingBottom: 100, paddingTop: 12, gap: 8 }}
        renderItem={({ item }) => (
          <TouchableOpacity
            onPress={() => router.push({ pathname: '/territory/[id]', params: { id: item.id } })}
            className="bg-white rounded-2xl p-4 flex-row items-center shadow-sm"
          >
            <View className="w-12 h-12 rounded-full bg-primary/10 items-center justify-center mr-3">
              <Text className="text-primary font-bold text-sm">{item.territoryCode}</Text>
            </View>
            <View className="flex-1">
              <Text className="text-charcoal font-semibold">{item.territoryCode}</Text>
              {item.barangay && <Text className="text-gray-500 text-sm">{item.barangay}{item.municipality ? `, ${item.municipality}` : ''}</Text>}
              {item.area && <Text className="text-gray-400 text-xs">Area: {item.area}{item.block ? ` • Block: ${item.block}` : ''}</Text>}
            </View>
            <ChevronRight size={18} color="#9CA3AF" />
          </TouchableOpacity>
        )}
        ListEmptyComponent={() => (
          <View className="items-center justify-center py-20">
            <Text className="text-gray-400 text-lg">{search ? 'No territories found' : 'No territories yet'}</Text>
            {!search && <Text className="text-gray-400 mt-1">Tap + to add your first territory</Text>}
          </View>
        )}
      />

      <AddTerritorySheet visible={showAdd} onClose={() => setShowAdd(false)} onSaved={() => { setShowAdd(false); loadTerritories(); }} />
    </View>
  );
}