// View components for the CMS const { useState, useEffect, useRef } = React; /* ============ Shared bits ============ */ const StatusBadge = ({ status }) => { const map = { published: { cls: "badge-published", label: "Published" }, draft: { cls: "badge-draft", label: "Draft" }, archived: { cls: "badge-archived", label: "Archived" }, active: { cls: "badge-active", label: "Active" }, inactive: { cls: "badge-inactive", label: "Inactive" }, }; const m = map[status] || map.draft; return ( {m.label} ); }; const LocaleRow = ({ locales }) => { const order = ["en", "it", "es"]; return ( {order.map(l => ( {l} ))} ); }; /* ============ Tiny markdown ============ */ function renderMarkdown(src) { const lines = src.split("\n"); const out = []; let para = []; let list = null; const flushPara = () => { if (para.length) { out.push(`

${inline(para.join(" "))}

`); para = []; } }; const flushList = () => { if (list) { out.push(`<${list.kind}>${list.items.map(i => `
  • ${inline(i)}
    • `).join("")}`); list = null; } }; const inline = (s) => s .replace(/&/g,"&").replace(//g,">") .replace(/`([^`]+)`/g, "$1") .replace(/\*\*([^*]+)\*\*/g, "$1") .replace(/\*([^*]+)\*/g, "$1") .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '$1'); for (const raw of lines) { const line = raw.trimEnd(); if (/^#\s/.test(line)) { flushPara(); flushList(); out.push(`

    ${inline(line.slice(2))}

    `); continue; } if (/^##\s/.test(line)) { flushPara(); flushList(); out.push(`

    ${inline(line.slice(3))}

    `); continue; } if (/^>\s?/.test(line)) { flushPara(); flushList(); out.push(`
    ${inline(line.replace(/^>\s?/,""))}
    `); continue; } if (/^-\s/.test(line)) { flushPara(); if (!list || list.kind !== "ul") { flushList(); list = { kind: "ul", items: [] }; } list.items.push(line.slice(2)); continue; } if (/^\d+\.\s/.test(line)){ flushPara(); if (!list || list.kind !== "ol") { flushList(); list = { kind: "ol", items: [] }; } list.items.push(line.replace(/^\d+\.\s/,"")); continue; } if (line.trim() === "") { flushPara(); flushList(); continue; } para.push(line); } flushPara(); flushList(); return out.join(""); } /* ============ Helpers ============ */ function buildLocales(translationLocales) { const locs = { it: false, en: false, es: false }; (translationLocales || []).forEach(l => { if (l in locs) locs[l] = true; }); return locs; } function buildAuthor(name) { if (!name) return { name: "Unknown", initials: "??" }; const parts = name.trim().split(" "); const initials = parts.map(p => p[0]).join("").toUpperCase().slice(0, 2); return { name, initials }; } function formatDate(d) { if (!d) return "—"; return new Date(d).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" }); } function formatDateRange(start, end) { const fmt = d => d ? new Date(d).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" }) : "?"; if (!start && !end) return "—"; return `${fmt(start)} – ${fmt(end)}`; } function slugify(str) { return (str || "article") .toLowerCase() .normalize("NFD").replace(/[̀-ͯ]/g, "") .replace(/[^a-z0-9]+/g, "-") .replace(/^-|-$/g, "") || "article"; } /* ============ Micro UI ============ */ const Spinner = () => (
    Loading…
    ); const ErrorBanner = ({ msg }) => (
    {msg}
    ); const Toast = ({ msg, type }) => (
    {msg}
    ); /* ============ TagsInput ============ */ const TagsInput = ({ tags, onChange }) => { const [input, setInput] = useState(""); const addTag = (raw) => { const tag = raw.trim().toLowerCase(); if (!tag || tags.includes(tag)) return; onChange([...tags, tag]); }; const handleKeyDown = (e) => { if (e.key === "Enter" || e.key === ",") { e.preventDefault(); addTag(input); setInput(""); } else if (e.key === "Backspace" && input === "" && tags.length > 0) { onChange(tags.slice(0, -1)); } }; const handleBlur = () => { if (input.trim()) { addTag(input); setInput(""); } }; const removeTag = (i) => onChange(tags.filter((_, idx) => idx !== i)); return (
    e.currentTarget.querySelector("input").focus()}> {tags.map((t, i) => ( {t} ))} setInput(e.target.value)} onKeyDown={handleKeyDown} onBlur={handleBlur} />
    ); }; /* ============ Media Picker ============ */ const MediaPicker = ({ onSelect, onClose }) => { const [media, setMedia] = useState([]); const [loading, setLoading] = useState(true); const [uploading, setUploading] = useState(false); const fileRef = useRef(null); useEffect(() => { api.getMedia() .then(({ data }) => setMedia(data || [])) .catch(() => {}) .finally(() => setLoading(false)); }, []); const handleUpload = async (e) => { const file = e.target.files && e.target.files[0]; if (!file) return; setUploading(true); try { const row = await api.uploadMedia(file); setMedia(prev => [row, ...prev]); onSelect(row.url); } catch (err) { alert(err.message); } finally { setUploading(false); e.target.value = ""; } }; return (
    e.stopPropagation()}>
    Media library
    {loading ? : (
    {media.map(m => (
    onSelect(m.url)} style={{ cursor: "pointer", borderRadius: 6, overflow: "hidden", border: "2px solid var(--border)", background: "var(--surface-2)" }} >
    {m.filename}
    ))} {media.length === 0 && (
    No images yet. Click "Upload new" to add one.
    )}
    )}
    ); }; /* ============ Login ============ */ const LoginView = ({ onLogin }) => { const [email, setEmail] = useState("admin@naturmia.com"); const [password, setPassword] = useState(""); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const handleSubmit = async (e) => { e.preventDefault(); setLoading(true); setError(null); try { const { token } = await api.login(email, password); onLogin(token); } catch { setError("Invalid email or password"); } finally { setLoading(false); } }; return (
    NaturMia
    {error && }
    setEmail(e.target.value)} required autoFocus/>
    setPassword(e.target.value)} required placeholder="••••••••"/>
    ); }; /* ============ Dashboard ============ */ const Dashboard = ({ onGo }) => { const [stats, setStats] = useState({}); const [recent, setRecent] = useState([]); const [loading, setLoading] = useState(true); useEffect(() => { Promise.all([ api.getStats().catch(() => ({})), api.getArticles({ limit: 8 }).catch(() => ({ articles: [] })), ]).then(([s, { articles }]) => { setStats(s); setRecent(articles || []); }).finally(() => setLoading(false)); }, []); const queue = recent.filter(a => { const locs = buildLocales(a.translation_locales); return !(locs.it && locs.en && locs.es); }); return (
    Published articles {loading ? "…" : (stats.published || 0)} +8 this month
    Drafts in review {loading ? "…" : (stats.draft || 0)} awaiting translation
    Archived {loading ? "…" : (stats.archived || 0)} all time
    Total articles {loading ? "…" : Object.values(stats).reduce((a, b) => a + b, 0)} across all statuses
    Recently edited
    {loading ? : ( {recent.slice(0, 4).map(a => ( ))} {recent.length === 0 && ( )}
    {a.title || "(Untitled)"} {a.category} · {a.author_name || "Unknown"}
    No articles yet.
    )}
    Translation queue

    Articles missing one or more locales

    {loading ? : queue.length === 0 ? (

    All articles are fully translated.

    ) : queue.slice(0, 4).map(a => (
    {a.title || "(Untitled)"}
    {a.category}
    ))}
    ); }; /* ============ Articles list ============ */ const ArticlesList = ({ onOpen }) => { const [status, setStatus] = useState("All statuses"); const [cat, setCat] = useState("All categories"); const [categories, setCategories] = useState(CATEGORIES); const [q, setQ] = useState(""); const [debouncedQ, setDebouncedQ] = useState(""); const [page, setPage] = useState(1); const [articles, setArticles] = useState([]); const [total, setTotal] = useState(0); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const LIMIT = 20; const handleArchive = async (id, title) => { if (!confirm(`Archive "${title}"? It will no longer appear in the feed.`)) return; try { await api.deleteArticle(id); setArticles(prev => prev.filter(a => a.id !== id)); setTotal(prev => prev - 1); } catch (e) { setError(e.message); } }; useEffect(() => { api.getCategories().then(({ data }) => { if (data && data.length) setCategories(["All categories", ...data]); }).catch(() => {}); }, []); // Debounce search input 300ms and reset to page 1 // (categories are objects {id,slug,name_it,name_en,name_es}; cat state holds name_en string) useEffect(() => { const t = setTimeout(() => { setDebouncedQ(q); setPage(1); }, 300); return () => clearTimeout(t); }, [q]); // Reset page when filters change useEffect(() => { setPage(1); }, [status, cat]); useEffect(() => { setLoading(true); setError(null); api.getArticles({ status, category: cat === "All categories" ? undefined : cat, q: debouncedQ, page, limit: LIMIT }) .then(({ articles, total }) => { setArticles(articles || []); setTotal(total || 0); }) .catch(e => setError(e.message)) .finally(() => setLoading(false)); }, [status, cat, debouncedQ, page]); const totalPages = Math.max(1, Math.ceil(total / LIMIT)); const pageStart = Math.max(1, Math.min(page - 2, totalPages - 4)); const pageEnd = Math.min(totalPages, pageStart + 4); const pageButtons = []; for (let p = pageStart; p <= pageEnd; p++) pageButtons.push(p); return (
    {error && }
    setQ(e.target.value)}/>
    {loading ? : ( {articles.map(a => { const author = buildAuthor(a.author_name); const locales = buildLocales(a.translation_locales); return ( ); })} {articles.length === 0 && ( )}
    Title Locales Category Tags Author Status Published Actions
    {a.title || "(Untitled)"} {a.slug}
    		{a.category} {(() => { const tags = Array.isArray(a.topic_tags) ? a.topic_tags : []; const visible = tags.slice(0, 3); const extra = tags.length - visible.length; return (
    {visible.map(t => ( {t} ))} {extra > 0 && ( +{extra} )}
    ); })()}
    {author.initials}
    {author.name}
    		{formatDate(a.published_at)}
    No articles match your filters.
    )}
    Showing {articles.length} of {total} articles
    {pageButtons.map(p => ( ))}
    ); }; /* ============ Article edit ============ */ const ArticleEdit = ({ articleId, onBack, onTitleChange, saveSignal }) => { const handleSaveRef = useRef(null); const [locale, setLocale] = useState("it"); const [titles, setTitles] = useState({ it: "", en: "", es: "" }); const [bodies, setBodies] = useState({ it: SAMPLE_MD, en: "", es: "" }); const [preview, setPreview] = useState(true); const [premium, setPremium] = useState(false); const [pinned, setPinned] = useState(false); const [status, setStatus] = useState("draft"); const [category, setCategory] = useState(CATEGORIES[1] || "Nutrition"); const [categoryList, setCategoryList] = useState(CATEGORIES.filter(c => c !== "All categories")); const [coverUrl, setCoverUrl] = useState(null); const [pubDate, setPubDate] = useState(""); const [topicTags, setTopicTags] = useState([]); const [pickerOpen, setPickerOpen] = useState(false); const [saving, setSaving] = useState(false); const [toast, setToast] = useState(null); useEffect(() => { api.getCategories().then(({ data }) => { if (data && data.length) { setCategoryList(data); // For new articles only: default to first DB category. // For existing articles the article load effect sets the correct value. if (!articleId) { const vals = data.map(c => typeof c === "object" ? c.name_en : c); setCategory(vals[0] || CATEGORIES[1] || "Nutrition"); } } }).catch(() => {}); }, []); // Load existing article useEffect(() => { if (!articleId) return; api.getArticle(articleId).then(({ data: a }) => { const t = { it: "", en: "", es: "" }; const b = { it: "", en: "", es: "" }; (a.translations || []).forEach(tr => { if (tr.locale in t) { t[tr.locale] = tr.title; b[tr.locale] = tr.body; } }); setTitles(t); setBodies(b); setStatus(a.status === "archived" ? "draft" : a.status); setCategory(a.category || CATEGORIES[1] || "Nutrition"); setPremium(a.is_premium || false); setPinned(a.is_pinned || false); setCoverUrl(a.cover_image_url || null); setPubDate(a.published_at ? a.published_at.slice(0, 10) : ""); setTopicTags(Array.isArray(a.topic_tags) ? a.topic_tags : []); const displayTitle = t.it || t.en || t.es || "(Untitled)"; if (onTitleChange) onTitleChange(displayTitle); }).catch(e => showToast(e.message, "error")); }, [articleId]); const showToast = (msg, type = "success") => { setToast({ msg, type }); setTimeout(() => setToast(null), 3000); }; useEffect(() => { if (saveSignal > 0) handleSaveRef.current && handleSaveRef.current(); }, [saveSignal]); const buildPayload = (overrideStatus) => { const s = overrideStatus || status; const translations = [ { locale: "it", title: titles.it, body: bodies.it }, { locale: "en", title: titles.en, body: bodies.en }, { locale: "es", title: titles.es, body: bodies.es }, ].filter(t => t.title || t.body); return { category, status: s, isPremium: premium, isPinned: pinned, publishedAt: pubDate || null, translations, coverImageUrl: coverUrl || null, topicTags }; }; const handleSave = async (publishStatus) => { setSaving(true); try { const payload = buildPayload(publishStatus); if (!articleId) { const primaryTitle = titles.it || titles.en || titles.es || "article"; payload.slug = `${slugify(primaryTitle)}-${Date.now()}`; await api.createArticle(payload); showToast("Article created"); } else { await api.updateArticle(articleId, payload); const saved = payload.status; showToast(saved === "published" ? "Published!" : saved === "archived" ? "Archived" : "Saved"); } } catch (e) { showToast(e.message, "error"); } finally { setSaving(false); } }; // Keep ref in sync so the topbar Save button always calls the latest closure handleSaveRef.current = handleSave; const localeMeta = [ { code: "it", name: "Italiano", flag: "🇮🇹" }, { code: "en", name: "English", flag: "🇬🇧" }, { code: "es", name: "Español", flag: "🇪🇸" }, ]; const body = bodies[locale] || ""; const title = titles[locale] || ""; return (
    {toast && }
    {/* LEFT: editor */}
    {localeMeta.map(l => { const complete = (titles[l.code] || "").trim().length > 0 && (bodies[l.code] || "").trim().length > 0; return ( ); })}
    setTitles({ ...titles, [locale]: e.target.value })} />