import { useState } from 'react'
import {
  View, Text, TextInput, FlatList,
  TouchableOpacity, ActivityIndicator, StyleSheet,
} from 'react-native'
import { SafeAreaView } from 'react-native-safe-area-context'
import { Search as SearchIcon, X } from 'lucide-react-native'
import { useRouter } from 'expo-router'
import { apiFetch } from '@/lib/api'
import { ENDPOINTS } from '@/lib/config'
import { C } from '../_layout'

interface SearchResult {
  id: string
  title: string
  snippet: string
  notebookName?: string
  score?: number
}

export default function SearchScreen() {
  const [query, setQuery] = useState('')
  const [results, setResults] = useState<SearchResult[]>([])
  const [loading, setLoading] = useState(false)
  const [searched, setSearched] = useState(false)
  const router = useRouter()

  const handleSearch = async () => {
    if (!query.trim()) return
    setLoading(true)
    setSearched(true)
    try {
      const res = await apiFetch(`${ENDPOINTS.search}?q=${encodeURIComponent(query)}`)
      if (res.ok) {
        const data = await res.json()
        setResults(data.results ?? [])
      }
    } finally {
      setLoading(false)
    }
  }

  return (
    <SafeAreaView style={s.safe}>
      <View style={s.top}>
        <Text style={s.title}>Recherche</Text>
        <View style={s.inputRow}>
          <SearchIcon size={16} color={C.concrete} />
          <TextInput
            value={query} onChangeText={setQuery}
            placeholder="Chercher dans vos notes…"
            style={s.input} placeholderTextColor={C.concrete}
            returnKeyType="search" onSubmitEditing={handleSearch}
          />
          {query.length > 0 && (
            <TouchableOpacity onPress={() => { setQuery(''); setResults([]); setSearched(false) }}>
              <X size={14} color={C.concrete} />
            </TouchableOpacity>
          )}
        </View>
      </View>

      {loading
        ? <View style={s.center}><ActivityIndicator color={C.brand} /></View>
        : <FlatList
            data={results}
            keyExtractor={(item) => item.id}
            contentContainerStyle={s.list}
            renderItem={({ item }) => (
              <TouchableOpacity onPress={() => router.push(`/note/${item.id}`)} style={s.card}>
                <Text style={s.cardTitle} numberOfLines={1}>{item.title || 'Sans titre'}</Text>
                {item.snippet && <Text style={s.snippet} numberOfLines={2}>{item.snippet}</Text>}
                {item.notebookName && <Text style={s.nb}>{item.notebookName}</Text>}
              </TouchableOpacity>
            )}
            ListEmptyComponent={
              <Text style={s.empty}>
                {searched ? `Aucun résultat pour "${query}"` : 'Tapez votre recherche puis appuyez sur Entrée'}
              </Text>
            }
          />}
    </SafeAreaView>
  )
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: C.paper },
  top: { paddingHorizontal: 20, paddingTop: 16, paddingBottom: 8 },
  title: { fontSize: 22, fontStyle: 'italic', fontWeight: '700', color: C.ink, marginBottom: 16 },
  inputRow: { flexDirection: 'row', alignItems: 'center', backgroundColor: C.white, borderWidth: 1, borderColor: C.border, borderRadius: 12, paddingHorizontal: 12, paddingVertical: 10, gap: 8 },
  input: { flex: 1, fontSize: 15, color: C.ink },
  center: { flex: 1, alignItems: 'center', justifyContent: 'center' },
  list: { paddingHorizontal: 20, paddingTop: 12, paddingBottom: 32 },
  card: { backgroundColor: C.white, borderWidth: 1, borderColor: C.border, borderRadius: 16, padding: 16, marginBottom: 10 },
  cardTitle: { fontSize: 15, fontWeight: '600', color: C.ink },
  snippet: { fontSize: 12, color: C.concrete, marginTop: 4 },
  nb: { fontSize: 11, color: C.concrete, marginTop: 4, opacity: 0.7 },
  empty: { textAlign: 'center', color: C.concrete, marginTop: 48, fontSize: 13 },
})