Momento/memento-mobile/app/(tabs)/notebooks.tsx

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 { useRouter } from 'expo-router'
import { ChevronRight, BookOpen, Folder } from 'lucide-react-native'
import { apiFetch } from '@/lib/api'
import { ENDPOINTS } from '@/lib/config'
import { C } from '../_layout'

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

// icônes Lucide stockées en string → afficher composant, sinon emoji
const LUCIDE_ICONS = new Set(['folder','book','archive','bookmark','file','note','inbox'])

function NotebookIcon({ icon, color }: { icon: string | null, color: string | null }) {
  const tint = color || C.brand
  if (!icon || LUCIDE_ICONS.has(icon.toLowerCase())) {
    return <Folder size={18} color={tint} />
  }
  // emoji ou autre caractère unicode
  return <Text style={{ fontSize: 18, lineHeight: 22 }}>{icon}</Text>
}

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 style={[s.safe, { alignItems: 'center', justifyContent: 'center' }]}>
        <ActivityIndicator color={C.brand} />
      </SafeAreaView>
    )
  }

  return (
    <SafeAreaView style={s.safe}>
      <View style={s.header}>
        <BookOpen size={18} color={C.brand} style={{ marginRight: 8 }} />
        <Text style={s.title}>Carnets</Text>
        <Text style={s.count}>{notebooks.length}</Text>
      </View>
      <FlatList
        data={notebooks}
        keyExtractor={(item) => item.id}
        contentContainerStyle={s.list}
        refreshControl={<RefreshControl refreshing={refreshing} onRefresh={() => { setRefreshing(true); load() }} tintColor={C.brand} />}
        renderItem={({ item }) => (
          <TouchableOpacity onPress={() => router.push(`/notebook/${item.id}`)} style={s.card} activeOpacity={0.7}>
            <View style={[s.iconWrap, { backgroundColor: (item.color || C.brand) + '18' }]}>
              <NotebookIcon icon={item.icon} color={item.color} />
            </View>
            <View style={{ flex: 1 }}>
              <Text style={s.cardTitle} numberOfLines={1}>{item.name}</Text>
              <Text style={s.cardMeta}>{item._count?.notes ?? 0} note{(item._count?.notes ?? 0) !== 1 ? 's' : ''}</Text>
            </View>
            <ChevronRight size={14} color={C.border} />
          </TouchableOpacity>
        )}
        ListEmptyComponent={
          <View style={s.emptyWrap}>
            <BookOpen size={32} color={C.border} />
            <Text style={s.empty}>Aucun carnet</Text>
          </View>
        }
      />
    </SafeAreaView>
  )
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: C.paper },
  header: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 20, paddingTop: 16, paddingBottom: 12, borderBottomWidth: 1, borderBottomColor: C.border },
  title: { fontSize: 20, fontWeight: '700', color: C.ink, flex: 1 },
  count: { fontSize: 12, color: C.concrete, backgroundColor: C.border, paddingHorizontal: 8, paddingVertical: 2, borderRadius: 10, overflow: 'hidden' },
  list: { padding: 12 },
  card: { flexDirection: 'row', alignItems: 'center', gap: 12, backgroundColor: C.white, borderWidth: 1, borderColor: C.border, borderRadius: 14, padding: 14, marginBottom: 8 },
  iconWrap: { width: 38, height: 38, borderRadius: 10, alignItems: 'center', justifyContent: 'center' },
  cardTitle: { fontSize: 14, fontWeight: '600', color: C.ink, marginBottom: 2 },
  cardMeta: { fontSize: 12, color: C.concrete },
  emptyWrap: { alignItems: 'center', marginTop: 60, gap: 12 },
  empty: { color: C.concrete, fontSize: 14 },
})