import { useEffect, useState } from 'react'
import {
  View, Text, FlatList, TouchableOpacity,
  ActivityIndicator, RefreshControl,
} from 'react-native'
import { SafeAreaView } from 'react-native-safe-area-context'
import { useRouter } from 'expo-router'
import { ChevronRight } from 'lucide-react-native'
import { apiFetch } from '@/lib/api'
import { ENDPOINTS } from '@/lib/config'

interface Notebook {
  id: string
  name: string
  icon: string | null
  _count: { notes: number }
}

export default function NotebooksScreen() {
  const [notebooks, setNotebooks] = useState<Notebook[]>([])
  const [loading, setLoading] = useState(true)
  const [refreshing, setRefreshing] = useState(false)
  const router = useRouter()

  const load = async () => {
    try {
      const res = await apiFetch(ENDPOINTS.notebooks)
      if (res.ok) {
        const data = await res.json()
        setNotebooks(data.notebooks ?? [])
      }
    } finally {
      setLoading(false)
      setRefreshing(false)
    }
  }

  useEffect(() => { load() }, [])

  if (loading) {
    return (
      <SafeAreaView className="flex-1 bg-paper items-center justify-center">
        <ActivityIndicator color="#A47148" />
      </SafeAreaView>
    )
  }

  return (
    <SafeAreaView className="flex-1 bg-paper">
      <View className="px-5 pt-4 pb-2">
        <Text className="text-2xl font-serif italic text-ink">Carnets</Text>
      </View>

      <FlatList
        data={notebooks}
        keyExtractor={(item) => item.id}
        contentContainerClassName="px-5 pb-8"
        refreshControl={<RefreshControl refreshing={refreshing} onRefresh={() => { setRefreshing(true); load() }} tintColor="#A47148" />}
        renderItem={({ item }) => (
          <TouchableOpacity
            onPress={() => router.push(`/notebook/${item.id}`)}
            className="flex-row items-center bg-white border border-border rounded-2xl p-4 mb-2.5 active:opacity-70"
          >
            <Text className="text-2xl mr-3">{item.icon ?? '📓'}</Text>
            <View className="flex-1">
              <Text className="text-[15px] font-semibold text-ink">{item.name}</Text>
              <Text className="text-[12px] text-concrete">{item._count?.notes ?? 0} notes</Text>
            </View>
            <ChevronRight size={16} color="#8A8A82" />
          </TouchableOpacity>
        )}
        ListEmptyComponent={
          <Text className="text-concrete text-center mt-12">Aucun carnet.</Text>
        }
      />
    </SafeAreaView>
  )
}