"use client"; import { useEffect, useState } from "react"; import { useSession, signOut } from "next-auth/react"; import { useEditMode } from "@/context/EditModeContext"; import { LayoutDashboard, Newspaper, Briefcase, Handshake, Mail, MapPin, Megaphone, UserCircle, X, ArrowLeft, Plus, Pencil, Trash2, Eye, EyeOff, ArrowUp, ArrowDown, User, Lock, Save, LogOut, CheckCircle, AlertCircle, EyeOff as EyeOffIcon, CheckCircle2, Copy, MailOpen, ChevronDown, ChevronUp, Image as ImageIcon, Video, Circle, Upload, Link, } from "lucide-react"; import ArticleForm from "./ArticleForm"; import ProjectForm from "./ProjectForm"; import PartnerForm from "./PartnerForm"; import ZoneForm from "./ZoneForm"; // ── Types ────────────────────────────────────────────────────────────────────── type Section = | "dashboard" | "articles" | "projects" | "partners" | "messages" | "zones" | "campaigns" | "profile"; type ViewState = "list" | "new" | `edit:${string}`; type Stats = { articles: { total: number; published: number }; projects: { total: number; published: number }; partners: { total: number; published: number }; messages: { total: number; unread: number }; }; type Article = { id: string; title: string; category: string; published: boolean; publishedAt: string | null; createdAt: string; }; type Project = { id: string; title: string; tag: string; partner: string; published: boolean; order: number; }; type Partner = { id: string; name: string; category: string; website: string | null; logo: string; published: boolean; order: number; }; type Zone = { id: string; name: string; svgId: string; status: string; beneficiaries: string | null; published: boolean; }; type Message = { id: string; name: string; email: string; subject: string; message: string; read: boolean; createdAt: string; }; type Campaign = { id: string; title: string; slogan: string | null; description: string | null; amountRaised: string | null; mediaType: string; imageUrl: string | null; videoUrl: string | null; active: boolean; createdAt: string; }; // ── Shared constants ─────────────────────────────────────────────────────────── const STATUS_COLORS: Record = { priority: "#4A7C59", relationship: "#7F8C8D", inactive: "#BDC3C7", }; const STATUS_LABELS: Record = { priority: "Prioritaire", relationship: "Relation", inactive: "Inactif", }; const VIDEO_MAX_BYTES = 100 * 1024 * 1024; // ── Campaign Modal ───────────────────────────────────────────────────────────── function CampaignModal({ initial, onSave, onClose, }: { initial: Partial; onSave: (data: Partial) => Promise; onClose: () => void; }) { const [form, setForm] = useState>({ title: "", slogan: "", description: "", amountRaised: "", mediaType: "image", imageUrl: "", videoUrl: "", active: false, ...initial, }); const [saving, setSaving] = useState(false); const [uploading, setUploading] = useState(false); const [uploadProgress, setUploadProgress] = useState(0); const [uploadError, setUploadError] = useState(null); const [videoSource, setVideoSource] = useState<"file" | "url">(() => { if (initial.videoUrl?.includes("res.cloudinary.com")) return "file"; if (initial.videoUrl) return "url"; return "file"; }); const set = (k: K, v: Campaign[K]) => setForm((f) => ({ ...f, [k]: v })); const switchVideoSource = (src: "file" | "url") => { setVideoSource(src); set("videoUrl", ""); setUploadError(null); }; const handleImageUpload = async (e: React.ChangeEvent) => { const file = e.target.files?.[0]; if (!file) return; setUploading(true); const fd = new FormData(); fd.append("file", file); try { const res = await fetch("/api/upload", { method: "POST", body: fd }); const data = await res.json(); set("imageUrl", data.url); } catch { alert("Erreur lors du téléchargement"); } finally { setUploading(false); } }; const handleVideoUpload = async (e: React.ChangeEvent) => { const file = e.target.files?.[0]; if (!file) return; if (file.size > VIDEO_MAX_BYTES) { setUploadError(`Fichier trop volumineux. Maximum : 100 Mo (votre fichier : ${(file.size / 1024 / 1024).toFixed(1)} Mo)`); e.target.value = ""; return; } setUploadError(null); setUploading(true); setUploadProgress(0); try { const sigRes = await fetch("/api/admin/cloudinary-signature"); if (!sigRes.ok) throw new Error("Impossible d'obtenir la signature d'upload"); const { signature, timestamp, api_key, cloud_name, folder, max_bytes } = await sigRes.json(); await new Promise((resolve, reject) => { const fd = new FormData(); fd.append("file", file); fd.append("api_key", api_key); fd.append("timestamp", String(timestamp)); fd.append("signature", signature); fd.append("folder", folder); fd.append("max_bytes", String(max_bytes)); const xhr = new XMLHttpRequest(); xhr.open("POST", `https://api.cloudinary.com/v1_1/${cloud_name}/video/upload`); xhr.upload.onprogress = (ev) => { if (ev.lengthComputable) setUploadProgress(Math.round((ev.loaded / ev.total) * 100)); }; xhr.onload = () => { if (xhr.status >= 200 && xhr.status < 300) { const data = JSON.parse(xhr.responseText); set("videoUrl", data.secure_url); resolve(); } else { const err = JSON.parse(xhr.responseText); reject(new Error(err?.error?.message ?? "Échec du téléchargement")); } }; xhr.onerror = () => reject(new Error("Erreur réseau lors du téléchargement")); xhr.send(fd); }); } catch (err) { setUploadError(err instanceof Error ? err.message : "Échec du téléchargement"); } finally { setUploading(false); setUploadProgress(0); } }; const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setSaving(true); try { await onSave(form); onClose(); } finally { setSaving(false); } }; return (

{initial.id ? "Modifier la campagne" : "Nouvelle campagne"}

set("title", e.target.value)} className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#4A7C59]" placeholder="Ex: Campagne contre la malnutrition 2026" />
set("slogan", e.target.value)} className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#4A7C59]" placeholder="Ex: Nourrir l'avenir de la Mauritanie" />