// pages-membre.jsx — Espace Membre / Admin (login + portail)

function qrCell(seed, i) {
  var h = 0;
  for (var c = 0; c < seed.length; c++) h = (Math.imul(31, h) + seed.charCodeAt(c)) | 0;
  return ((h ^ (i * 2654435761)) >>> 0) % 3 !== 0;
}

function EspaceMembre({ navigate }) {
  const [role, setRole] = useState("membre");
  const [auth, setAuth] = useState(null);
  const [form, setForm] = useState({ email: "", pwd: "" });
  const [tab, setTab] = useState("dashboard");
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);
  const [membreProfile, setMembreProfile] = useState(null);
  const [cotisation, setCotisation] = useState(null);
  const [dpcSessions, setDpcSessions] = useState([]);
  const [messages, setMessages] = useState([]);
  const [newMsg, setNewMsg] = useState('');
  const [sending, setSending] = useState(false);
  const [adminId, setAdminId] = useState(null);
  const [notifications, setNotifications] = useState([]);
  const [documents, setDocuments] = useState([]);
  const [dataLoading, setDataLoading] = useState(false);
  const [profileTel, setProfileTel] = useState('');
  const [profileSaving, setProfileSaving] = useState(false);
  const [pwdResetMsg, setPwdResetMsg] = useState('');

  const fetchMembreData = async (num) => {
    if (!num) return;
    setDataLoading(true);
    const annee = new Date().getFullYear();
    const [memRes, cotRes, dpcRes, notifRes, docsRes] = await Promise.all([
      window.SB.from('membres').select('*').eq('num', num).single(),
      window.SB.from('cotisations').select('*').eq('membre_num', num).eq('annee', annee).maybeSingle(),
      window.SB.from('dpc_validations').select('*').eq('membre_num', num).eq('annee', annee).eq('statut', 'valide').order('date_validation', { ascending: true }),
      window.SB.from('notifications_membres').select('*').eq('membre_num', num).order('created_at', { ascending: false }),
      window.SB.from('documents_membres').select('*').eq('membre_num', num).order('created_at', { ascending: false }),
    ]);
    if (memRes.data) {
      setMembreProfile(memRes.data);
      setProfileTel(memRes.data.tel || '');
    }
    setCotisation(cotRes.data || null);
    setDpcSessions(dpcRes.data || []);
    setNotifications(notifRes.data || []);
    setDocuments(docsRes.data || []);
    setDataLoading(false);
  };

  useEffect(() => {
    window.SB.auth.getSession().then(({ data: { session } }) => {
      if (session) {
        const r = session.user.app_metadata?.role || "membre";
        setAuth({ role: r, user: session.user });
        if (r === "membre") fetchMembreData(session.user.app_metadata?.num);
        const hash = window.location.hash.replace("#", "");
        if (r === "admin" && hash !== "admin") navigate && navigate("admin");
        if (r === "membre" && hash !== "membre") navigate && navigate("membre");
      }
    });
  }, []);

  useEffect(() => {
    if (!auth || auth.role !== 'membre') return;
    const uid = auth.user.id;

    window.SB.from('admin_users').select('id').limit(1).single()
      .then(({ data, error }) => { if (!error && data) setAdminId(data.id); });

    window.SB.from('messages')
      .select('*')
      .or(`from_user_id.eq.${uid},to_user_id.eq.${uid}`)
      .order('created_at', { ascending: true })
      .then(({ data }) => setMessages(data || []));

    const sub = window.SB.channel('messages-' + uid)
      .on('postgres_changes', {
        event: 'INSERT',
        schema: 'public',
        table: 'messages',
        filter: `to_user_id=eq.${uid}`
      }, (payload) => {
        setMessages(prev => [...prev, payload.new]);
      })
      .subscribe();

    return () => { window.SB.removeChannel(sub); };
  }, [auth]);

  const onSubmit = async (e) => {
    e.preventDefault();
    setError("");
    setPwdResetMsg("");
    setLoading(true);
    const { data, error: authErr } = await window.SB.auth.signInWithPassword({
      email: form.email.trim(),
      password: form.pwd,
    });
    setLoading(false);
    if (authErr) {
      setError("Identifiants incorrects. Vérifiez votre email et mot de passe.");
      return;
    }
    const r = data.user.app_metadata?.role || "membre";
    setAuth({ role: r, user: data.user });
    setTab("dashboard");
    if (r === "membre") fetchMembreData(data.user.app_metadata?.num);
    navigate && navigate(r === "admin" ? "admin" : "membre");
  };

  const onLogout = async () => {
    await window.SB.auth.signOut();
    setAuth(null);
    setForm({ email: "", pwd: "" });
    setMembreProfile(null);
    setCotisation(null);
    setDpcSessions([]);
    setMessages([]);
    setAdminId(null);
    setNotifications([]);
    setDocuments([]);
    navigate && navigate("connexion");
  };

  const sendMessage = async () => {
    if (!newMsg.trim() || !adminId) return;
    setSending(true);
    const { error: sendErr } = await window.SB.from('messages').insert({
      from_user_id: auth.user.id,
      to_user_id: adminId,
      sujet: 'Message du membre',
      corps: newMsg.trim(),
    });
    setSending(false);
    if (!sendErr) setNewMsg('');
  };

  const saveProfile = async () => {
    const num = auth?.user?.app_metadata?.num;
    if (!num) return;
    setProfileSaving(true);
    const { error: saveErr } = await window.SB.from('membres').update({ tel: profileTel }).eq('num', num);
    if (saveErr) console.error('saveProfile:', saveErr.message);
    setProfileSaving(false);
  };

  const markNotifLu = async (id) => {
    const { error } = await window.SB.from('notifications_membres').update({ lu: true }).eq('id', id);
    if (!error) setNotifications(prev => prev.map(n => n.id === id ? { ...n, lu: true } : n));
  };

  const prefill = (r, email, pwd) => {
    setRole(r);
    setForm({ email, pwd });
    setError("");
  };

  if (!auth) {
    const isAdmin = role === "admin";
    return (
      <div className="page-enter login-page">
        <div className="login-split">
          <div className={`login-side ph ${isAdmin ? "ph-dark login-side-admin" : "ph-dark"}`} data-label={isAdmin ? "[ Photo institutionnelle — Salle du Conseil ]" : "[ Photo institutionnelle — Façade siège de l'Ordre ]"}></div>
          <div className="login-form-wrap">
            <div style={{ maxWidth: 400, margin: "0 auto", width: "100%" }}>
              <div style={{ marginBottom: 16 }}>
                <button type="button" className="btn btn-ghost btn-sm" onClick={() => navigate("accueil")} style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: 0, color: "var(--c-primary)", border: 0, background: "transparent", cursor: "pointer", fontWeight: 600 }}>
                  <Icon.ArrowRight size={14} style={{ transform: "rotate(180deg)" }} /> Retour à l'accueil
                </button>
              </div>
              <div className="eyebrow">Espace réservé</div>
              <h2 className="serif" style={{ marginTop: 10, marginBottom: 6 }}>Connexion</h2>
              <p className="muted" style={{ marginBottom: 24 }}>
                Choisissez votre type de compte ci-dessous.
              </p>

              {/* Role tabs */}
              <div className="role-tabs">
                <button type="button" className={`role-tab ${role === "membre" ? "active" : ""}`} onClick={() => { setRole("membre"); setForm({ id: "", pwd: "" }); setError(""); }}>
                  <Icon.Users size={16} />
                  <span>
                    <b>Membre</b>
                    <em>Pharmacien inscrit</em>
                  </span>
                </button>
                <button type="button" className={`role-tab ${role === "admin" ? "active" : ""}`} onClick={() => { setRole("admin"); setForm({ id: "", pwd: "" }); setError(""); }}>
                  <Icon.Shield size={16} />
                  <span>
                    <b>Admin</b>
                    <em>Conseil de l'Ordre</em>
                  </span>
                </button>
              </div>

              <form onSubmit={onSubmit} style={{ display: "flex", flexDirection: "column", gap: 16 }}>
                <div className="field">
                  <label>Email</label>
                  <input required type="email" placeholder="votre@email.ne" value={form.email} onChange={e => setForm({...form, email: e.target.value})} />
                </div>
                <div className="field">
                  <label>Mot de passe</label>
                  <input required type="password" placeholder="••••••••" value={form.pwd} onChange={e => setForm({...form, pwd: e.target.value})} />
                </div>

                {error && <div className="login-error"><Icon.Alert size={14} /> {error}</div>}
                {pwdResetMsg && <div style={{ fontSize: 13, color: "var(--c-primary)", marginTop: 4 }}>{pwdResetMsg}</div>}

                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 13 }}>
                  <label style={{ display: "flex", gap: 8, alignItems: "center" }}>
                    <input type="checkbox" /> Se souvenir
                  </label>
                  <a href="#" onClick={async (e) => {
                    e.preventDefault();
                    if (!form.email.trim()) { setError("Entrez votre email d'abord."); return; }
                    const { error: resetErr } = await window.SB.auth.resetPasswordForEmail(form.email.trim());
                    setPwdResetMsg(resetErr ? "Erreur : " + resetErr.message : "Email envoyé. En local vérifiez http://127.0.0.1:54705");
                  }}>Mot de passe oublié ?</a>
                </div>

                <button className="btn btn-primary btn-lg" type="submit" disabled={loading} style={{ marginTop: 4 }}>
                  {loading ? "Connexion…" : <span>Se connecter <Icon.ArrowRight /></span>}
                </button>
              </form>

              {/* Demo credentials */}
              <div className="demo-creds">
                <div className="demo-creds-h">
                  <Icon.Help size={14} /> Identifiants de démonstration
                </div>
                <div className="demo-row">
                  <button type="button" className="demo-prefill" onClick={() => prefill("admin", "admin@opn.ne", "admin2026")}>Utiliser</button>
                  <div>
                    <span className="demo-tag demo-tag-admin">Admin</span>
                    <code>admin@opn.ne / admin2026</code>
                  </div>
                </div>
                <div className="demo-row">
                  <button type="button" className="demo-prefill" onClick={() => prefill("membre", "aicha.maiga@opn.ne", "pharmacie2026")}>Utiliser</button>
                  <div>
                    <span className="demo-tag">Membre</span>
                    <code>aicha.maiga@opn.ne / pharmacie2026</code>
                  </div>
                </div>
                <div className="demo-row">
                  <button type="button" className="demo-prefill" onClick={() => prefill("membre", "moussa.issa@opn.ne", "pharmacie2026")}>Utiliser</button>
                  <div>
                    <span className="demo-tag">Membre</span>
                    <code>moussa.issa@opn.ne / pharmacie2026</code>
                  </div>
                </div>
                <div className="demo-row">
                  <button type="button" className="demo-prefill" onClick={() => prefill("membre", "fatoumata.diallo@opn.ne", "pharmacie2026")}>Utiliser</button>
                  <div>
                    <span className="demo-tag">Membre</span>
                    <code>fatoumata.diallo@opn.ne / pharmacie2026</code>
                  </div>
                </div>
                <div className="demo-row">
                  <button type="button" className="demo-prefill" onClick={() => prefill("membre", "ibrahim.oumarou@opn.ne", "pharmacie2026")}>Utiliser</button>
                  <div>
                    <span className="demo-tag">Membre</span>
                    <code>ibrahim.oumarou@opn.ne / pharmacie2026</code>
                  </div>
                </div>
                <div className="demo-row">
                  <button type="button" className="demo-prefill" onClick={() => prefill("membre", "mariama.sani@opn.ne", "pharmacie2026")}>Utiliser</button>
                  <div>
                    <span className="demo-tag">Membre</span>
                    <code>mariama.sani@opn.ne / pharmacie2026</code>
                  </div>
                </div>
              </div>

              {!isAdmin && (
                <div className="muted" style={{ fontSize: 13, textAlign: "center", marginTop: 16 }}>
                  Pas encore inscrit ? <a href="#inscription" onClick={(e) => { e.preventDefault(); navigate && navigate("inscription"); }}>Demander une inscription au tableau</a>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    );
  }

  // → Espace ADMIN
  if (auth?.role === "admin") {
    return <AdminDashboard auth={auth} onLogout={onLogout} navigate={navigate} />;
  }

  // → Espace MEMBRE
  return (
    <div className="page-enter">
      <section className="member-header">
        <div className="container">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 16 }}>
            <div>
              <div className="hero-eyebrow" style={{ color: "var(--gold-400)" }}>Espace membre</div>
              <h1 style={{ color: "#fff" }} className="serif">Bonjour, {auth?.user?.user_metadata?.nom || "Membre"}</h1>
              <div style={{ color: "rgba(255,255,255,0.7)", marginTop: 8 }}>
                N° {auth?.user?.app_metadata?.num || "—"} · {membreProfile?.activite || "Pharmacien(ne)"}
              </div>
            </div>
            <div style={{ display: "flex", gap: 10 }}>
              <button className="btn btn-light btn-sm" onClick={() => 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>

      <section className="section-sm">
        <div className="container">
          <div className="member-tabs">
            {[
              { id: "dashboard", label: "Tableau de bord" },
              { id: "cotisation", label: "Cotisation" },
              { id: "attestation", label: "Attestation" },
              { id: "dpc", label: "Crédits DPC" },
              { id: "messagerie", label: "Messagerie" },
              { id: "documents", label: "Documents" },
              { id: "notifications", label: "Notifications" },
              { id: "profil", label: "Profil" },
            ].map(t => (
              <button key={t.id} className={`member-tab ${tab === t.id ? "active" : ""}`} onClick={() => setTab(t.id)}>
                {t.label}
              </button>
            ))}
          </div>

          {tab === "dashboard" && (() => {
            if (dataLoading) return (
              <div style={{ textAlign: "center", padding: "60px 0" }}>
                <p className="muted">Chargement de vos données…</p>
              </div>
            );
            const statut = membreProfile?.statut || 'inconnu';
            const dpcTotal = dpcSessions.reduce((s, d) => s + parseFloat(d.heures || 0), 0);
            const dpcPct = Math.min(100, Math.round((dpcTotal / 30) * 100));
            const cotStatut = cotisation?.statut === 'payee' ? 'Réglée' : cotisation?.statut === 'en_attente' ? 'En attente' : '—';
            const cotColor = cotisation?.statut === 'payee' ? 'var(--c-primary)' : 'var(--c-accent)';
            const cotDate = cotisation?.date_paiement
              ? `Le ${new Date(cotisation.date_paiement + 'T12:00:00').toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' })}`
              : 'Aucun paiement enregistré';
            return (
            <div className="member-dash">
              <div className="member-kpis">
                <div className="kpi-card">
                  <div className="kpi-l">Statut d'inscription</div>
                  <div className="kpi-v">
                    <span className={`status-dot ${statut === 'actif' ? 'status-active' : ''}`} style={statut !== 'actif' ? { background: '#dc3545' } : {}}></span>
                    {statut === 'actif' ? 'Actif' : statut === 'suspendu' ? 'Suspendu' : statut.charAt(0).toUpperCase() + statut.slice(1)}
                  </div>
                  <div className="muted" style={{ fontSize: 12.5, marginTop: 6 }}>Valable jusqu'au 31/12/{new Date().getFullYear()}</div>
                </div>
                <div className="kpi-card">
                  <div className="kpi-l">Cotisation {new Date().getFullYear()}</div>
                  <div className="kpi-v" style={{ color: cotColor }}>{cotStatut}</div>
                  <div className="muted" style={{ fontSize: 12.5, marginTop: 6 }}>{cotDate}</div>
                </div>
                <div className="kpi-card">
                  <div className="kpi-l">Heures DPC</div>
                  <div className="kpi-v">{dpcTotal}<span style={{ color: "var(--ink-400)", fontSize: 16 }}> / 30 h</span></div>
                  <div className="kpi-bar"><div className="kpi-bar-fill" style={{ width: `${dpcPct}%` }}></div></div>
                </div>
                <div className="kpi-card">
                  <div className="kpi-l">Notifications non lues</div>
                  <div className="kpi-v">{notifications.filter(n => !n.lu).length}</div>
                  <div className="muted" style={{ fontSize: 12.5, marginTop: 6 }}>
                    {notifications.filter(n => !n.lu && n.categorie === 'Officiel').length > 0
                      ? `Dont ${notifications.filter(n => !n.lu && n.categorie === 'Officiel').length} communiqué(s) officiel(s)`
                      : 'Aucun communiqué non lu'}
                  </div>
                </div>
              </div>

              <div className="member-grid">
                <div className="card">
                  <h4>Actions rapides</h4>
                  <div className="action-list">
                    <button><Icon.Download /> Télécharger attestation d'inscription</button>
                    <button><Icon.Doc /> Demander un certificat</button>
                    <button><Icon.Cal /> S'inscrire à une formation DPC</button>
                    <button><Icon.Alert /> Signaler un changement de situation</button>
                  </div>
                </div>
                <div className="card">
                  <h4>Prochaines échéances</h4>
                  <div className="echo-list">
                    <div className="echo-row">
                      <div className="echo-date"><b>15</b><span>Juin</span></div>
                      <div><b>AG annuelle</b><div className="muted" style={{ fontSize: 13 }}>Siège de l'Ordre, Niamey</div></div>
                    </div>
                    <div className="echo-row">
                      <div className="echo-date"><b>05</b><span>Juil</span></div>
                      <div><b>DPC — Maladies chroniques</b><div className="muted" style={{ fontSize: 13 }}>Inscription confirmée</div></div>
                    </div>
                    <div className="echo-row">
                      <div className="echo-date"><b>31</b><span>Déc</span></div>
                      <div><b>Renouvellement inscription</b><div className="muted" style={{ fontSize: 13 }}>Délai légal</div></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          );
          })()}

          {tab === "cotisation" && (() => {
            const annee = new Date().getFullYear();
            const estPayee = cotisation?.statut === 'payee';
            const montant = cotisation?.montant ? parseInt(cotisation.montant).toLocaleString('fr-FR') + ' FCFA' : '—';
            const dateP = cotisation?.date_paiement
              ? new Date(cotisation.date_paiement + 'T12:00:00').toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' })
              : null;
            const modeLabel = { virement: 'Virement bancaire', mobile_money: 'Mobile money', especes: 'Espèces au siège', cheque: 'Chèque' }[cotisation?.mode_paiement] || '—';
            return (
            <div className="member-grid" style={{ alignItems: "start" }}>
              <div className="card cotisation-main">
                <div className="cot-head">
                  <div>
                    <div className="eyebrow">Exercice {annee}</div>
                    <h3 className="serif" style={{ marginTop: 8 }}>Cotisation annuelle</h3>
                  </div>
                  <div className="cot-status" style={!estPayee ? { color: 'var(--c-accent)' } : {}}>
                    {estPayee ? <><Icon.Check size={14} /> Réglée</> : 'En attente'}
                  </div>
                </div>
                <div className="cot-amount">
                  <div className="cot-amount-n serif">{montant.replace(' FCFA', '')} <span>FCFA</span></div>
                  <div className="muted" style={{ fontSize: 13 }}>{modeLabel}</div>
                </div>
                <div className="cot-timeline">
                  {[
                    { l: "Émission", d: `1 janv. ${annee}`, on: true },
                    { l: "Paiement", d: dateP || '—', on: estPayee },
                    { l: "Reçu fiscal", d: dateP ? `${dateP}` : '—', on: estPayee },
                    { l: "Échéance suivante", d: `1 janv. ${annee + 1}`, on: false },
                  ].map((s, i) => (
                    <div key={i} className={`cot-step ${s.on ? "on" : ""}`}>
                      <div className="cot-step-dot"></div>
                      <div>
                        <div style={{ fontWeight: 600 }}>{s.l}</div>
                        <div className="muted" style={{ fontSize: 13 }}>{s.d}</div>
                      </div>
                    </div>
                  ))}
                </div>
                <div className="cot-actions">
                  <button className="btn btn-primary" disabled={!estPayee}><Icon.Download /> Reçu fiscal PDF</button>
                  <button className="btn btn-ghost">Historique complet</button>
                </div>
              </div>

              <div className="card">
                <h4>Modes de paiement acceptés</h4>
                <div className="pay-list">
                  <div className="pay-row"><span className="pay-i">📱</span><div><b>Mobile money</b><div className="muted" style={{ fontSize: 13 }}>Airtel Money · Moov Money · Zamani Cash</div></div></div>
                  <div className="pay-row"><span className="pay-i">🏦</span><div><b>Virement bancaire</b><div className="muted" style={{ fontSize: 13 }}>RIB disponible sur demande</div></div></div>
                  <div className="pay-row"><span className="pay-i">💳</span><div><b>Carte bancaire</b><div className="muted" style={{ fontSize: 13 }}>Bientôt disponible</div></div></div>
                  <div className="pay-row"><span className="pay-i">🏢</span><div><b>Espèces au siège</b><div className="muted" style={{ fontSize: 13 }}>Lun – Ven, 8h – 16h</div></div></div>
                </div>
                <div className="pay-grille">
                  <div className="mono" style={{ fontSize: 11, color: "var(--ink-400)" }}>GRILLE TARIFAIRE</div>
                  <div className="pay-grille-row"><span>Officine titulaire</span><b>75 000 FCFA</b></div>
                  <div className="pay-grille-row"><span>Officine assistant</span><b>35 000 FCFA</b></div>
                  <div className="pay-grille-row"><span>Hospitalier</span><b>40 000 FCFA</b></div>
                  <div className="pay-grille-row"><span>Industrie / Distribution</span><b>50 000 FCFA</b></div>
                  <div className="pay-grille-row"><span>Retraités</span><b>10 000 FCFA</b></div>
                </div>
              </div>
            </div>
            );
          })()}

          {tab === "attestation" && (
            <div className="attestation-wrap">
              <div className="att-doc">
                <div className="att-paper">
                  <div className="att-header">
                    <Icon.Logo size={64} />
                    <div>
                      <div className="att-rep">RÉPUBLIQUE DU NIGER</div>
                      <div className="att-org serif">Ordre des Pharmaciens</div>
                      <div className="att-dev">Fraternité — Travail — Progrès</div>
                    </div>
                  </div>
                  <hr className="hr" />
                  <div className="att-title serif">Attestation d'inscription au Tableau</div>
                  <div className="att-num mono">N° ATT-{new Date().getFullYear()}-{(auth?.user?.app_metadata?.num || '0000').split('-').pop()}</div>
                  <p className="att-body">
                    Le Président de l'Ordre des Pharmaciens du Niger certifie que <b>{auth?.user?.user_metadata?.nom || "—"}</b>,
                    est inscrit(e) au Tableau de l'Ordre sous le numéro <b className="mono">{auth?.user?.app_metadata?.num || "—"}</b>,
                    en qualité de {membreProfile?.activite || "pharmacien(ne)"}.
                  </p>
                  <p className="att-body">
                    En foi de quoi, la présente attestation lui est délivrée pour servir et valoir
                    ce que de droit.
                  </p>
                  <div className="att-foot">
                    <div>
                      <div className="muted" style={{ fontSize: 12 }}>
                        Fait à Niamey, le {new Date().toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' })}
                      </div>
                      <div style={{ marginTop: 32, fontFamily: "var(--ff-serif)", fontStyle: "italic" }}>Pr. Abdoulaye Hima</div>
                      <div style={{ fontSize: 12 }}>Président de l'Ordre</div>
                    </div>
                    <div className="att-qr">
                      <div className="qr-square">
                        {Array.from({ length: 144 }, (_, i) => (
                          <span key={i} style={{ background: qrCell(auth?.user?.app_metadata?.num || 'OPN', i) ? "#0F5132" : "transparent" }}></span>
                        ))}
                      </div>
                      <div className="mono" style={{ fontSize: 10, marginTop: 6, textAlign: "center" }}>
                        Vérifier sur opn.ne/verifier<br/>ATT-{new Date().getFullYear()}-{(auth?.user?.app_metadata?.num || '0000').split('-').pop()}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="att-side">
                <h3 className="serif">Attestation d'inscription</h3>
                <p className="muted" style={{ marginTop: 8 }}>Document officiel téléchargeable, signé électroniquement et vérifiable via QR code.</p>
                <button className="btn btn-primary" style={{ marginTop: 20, width: "100%" }}><Icon.Download /> Télécharger en PDF</button>
                <button className="btn btn-ghost" style={{ marginTop: 10, width: "100%" }}>Demander en bilingue FR/EN</button>
                <hr className="hr" style={{ margin: "24px 0" }} />
                <div className="mono" style={{ fontSize: 11, color: "var(--ink-400)" }}>HISTORIQUE</div>
                <div className="att-history">
                  <div><b>12 mai 2026</b><span className="muted"> · Édition courante</span></div>
                  <div><b>15 fév. 2025</b><span className="muted"> · Édition 2025</span></div>
                  <div><b>9 fév. 2024</b><span className="muted"> · Édition 2024</span></div>
                </div>
              </div>
            </div>
          )}

          {tab === "dpc" && (() => {
            const annee = new Date().getFullYear();
            const dpcTotal = dpcSessions.reduce((s, d) => s + parseFloat(d.heures || 0), 0);
            const dpcPct = Math.min(100, Math.round((dpcTotal / 30) * 100));
            return (
            <div>
              <div className="dpc-hero">
                <div>
                  <div className="eyebrow">Développement Professionnel Continu</div>
                  <h3 className="serif" style={{ marginTop: 8 }}>Cycle {annee}</h3>
                </div>
                <div className="dpc-ring-wrap">
                  <svg viewBox="0 0 100 100" width="120" height="120">
                    <circle cx="50" cy="50" r="42" fill="none" stroke="var(--ink-100)" strokeWidth="10" />
                    <circle cx="50" cy="50" r="42" fill="none" stroke="var(--c-primary)" strokeWidth="10"
                      strokeDasharray={`${(dpcTotal / 30) * 264} 264`}
                      strokeLinecap="round"
                      transform="rotate(-90 50 50)" />
                  </svg>
                  <div className="dpc-ring-text">
                    <div className="dpc-ring-n serif">{dpcTotal}<span style={{ fontSize: 16, color: "var(--ink-400)" }}>/30</span></div>
                    <div className="mono" style={{ fontSize: 11 }}>HEURES</div>
                  </div>
                </div>
              </div>

              <h4 style={{ marginTop: 40 }}>Sessions validées ({annee})</h4>
              <div className="dpc-list">
                {dpcSessions.length === 0 && (
                  <p className="muted" style={{ padding: "24px 0" }}>Aucune session validée pour {annee}.</p>
                )}
                {dpcSessions.map((s) => {
                  const d = s.date_validation ? new Date(s.date_validation + 'T12:00:00').toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' }) : '—';
                  return (
                    <div key={s.id} className="dpc-row">
                      <div className="dpc-hours serif">{parseFloat(s.heures)}h</div>
                      <div style={{ flex: 1 }}>
                        <div style={{ fontWeight: 600 }}>{s.titre}</div>
                        <div className="muted" style={{ fontSize: 13 }}>Validée le {d}</div>
                      </div>
                      <button className="btn btn-ghost btn-sm"><Icon.Download size={12} /> Certificat</button>
                    </div>
                  );
                })}
              </div>

              <h4 style={{ marginTop: 32 }}>Sessions recommandées</h4>
              <div className="dpc-reco">
                {EVENTS.filter((e) => e.type === "DPC" || e.type === "Formation").slice(0, 3).map((e) => (
                  <div key={e.titre} className="dpc-reco-card">
                    <div className="dpc-reco-date">
                      <div className="serif" style={{ fontSize: 24 }}>{e.jour}</div>
                      <div className="mono" style={{ fontSize: 11 }}>{e.mois}</div>
                    </div>
                    <div style={{ flex: 1 }}>
                      <h5 style={{ marginBottom: 4 }}>{e.titre}</h5>
                      <div className="muted" style={{ fontSize: 13 }}>{e.lieu}</div>
                    </div>
                    <button className="btn btn-accent btn-sm">S'inscrire</button>
                  </div>
                ))}
              </div>
            </div>
            );
          })()}

          {tab === "messagerie" && (
            <div className="msgr">
              <div className="msgr-list">
                <div className="msgr-search">
                  <Icon.Search size={14} />
                  <input placeholder="Rechercher…" readOnly />
                </div>
                <button className="msgr-item active">
                  <div className="msgr-av">O</div>
                  <div style={{ flex: 1, textAlign: "left", overflow: "hidden" }}>
                    <div style={{ display: "flex", justifyContent: "space-between", gap: 8 }}>
                      <b style={{ fontSize: 14 }}>Secrétariat OPN</b>
                    </div>
                    <div style={{ fontSize: 13, color: "var(--ink-500)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                      {messages.length > 0 ? messages[messages.length - 1].corps.slice(0, 40) + '…' : 'Aucun message'}
                    </div>
                  </div>
                </button>
              </div>
              <div className="msgr-thread">
                <div className="msgr-thread-head">
                  <div>
                    <h4>Secrétariat OPN</h4>
                    <div className="muted" style={{ fontSize: 13 }}>Messagerie officielle de l'Ordre</div>
                  </div>
                </div>
                <div className="msgr-bubbles">
                  {messages.length === 0 && (
                    <p className="muted" style={{ textAlign: "center", padding: "40px 0" }}>
                      Aucun message. Écrivez au secrétariat ci-dessous.
                    </p>
                  )}
                  {messages.map((m) => {
                    const isOut = m.from_user_id === auth.user.id;
                    return (
                      <div key={m.id} className={`msgr-bubble ${isOut ? "out" : "in"}`}>
                        <p>{m.corps}</p>
                        <div className="muted" style={{ fontSize: 11, marginTop: 4 }}>
                          {new Date(m.created_at).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })}
                        </div>
                      </div>
                    );
                  })}
                </div>
                <div className="msgr-input">
                  <input
                    placeholder="Écrire un message au secrétariat…"
                    value={newMsg}
                    onChange={(e) => setNewMsg(e.target.value)}
                    onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); } }}
                  />
                  <button className="btn btn-primary btn-sm" onClick={sendMessage} disabled={sending || !newMsg.trim()}>
                    <Icon.ArrowRight size={14} />
                  </button>
                </div>
              </div>
            </div>
          )}

          {tab === "documents" && (
            <div className="card" style={{ padding: 0 }}>
              <table className="data-table">
                <thead>
                  <tr><th>Document</th><th>Type</th><th>Date</th><th></th></tr>
                </thead>
                <tbody>
                  {documents.length === 0 && (
                    <tr>
                      <td colSpan="4" className="muted" style={{ padding: 24, textAlign: "center" }}>
                        Aucun document.
                      </td>
                    </tr>
                  )}
                  {documents.map((d) => (
                    <tr key={d.id}>
                      <td><Icon.Doc /> <b style={{ marginLeft: 10 }}>{d.nom}</b></td>
                      <td><span className="tag tag-gray">{d.type}</span></td>
                      <td className="muted">
                        {new Date(d.created_at).toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' })}
                      </td>
                      <td style={{ textAlign: "right" }}>
                        <button
                          className="btn btn-ghost btn-sm"
                          disabled={!d.url}
                          onClick={() => { if (d.url) window.open(d.url, '_blank'); }}
                        >
                          <Icon.Download /> Télécharger
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}

          {tab === "notifications" && (
            <div className="msg-list">
              {notifications.length === 0 && (
                <p className="muted" style={{ padding: "24px 0" }}>Aucune notification.</p>
              )}
              {notifications.map((n) => (
                <div
                  key={n.id}
                  className={`msg-item ${!n.lu ? "unread" : ""}`}
                  onClick={() => { if (!n.lu) markNotifLu(n.id); }}
                  style={{ cursor: !n.lu ? "pointer" : "default" }}
                >
                  {!n.lu && <span className="msg-dot"></span>}
                  <div style={{ flex: 1 }}>
                    <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
                      <span className="tag tag-gray">{n.categorie}</span>
                      <span className="muted" style={{ fontSize: 12 }}>
                        {new Date(n.created_at).toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' })}
                      </span>
                    </div>
                    <h4 style={{ marginTop: 6 }}>{n.titre}</h4>
                    {n.corps && <p className="muted" style={{ fontSize: 14, marginTop: 4 }}>{n.corps}</p>}
                  </div>
                </div>
              ))}
            </div>
          )}

          {tab === "profil" && (
            <div className="profile-grid">
              <div className="card">
                <div className="ph" style={{ aspectRatio: "1/1", maxWidth: 200, borderRadius: "var(--r-md)", margin: "0 auto 20px" }} data-label="[ Photo profil ]"></div>
                <h3 className="serif" style={{ textAlign: "center" }}>{auth?.user?.user_metadata?.nom || "—"}</h3>
                <p className="muted" style={{ textAlign: "center", marginTop: 4 }}>{membreProfile?.activite || "Pharmacien(ne)"}</p>
                <hr className="hr" style={{ margin: "24px 0" }}/>
                <div className="info-row"><span>N° d'inscription</span><b className="mono">{auth?.user?.app_metadata?.num || "—"}</b></div>
                <div className="info-row"><span>Email</span><b>{auth?.user?.email || "—"}</b></div>
              </div>
              <div className="card">
                <h4>Coordonnées</h4>
                <div style={{ display: "flex", flexDirection: "column", gap: 16, marginTop: 20 }}>
                  <div className="field"><label>Email</label><input defaultValue={auth?.user?.email || ""}/></div>
                  <div className="field"><label>Téléphone</label><input value={profileTel} onChange={(e) => setProfileTel(e.target.value)} placeholder="Non renseigné"/></div>
                  <div className="field"><label>Activité</label><input readOnly value={membreProfile?.activite || "—"}/></div>
                  <div className="field"><label>Ville</label><input readOnly value={membreProfile?.ville || "—"}/></div>
                  <button className="btn btn-primary" style={{ alignSelf: "flex-start" }} onClick={saveProfile} disabled={profileSaving}>
                    {profileSaving ? "Enregistrement…" : "Mettre à jour"}
                  </button>
                </div>
              </div>
            </div>
          )}
        </div>
      </section>
    </div>
  );
}
window.EspaceMembre = EspaceMembre;