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

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 style={s.safe}>
      <View style={s.header}>
        <TouchableOpacity onPress={() => router.back()} style={{ padding: 4 }}>
          <ArrowLeft size={22} color={C.ink} />
        </TouchableOpacity>
        <Text style={s.headerTitle}>{notebookName || 'Carnet'}</Text>
        <TouchableOpacity
          onPress={() => router.push({ pathname: '/note/create', params: { notebookId: id } })}
          style={s.addBtn}
        >
          <Plus size={20} color={C.brand} />
        </TouchableOpacity>
      </View>

      {loading
        ? <View style={s.center}><ActivityIndicator color={C.brand} /></View>
        : <FlatList
            data={notes}
            keyExtractor={(item) => item.id}
            contentContainerStyle={s.list}
            refreshControl={<RefreshControl refreshing={refreshing} onRefresh={() => { setRefreshing(true); load() }} tintColor={C.brand} />}
            renderItem={({ item }) => (
              <TouchableOpacity onPress={() => router.push({ pathname: '/note/[id]', params: { id: item.id } })} style={s.card}>
                <Text style={s.cardTitle} numberOfLines={1}>{item.title || 'Sans titre'}</Text>
                <Text style={s.cardDate}>
                  {new Date(item.updatedAt).toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' })}
                </Text>
              </TouchableOpacity>
            )}
            ListEmptyComponent={<Text style={s.empty}>Carnet vide.</Text>}
          />}
    </SafeAreaView>
  )
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: C.paper },
  header: { flexDirection: 'row', alignItems: 'center', gap: 12, paddingHorizontal: 16, paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: C.border },
  headerTitle: { fontSize: 17, fontWeight: '600', color: C.ink, flex: 1 },
  addBtn: { width: 34, height: 34, borderRadius: 17, backgroundColor: '#f3ece4', alignItems: 'center', justifyContent: 'center' },
  center: { flex: 1, alignItems: 'center', justifyContent: 'center' },
  list: { paddingHorizontal: 20, paddingTop: 16, 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 },
  cardDate: { fontSize: 12, color: C.concrete, marginTop: 4 },
  empty: { textAlign: 'center', color: C.concrete, marginTop: 48 },
})