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

import { useEffect, useState } from 'react'
import {
  View, Text, ScrollView, TouchableOpacity,
  ActivityIndicator, RefreshControl, StyleSheet,
} from 'react-native'
import { SafeAreaView } from 'react-native-safe-area-context'
import { useRouter } from 'expo-router'
import { CalendarDays, Search, BookOpen, Clock, ChevronRight } from 'lucide-react-native'
import { apiFetch } from '@/lib/api'
import { ENDPOINTS } from '@/lib/config'
import { useAuthStore } from '@/lib/store'
import { C } from '@/lib/theme'

interface Note {
  id: string
  title: string
  updatedAt: string
  notebookName?: string
  color?: string
}

export default function HomeScreen() {
  const user = useAuthStore((s) => s.user)
  const [recentNotes, setRecentNotes] = useState<Note[]>([])
  const [loading, setLoading] = useState(true)
  const [refreshing, setRefreshing] = useState(false)
  const router = useRouter()

  const load = async () => {
    try {
      const res = await apiFetch(ENDPOINTS.notes())
      if (res.ok) {
        const data = await res.json()
        setRecentNotes((data.notes ?? []).slice(0, 12))
      }
    } finally {
      setLoading(false)
      setRefreshing(false)
    }
  }

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

  const handleDailyNote = async () => {
    const res = await apiFetch(ENDPOINTS.dailyNote)
    if (res.ok) {
      const data = await res.json()
      router.push({ pathname: '/note/[id]', params: { id: data.id } })
    }
  }

  const now = new Date()
  const hour = now.getHours()
  const greeting = hour < 12 ? 'Bonjour' : hour < 18 ? 'Bon après-midi' : 'Bonsoir'
  const firstName = user?.name?.split(' ')[0] ?? ''

  return (
    <SafeAreaView style={s.safe}>
      <ScrollView
        showsVerticalScrollIndicator={false}
        refreshControl={<RefreshControl refreshing={refreshing} onRefresh={() => { setRefreshing(true); load() }} tintColor={C.brand} />}
      >
        {/* Header */}
        <View style={s.header}>
          <View>
            <Text style={s.greeting}>{greeting}{firstName ? `, ${firstName}` : ''}</Text>
            <Text style={s.date}>{now.toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'long' })}</Text>
          </View>
          <TouchableOpacity onPress={() => router.push('/(tabs)/search')} style={s.searchBtn}>
            <Search size={18} color={C.ink} />
          </TouchableOpacity>
        </View>

        {/* Quick actions */}
        <View style={s.quickRow}>
          <TouchableOpacity onPress={handleDailyNote} style={s.quickCard} activeOpacity={0.7}>
            <View style={[s.quickIcon, { backgroundColor: '#f3ece4' }]}>
              <CalendarDays size={20} color={C.brand} />
            </View>
            <Text style={s.quickLabel}>Note du jour</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => router.push('/(tabs)/notebooks')} style={s.quickCard} activeOpacity={0.7}>
            <View style={[s.quickIcon, { backgroundColor: '#edf0f7' }]}>
              <BookOpen size={20} color="#5b7ec7" />
            </View>
            <Text style={s.quickLabel}>Carnets</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => router.push('/(tabs)/search')} style={s.quickCard} activeOpacity={0.7}>
            <View style={[s.quickIcon, { backgroundColor: '#eef7ed' }]}>
              <Search size={20} color="#4a9b61" />
            </View>
            <Text style={s.quickLabel}>Recherche</Text>
          </TouchableOpacity>
        </View>

        {/* Recent notes */}
        <View style={s.section}>
          <View style={s.sectionHeader}>
            <Clock size={13} color={C.concrete} />
            <Text style={s.sectionLabel}>Récentes</Text>
          </View>

          {loading
            ? <ActivityIndicator color={C.brand} style={{ marginTop: 24 }} />
            : recentNotes.length === 0
              ? <Text style={s.empty}>Aucune note pour l'instant.</Text>
              : recentNotes.map((note, i) => (
                  <TouchableOpacity
                    key={note.id}
                    onPress={() => router.push({ pathname: '/note/[id]', params: { id: note.id } })}
                    style={[s.noteRow, i === recentNotes.length - 1 && { borderBottomWidth: 0 }]}
                    activeOpacity={0.6}
                  >
                    <View style={{ flex: 1 }}>
                      <Text style={s.noteTitle} numberOfLines={1}>{note.title || 'Sans titre'}</Text>
                      {note.notebookName && <Text style={s.noteMeta} numberOfLines={1}>{note.notebookName}</Text>}
                    </View>
                    <View style={s.noteRight}>
                      <Text style={s.noteDate}>{new Date(note.updatedAt).toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' })}</Text>
                      <ChevronRight size={12} color={C.border} />
                    </View>
                  </TouchableOpacity>
                ))}
        </View>
        <View style={{ height: 40 }} />
      </ScrollView>
    </SafeAreaView>
  )
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: C.paper },
  header: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', paddingHorizontal: 20, paddingTop: 20, paddingBottom: 16 },
  greeting: { fontSize: 22, fontWeight: '700', color: C.ink, letterSpacing: -0.3 },
  date: { fontSize: 13, color: C.concrete, marginTop: 3, textTransform: 'capitalize' },
  searchBtn: { width: 38, height: 38, borderRadius: 19, backgroundColor: C.white, borderWidth: 1, borderColor: C.border, alignItems: 'center', justifyContent: 'center' },
  quickRow: { flexDirection: 'row', gap: 10, paddingHorizontal: 20, marginBottom: 24 },
  quickCard: { flex: 1, backgroundColor: C.white, borderWidth: 1, borderColor: C.border, borderRadius: 14, padding: 14, alignItems: 'center', gap: 10 },
  quickIcon: { width: 40, height: 40, borderRadius: 12, alignItems: 'center', justifyContent: 'center' },
  quickLabel: { fontSize: 11, fontWeight: '600', color: C.ink, textAlign: 'center' },
  section: { marginHorizontal: 20, backgroundColor: C.white, borderWidth: 1, borderColor: C.border, borderRadius: 16, overflow: 'hidden' },
  sectionHeader: { flexDirection: 'row', alignItems: 'center', gap: 6, paddingHorizontal: 16, paddingVertical: 10, borderBottomWidth: 1, borderBottomColor: C.border, backgroundColor: '#f8f6f2' },
  sectionLabel: { fontSize: 11, fontWeight: '700', color: C.concrete, textTransform: 'uppercase', letterSpacing: 1 },
  empty: { color: C.concrete, fontSize: 14, textAlign: 'center', padding: 24 },
  noteRow: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, paddingVertical: 13, borderBottomWidth: 1, borderBottomColor: C.border },
  noteTitle: { fontSize: 14, fontWeight: '500', color: C.ink },
  noteMeta: { fontSize: 11, color: C.concrete, marginTop: 2 },
  noteRight: { flexDirection: 'row', alignItems: 'center', gap: 4 },
  noteDate: { fontSize: 11, color: C.concrete },
})