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, Sparkles, BookOpen } from 'lucide-react-native'
import { apiFetch } from '@/lib/api'
import { ENDPOINTS } from '@/lib/config'
import { useAuthStore } from '@/lib/store'
import { C } from '../_layout'

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, 10))
      }
    } 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(`/note/${data.id}`)
    }
  }

  const formatDate = (iso: string) =>
    new Date(iso).toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' })

  return (
    <SafeAreaView style={s.safe}>
      <ScrollView
        style={{ flex: 1 }}
        refreshControl={<RefreshControl refreshing={refreshing} onRefresh={() => { setRefreshing(true); load() }} tintColor={C.brand} />}
      >
        <View style={s.headerBlock}>
          <Text style={s.greeting}>
            Bonjour{user?.name ? `, ${user.name.split(' ')[0]}` : ''} 👋
          </Text>
          <Text style={s.date}>
            {new Date().toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'long' })}
          </Text>
        </View>

        <View style={s.quickRow}>
          <TouchableOpacity onPress={handleDailyNote} style={s.quickBtn}>
            <CalendarDays size={22} color={C.brand} />
            <Text style={s.quickLabel}>Note du jour</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => router.push('/(tabs)/notebooks')} style={s.quickBtn}>
            <BookOpen size={22} color={C.brand} />
            <Text style={s.quickLabel}>Carnets</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => router.push('/(tabs)/search')} style={s.quickBtn}>
            <Sparkles size={22} color={C.brand} />
            <Text style={s.quickLabel}>Recherche IA</Text>
          </TouchableOpacity>
        </View>

        <View style={s.recentBlock}>
          <Text style={s.sectionLabel}>Récentes</Text>
          {loading
            ? <ActivityIndicator color={C.brand} />
            : recentNotes.length === 0
              ? <Text style={s.empty}>Aucune note pour l'instant.</Text>
              : recentNotes.map((note) => (
                  <TouchableOpacity key={note.id} onPress={() => router.push(`/note/${note.id}`)} style={s.noteCard}>
                    <Text style={s.noteTitle} numberOfLines={1}>{note.title || 'Sans titre'}</Text>
                    <View style={{ flexDirection: 'row', gap: 8, marginTop: 4 }}>
                      {note.notebookName && <Text style={s.noteMeta}>{note.notebookName}</Text>}
                      <Text style={s.noteMeta}>{formatDate(note.updatedAt)}</Text>
                    </View>
                  </TouchableOpacity>
                ))}
        </View>
        <View style={{ height: 32 }} />
      </ScrollView>
    </SafeAreaView>
  )
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: C.paper },
  headerBlock: { paddingHorizontal: 20, paddingTop: 16, paddingBottom: 8 },
  greeting: { fontSize: 22, fontWeight: '700', fontStyle: 'italic', color: C.ink },
  date: { fontSize: 13, color: C.concrete, marginTop: 2 },
  quickRow: { flexDirection: 'row', gap: 10, paddingHorizontal: 20, marginTop: 16 },
  quickBtn: { flex: 1, backgroundColor: C.white, borderWidth: 1, borderColor: C.border, borderRadius: 16, padding: 14, alignItems: 'center', gap: 8 },
  quickLabel: { fontSize: 11, fontWeight: '600', color: C.ink, textAlign: 'center' },
  recentBlock: { paddingHorizontal: 20, marginTop: 24 },
  sectionLabel: { fontSize: 10, fontWeight: '800', letterSpacing: 2, textTransform: 'uppercase', color: C.concrete, marginBottom: 12 },
  empty: { color: C.concrete, fontSize: 14 },
  noteCard: { backgroundColor: C.white, borderWidth: 1, borderColor: C.border, borderRadius: 16, padding: 16, marginBottom: 10 },
  noteTitle: { fontSize: 15, fontWeight: '600', color: C.ink },
  noteMeta: { fontSize: 11, color: C.concrete },
})