// pages-admin.jsx — Espace administrateur (Conseil de l'Ordre)

function AdminDashboard({ auth, onLogout, navigate }) {
  const [section, setSection] = useState("overview");
  const [search, setSearch] = useState("");
  const [openSig, setOpenSig] = useState(null);

  const [SIGNALEMENTS, setSIGNALEMENTS] = useState([]);
  const [INSCRIPTIONS, setINSCRIPTIONS] = useState([]);
  const [ACTUALITES, setACTUALITES] = useState([]);
  const [editNews, setEditNews] = useState(null);
  const [confirmDeleteNews, setConfirmDeleteNews] = useState(null);
  const [TEXTES_DB, setTEXTES_DB] = useState([]);
  const [editTexte, setEditTexte] = useState(null);
  const [confirmDeleteTexte, setConfirmDeleteTexte] = useState(null);
  const [MEMBERS, setMEMBERS] = useState([]);
  const [PHARMACIES, setPHARMACIES] = useState([]);
  const [EVENTS, setEVENTS] = useState([]);
  const [BUREAU, setBUREAU] = useState([]);
  const [kpiCotisations, setKpiCotisations] = useState({ payees: 0, total: 0 });
  const [kpiDPC, setKpiDPC] = useState({ heures: 0, objectif: 12000 });
  const [chartMonths, setChartMonths] = useState([]);
  const [ADMIN_USERS, setADMIN_USERS] = useState([]);
  const [cotisMap, setCotisMap] = useState({});
  const [editMembre, setEditMembre] = useState(null);
  const [editPharmacie, setEditPharmacie] = useState(null);
  const [confirmDeletePharmacie, setConfirmDeletePharmacie] = useState(null);
  const [editBureau, setEditBureau] = useState(null);
  const [confirmDeleteBureau, setConfirmDeleteBureau] = useState(null);
  const [editEvent, setEditEvent] = useState(null);
  const [confirmDeleteEvent, setConfirmDeleteEvent] = useState(null);
  const [DPC_VALIDATIONS, setDPC_VALIDATIONS] = useState([]);
  const [editDPC, setEditDPC] = useState(null);
  const [evtTab, setEvtTab] = useState('evenements');
  const [siteConfig, setSiteConfig] = useState({ nom_institution: '', adresse: '', telephone: '', email_contact: '' });
  const [savingConfig, setSavingConfig] = useState(false);
  const [editAdmin, setEditAdmin] = useState(null);
  const [confirmDeleteAdmin, setConfirmDeleteAdmin] = useState(null);
  const [ALERTES_DB, setALERTES_DB] = useState([]);
  const [editAlerte, setEditAlerte] = useState(null);
  const [confirmDeleteAlerte, setConfirmDeleteAlerte] = useState(null);

  const [STATS_DB, setSTATS_DB] = useState([]);
  const [editStat, setEditStat] = useState(null);

  const [PORTRAITS_DB, setPORTRAITS_DB] = useState([]);
  const [editPortrait, setEditPortrait] = useState(null);
  const [confirmDeletePortrait, setConfirmDeletePortrait] = useState(null);

  const [PODCASTS_DB, setPODCASTS_DB] = useState([]);
  const [editPodcast, setEditPodcast] = useState(null);
  const [confirmDeletePodcast, setConfirmDeletePodcast] = useState(null);

  const [GUIDES_DB, setGUIDES_DB] = useState([]);
  const [editGuide, setEditGuide] = useState(null);
  const [confirmDeleteGuide, setConfirmDeleteGuide] = useState(null);

  const [OFFRES_DB, setOFFRES_DB] = useState([]);
  const [editOffre, setEditOffre] = useState(null);
  const [confirmDeleteOffre, setConfirmDeleteOffre] = useState(null);

  const [FAQS_DB, setFAQS_DB] = useState([]);
  const [editFaq, setEditFaq] = useState(null);
  const [confirmDeleteFaq, setConfirmDeleteFaq] = useState(null);

  const [contenuTab, setContenuTab] = useState('portraits');

  useEffect(() => {
    const STATUT_INSC = { soumis: 'Pièces à vérifier', en_cours: 'Avis Conseil', approuve: 'Approuvé', rejete: 'Rejeté' };
    const STATUT_SIG  = { en_attente: 'ouvert', en_cours: 'instruction', clos: 'clos' };

    window.SB.from('inscriptions').select('*').order('created_at', { ascending: false })
      .then(({ data: rows }) => {
        if (!rows) return;
        setINSCRIPTIONS(rows.map(i => ({
          dossier: i.ref || `DOS-${new Date(i.created_at).getFullYear()}-${String(i.id).padStart(3, '0')}`,
          nom: `Dr. ${i.nom} ${i.prenom}`,
          ville: i.ville,
          activite: i.type_exercice,
          depot: new Date(i.created_at).toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' }),
          statut: STATUT_INSC[i.statut] || i.statut,
          num: `PH-${new Date(i.created_at).getFullYear()}-${String(i.id).padStart(4, '0')}`,
        })));
      });

    window.SB.from('signalements').select('*').order('created_at', { ascending: false })
      .then(({ data: rows }) => {
        if (!rows) return;
        setSIGNALEMENTS(rows.map(s => ({
          ref: `SIG-${new Date(s.created_at).getFullYear()}-${String(s.id).padStart(4, '0')}`,
          type: s.type,
          lieu: s.lieu || '—',
          date: s.date_fait
            ? new Date(s.date_fait).toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' })
            : new Date(s.created_at).toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' }),
          statut: STATUT_SIG[s.statut] || 'ouvert',
          priorite: 'moyenne',
          anonyme: s.anonyme,
          par: s.nom || '—',
          description: s.description,
        })));
      });

    window.SB.from('actualites').select('id,slug,cat,date_pub,titre,excerpt,featured,publie').order('date_pub', { ascending: false })
      .then(({ data: rows }) => {
        if (!rows) return;
        setACTUALITES(rows);
      });

    window.SB.from('textes_officiels').select('*').order('date_pub', { ascending: false })
      .then(({ data: rows }) => {
        if (!rows) return;
        setTEXTES_DB(rows);
      });

    window.SB.from('membres').select('*').order('nom', { ascending: true })
      .then(({ data: rows }) => {
        if (!rows) return;
        setMEMBERS(rows.map(m => ({
          num: m.num,
          nom: m.nom,
          activite: m.activite,
          ville: m.ville,
          region: m.region || '',
          inscrit: String(m.inscrit || ''),
          statut: m.statut || 'actif',
        })));
      });

    window.SB.from('pharmacies').select('*').order('nom', { ascending: true })
      .then(({ data: rows }) => {
        if (!rows) return;
        setPHARMACIES(rows.map(p => ({
          id: p.id,
          num: p.num,
          nom: p.nom,
          titulaire: p.titulaire || '—',
          ville: p.ville,
          region: p.region,
          quartier: p.quartier || '',
          tel: p.tel || '',
          garde: p.garde,
        })));
      });

    const MOIS_FR = ['Jan','Fév','Mar','Avr','Mai','Juin','Juil','Août','Sept','Oct','Nov','Déc'];
    window.SB.from('evenements').select('*').order('date_debut', { ascending: true })
      .then(({ data: rows }) => {
        if (!rows) return;
        setEVENTS(rows.map(e => {
          const d = e.date_debut ? new Date(e.date_debut + 'T12:00:00') : null;
          return {
            id: e.id,
            titre: e.titre,
            type: e.type || 'Événement',
            date: d ? d.toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' }) : '—',
            jour: d ? String(d.getDate()).padStart(2, '0') : '—',
            mois: d ? MOIS_FR[d.getMonth()] : '—',
            lieu: e.lieu || '—',
            desc: e.description || '',
            places: e.places || '',
            date_debut: e.date_debut || '',
          };
        }));
      });

    window.SB.from('bureau').select('*').order('ordre_sort', { ascending: true })
      .then(({ data: rows }) => {
        if (!rows) return;
        setBUREAU(rows.map(m => ({
          id: m.id,
          nom: m.nom,
          role: m.role,
          ville: m.ville || '',
          mandat: m.mandat || '',
          email: m.email || '',
          tel: m.tel || '',
          photo_url: m.photo_url || '',
          ordre_sort: m.ordre_sort ?? 99,
        })));
      });

    const annee = new Date().getFullYear();
    window.SB.from('cotisations').select('membre_num,statut').eq('annee', annee)
      .then(({ data: rows }) => {
        if (!rows) return;
        const payees = rows.filter(r => r.statut === 'payee').length;
        setKpiCotisations({ payees, total: rows.length });
        const map = {};
        rows.forEach(r => { map[r.membre_num] = r.statut; });
        setCotisMap(map);
      });

    window.SB.from('dpc_validations').select('*').order('annee', { ascending: false })
      .then(({ data: rows }) => {
        if (!rows) return;
        setDPC_VALIDATIONS(rows);
        const validees = rows.filter(r => r.statut === 'valide' && r.annee === annee);
        const heures = validees.reduce((s, r) => s + Number(r.heures || 0), 0);
        setKpiDPC(prev => ({ ...prev, heures }));
      });

    const now = new Date();
    const chartStart = new Date(now.getFullYear(), now.getMonth() - 11, 1);
    const buildMonths = () => {
      const months = [];
      for (let i = 11; i >= 0; i--) {
        const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
        months.push({ label: d.toLocaleDateString('fr-FR', { month: 'short' }).replace('.', ''), year: d.getFullYear(), month: d.getMonth(), inscriptions: 0 });
      }
      return months;
    };
    window.SB.from('admin_users').select('*').order('ordre_sort', { ascending: true })
      .then(({ data: rows }) => {
        if (!rows) return;
        setADMIN_USERS(rows);
      });

    window.SB.from('site_config').select('*')
      .then(({ data: rows }) => {
        if (!rows) return;
        const cfg = {};
        rows.forEach(r => { cfg[r.key] = r.value; });
        setSiteConfig(prev => ({ ...prev, ...cfg }));
      });

    window.SB.from('alertes').select('*').order('date_pub', { ascending: false })
      .then(({ data: rows }) => { if (rows) setALERTES_DB(rows); });

    window.SB.from('stats_region').select('*').order('ordre_sort', { ascending: true })
      .then(({ data: rows }) => { if (rows) setSTATS_DB(rows); });

    window.SB.from('portraits').select('*').order('ordre_sort', { ascending: true })
      .then(({ data: rows }) => { if (rows) setPORTRAITS_DB(rows); });

    window.SB.from('podcasts').select('*').order('ordre_sort', { ascending: true })
      .then(({ data: rows }) => { if (rows) setPODCASTS_DB(rows); });

    window.SB.from('guides').select('*').order('ordre_sort', { ascending: true })
      .then(({ data: rows }) => { if (rows) setGUIDES_DB(rows); });

    window.SB.from('offres').select('*').order('created_at', { ascending: false })
      .then(({ data: rows }) => { if (rows) setOFFRES_DB(rows); });

    window.SB.from('faqs').select('*').order('ordre_sort', { ascending: true })
      .then(({ data: rows }) => { if (rows) setFAQS_DB(rows); });

    window.SB.from('membres').select('created_at').gte('created_at', chartStart.toISOString())
      .then(({ data: rows }) => {
        const months = buildMonths();
        if (rows) rows.forEach(r => {
          const d = new Date(r.created_at);
          const idx = months.findIndex(m => m.year === d.getFullYear() && m.month === d.getMonth());
          if (idx >= 0) months[idx].inscriptions++;
        });
        setChartMonths(months);
      });
  }, []);

  return (
    <div className="page-enter admin-app">
      {/* Admin header */}
      <section className="admin-header">
        <div className="container">
          <div className="admin-header-row">
            <div>
              <div className="admin-badge">
                <Icon.Shield size={12} /> Administration
              </div>
              <h1 className="serif" style={{ color: "#fff", marginTop: 14 }}>Bonjour, {auth?.user?.user_metadata?.nom || "Administrateur"}</h1>
              <div style={{ color: "rgba(255,255,255,0.7)", marginTop: 8 }}>
                {auth?.user?.user_metadata?.poste || "Administration"} · Session ouverte à {new Date().toLocaleTimeString("fr-FR", { hour: "2-digit", minute: "2-digit" })}
              </div>
            </div>
            <div style={{ display: "flex", gap: 10 }}>
              <button className="btn btn-light btn-sm" onClick={() => navigate && navigate("accueil")}>
                <Icon.ArrowRight size={12} style={{ transform: "rotate(180deg)", marginRight: 4 }} /> Retour au site
              </button>
              <button className="btn btn-light btn-sm" onClick={onLogout}>Déconnexion</button>
            </div>
          </div>
        </div>
      </section>

      {/* Layout: sidebar + content */}
      <div className="admin-layout">
        <aside className="admin-sidebar">
          {[
            { id: "overview",     l: "Vue d'ensemble",       i: "Building" },
            { id: "membres",      l: "Membres",              i: "Users", count: MEMBERS.length },
            { id: "inscriptions", l: "Inscriptions",         i: "Doc",   count: INSCRIPTIONS.length, badge: String(INSCRIPTIONS.length) },
            { id: "pharmacies",   l: "Pharmacies",           i: "Map",   count: PHARMACIES.length },
            { id: "signalements", l: "Signalements",         i: "Alert", count: SIGNALEMENTS.length, badge: String(SIGNALEMENTS.filter(s => s.statut !== "clos" && s.priorite === "haute").length) },
            { id: "actualites",   l: "Actualités",           i: "News", count: ACTUALITES.length },
            { id: "textes",       l: "Réglementation",        i: "Book" },
            { id: "evenements",   l: "Événements & DPC",     i: "Cal" },
            { id: "bureau",       l: "Bureau & Conseil",      i: "Users" },
            { id: "alertes",      l: "Alertes sanitaires",    i: "Alert" },
            { id: "contenu",      l: "Contenu éditorial",     i: "Book" },
            { id: "stats",        l: "Statistiques",          i: "Map" },
            { id: "settings",     l: "Paramètres",            i: "Help" },
          ].map((s) => {
            const I = Icon[s.i];
            return (
              <button key={s.id} className={`admin-nav ${section === s.id ? "active" : ""}`} onClick={() => setSection(s.id)}>
                <I size={16} />
                <span>{s.l}</span>
                {s.badge && <span className="admin-nav-badge">{s.badge}</span>}
                {!s.badge && s.count != null && <span className="admin-nav-count">{s.count}</span>}
              </button>
            );
          })}
        </aside>

        <main className="admin-content">
          {/* OVERVIEW */}
          {section === "overview" && (
            <>
              <div className="admin-section-head">
                <h2 className="serif">Vue d'ensemble</h2>
                <p className="muted">Synthèse des activités de l'Ordre — {new Date().toLocaleDateString("fr-FR", { weekday: "long", day: "numeric", month: "long", year: "numeric" })}.</p>
              </div>

              <div className="admin-kpis">
                {[
                  { l: "Membres actifs",            v: MEMBERS.length,       d: `${MEMBERS.length} inscrits au tableau`, up: true },
                  { l: "Inscriptions en attente",   v: INSCRIPTIONS.length,  d: "Dossiers en cours", warn: true },
                  { l: "Signalements ouverts",      v: SIGNALEMENTS.filter(s => s.statut !== "clos").length, d: `${SIGNALEMENTS.filter(s => s.priorite === "haute").length} prioritaires`, warn: true },
                  { l: "Pharmacies inscrites",      v: PHARMACIES.length,    d: "+3 ce trimestre", up: true },
                  { l: `Cotisations ${new Date().getFullYear()}`, v: kpiCotisations.total > 0 ? `${Math.round(kpiCotisations.payees / kpiCotisations.total * 100)}%` : '—', d: `${kpiCotisations.payees} / ${kpiCotisations.total} membres`, up: kpiCotisations.payees > 0 },
                  { l: "Heures DPC validées",       v: kpiDPC.heures > 0 ? kpiDPC.heures.toLocaleString('fr-FR') : '—', d: `Objectif annuel ${kpiDPC.objectif.toLocaleString('fr-FR')}` },
                ].map((k) => (
                  <div key={k.l} className="admin-kpi">
                    <div className="kpi-l">{k.l}</div>
                    <div className="kpi-v">{k.v}</div>
                    <div className={`kpi-d ${k.up ? "up" : ""} ${k.warn ? "warn" : ""}`}>{k.d}</div>
                  </div>
                ))}
              </div>

              <div className="admin-2col">
                {/* Pending tasks */}
                <div className="admin-card">
                  <div className="admin-card-head">
                    <h3>Tâches en attente</h3>
                    <span className="tag tag-red">{INSCRIPTIONS.filter(i => i.statut !== "Complet").length + SIGNALEMENTS.filter(s => s.statut !== "clos").length}</span>
                  </div>
                  <div className="task-list">
                    {[
                      { t: `Valider ${INSCRIPTIONS.length} dossier${INSCRIPTIONS.length > 1 ? "s" : ""} d'inscription`, d: `${INSCRIPTIONS.filter(i => i.statut === "Approuvé").length} approuvé${INSCRIPTIONS.filter(i => i.statut === "Approuvé").length > 1 ? "s" : ""}, ${INSCRIPTIONS.filter(i => i.statut !== "Approuvé").length} en attente`, p: "haute" },
                      { t: `Statuer sur ${SIGNALEMENTS[0]?.ref}`,      d: SIGNALEMENTS[0]?.type, p: "haute" },
                      { t: `Publier le communiqué ${(ACTUALITES[0]?.titre || '—').slice(0,40)}…`, d: "À diffuser", p: "moyenne" },
                      { t: "Convocation AG annuelle",                   d: "Liste à envoyer", p: "moyenne" },
                      { t: "Approuver programme DPC trimestre",          d: `${EVENTS.length} événements programmés`, p: "basse" },
                    ].map((task, i) => (
                      <div key={i} className="task-row">
                        <span className={`task-prio task-prio-${task.p}`}></span>
                        <div style={{ flex: 1 }}>
                          <div className="task-t">{task.t}</div>
                          <div className="task-d">{task.d}</div>
                        </div>
                        <button className="btn btn-ghost btn-sm">Traiter</button>
                      </div>
                    ))}
                  </div>
                </div>

                {/* Activity feed */}
                <div className="admin-card">
                  <div className="admin-card-head">
                    <h3>Activité récente</h3>
                    <button className="link-btn">Tout voir</button>
                  </div>
                  <div className="feed">
                    {[
                      { t: "Nouveau signalement", d: `${SIGNALEMENTS[0]?.ref} — ${SIGNALEMENTS[0]?.lieu?.split("—")[0].trim()}`, date: "il y a 12 min", i: "Alert", color: "red" },
                      { t: "Dossier déposé",      d: `${INSCRIPTIONS[0]?.nom} (${INSCRIPTIONS[0]?.dossier})`, date: "il y a 2 h", i: "Doc", color: "green" },
                      { t: "Cotisation reçue",     d: `${MEMBERS[0]?.nom} — ${MEMBERS[0]?.num}`, date: "il y a 3 h", i: "Check", color: "green" },
                      { t: "Texte publié",         d: (ACTUALITES[0]?.titre || '—').slice(0, 45) + "…", date: "Hier", i: "News", color: "gold" },
                      { t: "DPC validé",            d: `${MEMBERS[1]?.nom} — ${EVENTS[0]?.titre?.slice(0,30)}`, date: "Hier", i: "Cal", color: "green" },
                      { t: "Signalement clos",     d: `${SIGNALEMENTS.find(s => s.statut === "clos")?.ref} — décision Conseil`, date: "2 jours", i: "X", color: "red" },
                    ].map((a, i) => {
                      const I = Icon[a.i];
                      return (
                        <div key={i} className="feed-row">
                          <div className={`feed-icon feed-${a.color}`}><I size={13} /></div>
                          <div style={{ flex: 1 }}>
                            <div className="feed-t">{a.t}</div>
                            <div className="feed-d">{a.d}</div>
                          </div>
                          <div className="feed-date">{a.date}</div>
                        </div>
                      );
                    })}
                  </div>
                </div>
              </div>

              {/* Chart — inscriptions 12 derniers mois */}
              <div className="admin-card" style={{ marginTop: 16 }}>
                <div className="admin-card-head">
                  <h3>Inscriptions au tableau — 12 derniers mois</h3>
                  <div style={{ display: "flex", gap: 16, fontSize: 12, color: "var(--ink-500)" }}>
                    <span><span className="legend-dot" style={{ background: "var(--c-primary)", display: "inline-block", borderRadius: "50%", width: 8, height: 8, marginRight: 6 }}></span> Nouvelles inscriptions</span>
                    <span style={{ color: "var(--ink-400)" }}>Total tableau : {MEMBERS.length}</span>
                  </div>
                </div>
                <div className="chart-wrap">
                  <svg viewBox="0 0 800 220" width="100%" height="220" preserveAspectRatio="none">
                    {[...Array(5)].map((_, i) => (
                      <line key={i} x1="0" y1={i * 40} x2="800" y2={i * 40} stroke="rgba(0,0,0,0.05)" strokeWidth="1"/>
                    ))}
                    {chartMonths.length > 0 && (() => {
                      const maxVal = Math.max(...chartMonths.map(m => m.inscriptions), 1);
                      const scaleH = v => Math.round((v / maxVal) * 160);
                      return chartMonths.map((m, i) => {
                        const x = i * 65 + 12;
                        const h = scaleH(m.inscriptions);
                        return (
                          <g key={i}>
                            <rect x={x} y={180 - h} width="34" height={Math.max(h, 2)} fill={h > 0 ? "var(--c-primary)" : "var(--ink-100)"} rx="3"/>
                            {h > 0 && <text x={x + 17} y={180 - h - 5} fontSize="10" fill="var(--ink-500)" textAnchor="middle">{m.inscriptions}</text>}
                          </g>
                        );
                      });
                    })()}
                    {chartMonths.map((m, i) => (
                      <text key={i} x={i * 65 + 29} y={195} fontSize="10" fill="rgba(0,0,0,0.4)" textAnchor="middle">{m.label}</text>
                    ))}
                  </svg>
                </div>
              </div>
            </>
          )}

          {/* MEMBRES */}
          {section === "membres" && (
            <>
              <div className="admin-section-head">
                <h2 className="serif">Gestion des membres</h2>
                <p className="muted">Tableau de l'Ordre — {MEMBERS.length} pharmacien{MEMBERS.length > 1 ? "s" : ""} inscrit{MEMBERS.length > 1 ? "s" : ""}.</p>
                <div className="admin-actions">
                  <div className="search-input" style={{ height: 40, flex: 1, maxWidth: 360 }}>
                    <Icon.Search />
                    <input placeholder="Rechercher un membre, un numéro…" value={search} onChange={e => setSearch(e.target.value)} />
                  </div>
                  <button className="btn btn-ghost btn-sm"><Icon.Download /> Exporter CSV</button>
                </div>
              </div>

              <div className="card" style={{ padding: 0 }}>
                <table className="data-table">
                  <thead>
                    <tr>
                      <th>N°</th><th>Nom</th><th>Activité</th><th>Ville</th><th>Inscrit</th><th>Statut</th><th>Cotisation</th><th></th>
                    </tr>
                  </thead>
                  <tbody>
                    {MEMBERS.filter(m => !search || `${m.nom} ${m.num}`.toLowerCase().includes(search.toLowerCase())).map((m) => (
                      <tr key={m.num}>
                        <td className="mono" style={{ color: "var(--c-primary)", fontWeight: 600 }}>{m.num}</td>
                        <td><b>{m.nom}</b></td>
                        <td><span className="tag tag-gray">{m.activite}</span></td>
                        <td>{m.ville}</td>
                        <td className="muted">{m.inscrit}</td>
                        <td>
                          <span className="status-dot" style={{ background: m.statut === 'actif' ? 'var(--green-status)' : m.statut === 'suspendu' ? 'var(--c-gold, #d97706)' : 'var(--red-status)' }}></span>
                          {m.statut === 'actif' ? 'Actif' : m.statut === 'suspendu' ? 'Suspendu' : 'Radié'}
                        </td>
                        <td>
                          {cotisMap[m.num] === 'payee'
                            ? <span className="tag tag-green">{new Date().getFullYear()} ✓</span>
                            : cotisMap[m.num] === 'en_attente'
                              ? <span className="tag tag-gold">En attente</span>
                              : cotisMap[m.num] === 'exonere'
                                ? <span className="tag tag-gray">Exonéré</span>
                                : <span className="tag tag-red">Non payée</span>}
                        </td>
                        <td style={{ textAlign: "right" }}>
                          <div className="admin-row-actions">
                            <button title="Modifier" onClick={() => setEditMembre({...m})}><Icon.Doc size={14} /></button>
                            <button title={m.statut === 'actif' ? 'Suspendre' : 'Réactiver'} onClick={async () => {
                              const newStatut = m.statut === 'actif' ? 'suspendu' : 'actif';
                              const { error } = await window.SB.from('membres').update({ statut: newStatut }).eq('num', m.num);
                              if (!error) setMEMBERS(prev => prev.map(x => x.num === m.num ? {...x, statut: newStatut} : x));
                            }}><Icon.Alert size={14} /></button>
                          </div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>

              {/* Drawer modifier membre */}
              {editMembre && (
                <div className="drawer-overlay" onClick={() => setEditMembre(null)}>
                  <aside className="drawer" style={{ maxWidth: 520 }} onClick={e => e.stopPropagation()}>
                    <button className="drawer-close" onClick={() => setEditMembre(null)}><Icon.X size={16} /></button>
                    <div className="eyebrow">Membre</div>
                    <h2 className="serif" style={{ marginTop: 8 }}>{editMembre.nom}</h2>
                    <div className="mono" style={{ color: 'var(--c-primary)', marginTop: 4 }}>{editMembre.num}</div>
                    <div className="drawer-divider"></div>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                      <div className="field">
                        <label>Nom complet</label>
                        <input value={editMembre.nom} onChange={e => setEditMembre(p => ({...p, nom: e.target.value}))} />
                      </div>
                      <div style={{ display: 'flex', gap: 12 }}>
                        <div className="field" style={{ flex: 1 }}>
                          <label>Activité</label>
                          <select value={editMembre.activite} onChange={e => setEditMembre(p => ({...p, activite: e.target.value}))} style={{ width: '100%', padding: '8px 10px', border: '1px solid var(--ink-200)', borderRadius: 'var(--r-sm)', background: '#fff', fontSize: 14 }}>
                            {['Officine','Hospitalier','Biologie','Industrie'].map(a => <option key={a}>{a}</option>)}
                          </select>
                        </div>
                        <div className="field" style={{ flex: 1 }}>
                          <label>Statut</label>
                          <select value={editMembre.statut} onChange={e => setEditMembre(p => ({...p, statut: e.target.value}))} style={{ width: '100%', padding: '8px 10px', border: '1px solid var(--ink-200)', borderRadius: 'var(--r-sm)', background: '#fff', fontSize: 14 }}>
                            {['actif','suspendu','radié'].map(s => <option key={s}>{s}</option>)}
                          </select>
                        </div>
                      </div>
                      <div style={{ display: 'flex', gap: 12 }}>
                        <div className="field" style={{ flex: 1 }}>
                          <label>Ville</label>
                          <input value={editMembre.ville} onChange={e => setEditMembre(p => ({...p, ville: e.target.value}))} />
                        </div>
                        <div className="field" style={{ flex: 1 }}>
                          <label>Région</label>
                          <input value={editMembre.region} onChange={e => setEditMembre(p => ({...p, region: e.target.value}))} />
                        </div>
                      </div>
                    </div>
                    <div className="drawer-divider"></div>
                    <div style={{ display: 'flex', gap: 8 }}>
                      <button className="btn btn-ghost btn-sm" onClick={() => setEditMembre(null)}>Annuler</button>
                      <button className="btn btn-primary btn-sm" style={{ flex: 1 }} onClick={async () => {
                        const payload = { nom: editMembre.nom, activite: editMembre.activite, ville: editMembre.ville, region: editMembre.region, statut: editMembre.statut };
                        const { error } = await window.SB.from('membres').update(payload).eq('num', editMembre.num);
                        if (!error) {
                          setMEMBERS(prev => prev.map(m => m.num === editMembre.num ? {...m, ...payload} : m));
                          setEditMembre(null);
                        }
                      }}>Enregistrer</button>
                    </div>
                  </aside>
                </div>
              )}
            </>
          )}

          {/* INSCRIPTIONS */}
          {section === "inscriptions" && (
            <>
              <div className="admin-section-head">
                <h2 className="serif">Dossiers d'inscription</h2>
                <p className="muted">{INSCRIPTIONS.length} dossier{INSCRIPTIONS.length > 1 ? "s" : ""} en cours d'instruction.</p>
              </div>

              <div className="insc-list">
                {INSCRIPTIONS.map((i) => (
                  <div key={i.dossier} className="insc-card">
                    <div className="insc-ref">
                      <div className="mono" style={{ fontSize: 11, color: "var(--ink-400)" }}>{i.dossier}</div>
                      <h4 className="serif">{i.nom}</h4>
                      <div className="muted" style={{ fontSize: 13 }}>
                        {i.activite} · {i.ville} · N° {i.num} · Dépôt {i.depot}
                      </div>
                    </div>
                    <div className="insc-status">
                      <span className={`tag ${i.statut === "Approuvé" ? "tag-green" : i.statut === "Avis Conseil" ? "tag-gold" : "tag-gray"}`}>
                        {i.statut}
                      </span>
                    </div>
                    <div className="insc-actions">
                      <button className="btn btn-ghost btn-sm">Voir dossier</button>
                      {i.statut === "Avis Conseil" && <button className="btn btn-primary btn-sm"><Icon.Check size={12} /> Approuver</button>}
                      {i.statut === "Approuvé" && <button className="btn btn-ghost btn-sm" disabled>Approuvé ✓</button>}
                      {i.statut !== "Avis Conseil" && i.statut !== "Approuvé" && <button className="btn btn-primary btn-sm">Instruire</button>}
                    </div>
                  </div>
                ))}
              </div>
            </>
          )}

          {/* PHARMACIES */}
          {section === "pharmacies" && (
            <>
              <div className="admin-section-head">
                <h2 className="serif">Pharmacies inscrites</h2>
                <p className="muted">{PHARMACIES.length} officines autorisées au Niger.</p>
                <div className="admin-actions">
                  <div className="search-input" style={{ height: 40, flex: 1, maxWidth: 360 }}>
                    <Icon.Search />
                    <input placeholder="Rechercher une pharmacie…" value={search} onChange={e => setSearch(e.target.value)} />
                  </div>
                  <button className="btn btn-primary btn-sm" onClick={() => setEditPharmacie({ _new: true, num: '', nom: '', titulaire: '', ville: '', region: '', quartier: '', tel: '', garde: false })}>+ Nouvelle officine</button>
                </div>
              </div>

              <div className="card" style={{ padding: 0 }}>
                <table className="data-table">
                  <thead>
                    <tr><th>N°</th><th>Pharmacie</th><th>Titulaire</th><th>Ville</th><th>Garde</th><th></th></tr>
                  </thead>
                  <tbody>
                    {PHARMACIES.filter(p => !search || `${p.nom} ${p.titulaire}`.toLowerCase().includes(search.toLowerCase())).map((p) => (
                      <tr key={p.id}>
                        <td className="mono" style={{ color: "var(--c-primary)", fontWeight: 600 }}>{p.num}</td>
                        <td><b>{p.nom}</b><div className="muted" style={{ fontSize: 12 }}>{p.quartier}</div></td>
                        <td>{p.titulaire}</td>
                        <td>{p.ville}</td>
                        <td>
                          <button style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0 }} title="Basculer garde" onClick={async () => {
                            const newGarde = !p.garde;
                            const { error } = await window.SB.from('pharmacies').update({ garde: newGarde }).eq('id', p.id);
                            if (!error) setPHARMACIES(prev => prev.map(x => x.id === p.id ? {...x, garde: newGarde} : x));
                          }}>
                            {p.garde ? <span className="tag tag-gold">De garde</span> : <span className="muted">—</span>}
                          </button>
                        </td>
                        <td style={{ textAlign: "right" }}>
                          <div className="admin-row-actions">
                            <button title="Modifier" onClick={() => setEditPharmacie({...p})}><Icon.Doc size={14} /></button>
                            <button title="Supprimer" style={{ color: 'var(--red-status)' }} onClick={() => setConfirmDeletePharmacie(p.id)}><Icon.X size={14} /></button>
                          </div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>

              {/* Drawer modifier / créer pharmacie */}
              {editPharmacie && (
                <div className="drawer-overlay" onClick={() => setEditPharmacie(null)}>
                  <aside className="drawer" style={{ maxWidth: 540 }} onClick={e => e.stopPropagation()}>
                    <button className="drawer-close" onClick={() => setEditPharmacie(null)}><Icon.X size={16} /></button>
                    <div className="eyebrow">{editPharmacie._new ? 'Nouvelle officine' : 'Modifier l\'officine'}</div>
                    <h2 className="serif" style={{ marginTop: 8 }}>{editPharmacie._new ? 'Enregistrer une pharmacie' : editPharmacie.nom}</h2>
                    <div className="drawer-divider"></div>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                      <div style={{ display: 'flex', gap: 12 }}>
                        <div className="field" style={{ flex: 1 }}>
                          <label>Numéro d'autorisation</label>
                          <input value={editPharmacie.num} onChange={e => setEditPharmacie(p => ({...p, num: e.target.value}))} placeholder="ex: PH-2026-0350" readOnly={!editPharmacie._new} style={!editPharmacie._new ? { background: 'var(--ink-50)', color: 'var(--ink-400)' } : {}} />
                        </div>
                        <div className="field" style={{ flex: 1 }}>
                          <label>Titulaire</label>
                          <input value={editPharmacie.titulaire} onChange={e => setEditPharmacie(p => ({...p, titulaire: e.target.value}))} placeholder="Dr. Nom Prénom" />
                        </div>
                      </div>
                      <div className="field">
                        <label>Dénomination</label>
                        <input value={editPharmacie.nom} onChange={e => setEditPharmacie(p => ({...p, nom: e.target.value}))} placeholder="Pharmacie de la …" />
                      </div>
                      <div style={{ display: 'flex', gap: 12 }}>
                        <div className="field" style={{ flex: 1 }}>
                          <label>Ville</label>
                          <input value={editPharmacie.ville} onChange={e => setEditPharmacie(p => ({...p, ville: e.target.value}))} />
                        </div>
                        <div className="field" style={{ flex: 1 }}>
                          <label>Région</label>
                          <input value={editPharmacie.region} onChange={e => setEditPharmacie(p => ({...p, region: e.target.value}))} />
                        </div>
                      </div>
                      <div style={{ display: 'flex', gap: 12 }}>
                        <div className="field" style={{ flex: 1 }}>
                          <label>Quartier</label>
                          <input value={editPharmacie.quartier} onChange={e => setEditPharmacie(p => ({...p, quartier: e.target.value}))} />
                        </div>
                        <div className="field" style={{ flex: 1 }}>
                          <label>Téléphone</label>
                          <input value={editPharmacie.tel} onChange={e => setEditPharmacie(p => ({...p, tel: e.target.value}))} placeholder="+227 …" />
                        </div>
                      </div>
                      <label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer', fontSize: 14 }}>
                        <input type="checkbox" checked={!!editPharmacie.garde} onChange={e => setEditPharmacie(p => ({...p, garde: e.target.checked}))} />
                        Pharmacie de garde (semaine en cours)
                      </label>
                    </div>
                    <div className="drawer-divider"></div>
                    <div style={{ display: 'flex', gap: 8 }}>
                      <button className="btn btn-ghost btn-sm" onClick={() => setEditPharmacie(null)}>Annuler</button>
                      <button className="btn btn-primary btn-sm" style={{ flex: 1 }} onClick={async () => {
                        const payload = { num: editPharmacie.num, nom: editPharmacie.nom, titulaire: editPharmacie.titulaire, ville: editPharmacie.ville, region: editPharmacie.region, quartier: editPharmacie.quartier, tel: editPharmacie.tel, garde: !!editPharmacie.garde };
                        if (editPharmacie._new) {
                          const { data: row, error } = await window.SB.from('pharmacies').insert(payload).select('*').single();
                          if (!error && row) setPHARMACIES(prev => [...prev, { id: row.id, ...payload }]);
                        } else {
                          const { error } = await window.SB.from('pharmacies').update(payload).eq('id', editPharmacie.id);
                          if (!error) setPHARMACIES(prev => prev.map(x => x.id === editPharmacie.id ? {...x, ...payload} : x));
                        }
                        setEditPharmacie(null);
                      }}>{editPharmacie._new ? 'Enregistrer' : 'Sauvegarder'}</button>
                    </div>
                  </aside>
                </div>
              )}

              {/* Confirmation suppression */}
              {confirmDeletePharmacie && (
                <div className="drawer-overlay" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }} onClick={() => setConfirmDeletePharmacie(null)}>
                  <div style={{ background: '#fff', borderRadius: 'var(--r-lg)', padding: 32, maxWidth: 400, width: '90%', boxShadow: 'var(--shadow-xl)' }} onClick={e => e.stopPropagation()}>
                    <h3 className="serif" style={{ marginBottom: 8 }}>Supprimer cette pharmacie ?</h3>
                    <p className="muted" style={{ fontSize: 14, marginBottom: 24 }}>Cette action est irréversible. L'officine sera retirée du registre.</p>
                    <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
                      <button className="btn btn-ghost btn-sm" onClick={() => setConfirmDeletePharmacie(null)}>Annuler</button>
                      <button className="btn btn-sm" style={{ background: 'var(--red-status)', color: '#fff' }} onClick={async () => {
                        await window.SB.from('pharmacies').delete().eq('id', confirmDeletePharmacie);
                        setPHARMACIES(prev => prev.filter(p => p.id !== confirmDeletePharmacie));
                        setConfirmDeletePharmacie(null);
                      }}>Supprimer définitivement</button>
                    </div>
                  </div>
                </div>
              )}
            </>
          )}

          {/* SIGNALEMENTS */}
          {section === "signalements" && (
            <>
              <div className="admin-section-head">
                <h2 className="serif">Signalements reçus</h2>
                <p className="muted">{SIGNALEMENTS.filter(s => s.statut !== "clos").length} signalement{SIGNALEMENTS.filter(s => s.statut !== "clos").length > 1 ? "s" : ""} actif{SIGNALEMENTS.filter(s => s.statut !== "clos").length > 1 ? "s" : ""} — examen par le Conseil de discipline.</p>
                <div className="admin-actions">
                  <div className="filter-bar" style={{ marginBottom: 0 }}>
                    {["Tous", "Ouvert", "Instruction", "Clos"].map(s => (
                      <button key={s} className={`filter-chip ${s === "Tous" ? "active" : ""}`}>{s}</button>
                    ))}
                  </div>
                </div>
              </div>

              <div className="sig-list">
                {SIGNALEMENTS.map((s) => (
                  <div key={s.ref} className={`sig-card sig-prio-${s.priorite}`} onClick={() => setOpenSig(s)}>
                    <div className="sig-meta">
                      <div className="mono" style={{ fontSize: 11, color: "var(--ink-400)" }}>{s.ref}</div>
                      <span className={`sig-prio-tag prio-${s.priorite}`}>{s.priorite.toUpperCase()}</span>
                    </div>
                    <div className="sig-body">
                      <h4 className="serif">{s.type}</h4>
                      <div className="muted" style={{ fontSize: 13.5, marginTop: 4 }}>
                        <Icon.Pin size={12} /> {s.lieu} · {s.date} · Signalé par {s.anonyme ? <i>anonyme</i> : <b>{s.par}</b>}
                      </div>
                    </div>
                    <div className="sig-status">
                      <span className={`tag ${s.statut === "ouvert" ? "tag-red" : s.statut === "instruction" ? "tag-gold" : "tag-gray"}`}>
                        {s.statut === "ouvert" ? "Ouvert" : s.statut === "instruction" ? "Instruction" : "Clos"}
                      </span>
                    </div>
                    <div className="sig-action">
                      <Icon.ArrowRight size={14} />
                    </div>
                  </div>
                ))}
              </div>

              {/* Drawer signalement */}
              {openSig && (
                <div className="drawer-overlay" onClick={() => setOpenSig(null)}>
                  <aside className="drawer" onClick={e => e.stopPropagation()}>
                    <button className="drawer-close" onClick={() => setOpenSig(null)}><Icon.X size={16} /></button>
                    <div className="eyebrow">Signalement</div>
                    <h2 className="serif" style={{ marginTop: 8 }}>{openSig.type}</h2>
                    <div className="mono" style={{ color: "var(--c-primary)", marginTop: 4 }}>{openSig.ref}</div>
                    <div style={{ display: "flex", gap: 8, marginTop: 12 }}>
                      <span className={`tag ${openSig.statut === "ouvert" ? "tag-red" : openSig.statut === "instruction" ? "tag-gold" : "tag-gray"}`}>
                        {openSig.statut === "ouvert" ? "Ouvert" : openSig.statut === "instruction" ? "Instruction" : "Clos"}
                      </span>
                      <span className={`sig-prio-tag prio-${openSig.priorite}`}>{openSig.priorite}</span>
                    </div>
                    <div className="drawer-divider"></div>
                    <div className="info-row"><span>Lieu</span><b>{openSig.lieu}</b></div>
                    <div className="info-row"><span>Date des faits</span><b>{openSig.date}</b></div>
                    <div className="info-row"><span>Anonymat</span><b>{openSig.anonyme ? "Oui" : "Non"}</b></div>
                    <div className="info-row"><span>Auteur</span><b>{openSig.par}</b></div>
                    <div className="drawer-divider"></div>
                    <h4 style={{ marginBottom: 8 }}>Description</h4>
                    <p className="muted" style={{ fontSize: 13.5, lineHeight: 1.6 }}>
                      {openSig.description || "Description complète du signalement reçu via le formulaire confidentiel. Les pièces jointes et coordonnées de l'auteur (si non anonyme) sont consultables uniquement par les membres du Conseil de discipline."}
                    </p>
                    <div className="drawer-divider"></div>
                    <h4 style={{ marginBottom: 12 }}>Actions du Conseil</h4>
                    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                      <button className="btn btn-ghost btn-sm">Assigner à un rapporteur</button>
                      <button className="btn btn-ghost btn-sm">Demander des informations complémentaires</button>
                      <button className="btn btn-primary btn-sm">Ouvrir une instruction disciplinaire</button>
                      <button className="btn btn-ghost btn-sm" style={{ color: "var(--red-status)" }}>Classer sans suite</button>
                    </div>
                  </aside>
                </div>
              )}
            </>
          )}

          {/* ACTUALITÉS */}
          {section === "actualites" && (
            <>
              <div className="admin-section-head">
                <h2 className="serif">Publications & communiqués</h2>
                <p className="muted">{ACTUALITES.length} publication{ACTUALITES.length !== 1 ? 's' : ''} — {ACTUALITES.filter(n => !n.publie).length} brouillon{ACTUALITES.filter(n => !n.publie).length !== 1 ? 's' : ''}.</p>
                <div className="admin-actions">
                  <button className="btn btn-primary btn-sm" onClick={() => setEditNews({ _new: true, titre: '', cat: 'Communiqués officiels', excerpt: '', contenu: '', date_pub: new Date().toISOString().slice(0,10), publie: true })}>
                    + Nouvelle publication
                  </button>
                </div>
              </div>

              <div className="card" style={{ padding: 0 }}>
                <table className="data-table">
                  <thead><tr><th>Titre</th><th>Catégorie</th><th>Date</th><th>Statut</th><th></th></tr></thead>
                  <tbody>
                    {ACTUALITES.map((n) => (
                      <tr key={n.id}>
                        <td><b>{n.titre}</b></td>
                        <td><span className="tag">{n.cat}</span></td>
                        <td className="muted">{n.date_pub ? new Date(n.date_pub).toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' }) : '—'}</td>
                        <td>{n.publie ? <><span className="status-dot status-active"></span> Publié</> : <><span className="status-dot" style={{ background: 'var(--ink-300)' }}></span> Brouillon</>}</td>
                        <td style={{ textAlign: "right" }}>
                          <div className="admin-row-actions">
                            <button title="Modifier" onClick={() => setEditNews({ _id: n.id, titre: n.titre, cat: n.cat || '', excerpt: n.excerpt || '', contenu: n.contenu || '', date_pub: n.date_pub || '', publie: n.publie })}><Icon.Doc size={14} /></button>
                            <button title="Supprimer" style={{ color: 'var(--red-status)' }} onClick={() => setConfirmDeleteNews(n.id)}><Icon.X size={14} /></button>
                          </div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>

              {/* Modal édition / création */}
              {editNews && (
                <div className="drawer-overlay" onClick={() => setEditNews(null)}>
                  <aside className="drawer" style={{ maxWidth: 560 }} onClick={e => e.stopPropagation()}>
                    <button className="drawer-close" onClick={() => setEditNews(null)}><Icon.X size={16} /></button>
                    <div className="eyebrow">{editNews._new ? 'Nouvelle publication' : 'Modifier la publication'}</div>
                    <h2 className="serif" style={{ marginTop: 8 }}>{editNews._new ? 'Créer un article' : editNews.titre || 'Sans titre'}</h2>
                    <div className="drawer-divider"></div>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                      <div className="field">
                        <label>Titre</label>
                        <input value={editNews.titre} onChange={e => setEditNews(p => ({...p, titre: e.target.value}))} placeholder="Titre de l'article" />
                      </div>
                      <div style={{ display: 'flex', gap: 12 }}>
                        <div className="field" style={{ flex: 1 }}>
                          <label>Catégorie</label>
                          <select value={editNews.cat} onChange={e => setEditNews(p => ({...p, cat: e.target.value}))} style={{ width: '100%', padding: '8px 10px', border: '1px solid var(--ink-200)', borderRadius: 'var(--r-sm)', background: '#fff', fontSize: 14 }}>
                            {['Communiqués officiels','Santé publique','Formations','Événements','Vie de l\'Ordre'].map(c => <option key={c}>{c}</option>)}
                          </select>
                        </div>
                        <div className="field" style={{ flex: 1 }}>
                          <label>Date de publication</label>
                          <input type="date" value={editNews.date_pub} onChange={e => setEditNews(p => ({...p, date_pub: e.target.value}))} />
                        </div>
                      </div>
                      <div className="field">
                        <label>Résumé</label>
                        <textarea value={editNews.excerpt} onChange={e => setEditNews(p => ({...p, excerpt: e.target.value}))} rows={2} placeholder="Résumé affiché sur la page d'accueil…" style={{ width: '100%', padding: '8px 10px', border: '1px solid var(--ink-200)', borderRadius: 'var(--r-sm)', fontSize: 14, resize: 'vertical' }} />
                      </div>
                      <div className="field">
                        <label>Contenu</label>
                        <textarea value={editNews.contenu} onChange={e => setEditNews(p => ({...p, contenu: e.target.value}))} rows={5} placeholder="Corps de l'article…" style={{ width: '100%', padding: '8px 10px', border: '1px solid var(--ink-200)', borderRadius: 'var(--r-sm)', fontSize: 14, resize: 'vertical' }} />
                      </div>
                      <label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer', fontSize: 14 }}>
                        <input type="checkbox" checked={editNews.publie} onChange={e => setEditNews(p => ({...p, publie: e.target.checked}))} />
                        Publié immédiatement
                      </label>
                    </div>
                    <div className="drawer-divider"></div>
                    <div style={{ display: 'flex', gap: 8 }}>
                      <button className="btn btn-ghost btn-sm" onClick={() => setEditNews(null)}>Annuler</button>
                      <button className="btn btn-primary btn-sm" style={{ flex: 1 }} onClick={async () => {
                        const payload = { titre: editNews.titre, cat: editNews.cat, excerpt: editNews.excerpt, contenu: editNews.contenu, date_pub: editNews.date_pub || null, publie: editNews.publie };
                        if (editNews._new) {
                          const { data: row } = await window.SB.from('actualites').insert(payload).select('id,slug,cat,date_pub,titre,excerpt,featured,publie').single();
                          if (row) setACTUALITES(prev => [row, ...prev]);
                        } else {
                          const { data: row } = await window.SB.from('actualites').update(payload).eq('id', editNews._id).select('id,slug,cat,date_pub,titre,excerpt,featured,publie').single();
                          if (row) setACTUALITES(prev => prev.map(n => n.id === row.id ? row : n));
                        }
                        setEditNews(null);
                      }}>
                        {editNews._new ? 'Publier' : 'Enregistrer'}
                      </button>
                    </div>
                  </aside>
                </div>
              )}

              {/* Confirmation suppression */}
              {confirmDeleteNews && (
                <div className="drawer-overlay" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }} onClick={() => setConfirmDeleteNews(null)}>
                  <div style={{ background: '#fff', borderRadius: 'var(--r-lg)', padding: 32, maxWidth: 400, width: '90%', boxShadow: 'var(--shadow-xl)' }} onClick={e => e.stopPropagation()}>
                    <h3 className="serif" style={{ marginBottom: 8 }}>Supprimer cet article ?</h3>
                    <p className="muted" style={{ fontSize: 14, marginBottom: 24 }}>Cette action est irréversible. L'article sera définitivement supprimé de la base de données et du site.</p>
                    <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
                      <button className="btn btn-ghost btn-sm" onClick={() => setConfirmDeleteNews(null)}>Annuler</button>
                      <button className="btn btn-sm" style={{ background: 'var(--red-status)', color: '#fff' }} onClick={async () => {
                        await window.SB.from('actualites').delete().eq('id', confirmDeleteNews);
                        setACTUALITES(prev => prev.filter(n => n.id !== confirmDeleteNews));
                        setConfirmDeleteNews(null);
                      }}>
                        Supprimer définitivement
                      </button>
                    </div>
                  </div>
                </div>
              )}
            </>
          )}

          {/* TEXTES */}
          {section === "textes" && (
            <>
              <div className="admin-section-head">
                <h2 className="serif">Réglementation</h2>
                <p className="muted">{TEXTES_DB.length} texte{TEXTES_DB.length !== 1 ? 's' : ''} en vigueur.</p>
                <div className="admin-actions">
                  <button className="btn btn-primary btn-sm" onClick={() => setEditTexte({ _new: true, type: 'Arrêté', num: '', titre: '', cat: 'Organisation', date_pub: new Date().toISOString().slice(0,10), fichier_url: '' })}>
                    <Icon.Doc size={12} /> + Déposer un texte
                  </button>
                </div>
              </div>
              <div className="card" style={{ padding: 0 }}>
                <table className="data-table">
                  <thead><tr><th>Type</th><th>Numéro</th><th>Titre</th><th>Catégorie</th><th>Date</th><th></th></tr></thead>
                  <tbody>
                    {TEXTES_DB.map(t => (
                      <tr key={t.id}>
                        <td><span className="tag tag-gray">{t.type}</span></td>
                        <td className="mono" style={{ color: "var(--c-primary)" }}>N° {t.num}</td>
                        <td><b>{t.titre}</b></td>
                        <td>{t.cat}</td>
                        <td className="muted">{t.date_pub ? new Date(t.date_pub).toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' }) : '—'}</td>
                        <td style={{ textAlign: "right" }}>
                          <div className="admin-row-actions">
                            <button title="Modifier" onClick={() => setEditTexte({ _id: t.id, type: t.type, num: t.num, titre: t.titre, cat: t.cat || '', date_pub: t.date_pub || '', fichier_url: t.fichier_url || '' })}><Icon.Doc size={14} /></button>
                            <button title="Supprimer" style={{ color: 'var(--red-status)' }} onClick={() => setConfirmDeleteTexte(t.id)}><Icon.X size={14} /></button>
                          </div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>

              {/* Modal édition / création texte */}
              {editTexte && (
                <div className="drawer-overlay" onClick={() => setEditTexte(null)}>
                  <aside className="drawer" style={{ maxWidth: 520 }} onClick={e => e.stopPropagation()}>
                    <button className="drawer-close" onClick={() => setEditTexte(null)}><Icon.X size={16} /></button>
                    <div className="eyebrow">{editTexte._new ? 'Nouveau texte' : 'Modifier le texte'}</div>
                    <h2 className="serif" style={{ marginTop: 8 }}>{editTexte._new ? 'Déposer un texte réglementaire' : editTexte.titre || 'Sans titre'}</h2>
                    <div className="drawer-divider"></div>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                      <div style={{ display: 'flex', gap: 12 }}>
                        <div className="field" style={{ flex: 1 }}>
                          <label>Type</label>
                          <select value={editTexte.type} onChange={e => setEditTexte(p => ({...p, type: e.target.value}))} style={{ width: '100%', padding: '8px 10px', border: '1px solid var(--ink-200)', borderRadius: 'var(--r-sm)', background: '#fff', fontSize: 14 }}>
                            {['Loi','Décret','Arrêté','Règlement','Circulaire','Ordonnance'].map(c => <option key={c}>{c}</option>)}
                          </select>
                        </div>
                        <div className="field" style={{ flex: 1 }}>
                          <label>Numéro</label>
                          <input value={editTexte.num} onChange={e => setEditTexte(p => ({...p, num: e.target.value}))} placeholder="ex: 2026-042" />
                        </div>
                      </div>
                      <div className="field">
                        <label>Titre</label>
                        <input value={editTexte.titre} onChange={e => setEditTexte(p => ({...p, titre: e.target.value}))} placeholder="Intitulé du texte…" />
                      </div>
                      <div style={{ display: 'flex', gap: 12 }}>
                        <div className="field" style={{ flex: 1 }}>
                          <label>Catégorie</label>
                          <select value={editTexte.cat} onChange={e => setEditTexte(p => ({...p, cat: e.target.value}))} style={{ width: '100%', padding: '8px 10px', border: '1px solid var(--ink-200)', borderRadius: 'var(--r-sm)', background: '#fff', fontSize: 14 }}>
                            {['Organisation','Loi-cadre','Officine','Inscription','Déontologie','Santé publique','Formation'].map(c => <option key={c}>{c}</option>)}
                          </select>
                        </div>
                        <div className="field" style={{ flex: 1 }}>
                          <label>Date de publication</label>
                          <input type="date" value={editTexte.date_pub} onChange={e => setEditTexte(p => ({...p, date_pub: e.target.value}))} />
                        </div>
                      </div>
                      <div className="field">
                        <label>URL du fichier (PDF)</label>
                        <input value={editTexte.fichier_url} onChange={e => setEditTexte(p => ({...p, fichier_url: e.target.value}))} placeholder="https://…/document.pdf" />
                      </div>
                    </div>
                    <div className="drawer-divider"></div>
                    <div style={{ display: 'flex', gap: 8 }}>
                      <button className="btn btn-ghost btn-sm" onClick={() => setEditTexte(null)}>Annuler</button>
                      <button className="btn btn-primary btn-sm" style={{ flex: 1 }} onClick={async () => {
                        const payload = { type: editTexte.type, num: editTexte.num, titre: editTexte.titre, cat: editTexte.cat, date_pub: editTexte.date_pub || null, fichier_url: editTexte.fichier_url || null };
                        if (editTexte._new) {
                          const { data: row } = await window.SB.from('textes_officiels').insert(payload).select('*').single();
                          if (row) setTEXTES_DB(prev => [row, ...prev]);
                        } else {
                          const { data: row } = await window.SB.from('textes_officiels').update(payload).eq('id', editTexte._id).select('*').single();
                          if (row) setTEXTES_DB(prev => prev.map(t => t.id === row.id ? row : t));
                        }
                        setEditTexte(null);
                      }}>
                        {editTexte._new ? 'Déposer' : 'Enregistrer'}
                      </button>
                    </div>
                  </aside>
                </div>
              )}

              {/* Confirmation suppression */}
              {confirmDeleteTexte && (
                <div className="drawer-overlay" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }} onClick={() => setConfirmDeleteTexte(null)}>
                  <div style={{ background: '#fff', borderRadius: 'var(--r-lg)', padding: 32, maxWidth: 400, width: '90%', boxShadow: 'var(--shadow-xl)' }} onClick={e => e.stopPropagation()}>
                    <h3 className="serif" style={{ marginBottom: 8 }}>Supprimer ce texte ?</h3>
                    <p className="muted" style={{ fontSize: 14, marginBottom: 24 }}>Cette action est irréversible. Le texte sera définitivement supprimé de la base de données et du site.</p>
                    <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
                      <button className="btn btn-ghost btn-sm" onClick={() => setConfirmDeleteTexte(null)}>Annuler</button>
                      <button className="btn btn-sm" style={{ background: 'var(--red-status)', color: '#fff' }} onClick={async () => {
                        await window.SB.from('textes_officiels').delete().eq('id', confirmDeleteTexte);
                        setTEXTES_DB(prev => prev.filter(t => t.id !== confirmDeleteTexte));
                        setConfirmDeleteTexte(null);
                      }}>
                        Supprimer définitivement
                      </button>
                    </div>
                  </div>
                </div>
              )}
            </>
          )}

          {/* ÉVÉNEMENTS */}
          {section === "evenements" && (
            <>
              <div className="admin-section-head">
                <h2 className="serif">Événements & Programme DPC</h2>
                <p className="muted">Agenda — {EVENTS.length} événements · {DPC_VALIDATIONS.length} validations DPC.</p>
                <div className="admin-actions">
                  {evtTab === 'evenements' && (
                    <button className="btn btn-primary btn-sm" onClick={() => setEditEvent({ _new: true, titre: '', type: 'Formation', date_debut: '', lieu: '', desc: '', places: '' })}>
                      + Nouvel événement
                    </button>
                  )}
                  {evtTab === 'dpc' && (
                    <button className="btn btn-primary btn-sm" onClick={() => setEditDPC({ _new: true, membre_num: MEMBERS[0]?.num || '', annee: new Date().getFullYear(), heures: '', statut: 'valide' })}>
                      + Ajouter une validation
                    </button>
                  )}
                </div>
              </div>

              <div className="filter-bar" style={{ marginBottom: 16 }}>
                <button className={`filter-chip ${evtTab === 'evenements' ? 'active' : ''}`} onClick={() => setEvtTab('evenements')}>
                  Événements ({EVENTS.length})
                </button>
                <button className={`filter-chip ${evtTab === 'dpc' ? 'active' : ''}`} onClick={() => setEvtTab('dpc')}>
                  Programme DPC ({DPC_VALIDATIONS.length})
                </button>
              </div>

              {evtTab === 'evenements' && (
                <div className="event-list">
                  {EVENTS.map((e) => (
                    <div key={e.id} className="event-card">
                      <div className="event-date">
                        <div className="event-date-d serif">{e.jour}</div>
                        <div className="event-date-m">{e.mois}</div>
                      </div>
                      <div className="event-body">
                        <div className="event-meta">
                          <span className="tag">{e.type}</span>
                          <span className="muted" style={{ fontSize: 13 }}><Icon.Pin size={11} /> {e.lieu}</span>
                        </div>
                        <h4 className="serif">{e.titre}</h4>
                        <p className="muted">{e.desc}</p>
                      </div>
                      <div className="event-cta">
                        <div className="event-places">{e.places}</div>
                        <div className="admin-row-actions">
                          <button title="Modifier" onClick={() => setEditEvent({ _id: e.id, titre: e.titre, type: e.type, date_debut: e.date_debut, lieu: e.lieu === '—' ? '' : e.lieu, desc: e.desc, places: e.places })}><Icon.Doc size={14} /></button>
                          <button title="Supprimer" style={{ color: 'var(--red-status)' }} onClick={() => setConfirmDeleteEvent(e.id)}><Icon.X size={14} /></button>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              )}

              {evtTab === 'dpc' && (
                <div className="card" style={{ padding: 0 }}>
                  <table className="data-table">
                    <thead>
                      <tr><th>N° membre</th><th>Nom</th><th>Année</th><th>Heures</th><th>Statut</th><th></th></tr>
                    </thead>
                    <tbody>
                      {DPC_VALIDATIONS.map(d => {
                        const m = MEMBERS.find(x => x.num === d.membre_num);
                        return (
                          <tr key={d.id}>
                            <td className="mono" style={{ color: 'var(--c-primary)', fontWeight: 600 }}>{d.membre_num}</td>
                            <td><b>{m?.nom || d.membre_num}</b></td>
                            <td>{d.annee}</td>
                            <td>{d.heures}h</td>
                            <td>
                              {d.statut === 'valide'
                                ? <><span className="status-dot status-active"></span> Validé</>
                                : d.statut === 'en_attente'
                                  ? <><span className="status-dot" style={{ background: 'var(--c-gold, #d97706)' }}></span> En attente</>
                                  : <><span className="status-dot" style={{ background: 'var(--red-status)' }}></span> Rejeté</>}
                            </td>
                            <td style={{ textAlign: 'right' }}>
                              <div className="admin-row-actions">
                                <button title="Modifier" onClick={() => setEditDPC({ _id: d.id, membre_num: d.membre_num, annee: d.annee, heures: String(d.heures), statut: d.statut })}><Icon.Doc size={14} /></button>
                                <button title="Supprimer" style={{ color: 'var(--red-status)' }} onClick={async () => {
                                  await window.SB.from('dpc_validations').delete().eq('id', d.id);
                                  setDPC_VALIDATIONS(prev => prev.filter(x => x.id !== d.id));
                                }}><Icon.X size={14} /></button>
                              </div>
                            </td>
                          </tr>
                        );
                      })}
                    </tbody>
                  </table>
                </div>
              )}

              {/* Drawer créer/modifier événement */}
              {editEvent && (
                <div className="drawer-overlay" onClick={() => setEditEvent(null)}>
                  <aside className="drawer" style={{ maxWidth: 540 }} onClick={e => e.stopPropagation()}>
                    <button className="drawer-close" onClick={() => setEditEvent(null)}><Icon.X size={16} /></button>
                    <div className="eyebrow">{editEvent._new ? 'Nouvel événement' : 'Modifier l\'événement'}</div>
                    <h2 className="serif" style={{ marginTop: 8 }}>{editEvent._new ? 'Programmer un événement' : editEvent.titre}</h2>
                    <div className="drawer-divider"></div>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                      <div className="field">
                        <label>Titre</label>
                        <input value={editEvent.titre} onChange={e => setEditEvent(p => ({...p, titre: e.target.value}))} placeholder="Titre de l'événement" />
                      </div>
                      <div style={{ display: 'flex', gap: 12 }}>
                        <div className="field" style={{ flex: 1 }}>
                          <label>Type</label>
                          <select value={editEvent.type} onChange={e => setEditEvent(p => ({...p, type: e.target.value}))} style={{ width: '100%', padding: '8px 10px', border: '1px solid var(--ink-200)', borderRadius: 'var(--r-sm)', background: '#fff', fontSize: 14 }}>
                            {['Formation','DPC','Assemblée générale','Conférence','Réunion du Conseil','Séminaire'].map(t => <option key={t}>{t}</option>)}
                          </select>
                        </div>
                        <div className="field" style={{ flex: 1 }}>
                          <label>Date</label>
                          <input type="date" value={editEvent.date_debut || ''} onChange={e => setEditEvent(p => ({...p, date_debut: e.target.value}))} />
                        </div>
                      </div>
                      <div style={{ display: 'flex', gap: 12 }}>
                        <div className="field" style={{ flex: 1 }}>
                          <label>Lieu</label>
                          <input value={editEvent.lieu || ''} onChange={e => setEditEvent(p => ({...p, lieu: e.target.value}))} placeholder="Salle, ville…" />
                        </div>
                        <div className="field" style={{ flex: 1 }}>
                          <label>Places</label>
                          <input value={editEvent.places || ''} onChange={e => setEditEvent(p => ({...p, places: e.target.value}))} placeholder="ex: 50 places" />
                        </div>
                      </div>
                      <div className="field">
                        <label>Description</label>
                        <textarea value={editEvent.desc || ''} onChange={e => setEditEvent(p => ({...p, desc: e.target.value}))} rows={3} placeholder="Description de l'événement…" style={{ width: '100%', padding: '8px 10px', border: '1px solid var(--ink-200)', borderRadius: 'var(--r-sm)', fontSize: 14, resize: 'vertical' }} />
                      </div>
                    </div>
                    <div className="drawer-divider"></div>
                    <div style={{ display: 'flex', gap: 8 }}>
                      <button className="btn btn-ghost btn-sm" onClick={() => setEditEvent(null)}>Annuler</button>
                      <button className="btn btn-primary btn-sm" style={{ flex: 1 }} onClick={async () => {
                        const MOIS_FR_EVT = ['Jan','Fév','Mar','Avr','Mai','Juin','Juil','Août','Sept','Oct','Nov','Déc'];
                        const payload = { titre: editEvent.titre, type: editEvent.type, date_debut: editEvent.date_debut || null, lieu: editEvent.lieu || null, description: editEvent.desc || null, places: editEvent.places || null };
                        const toRow = (row) => {
                          const d = row.date_debut ? new Date(row.date_debut + 'T12:00:00') : null;
                          return { id: row.id, titre: row.titre, type: row.type || 'Événement', date: d ? d.toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' }) : '—', jour: d ? String(d.getDate()).padStart(2, '0') : '—', mois: d ? MOIS_FR_EVT[d.getMonth()] : '—', lieu: row.lieu || '—', desc: row.description || '', places: row.places || '', date_debut: row.date_debut || '' };
                        };
                        if (editEvent._new) {
                          const { data: row, error } = await window.SB.from('evenements').insert(payload).select('*').single();
                          if (!error && row) setEVENTS(prev => [...prev, toRow(row)].sort((a, b) => (a.date_debut || '').localeCompare(b.date_debut || '')));
                        } else {
                          const { error } = await window.SB.from('evenements').update(payload).eq('id', editEvent._id);
                          if (!error) setEVENTS(prev => prev.map(x => x.id === editEvent._id ? toRow({ ...payload, id: editEvent._id }) : x));
                        }
                        setEditEvent(null);
                      }}>{editEvent._new ? 'Enregistrer' : 'Sauvegarder'}</button>
                    </div>
                  </aside>
                </div>
              )}

              {/* Drawer créer/modifier validation DPC */}
              {editDPC && (
                <div className="drawer-overlay" onClick={() => setEditDPC(null)}>
                  <aside className="drawer" style={{ maxWidth: 480 }} onClick={e => e.stopPropagation()}>
                    <button className="drawer-close" onClick={() => setEditDPC(null)}><Icon.X size={16} /></button>
                    <div className="eyebrow">Programme DPC</div>
                    <h2 className="serif" style={{ marginTop: 8 }}>{editDPC._new ? 'Ajouter une validation' : 'Modifier la validation'}</h2>
                    <div className="drawer-divider"></div>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                      <div className="field">
                        <label>Membre</label>
                        <select value={editDPC.membre_num} onChange={e => setEditDPC(p => ({...p, membre_num: e.target.value}))} style={{ width: '100%', padding: '8px 10px', border: '1px solid var(--ink-200)', borderRadius: 'var(--r-sm)', background: '#fff', fontSize: 14 }}>
                          {MEMBERS.map(m => <option key={m.num} value={m.num}>{m.nom} ({m.num})</option>)}
                        </select>
                      </div>
                      <div style={{ display: 'flex', gap: 12 }}>
                        <div className="field" style={{ flex: 1 }}>
                          <label>Année</label>
                          <input type="number" value={editDPC.annee} onChange={e => setEditDPC(p => ({...p, annee: parseInt(e.target.value)}))} min="2020" max="2030" />
                        </div>
                        <div className="field" style={{ flex: 1 }}>
                          <label>Heures validées</label>
                          <input type="number" value={editDPC.heures} onChange={e => setEditDPC(p => ({...p, heures: e.target.value}))} min="0" placeholder="ex: 14" />
                        </div>
                      </div>
                      <div className="field">
                        <label>Statut</label>
                        <select value={editDPC.statut} onChange={e => setEditDPC(p => ({...p, statut: e.target.value}))} style={{ width: '100%', padding: '8px 10px', border: '1px solid var(--ink-200)', borderRadius: 'var(--r-sm)', background: '#fff', fontSize: 14 }}>
                          {[['valide','Validé'],['en_attente','En attente'],['rejete','Rejeté']].map(([v, l]) => <option key={v} value={v}>{l}</option>)}
                        </select>
                      </div>
                    </div>
                    <div className="drawer-divider"></div>
                    <div style={{ display: 'flex', gap: 8 }}>
                      <button className="btn btn-ghost btn-sm" onClick={() => setEditDPC(null)}>Annuler</button>
                      <button className="btn btn-primary btn-sm" style={{ flex: 1 }} onClick={async () => {
                        const payload = { membre_num: editDPC.membre_num, annee: editDPC.annee, heures: Number(editDPC.heures), statut: editDPC.statut };
                        if (editDPC._new) {
                          const { data: row, error } = await window.SB.from('dpc_validations').insert(payload).select('*').single();
                          if (!error && row) setDPC_VALIDATIONS(prev => [row, ...prev]);
                        } else {
                          const { error } = await window.SB.from('dpc_validations').update(payload).eq('id', editDPC._id);
                          if (!error) setDPC_VALIDATIONS(prev => prev.map(x => x.id === editDPC._id ? {...x, ...payload} : x));
                        }
                        setEditDPC(null);
                      }}>{editDPC._new ? 'Enregistrer' : 'Sauvegarder'}</button>
                    </div>
                  </aside>
                </div>
              )}

              {/* Confirmation suppression événement */}
              {confirmDeleteEvent && (
                <div className="drawer-overlay" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }} onClick={() => setConfirmDeleteEvent(null)}>
                  <div style={{ background: '#fff', borderRadius: 'var(--r-lg)', padding: 32, maxWidth: 400, width: '90%', boxShadow: 'var(--shadow-xl)' }} onClick={e => e.stopPropagation()}>
                    <h3 className="serif" style={{ marginBottom: 8 }}>Supprimer cet événement ?</h3>
                    <p className="muted" style={{ fontSize: 14, marginBottom: 24 }}>Cette action est irréversible. L'événement sera retiré de l'agenda.</p>
                    <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
                      <button className="btn btn-ghost btn-sm" onClick={() => setConfirmDeleteEvent(null)}>Annuler</button>
                      <button className="btn btn-sm" style={{ background: 'var(--red-status)', color: '#fff' }} onClick={async () => {
                        await window.SB.from('evenements').delete().eq('id', confirmDeleteEvent);
                        setEVENTS(prev => prev.filter(x => x.id !== confirmDeleteEvent));
                        setConfirmDeleteEvent(null);
                      }}>Supprimer définitivement</button>
                    </div>
                  </div>
                </div>
              )}
            </>
          )}

          {/* BUREAU */}
          {section === "bureau" && (
            <>
              <div className="admin-section-head">
                <h2 className="serif">Bureau & Conseil National</h2>
                <p className="muted">{BUREAU.length} membre{BUREAU.length !== 1 ? 's' : ''} — mandat en cours.</p>
                <div className="admin-actions">
                  <button className="btn btn-primary btn-sm" onClick={() => setEditBureau({ _new: true, nom: '', role: 'Conseiller', ville: '', mandat: '2026-2029', ordre_sort: BUREAU.length + 1 })}>
                    + Ajouter un membre
                  </button>
                </div>
              </div>
              <div className="bureau-grid">
                {BUREAU.map((m) => (
                  <div key={m.id} className="card bureau-card">
                    {m.photo_url
                      ? <img src={m.photo_url} alt={m.nom} style={{ aspectRatio: '1/1', width: '100%', objectFit: 'cover', borderRadius: 'var(--r-md)', marginBottom: 14 }} />
                      : <div className="ph" style={{ aspectRatio: '1/1', borderRadius: 'var(--r-md)', marginBottom: 14 }} data-label="[ Portrait ]"></div>}
                    <div className="bureau-role">{m.role}</div>
                    <div className="bureau-nom serif">{m.nom}</div>
                    <div className="bureau-ville">{m.ville || '—'} · {m.mandat || '—'}</div>
                    <div style={{ display: "flex", gap: 6, marginTop: 14 }}>
                      <button className="btn btn-ghost btn-sm" style={{ flex: 1 }} onClick={() => setEditBureau({...m})}>Modifier</button>
                      <button className="btn btn-ghost btn-sm" style={{ color: 'var(--red-status)' }} title="Supprimer" onClick={() => setConfirmDeleteBureau(m.id)}><Icon.X size={14} /></button>
                    </div>
                  </div>
                ))}
              </div>

              {/* Drawer créer/modifier membre bureau */}
              {editBureau && (
                <div className="drawer-overlay" onClick={() => setEditBureau(null)}>
                  <aside className="drawer" style={{ maxWidth: 520 }} onClick={e => e.stopPropagation()}>
                    <button className="drawer-close" onClick={() => setEditBureau(null)}><Icon.X size={16} /></button>
                    <div className="eyebrow">{editBureau._new ? 'Nouveau membre' : 'Modifier le membre'}</div>
                    <h2 className="serif" style={{ marginTop: 8 }}>{editBureau._new ? 'Ajouter au Bureau' : editBureau.nom}</h2>
                    <div className="drawer-divider"></div>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>

                      {/* Photo */}
                      <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                        <div style={{ width: 72, height: 72, borderRadius: 'var(--r-md)', background: 'var(--ink-100)', overflow: 'hidden', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                          {editBureau.photo_url
                            ? <img src={editBureau.photo_url} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                            : <Icon.Users size={24} style={{ color: 'var(--ink-300)' }} />}
                        </div>
                        <div style={{ flex: 1 }}>
                          <div className="field" style={{ marginBottom: 6 }}>
                            <label>URL de la photo</label>
                            <input value={editBureau.photo_url} onChange={e => setEditBureau(p => ({...p, photo_url: e.target.value}))} placeholder="https://…/portrait.jpg" />
                          </div>
                          <label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer', fontSize: 13, color: 'var(--c-primary)' }}>
                            <input type="file" accept="image/*" style={{ display: 'none' }} onChange={async e => {
                              const file = e.target.files[0];
                              if (!file) return;
                              const session = (await window.SB.auth.getSession()).data.session;
                              const filePath = `bureau/${Date.now()}_${file.name.replace(/\s+/g, '_')}`;
                              const res = await fetch('https://opn-upload.lkjogole.workers.dev', {
                                method: 'POST',
                                headers: {
                                  Authorization: `Bearer ${session?.access_token}`,
                                  'Content-Type': file.type || 'application/octet-stream',
                                  'X-File-Path': filePath,
                                },
                                body: await file.arrayBuffer(),
                              });
                              if (res.ok) {
                                const { url } = await res.json();
                                setEditBureau(p => ({...p, photo_url: url}));
                              }
                            }} />
                            <Icon.Doc size={13} /> Téléverser depuis l'appareil
                          </label>
                        </div>
                      </div>

                      <div className="field">
                        <label>Nom complet</label>
                        <input value={editBureau.nom} onChange={e => setEditBureau(p => ({...p, nom: e.target.value}))} placeholder="Pr. / Dr. Nom Prénom" />
                      </div>
                      <div className="field">
                        <label>Rôle / Fonction</label>
                        <select value={editBureau.role} onChange={e => setEditBureau(p => ({...p, role: e.target.value}))} style={{ width: '100%', padding: '8px 10px', border: '1px solid var(--ink-200)', borderRadius: 'var(--r-sm)', background: '#fff', fontSize: 14 }}>
                          {['Président','Vice-Président','Secrétaire Général','Trésorier','Assesseur','Conseiller'].map(r => <option key={r}>{r}</option>)}
                        </select>
                      </div>
                      <div style={{ display: 'flex', gap: 12 }}>
                        <div className="field" style={{ flex: 1 }}>
                          <label>Ville</label>
                          <input value={editBureau.ville} onChange={e => setEditBureau(p => ({...p, ville: e.target.value}))} placeholder="Niamey" />
                        </div>
                        <div className="field" style={{ flex: 1 }}>
                          <label>Mandat</label>
                          <input value={editBureau.mandat} onChange={e => setEditBureau(p => ({...p, mandat: e.target.value}))} placeholder="2026-2029" />
                        </div>
                      </div>
                      <div style={{ display: 'flex', gap: 12 }}>
                        <div className="field" style={{ flex: 1 }}>
                          <label>Email</label>
                          <input type="email" value={editBureau.email} onChange={e => setEditBureau(p => ({...p, email: e.target.value}))} placeholder="nom@opn.ne" />
                        </div>
                        <div className="field" style={{ flex: 1 }}>
                          <label>Téléphone</label>
                          <input value={editBureau.tel} onChange={e => setEditBureau(p => ({...p, tel: e.target.value}))} placeholder="+227 …" />
                        </div>
                      </div>
                      <div className="field" style={{ maxWidth: 140 }}>
                        <label>Ordre d'affichage</label>
                        <input type="number" value={editBureau.ordre_sort} onChange={e => setEditBureau(p => ({...p, ordre_sort: parseInt(e.target.value)}))} min="1" />
                      </div>
                    </div>
                    <div className="drawer-divider"></div>
                    <div style={{ display: 'flex', gap: 8 }}>
                      <button className="btn btn-ghost btn-sm" onClick={() => setEditBureau(null)}>Annuler</button>
                      <button className="btn btn-primary btn-sm" style={{ flex: 1 }} onClick={async () => {
                        const payload = { nom: editBureau.nom, role: editBureau.role, ville: editBureau.ville || null, mandat: editBureau.mandat || null, email: editBureau.email || null, tel: editBureau.tel || null, photo_url: editBureau.photo_url || null, ordre_sort: editBureau.ordre_sort };
                        if (editBureau._new) {
                          const { data: row, error } = await window.SB.from('bureau').insert(payload).select('*').single();
                          if (!error && row) setBUREAU(prev => [...prev, { id: row.id, ...payload }].sort((a, b) => a.ordre_sort - b.ordre_sort));
                        } else {
                          const { error } = await window.SB.from('bureau').update(payload).eq('id', editBureau.id);
                          if (!error) setBUREAU(prev => prev.map(x => x.id === editBureau.id ? {...x, ...payload} : x).sort((a, b) => a.ordre_sort - b.ordre_sort));
                        }
                        setEditBureau(null);
                      }}>{editBureau._new ? 'Enregistrer' : 'Sauvegarder'}</button>
                    </div>
                  </aside>
                </div>
              )}

              {/* Confirmation suppression */}
              {confirmDeleteBureau && (
                <div className="drawer-overlay" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }} onClick={() => setConfirmDeleteBureau(null)}>
                  <div style={{ background: '#fff', borderRadius: 'var(--r-lg)', padding: 32, maxWidth: 400, width: '90%', boxShadow: 'var(--shadow-xl)' }} onClick={e => e.stopPropagation()}>
                    <h3 className="serif" style={{ marginBottom: 8 }}>Retirer ce membre du Bureau ?</h3>
                    <p className="muted" style={{ fontSize: 14, marginBottom: 24 }}>Cette action est irréversible. Le membre sera supprimé de la composition du Conseil.</p>
                    <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
                      <button className="btn btn-ghost btn-sm" onClick={() => setConfirmDeleteBureau(null)}>Annuler</button>
                      <button className="btn btn-sm" style={{ background: 'var(--red-status)', color: '#fff' }} onClick={async () => {
                        await window.SB.from('bureau').delete().eq('id', confirmDeleteBureau);
                        setBUREAU(prev => prev.filter(x => x.id !== confirmDeleteBureau));
                        setConfirmDeleteBureau(null);
                      }}>Supprimer définitivement</button>
                    </div>
                  </div>
                </div>
              )}
            </>
          )}

          {/* ALERTES */}
          {section === "alertes" && (() => {
            const TRIAGE = {
              critique: { border: '#B91C1C', badgeBg: '#FEF2F2', badgeColor: '#991B1B', label: 'CRITIQUE' },
              'élevé':  { border: '#B45309', badgeBg: '#FFFBEB', badgeColor: '#92400E', label: 'ÉLEVÉ' },
              info:     { border: '#1D4ED8', badgeBg: '#EFF6FF', badgeColor: '#1E40AF', label: 'INFO' },
            };
            const fmtDate = d => d ? new Date(d + 'T12:00:00').toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', year: 'numeric' }) : '—';
            const actives = ALERTES_DB.filter(a => a.active).length;
            return (
              <>
                <div className="admin-section-head">
                  <div>
                    <h2 className="serif">Alertes sanitaires</h2>
                    <p className="muted" style={{ marginTop: 3, fontSize: 13 }}>{actives} en cours · {ALERTES_DB.length - actives} archivée{ALERTES_DB.length - actives !== 1 ? 's' : ''}</p>
                  </div>
                  <button className="btn btn-primary btn-sm" onClick={() => setEditAlerte({ id: null, ref: '', niveau: 'critique', date_pub: new Date().toISOString().slice(0,10), titre: '', lot: '', description: '', action: '', active: true })}>+ Nouvelle alerte</button>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                  {ALERTES_DB.map(a => {
                    const t = TRIAGE[a.niveau] || TRIAGE.info;
                    return (
                      <div
                        key={a.id}
                        onClick={() => setEditAlerte({...a})}
                        style={{
                          display: 'flex', alignItems: 'center', gap: 14,
                          background: '#fff',
                          border: '1px solid var(--ink-100)',
                          borderRadius: 'var(--r-md)',
                          borderLeft: `4px solid ${a.active ? t.border : 'var(--ink-200)'}`,
                          padding: '13px 16px',
                          opacity: a.active ? 1 : 0.48,
                          cursor: 'pointer',
                          transition: 'box-shadow 120ms',
                        }}
                        onMouseEnter={e => e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.08)'}
                        onMouseLeave={e => e.currentTarget.style.boxShadow = 'none'}
                      >
                        <span style={{
                          flexShrink: 0, width: 64, textAlign: 'center',
                          fontSize: 10, fontWeight: 700, letterSpacing: '0.07em',
                          padding: '4px 0', borderRadius: 4,
                          background: a.active ? t.badgeBg : 'var(--ink-100)',
                          color: a.active ? t.badgeColor : 'var(--ink-400)',
                          fontFamily: 'var(--ff-mono, monospace)',
                          textTransform: 'uppercase',
                        }}>{t.label}</span>
                        <div style={{ flex: 1, minWidth: 0 }}>
                          <div style={{ fontWeight: 600, fontSize: 13.5, color: 'var(--ink-900)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{a.titre}</div>
                          <div style={{ display: 'flex', gap: 10, marginTop: 2 }}>
                            <span style={{ fontSize: 11.5, color: 'var(--ink-400)', fontFamily: 'var(--ff-mono, monospace)' }}>{a.ref || '—'}</span>
                            {a.lot && <span style={{ fontSize: 11.5, color: 'var(--ink-400)' }}>· {a.lot}</span>}
                          </div>
                        </div>
                        <span style={{ flexShrink: 0, fontSize: 12, color: 'var(--ink-400)', whiteSpace: 'nowrap' }}>{fmtDate(a.date_pub)}</span>
                        <span style={{
                          flexShrink: 0, fontSize: 11, fontWeight: 500,
                          padding: '3px 10px', borderRadius: 99,
                          background: a.active ? '#DCFCE7' : 'var(--ink-100)',
                          color: a.active ? '#166534' : 'var(--ink-400)',
                        }}>{a.active ? 'active' : 'archivée'}</span>
                        <Icon.ArrowRight size={13} style={{ flexShrink: 0, color: 'var(--ink-300)' }} />
                      </div>
                    );
                  })}
                  {ALERTES_DB.length === 0 && (
                    <div style={{ textAlign: 'center', padding: '48px 0', color: 'var(--ink-400)', fontSize: 14 }}>Aucune alerte enregistrée.</div>
                  )}
                </div>
              </>
            );
          })()}

          {/* CONTENU ÉDITORIAL — Portraits, Podcasts, Guides, Offres, FAQs */}
          {section === "contenu" && (
            <>
              <div className="admin-section-head">
                <h2 className="serif">Contenu éditorial</h2>
                <p className="muted">Portraits, podcasts, guides santé, offres d'emploi et FAQ.</p>
                <div className="admin-actions">
                  {contenuTab === 'portraits' && <button className="btn btn-primary btn-sm" onClick={() => setEditPortrait({ _new: true, nom: '', ville: '', exercice: 'Officine', phrase: '', annees: 0, photo_url: '', ordre_sort: PORTRAITS_DB.length + 1 })}>+ Nouveau portrait</button>}
                  {contenuTab === 'podcasts'  && <button className="btn btn-primary btn-sm" onClick={() => setEditPodcast({ _new: true, titre: '', invite: '', duree: '', date: '', ordre_sort: PODCASTS_DB.length + 1 })}>+ Nouveau podcast</button>}
                  {contenuTab === 'guides'    && <button className="btn btn-primary btn-sm" onClick={() => setEditGuide({ _new: true, titre: '', duree: '', cat: 'Patient', excerpt: '', contenu: '', ordre_sort: GUIDES_DB.length + 1 })}>+ Nouveau guide</button>}
                  {contenuTab === 'offres'    && <button className="btn btn-primary btn-sm" onClick={() => setEditOffre({ _new: true, titre: '', lieu: '', type: 'CDI', date: '', remunere: '', publie: true })}>+ Nouvelle offre</button>}
                  {contenuTab === 'faqs'      && <button className="btn btn-primary btn-sm" onClick={() => setEditFaq({ _new: true, cat: 'Général', question: '', reponse: '', ordre_sort: FAQS_DB.length + 1 })}>+ Nouvelle FAQ</button>}
                </div>
              </div>

              <div className="filter-bar" style={{ marginBottom: 16 }}>
                {[['portraits','Portraits'],['podcasts','Podcasts'],['guides','Guides santé'],['offres','Offres emploi'],['faqs','FAQ']].map(([id, l]) => (
                  <button key={id} className={`filter-chip ${contenuTab === id ? 'active' : ''}`} onClick={() => setContenuTab(id)}>{l}</button>
                ))}
              </div>

              {/* PORTRAITS */}
              {contenuTab === 'portraits' && (
                <div className="card" style={{ padding: 0 }}>
                  <table className="data-table">
                    <thead><tr><th>Nom</th><th>Exercice</th><th>Ville</th><th>Années</th><th></th></tr></thead>
                    <tbody>
                      {PORTRAITS_DB.map(p => (
                        <tr key={p.id}>
                          <td><b>{p.nom}</b></td>
                          <td><span className="tag tag-gray">{p.exercice}</span></td>
                          <td>{p.ville}</td>
                          <td>{p.annees} ans</td>
                          <td style={{ textAlign: 'right' }}>
                            <div className="admin-row-actions">
                              <button onClick={() => setEditPortrait({...p})}><Icon.Doc size={14} /></button>
                              <button style={{ color: 'var(--red-status)' }} onClick={() => setConfirmDeletePortrait(p.id)}><Icon.X size={14} /></button>
                            </div>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}

              {/* PODCASTS */}
              {contenuTab === 'podcasts' && (
                <div className="card" style={{ padding: 0 }}>
                  <table className="data-table">
                    <thead><tr><th>Titre</th><th>Invité</th><th>Durée</th><th>Date</th><th></th></tr></thead>
                    <tbody>
                      {PODCASTS_DB.map(p => (
                        <tr key={p.id}>
                          <td><b>{p.titre}</b></td>
                          <td>{p.invite}</td>
                          <td className="mono">{p.duree}</td>
                          <td className="muted">{p.date}</td>
                          <td style={{ textAlign: 'right' }}>
                            <div className="admin-row-actions">
                              <button onClick={() => setEditPodcast({...p})}><Icon.Doc size={14} /></button>
                              <button style={{ color: 'var(--red-status)' }} onClick={() => setConfirmDeletePodcast(p.id)}><Icon.X size={14} /></button>
                            </div>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}

              {/* GUIDES */}
              {contenuTab === 'guides' && (
                <div className="card" style={{ padding: 0 }}>
                  <table className="data-table">
                    <thead><tr><th>Titre</th><th>Catégorie</th><th>Durée</th><th>Résumé</th><th></th></tr></thead>
                    <tbody>
                      {GUIDES_DB.map(g => (
                        <tr key={g.id}>
                          <td><b>{g.titre}</b></td>
                          <td><span className="tag tag-gray">{g.cat}</span></td>
                          <td className="mono">{g.duree}</td>
                          <td className="muted" style={{ maxWidth: 260, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{g.excerpt}</td>
                          <td style={{ textAlign: 'right' }}>
                            <div className="admin-row-actions">
                              <button onClick={() => setEditGuide({...g})}><Icon.Doc size={14} /></button>
                              <button style={{ color: 'var(--red-status)' }} onClick={() => setConfirmDeleteGuide(g.id)}><Icon.X size={14} /></button>
                            </div>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}

              {/* OFFRES */}
              {contenuTab === 'offres' && (
                <div className="card" style={{ padding: 0 }}>
                  <table className="data-table">
                    <thead><tr><th>Titre</th><th>Type</th><th>Lieu</th><th>Date</th><th>Statut</th><th></th></tr></thead>
                    <tbody>
                      {OFFRES_DB.map(o => (
                        <tr key={o.id}>
                          <td><b>{o.titre}</b></td>
                          <td><span className="tag tag-gray">{o.type}</span></td>
                          <td>{o.lieu}</td>
                          <td className="muted">{o.date}</td>
                          <td>{o.publie ? <><span className="status-dot status-active"></span>Publiée</> : <><span className="status-dot" style={{ background: 'var(--ink-300)' }}></span>Masquée</>}</td>
                          <td style={{ textAlign: 'right' }}>
                            <div className="admin-row-actions">
                              <button onClick={() => setEditOffre({...o})}><Icon.Doc size={14} /></button>
                              <button style={{ color: 'var(--red-status)' }} onClick={() => setConfirmDeleteOffre(o.id)}><Icon.X size={14} /></button>
                            </div>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}

              {/* FAQS */}
              {contenuTab === 'faqs' && (
                <div className="card" style={{ padding: 0 }}>
                  <table className="data-table">
                    <thead><tr><th>Catégorie</th><th>Question</th><th></th></tr></thead>
                    <tbody>
                      {FAQS_DB.map(f => (
                        <tr key={f.id}>
                          <td><span className="tag tag-gray">{f.cat}</span></td>
                          <td style={{ maxWidth: 400 }}><b>{f.question}</b></td>
                          <td style={{ textAlign: 'right' }}>
                            <div className="admin-row-actions">
                              <button onClick={() => setEditFaq({...f})}><Icon.Doc size={14} /></button>
                              <button style={{ color: 'var(--red-status)' }} onClick={() => setConfirmDeleteFaq(f.id)}><Icon.X size={14} /></button>
                            </div>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}

              {/* DRAWER — Portrait */}
              {editPortrait && (
                <div className="drawer-overlay" onClick={() => setEditPortrait(null)}>
                  <aside className="drawer" style={{ maxWidth: 520 }} onClick={e => e.stopPropagation()}>
                    <button className="drawer-close" onClick={() => setEditPortrait(null)}><Icon.X size={16} /></button>
                    <div className="eyebrow">{editPortrait._new ? 'Nouveau portrait' : 'Modifier le portrait'}</div>
                    <h2 className="serif" style={{ marginTop: 8 }}>{editPortrait._new ? 'Ajouter un portrait' : editPortrait.nom}</h2>
                    <div className="drawer-divider"></div>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                      <div className="field"><label>Nom complet</label><input value={editPortrait.nom} onChange={e => setEditPortrait(p => ({...p, nom: e.target.value}))} placeholder="Dr. Prénom Nom" /></div>
                      <div style={{ display: 'flex', gap: 12 }}>
                        <div className="field" style={{ flex: 1 }}><label>Ville</label><input value={editPortrait.ville} onChange={e => setEditPortrait(p => ({...p, ville: e.target.value}))} /></div>
                        <div className="field" style={{ flex: 1 }}><label>Années d'exercice</label><input type="number" min="0" value={editPortrait.annees} onChange={e => setEditPortrait(p => ({...p, annees: parseInt(e.target.value)||0}))} /></div>
                      </div>
                      <div className="field"><label>Mode d'exercice</label>
                        <select value={editPortrait.exercice} onChange={e => setEditPortrait(p => ({...p, exercice: e.target.value}))} style={{ width: '100%', padding: '8px 10px', border: '1px solid var(--ink-200)', borderRadius: 'var(--r-sm)', background: '#fff', fontSize: 14 }}>
                          {['Officine','Hospitalier','Industrie','Biologie','Distribution','Administration'].map(x => <option key={x}>{x}</option>)}
                        </select>
                      </div>
                      <div className="field"><label>Citation</label><textarea rows={3} value={editPortrait.phrase} onChange={e => setEditPortrait(p => ({...p, phrase: e.target.value}))} placeholder="Sa phrase emblématique…" style={{ width: '100%', padding: '8px 10px', border: '1px solid var(--ink-200)', borderRadius: 'var(--r-sm)', fontSize: 14, resize: 'vertical' }} /></div>
                      <div className="field"><label>URL photo</label><input value={editPortrait.photo_url} onChange={e => setEditPortrait(p => ({...p, photo_url: e.target.value}))} placeholder="https://…/photo.jpg" /></div>
                      <div className="field" style={{ maxWidth: 140 }}><label>Ordre d'affichage</label><input type="number" value={editPortrait.ordre_sort} onChange={e => setEditPortrait(p => ({...p, ordre_sort: parseInt(e.target.value)||99}))} /></div>
                    </div>
                    <div className="drawer-divider"></div>
                    <div style={{ display: 'flex', gap: 8 }}>
                      <button className="btn btn-ghost btn-sm" onClick={() => setEditPortrait(null)}>Annuler</button>
                      <button className="btn btn-primary btn-sm" style={{ flex: 1 }} onClick={async () => {
                        const payload = { nom: editPortrait.nom, ville: editPortrait.ville, exercice: editPortrait.exercice, phrase: editPortrait.phrase, annees: editPortrait.annees, photo_url: editPortrait.photo_url || null, ordre_sort: editPortrait.ordre_sort };
                        if (editPortrait._new) {
                          const { data: row, error } = await window.SB.from('portraits').insert(payload).select('*').single();
                          if (!error && row) setPORTRAITS_DB(prev => [...prev, row].sort((a, b) => a.ordre_sort - b.ordre_sort));
                        } else {
                          const { error } = await window.SB.from('portraits').update(payload).eq('id', editPortrait.id);
                          if (!error) setPORTRAITS_DB(prev => prev.map(x => x.id === editPortrait.id ? {...x, ...payload} : x));
                        }
                        setEditPortrait(null);
                      }}>{editPortrait._new ? 'Enregistrer' : 'Sauvegarder'}</button>
                    </div>
                  </aside>
                </div>
              )}
              {confirmDeletePortrait && (
                <div className="drawer-overlay" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }} onClick={() => setConfirmDeletePortrait(null)}>
                  <div style={{ background: '#fff', borderRadius: 'var(--r-lg)', padding: 32, maxWidth: 400, width: '90%', boxShadow: 'var(--shadow-xl)' }} onClick={e => e.stopPropagation()}>
                    <h3 className="serif" style={{ marginBottom: 8 }}>Supprimer ce portrait ?</h3>
                    <p className="muted" style={{ fontSize: 14, marginBottom: 24 }}>Action irréversible.</p>
                    <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
                      <button className="btn btn-ghost btn-sm" onClick={() => setConfirmDeletePortrait(null)}>Annuler</button>
                      <button className="btn btn-sm" style={{ background: 'var(--red-status)', color: '#fff' }} onClick={async () => {
                        await window.SB.from('portraits').delete().eq('id', confirmDeletePortrait);
                        setPORTRAITS_DB(prev => prev.filter(x => x.id !== confirmDeletePortrait));
                        setConfirmDeletePortrait(null);
                      }}>Supprimer</button>
                    </div>
                  </div>
                </div>
              )}

              {/* DRAWER — Podcast */}
              {editPodcast && (
                <div className="drawer-overlay" onClick={() => setEditPodcast(null)}>
                  <aside className="drawer" style={{ maxWidth: 480 }} onClick={e => e.stopPropagation()}>
                    <button className="drawer-close" onClick={() => setEditPodcast(null)}><Icon.X size={16} /></button>
                    <div className="eyebrow">{editPodcast._new ? 'Nouveau podcast' : 'Modifier le podcast'}</div>
                    <h2 className="serif" style={{ marginTop: 8 }}>{editPodcast._new ? 'Ajouter un épisode' : editPodcast.titre}</h2>
                    <div className="drawer-divider"></div>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                      <div className="field"><label>Titre de l'épisode</label><input value={editPodcast.titre} onChange={e => setEditPodcast(p => ({...p, titre: e.target.value}))} placeholder="Épisode 07 — …" /></div>
                      <div className="field"><label>Invité(e)</label><input value={editPodcast.invite} onChange={e => setEditPodcast(p => ({...p, invite: e.target.value}))} placeholder="Dr. Prénom Nom" /></div>
                      <div style={{ display: 'flex', gap: 12 }}>
                        <div className="field" style={{ flex: 1 }}><label>Durée</label><input value={editPodcast.duree} onChange={e => setEditPodcast(p => ({...p, duree: e.target.value}))} placeholder="32 min" /></div>
                        <div className="field" style={{ flex: 1 }}><label>Date</label><input value={editPodcast.date} onChange={e => setEditPodcast(p => ({...p, date: e.target.value}))} placeholder="juin 2026" /></div>
                      </div>
                      <div className="field" style={{ maxWidth: 140 }}><label>Ordre d'affichage</label><input type="number" value={editPodcast.ordre_sort} onChange={e => setEditPodcast(p => ({...p, ordre_sort: parseInt(e.target.value)||99}))} /></div>
                    </div>
                    <div className="drawer-divider"></div>
                    <div style={{ display: 'flex', gap: 8 }}>
                      <button className="btn btn-ghost btn-sm" onClick={() => setEditPodcast(null)}>Annuler</button>
                      <button className="btn btn-primary btn-sm" style={{ flex: 1 }} onClick={async () => {
                        const payload = { titre: editPodcast.titre, invite: editPodcast.invite, duree: editPodcast.duree, date: editPodcast.date, ordre_sort: editPodcast.ordre_sort };
                        if (editPodcast._new) {
                          const { data: row, error } = await window.SB.from('podcasts').insert(payload).select('*').single();
                          if (!error && row) setPODCASTS_DB(prev => [...prev, row].sort((a, b) => a.ordre_sort - b.ordre_sort));
                        } else {
                          const { error } = await window.SB.from('podcasts').update(payload).eq('id', editPodcast.id);
                          if (!error) setPODCASTS_DB(prev => prev.map(x => x.id === editPodcast.id ? {...x, ...payload} : x));
                        }
                        setEditPodcast(null);
                      }}>{editPodcast._new ? 'Enregistrer' : 'Sauvegarder'}</button>
                    </div>
                  </aside>
                </div>
              )}
              {confirmDeletePodcast && (
                <div className="drawer-overlay" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }} onClick={() => setConfirmDeletePodcast(null)}>
                  <div style={{ background: '#fff', borderRadius: 'var(--r-lg)', padding: 32, maxWidth: 400, width: '90%', boxShadow: 'var(--shadow-xl)' }} onClick={e => e.stopPropagation()}>
                    <h3 className="serif" style={{ marginBottom: 8 }}>Supprimer cet épisode ?</h3>
                    <p className="muted" style={{ fontSize: 14, marginBottom: 24 }}>Action irréversible.</p>
                    <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
                      <button className="btn btn-ghost btn-sm" onClick={() => setConfirmDeletePodcast(null)}>Annuler</button>
                      <button className="btn btn-sm" style={{ background: 'var(--red-status)', color: '#fff' }} onClick={async () => {
                        await window.SB.from('podcasts').delete().eq('id', confirmDeletePodcast);
                        setPODCASTS_DB(prev => prev.filter(x => x.id !== confirmDeletePodcast));
                        setConfirmDeletePodcast(null);
                      }}>Supprimer</button>
                    </div>
                  </div>
                </div>
              )}

              {/* DRAWER — Guide */}
              {editGuide && (
                <div className="drawer-overlay" onClick={() => setEditGuide(null)}>
                  <aside className="drawer" style={{ maxWidth: 560 }} onClick={e => e.stopPropagation()}>
                    <button className="drawer-close" onClick={() => setEditGuide(null)}><Icon.X size={16} /></button>
                    <div className="eyebrow">{editGuide._new ? 'Nouveau guide' : 'Modifier le guide'}</div>
                    <h2 className="serif" style={{ marginTop: 8 }}>{editGuide._new ? 'Créer un guide santé' : editGuide.titre}</h2>
                    <div className="drawer-divider"></div>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                      <div className="field"><label>Titre</label><input value={editGuide.titre} onChange={e => setEditGuide(p => ({...p, titre: e.target.value}))} placeholder="Comment lire une ordonnance…" /></div>
                      <div style={{ display: 'flex', gap: 12 }}>
                        <div className="field" style={{ flex: 1 }}><label>Catégorie</label>
                          <select value={editGuide.cat} onChange={e => setEditGuide(p => ({...p, cat: e.target.value}))} style={{ width: '100%', padding: '8px 10px', border: '1px solid var(--ink-200)', borderRadius: 'var(--r-sm)', background: '#fff', fontSize: 14 }}>
                            {['Patient','Professionnel','Urgence'].map(c => <option key={c}>{c}</option>)}
                          </select>
                        </div>
                        <div className="field" style={{ flex: 1 }}><label>Durée de lecture</label><input value={editGuide.duree} onChange={e => setEditGuide(p => ({...p, duree: e.target.value}))} placeholder="4 min" /></div>
                      </div>
                      <div className="field"><label>Résumé</label><textarea rows={2} value={editGuide.excerpt} onChange={e => setEditGuide(p => ({...p, excerpt: e.target.value}))} placeholder="Courte description affichée sur la page…" style={{ width: '100%', padding: '8px 10px', border: '1px solid var(--ink-200)', borderRadius: 'var(--r-sm)', fontSize: 14, resize: 'vertical' }} /></div>
                      <div className="field"><label>Contenu</label><textarea rows={6} value={editGuide.contenu} onChange={e => setEditGuide(p => ({...p, contenu: e.target.value}))} placeholder="Corps du guide…" style={{ width: '100%', padding: '8px 10px', border: '1px solid var(--ink-200)', borderRadius: 'var(--r-sm)', fontSize: 14, resize: 'vertical' }} /></div>
                      <div className="field" style={{ maxWidth: 140 }}><label>Ordre d'affichage</label><input type="number" value={editGuide.ordre_sort} onChange={e => setEditGuide(p => ({...p, ordre_sort: parseInt(e.target.value)||99}))} /></div>
                    </div>
                    <div className="drawer-divider"></div>
                    <div style={{ display: 'flex', gap: 8 }}>
                      <button className="btn btn-ghost btn-sm" onClick={() => setEditGuide(null)}>Annuler</button>
                      <button className="btn btn-primary btn-sm" style={{ flex: 1 }} onClick={async () => {
                        const payload = { titre: editGuide.titre, cat: editGuide.cat, duree: editGuide.duree, excerpt: editGuide.excerpt, contenu: editGuide.contenu, ordre_sort: editGuide.ordre_sort };
                        if (editGuide._new) {
                          const { data: row, error } = await window.SB.from('guides').insert(payload).select('*').single();
                          if (!error && row) setGUIDES_DB(prev => [...prev, row].sort((a, b) => a.ordre_sort - b.ordre_sort));
                        } else {
                          const { error } = await window.SB.from('guides').update(payload).eq('id', editGuide.id);
                          if (!error) setGUIDES_DB(prev => prev.map(x => x.id === editGuide.id ? {...x, ...payload} : x));
                        }
                        setEditGuide(null);
                      }}>{editGuide._new ? 'Enregistrer' : 'Sauvegarder'}</button>
                    </div>
                  </aside>
                </div>
              )}
              {confirmDeleteGuide && (
                <div className="drawer-overlay" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }} onClick={() => setConfirmDeleteGuide(null)}>
                  <div style={{ background: '#fff', borderRadius: 'var(--r-lg)', padding: 32, maxWidth: 400, width: '90%', boxShadow: 'var(--shadow-xl)' }} onClick={e => e.stopPropagation()}>
                    <h3 className="serif" style={{ marginBottom: 8 }}>Supprimer ce guide ?</h3>
                    <p className="muted" style={{ fontSize: 14, marginBottom: 24 }}>Action irréversible.</p>
                    <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
                      <button className="btn btn-ghost btn-sm" onClick={() => setConfirmDeleteGuide(null)}>Annuler</button>
                      <button className="btn btn-sm" style={{ background: 'var(--red-status)', color: '#fff' }} onClick={async () => {
                        await window.SB.from('guides').delete().eq('id', confirmDeleteGuide);
                        setGUIDES_DB(prev => prev.filter(x => x.id !== confirmDeleteGuide));
                        setConfirmDeleteGuide(null);
                      }}>Supprimer</button>
                    </div>
                  </div>
                </div>
              )}

              {/* DRAWER — Offre */}
              {editOffre && (
                <div className="drawer-overlay" onClick={() => setEditOffre(null)}>
                  <aside className="drawer" style={{ maxWidth: 520 }} onClick={e => e.stopPropagation()}>
                    <button className="drawer-close" onClick={() => setEditOffre(null)}><Icon.X size={16} /></button>
                    <div className="eyebrow">{editOffre._new ? 'Nouvelle offre' : 'Modifier l\'offre'}</div>
                    <h2 className="serif" style={{ marginTop: 8 }}>{editOffre._new ? 'Publier une offre d\'emploi' : editOffre.titre}</h2>
                    <div className="drawer-divider"></div>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                      <div className="field"><label>Titre du poste</label><input value={editOffre.titre} onChange={e => setEditOffre(p => ({...p, titre: e.target.value}))} placeholder="Pharmacien titulaire — …" /></div>
                      <div style={{ display: 'flex', gap: 12 }}>
                        <div className="field" style={{ flex: 1 }}><label>Lieu</label><input value={editOffre.lieu} onChange={e => setEditOffre(p => ({...p, lieu: e.target.value}))} placeholder="Niamey" /></div>
                        <div className="field" style={{ flex: 1 }}><label>Type</label>
                          <select value={editOffre.type} onChange={e => setEditOffre(p => ({...p, type: e.target.value}))} style={{ width: '100%', padding: '8px 10px', border: '1px solid var(--ink-200)', borderRadius: 'var(--r-sm)', background: '#fff', fontSize: 14 }}>
                            {['CDI','CDD','Stage','Public','Intérim'].map(t => <option key={t}>{t}</option>)}
                          </select>
                        </div>
                      </div>
                      <div style={{ display: 'flex', gap: 12 }}>
                        <div className="field" style={{ flex: 1 }}><label>Date de parution</label><input value={editOffre.date} onChange={e => setEditOffre(p => ({...p, date: e.target.value}))} placeholder="il y a 2 jours" /></div>
                        <div className="field" style={{ flex: 1 }}><label>Rémunération</label><input value={editOffre.remunere} onChange={e => setEditOffre(p => ({...p, remunere: e.target.value}))} placeholder="Négociable" /></div>
                      </div>
                      <label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer', fontSize: 14 }}>
                        <input type="checkbox" checked={!!editOffre.publie} onChange={e => setEditOffre(p => ({...p, publie: e.target.checked}))} />
                        Publiée (visible sur le site)
                      </label>
                    </div>
                    <div className="drawer-divider"></div>
                    <div style={{ display: 'flex', gap: 8 }}>
                      <button className="btn btn-ghost btn-sm" onClick={() => setEditOffre(null)}>Annuler</button>
                      <button className="btn btn-primary btn-sm" style={{ flex: 1 }} onClick={async () => {
                        const payload = { titre: editOffre.titre, lieu: editOffre.lieu, type: editOffre.type, date: editOffre.date, remunere: editOffre.remunere, publie: !!editOffre.publie };
                        if (editOffre._new) {
                          const { data: row, error } = await window.SB.from('offres').insert(payload).select('*').single();
                          if (!error && row) setOFFRES_DB(prev => [row, ...prev]);
                        } else {
                          const { error } = await window.SB.from('offres').update(payload).eq('id', editOffre.id);
                          if (!error) setOFFRES_DB(prev => prev.map(x => x.id === editOffre.id ? {...x, ...payload} : x));
                        }
                        setEditOffre(null);
                      }}>{editOffre._new ? 'Publier' : 'Sauvegarder'}</button>
                    </div>
                  </aside>
                </div>
              )}
              {confirmDeleteOffre && (
                <div className="drawer-overlay" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }} onClick={() => setConfirmDeleteOffre(null)}>
                  <div style={{ background: '#fff', borderRadius: 'var(--r-lg)', padding: 32, maxWidth: 400, width: '90%', boxShadow: 'var(--shadow-xl)' }} onClick={e => e.stopPropagation()}>
                    <h3 className="serif" style={{ marginBottom: 8 }}>Supprimer cette offre ?</h3>
                    <p className="muted" style={{ fontSize: 14, marginBottom: 24 }}>Action irréversible.</p>
                    <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
                      <button className="btn btn-ghost btn-sm" onClick={() => setConfirmDeleteOffre(null)}>Annuler</button>
                      <button className="btn btn-sm" style={{ background: 'var(--red-status)', color: '#fff' }} onClick={async () => {
                        await window.SB.from('offres').delete().eq('id', confirmDeleteOffre);
                        setOFFRES_DB(prev => prev.filter(x => x.id !== confirmDeleteOffre));
                        setConfirmDeleteOffre(null);
                      }}>Supprimer</button>
                    </div>
                  </div>
                </div>
              )}

              {/* DRAWER — FAQ */}
              {editFaq && (
                <div className="drawer-overlay" onClick={() => setEditFaq(null)}>
                  <aside className="drawer" style={{ maxWidth: 520 }} onClick={e => e.stopPropagation()}>
                    <button className="drawer-close" onClick={() => setEditFaq(null)}><Icon.X size={16} /></button>
                    <div className="eyebrow">{editFaq._new ? 'Nouvelle FAQ' : 'Modifier la FAQ'}</div>
                    <h2 className="serif" style={{ marginTop: 8 }}>{editFaq._new ? 'Ajouter une question' : 'Modifier la question'}</h2>
                    <div className="drawer-divider"></div>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                      <div className="field"><label>Catégorie</label>
                        <select value={editFaq.cat} onChange={e => setEditFaq(p => ({...p, cat: e.target.value}))} style={{ width: '100%', padding: '8px 10px', border: '1px solid var(--ink-200)', borderRadius: 'var(--r-sm)', background: '#fff', fontSize: 14 }}>
                          {['Inscription','Vérification','Signalement','Documents','Officine','Contact','Formation','Cotisation','Général'].map(c => <option key={c}>{c}</option>)}
                        </select>
                      </div>
                      <div className="field"><label>Question</label><input value={editFaq.question} onChange={e => setEditFaq(p => ({...p, question: e.target.value}))} placeholder="Comment s'inscrire à l'Ordre ?" /></div>
                      <div className="field"><label>Réponse</label><textarea rows={5} value={editFaq.reponse} onChange={e => setEditFaq(p => ({...p, reponse: e.target.value}))} placeholder="Réponse complète…" style={{ width: '100%', padding: '8px 10px', border: '1px solid var(--ink-200)', borderRadius: 'var(--r-sm)', fontSize: 14, resize: 'vertical' }} /></div>
                      <div className="field" style={{ maxWidth: 140 }}><label>Ordre d'affichage</label><input type="number" value={editFaq.ordre_sort} onChange={e => setEditFaq(p => ({...p, ordre_sort: parseInt(e.target.value)||99}))} /></div>
                    </div>
                    <div className="drawer-divider"></div>
                    <div style={{ display: 'flex', gap: 8 }}>
                      <button className="btn btn-ghost btn-sm" onClick={() => setEditFaq(null)}>Annuler</button>
                      <button className="btn btn-primary btn-sm" style={{ flex: 1 }} onClick={async () => {
                        const payload = { cat: editFaq.cat, question: editFaq.question, reponse: editFaq.reponse, ordre_sort: editFaq.ordre_sort };
                        if (editFaq._new) {
                          const { data: row, error } = await window.SB.from('faqs').insert(payload).select('*').single();
                          if (!error && row) setFAQS_DB(prev => [...prev, row].sort((a, b) => a.ordre_sort - b.ordre_sort));
                        } else {
                          const { error } = await window.SB.from('faqs').update(payload).eq('id', editFaq.id);
                          if (!error) setFAQS_DB(prev => prev.map(x => x.id === editFaq.id ? {...x, ...payload} : x));
                        }
                        setEditFaq(null);
                      }}>{editFaq._new ? 'Enregistrer' : 'Sauvegarder'}</button>
                    </div>
                  </aside>
                </div>
              )}
              {confirmDeleteFaq && (
                <div className="drawer-overlay" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }} onClick={() => setConfirmDeleteFaq(null)}>
                  <div style={{ background: '#fff', borderRadius: 'var(--r-lg)', padding: 32, maxWidth: 400, width: '90%', boxShadow: 'var(--shadow-xl)' }} onClick={e => e.stopPropagation()}>
                    <h3 className="serif" style={{ marginBottom: 8 }}>Supprimer cette question ?</h3>
                    <p className="muted" style={{ fontSize: 14, marginBottom: 24 }}>Action irréversible.</p>
                    <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
                      <button className="btn btn-ghost btn-sm" onClick={() => setConfirmDeleteFaq(null)}>Annuler</button>
                      <button className="btn btn-sm" style={{ background: 'var(--red-status)', color: '#fff' }} onClick={async () => {
                        await window.SB.from('faqs').delete().eq('id', confirmDeleteFaq);
                        setFAQS_DB(prev => prev.filter(x => x.id !== confirmDeleteFaq));
                        setConfirmDeleteFaq(null);
                      }}>Supprimer</button>
                    </div>
                  </div>
                </div>
              )}
            </>
          )}

          {/* STATISTIQUES RÉGIONALES */}
          {section === "stats" && (
            <>
              <div className="admin-section-head">
                <h2 className="serif">Statistiques régionales</h2>
                <p className="muted">Données démographiques par région — page « L'Ordre en chiffres ».</p>
                <div className="admin-actions">
                  <button className="btn btn-primary btn-sm" onClick={() => setEditStat({ _new: true, region: '', pharmaciens: 0, officines: 0, ratio: '', evolution: '', ordre_sort: STATS_DB.length + 1 })}>+ Ajouter une région</button>
                </div>
              </div>
              <div className="card" style={{ padding: 0 }}>
                <table className="data-table">
                  <thead><tr><th>Région</th><th>Pharmaciens</th><th>Officines</th><th>Ratio</th><th>Évolution</th><th></th></tr></thead>
                  <tbody>
                    {STATS_DB.map(s => (
                      <tr key={s.id}>
                        <td><b>{s.region}</b></td>
                        <td>{s.pharmaciens}</td>
                        <td>{s.officines}</td>
                        <td className="mono">{s.ratio}</td>
                        <td><span className="tag" style={{ background: 'var(--green-100)', color: 'var(--green-800)' }}>{s.evolution}</span></td>
                        <td style={{ textAlign: 'right' }}>
                          <button onClick={() => setEditStat({...s})}><Icon.Doc size={14} /></button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>

              {editStat && (
                <div className="drawer-overlay" onClick={() => setEditStat(null)}>
                  <aside className="drawer" style={{ maxWidth: 480 }} onClick={e => e.stopPropagation()}>
                    <button className="drawer-close" onClick={() => setEditStat(null)}><Icon.X size={16} /></button>
                    <div className="eyebrow">{editStat._new ? 'Nouvelle région' : 'Modifier la région'}</div>
                    <h2 className="serif" style={{ marginTop: 8 }}>{editStat._new ? 'Ajouter une région' : editStat.region}</h2>
                    <div className="drawer-divider"></div>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                      <div className="field"><label>Région</label><input value={editStat.region} onChange={e => setEditStat(p => ({...p, region: e.target.value}))} placeholder="Niamey" /></div>
                      <div style={{ display: 'flex', gap: 12 }}>
                        <div className="field" style={{ flex: 1 }}><label>Pharmaciens</label><input type="number" min="0" value={editStat.pharmaciens} onChange={e => setEditStat(p => ({...p, pharmaciens: parseInt(e.target.value)||0}))} /></div>
                        <div className="field" style={{ flex: 1 }}><label>Officines</label><input type="number" min="0" value={editStat.officines} onChange={e => setEditStat(p => ({...p, officines: parseInt(e.target.value)||0}))} /></div>
                      </div>
                      <div className="field"><label>Ratio habitants</label><input value={editStat.ratio} onChange={e => setEditStat(p => ({...p, ratio: e.target.value}))} placeholder="1 / 2 100 hab." /></div>
                      <div className="field"><label>Évolution (1 an)</label><input value={editStat.evolution} onChange={e => setEditStat(p => ({...p, evolution: e.target.value}))} placeholder="+8.4 %" /></div>
                      <div className="field" style={{ maxWidth: 140 }}><label>Ordre d'affichage</label><input type="number" value={editStat.ordre_sort} onChange={e => setEditStat(p => ({...p, ordre_sort: parseInt(e.target.value)||99}))} /></div>
                    </div>
                    <div className="drawer-divider"></div>
                    <div style={{ display: 'flex', gap: 8 }}>
                      <button className="btn btn-ghost btn-sm" onClick={() => setEditStat(null)}>Annuler</button>
                      <button className="btn btn-primary btn-sm" style={{ flex: 1 }} onClick={async () => {
                        const payload = { region: editStat.region, pharmaciens: editStat.pharmaciens, officines: editStat.officines, ratio: editStat.ratio, evolution: editStat.evolution, ordre_sort: editStat.ordre_sort };
                        if (editStat._new) {
                          const { data: row, error } = await window.SB.from('stats_region').insert(payload).select('*').single();
                          if (!error && row) setSTATS_DB(prev => [...prev, row].sort((a, b) => a.ordre_sort - b.ordre_sort));
                        } else {
                          const { error } = await window.SB.from('stats_region').update(payload).eq('id', editStat.id);
                          if (!error) setSTATS_DB(prev => prev.map(x => x.id === editStat.id ? {...x, ...payload} : x));
                        }
                        setEditStat(null);
                      }}>{editStat._new ? 'Enregistrer' : 'Sauvegarder'}</button>
                    </div>
                  </aside>
                </div>
              )}
            </>
          )}

          {/* SETTINGS */}
          {section === "settings" && (
            <>
              <div className="admin-section-head">
                <h2 className="serif">Paramètres généraux</h2>
                <p className="muted">Configuration du site et préférences administratives.</p>
              </div>
              <div className="settings-grid">
                <div className="admin-card">
                  <h3>Informations institutionnelles</h3>
                  <div style={{ display: "flex", flexDirection: "column", gap: 14, marginTop: 16 }}>
                    <div className="field"><label>Nom de l'institution</label><input value={siteConfig.nom_institution} onChange={e => setSiteConfig(p => ({...p, nom_institution: e.target.value}))} /></div>
                    <div className="field"><label>Adresse du siège</label><input value={siteConfig.adresse} onChange={e => setSiteConfig(p => ({...p, adresse: e.target.value}))} /></div>
                    <div className="field"><label>Téléphone</label><input value={siteConfig.telephone} onChange={e => setSiteConfig(p => ({...p, telephone: e.target.value}))} /></div>
                    <div className="field"><label>Email de contact</label><input value={siteConfig.email_contact} onChange={e => setSiteConfig(p => ({...p, email_contact: e.target.value}))} /></div>
                    <button className="btn btn-primary" style={{ alignSelf: "flex-start" }} disabled={savingConfig} onClick={async () => {
                      setSavingConfig(true);
                      const upserts = Object.entries(siteConfig).map(([key, value]) => ({ key, value }));
                      await window.SB.from('site_config').upsert(upserts, { onConflict: 'key' });
                      setSavingConfig(false);
                    }}>{savingConfig ? 'Enregistrement…' : 'Enregistrer'}</button>
                  </div>
                </div>
                <div className="admin-card">
                  <h3>Comptes administrateurs</h3>
                  <div className="admin-users">
                    {ADMIN_USERS.map(a => {
                      const isCurrentUser = auth?.user?.email === a.email;
                      return (
                        <div key={a.id} className="admin-user-row">
                          <div>
                            <b>{a.nom}</b>
                            {!a.actif && <span className="tag" style={{ fontSize: 10, padding: "1px 6px", marginLeft: 6, background: 'var(--c-danger-soft)', color: 'var(--c-danger)' }}>inactif</span>}
                            {isCurrentUser && <span className="tag" style={{ fontSize: 10, padding: "1px 6px", marginLeft: 6 }}>session active</span>}
                            <div className="muted" style={{ fontSize: 12.5 }}>{a.email} · {a.poste}</div>
                          </div>
                          <button className="btn btn-ghost btn-sm" onClick={() => setEditAdmin({...a})}>Gérer</button>
                        </div>
                      );
                    })}
                    <button className="btn btn-ghost btn-sm" style={{ alignSelf: "flex-start", marginTop: 8 }} onClick={() => setEditAdmin({ id: null, nom: '', poste: '', email: '', actif: true, ordre_sort: 99 })}>+ Ajouter un administrateur</button>
                  </div>
                </div>
              </div>
            </>
          )}
        </main>
      </div>

      {/* DRAWER — Alerte */}
      {editAlerte && (
        <div className="drawer-overlay" onClick={e => { if (e.target === e.currentTarget) setEditAlerte(null); }}>
          <div className="drawer">
            <div className="drawer-header">
              <h3>{editAlerte.id ? 'Modifier l\'alerte' : 'Nouvelle alerte'}</h3>
              <button className="btn btn-ghost btn-sm" onClick={() => setEditAlerte(null)}>✕</button>
            </div>
            <div className="drawer-body">
              <div className="field"><label>Titre</label><input value={editAlerte.titre} onChange={e => setEditAlerte(p => ({...p, titre: e.target.value}))} placeholder="Contrefaçon d'Artéméther…" /></div>
              <div className="field"><label>Référence</label><input value={editAlerte.ref} onChange={e => setEditAlerte(p => ({...p, ref: e.target.value}))} placeholder="OPN-ALR-2026-010" /></div>
              <div className="field">
                <label>Niveau</label>
                <select value={editAlerte.niveau} onChange={e => setEditAlerte(p => ({...p, niveau: e.target.value}))}>
                  <option value="critique">Critique</option>
                  <option value="élevé">Élevé</option>
                  <option value="info">Info</option>
                </select>
              </div>
              <div className="field"><label>Date de publication</label><input type="date" value={editAlerte.date_pub} onChange={e => setEditAlerte(p => ({...p, date_pub: e.target.value}))} /></div>
              <div className="field"><label>Lot concerné</label><input value={editAlerte.lot} onChange={e => setEditAlerte(p => ({...p, lot: e.target.value}))} placeholder="Lot AL-2025-114" /></div>
              <div className="field"><label>Description</label><textarea rows={3} value={editAlerte.description} onChange={e => setEditAlerte(p => ({...p, description: e.target.value}))} /></div>
              <div className="field"><label>Action recommandée</label><textarea rows={2} value={editAlerte.action} onChange={e => setEditAlerte(p => ({...p, action: e.target.value}))} /></div>
              <div className="field" style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
                <input type="checkbox" id="alerte-active" checked={editAlerte.active} onChange={e => setEditAlerte(p => ({...p, active: e.target.checked}))} style={{ width: 'auto' }} />
                <label htmlFor="alerte-active" style={{ marginBottom: 0, cursor: 'pointer' }}>Afficher dans la bannière</label>
              </div>
            </div>
            <div className="drawer-footer">
              {editAlerte.id && (
                <button className="btn btn-danger btn-sm" onClick={() => setConfirmDeleteAlerte(editAlerte.id)}>Supprimer</button>
              )}
              <button className="btn btn-ghost" onClick={() => setEditAlerte(null)}>Annuler</button>
              <button className="btn btn-primary" onClick={async () => {
                const payload = { ref: editAlerte.ref, niveau: editAlerte.niveau, date_pub: editAlerte.date_pub, titre: editAlerte.titre, lot: editAlerte.lot, description: editAlerte.description, action: editAlerte.action, active: editAlerte.active };
                if (editAlerte.id) {
                  await window.SB.from('alertes').update(payload).eq('id', editAlerte.id);
                  setALERTES_DB(prev => prev.map(a => a.id === editAlerte.id ? { ...a, ...payload } : a));
                } else {
                  const { data: row } = await window.SB.from('alertes').insert(payload).select('*').single();
                  if (row) setALERTES_DB(prev => [row, ...prev]);
                }
                setEditAlerte(null);
              }}>Enregistrer</button>
            </div>
          </div>
        </div>
      )}

      {/* MODAL — Confirm delete alerte */}
      {confirmDeleteAlerte && (
        <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.45)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <div className="admin-card" style={{ maxWidth: 380, width: '90%' }}>
            <h3>Supprimer cette alerte ?</h3>
            <p className="muted" style={{ margin: '10px 0 20px' }}>Cette action est irréversible.</p>
            <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end' }}>
              <button className="btn btn-ghost" onClick={() => setConfirmDeleteAlerte(null)}>Annuler</button>
              <button className="btn btn-danger" onClick={async () => {
                await window.SB.from('alertes').delete().eq('id', confirmDeleteAlerte);
                setALERTES_DB(prev => prev.filter(a => a.id !== confirmDeleteAlerte));
                setConfirmDeleteAlerte(null);
                setEditAlerte(null);
              }}>Supprimer</button>
            </div>
          </div>
        </div>
      )}

      {/* DRAWER — Admin */}
      {editAdmin && (
        <div className="drawer-overlay" onClick={e => { if (e.target === e.currentTarget) setEditAdmin(null); }}>
          <div className="drawer">
            <div className="drawer-header">
              <h3>{editAdmin.id ? 'Modifier l\'administrateur' : 'Nouvel administrateur'}</h3>
              <button className="btn btn-ghost btn-sm" onClick={() => setEditAdmin(null)}>✕</button>
            </div>
            <div className="drawer-body">
              <div className="field"><label>Nom complet</label><input value={editAdmin.nom} onChange={e => setEditAdmin(p => ({...p, nom: e.target.value}))} placeholder="Prénom Nom" /></div>
              <div className="field"><label>Poste</label><input value={editAdmin.poste} onChange={e => setEditAdmin(p => ({...p, poste: e.target.value}))} placeholder="Directeur adjoint…" /></div>
              <div className="field"><label>Email</label><input type="email" value={editAdmin.email} onChange={e => setEditAdmin(p => ({...p, email: e.target.value}))} placeholder="prenom.nom@opn.ne" /></div>
              <div className="field"><label>Ordre d'affichage</label><input type="number" value={editAdmin.ordre_sort} onChange={e => setEditAdmin(p => ({...p, ordre_sort: Number(e.target.value)}))} /></div>
              <div className="field" style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
                <input type="checkbox" id="admin-actif" checked={editAdmin.actif} onChange={e => setEditAdmin(p => ({...p, actif: e.target.checked}))} style={{ width: 'auto' }} />
                <label htmlFor="admin-actif" style={{ marginBottom: 0, cursor: 'pointer' }}>Compte actif</label>
              </div>
            </div>
            <div className="drawer-footer">
              {editAdmin.id && (
                <button className="btn btn-danger btn-sm" onClick={() => setConfirmDeleteAdmin(editAdmin.id)}>Supprimer</button>
              )}
              <button className="btn btn-ghost" onClick={() => setEditAdmin(null)}>Annuler</button>
              <button className="btn btn-primary" onClick={async () => {
                const payload = { nom: editAdmin.nom, poste: editAdmin.poste, email: editAdmin.email, actif: editAdmin.actif, ordre_sort: editAdmin.ordre_sort };
                if (editAdmin.id) {
                  await window.SB.from('admin_users').update(payload).eq('id', editAdmin.id);
                  setADMIN_USERS(prev => prev.map(a => a.id === editAdmin.id ? { ...a, ...payload } : a).sort((a, b) => a.ordre_sort - b.ordre_sort));
                } else {
                  const { data: row } = await window.SB.from('admin_users').insert(payload).select('*').single();
                  if (row) setADMIN_USERS(prev => [...prev, row].sort((a, b) => a.ordre_sort - b.ordre_sort));
                }
                setEditAdmin(null);
              }}>Enregistrer</button>
            </div>
          </div>
        </div>
      )}

      {/* MODAL — Confirm delete admin */}
      {confirmDeleteAdmin && (
        <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.45)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <div className="admin-card" style={{ maxWidth: 380, width: '90%' }}>
            <h3>Supprimer cet administrateur ?</h3>
            <p className="muted" style={{ margin: '10px 0 20px' }}>Cette action est irréversible.</p>
            <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end' }}>
              <button className="btn btn-ghost" onClick={() => setConfirmDeleteAdmin(null)}>Annuler</button>
              <button className="btn btn-danger" onClick={async () => {
                await window.SB.from('admin_users').delete().eq('id', confirmDeleteAdmin);
                setADMIN_USERS(prev => prev.filter(a => a.id !== confirmDeleteAdmin));
                setConfirmDeleteAdmin(null);
                setEditAdmin(null);
              }}>Supprimer</button>
            </div>
          </div>
        </div>
      )}

    </div>
  );
}

window.AdminDashboard = AdminDashboard;