import { useEffect, useState } from 'react'
import {
View, Text, ActivityIndicator,
TouchableOpacity, Share, StyleSheet,
} from 'react-native'
import { SafeAreaView } from 'react-native-safe-area-context'
import { useLocalSearchParams, useRouter } from 'expo-router'
import { ArrowLeft, Share2 } from 'lucide-react-native'
import { WebView } from 'react-native-webview'
import { apiFetch } from '@/lib/api'
import { ENDPOINTS } from '@/lib/config'
import { C } from '@/lib/theme'
interface Note {
id: string
title: string
content: string
updatedAt: string
notebookName?: string
}
// Le contenu TipTap est stocké en HTML — on l'enveloppe dans un style CSS propre
function buildHtml(content: string, title: string) {
const safeTitle = title.replace(//g, '>')
// Détecter si le contenu est déjà du HTML ou du texte brut
const isHtml = content.trimStart().startsWith('<')
const body = isHtml ? content : `${content.replace(/\n/g, '
')}
`
return `
${safeTitle}
${body}
`
}
export default function NoteScreen() {
const { id } = useLocalSearchParams<{ id: string }>()
const [note, setNote] = useState(null)
const [loading, setLoading] = useState(true)
const [error, setError] = useState(null)
const router = useRouter()
useEffect(() => {
if (!id) return
apiFetch(ENDPOINTS.note(id as string))
.then((r) => {
if (!r.ok) throw new Error(`Erreur ${r.status}`)
return r.json()
})
.then((data) => setNote(data.note ?? null))
.catch((e) => setError(e.message))
.finally(() => setLoading(false))
}, [id])
const handleShare = async () => {
if (!note) return
await Share.share({ title: note.title, message: `${note.title}\nhttps://memento-note.com` })
}
return (
router.back()} style={s.backBtn} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
{note?.title ?? '…'}
{note && (
)}
{loading && }
{error && {error}}
{!loading && !error && !note && Note introuvable.}
{note && (
)}
)
}
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, backgroundColor: C.paper },
backBtn: { padding: 4 },
headerTitle: { flex: 1, fontSize: 15, fontWeight: '600', color: C.ink },
shareBtn: { padding: 4 },
center: { flex: 1, alignItems: 'center', justifyContent: 'center' },
})