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

interface Note {
  id: string
  title: string
  updatedAt: string
}

export default function NotebookScreen() {
  const { id } = useLocalSearchParams<{ id: string }>()
  const [notes, setNotes] = useState<Note[]>([])
  const [notebookName, setNotebookName] = useState('')
  const [loading, setLoading] = useState(true)
  const [refreshing, setRefreshing] = useState(false)
  const router = useRouter()

  const load = async () => {
    try {
      const res = await apiFetch(ENDPOINTS.notes(id))
      if (res.ok) {
        const data = await res.json()
        setNotes(data.notes ?? [])
        setNotebookName(data.notebookName ?? '')
      }
    } finally {
      setLoading(false)
      setRefreshing(false)
    }
  }

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

  return (
    <SafeAreaView className="flex-1 bg-paper">
      <View className="flex-row items-center gap-3 px-4 py-3 border-b border-border">
        <TouchableOpacity onPress={() => router.back()} className="p-1">
          <ArrowLeft size={22} color="#1A1A18" />
        </TouchableOpacity>
        <Text className="text-[17px] font-semibold text-ink flex-1">{notebookName || 'Carnet'}</Text>
      </View>

      {loading ? (
        <View className="flex-1 items-center justify-center">
          <ActivityIndicator color="#A47148" />
        </View>
      ) : (
        <FlatList
          data={notes}
          keyExtractor={(item) => item.id}
          contentContainerClassName="px-5 pt-4 pb-8"
          refreshControl={<RefreshControl refreshing={refreshing} onRefresh={() => { setRefreshing(true); load() }} tintColor="#A47148" />}
          renderItem={({ item }) => (
            <TouchableOpacity
              onPress={() => router.push(`/note/${item.id}`)}
              className="bg-white border border-border rounded-2xl p-4 mb-2.5 active:opacity-70"
            >
              <Text className="text-[15px] font-semibold text-ink" numberOfLines={1}>
                {item.title || 'Sans titre'}
              </Text>
              <Text className="text-[12px] text-concrete mt-0.5">
                {new Date(item.updatedAt).toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' })}
              </Text>
            </TouchableOpacity>
          )}
          ListEmptyComponent={<Text className="text-concrete text-center mt-12">Carnet vide.</Text>}
        />
      )}
    </SafeAreaView>
  )
}