{window.L("Date", "Date", "Fecha")}	{window.L("Événement", "Event", "Evento")}	{window.L("Plan", "Plan", "Plan")}	{window.L("Montant", "Amount", "Importe")}
{new Date(ev.created_at).toLocaleDateString(window.L("fr-FR", "en-US", "es-ES"))}	{eventLabel(ev.event_type, lang)}	{ev.new_plan \|\| "—"}	{ev.amount_cents != null ? fmtPrice(ev.amount_cents, ev.currency \|\| "EUR") : "—"}

📊 {window.L("Plans tarifaires", "Pricing plans", "Planes de precios")}

{savedAt && ( ✓ {window.L("Enregistré", "Saved", "Guardado")} {new Date(savedAt).toLocaleTimeString(window.L("fr-FR", "en-US", "es-ES"), { hour: "2-digit", minute: "2-digit" })} )}

{/* Sélecteurs plan + devise */}

{window.L("Plan", "Plan", "Plan")}

{window.L("Devise", "Currency", "Moneda")}

{loading &&

{window.L("Chargement…", "Loading…", "Cargando…")}

} {!loading && !current && (

{window.L("Cette combinaison plan + devise n'existe pas en BDD. Lancez la migration pricing pour la seeder.", "This plan + currency combo doesn't exist in DB. Run the pricing migration to seed it.", "Esta combinación de plan + divisa no existe en la BD. Ejecute la migración de precios para crearla.")}

)} {!loading && current && draft && ( <> {/* Métadonnées affichage */}

{window.L("Nom affiché (FR)", "Display name (FR)", "Nombre mostrado (FR)")} onChange("display_name_fr", e.target.value)} style={inp} />

{window.L("Nom affiché (EN)", "Display name (EN)", "Nombre mostrado (EN)")} onChange("display_name_en", e.target.value)} style={inp} />

{window.L("Description (FR)", "Description (FR)", "Descripción (FR)")}

onChange("description_fr", e.target.value)} rows={2} style={{ ...inp, fontFamily: "inherit", resize: "vertical" }} />
                </div>
                <div style={{ gridColumn: "1 / -1" }}>
                  <label style={lbl}>{window.L("Description (EN)", "Description (EN)", "Descripción (EN)")}</label>
                  <textarea value={draft.description_en || ""} onChange={(e) => onChange("description_en", e.target.value)} rows={2} style={{ ...inp, fontFamily: "inherit", resize: "vertical" }} />
                </div>
              </div>

{/* Prix */}
              <div style={{ padding: "12px 14px", background: "#fef3c7", borderRadius: 8, border: "1px solid #fcd34d", marginBottom: 14 }}>
                <div style={{ fontSize: 11, fontWeight: 700, color: "#92400e", textTransform: "uppercase", marginBottom: 8 }}>
                  💰 {window.L("Prix", "Pricing", "Precios")}{" "}
                  <span style={{ fontWeight: 400, fontStyle: "italic" }}>
                    ({currency === "XOF" ? "XOF entier" : (window.L("centimes — 9900 = 99,00 €", "cents — 9900 = $99.00", "céntimos — 9900 = 99,00 €"))})
                  </span>
                </div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
                  <div>
                    <label style={lbl}>{window.L("Mensuel", "Monthly", "Mensual")}</label>
                    <input type="number" min="0" value={draft.price_monthly == null ? "" : draft.price_monthly} onChange={(e) => onChange("price_monthly", e.target.value)} style={inp} />
                  </div>
                  <div>
                    <label style={lbl}>{window.L("Annuel", "Yearly", "Anual")}</label>
                    <input type="number" min="0" value={draft.price_yearly == null ? "" : draft.price_yearly} onChange={(e) => onChange("price_yearly", e.target.value)} style={inp} />
                  </div>
                </div>
              </div>

{/* Limites quantitatives */}
              <div style={{ padding: "12px 14px", background: "var(--bg-sunken)", borderRadius: 8, border: "1px solid var(--line)", marginBottom: 14 }}>
                <div style={{ fontSize: 11, fontWeight: 700, color: "var(--text-faint)", textTransform: "uppercase", marginBottom: 8 }}>
                  📊 {window.L("Limites (laisser vide = illimité)", "Limits (leave blank = unlimited)", "Límites (dejar en blanco = ilimitado)")}
                </div>
                <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(140px, 1fr))", gap: 10 }}>
                  <LimitField label={window.L("Projets", "Projects", "Proyectos")}             k="max_projects"   draft={draft} onChange={onChange} inp={inp} lbl={lbl} />
                  <LimitField label={window.L("Utilisateurs", "Users", "Usuarios")}           k="max_users"      draft={draft} onChange={onChange} inp={inp} lbl={lbl} />
                  <LimitField label={window.L("Indicateurs", "Indicators", "Indicadores")}       k="max_indicators" draft={draft} onChange={onChange} inp={inp} lbl={lbl} />
                  <LimitField label={window.L("Sites", "Sites", "Sitios")}                  k="max_sites"      draft={draft} onChange={onChange} inp={inp} lbl={lbl} />
                  <LimitField label={window.L("Stockage (MB)", "Storage (MB)", "Almacenamiento (MB)")}   k="max_storage_mb" draft={draft} onChange={onChange} inp={inp} lbl={lbl} />
                  <LimitField label={window.L("Exports / mois", "Exports / mo", "Exportaciones / mes")}  k="monthly_exports" draft={draft} onChange={onChange} inp={inp} lbl={lbl} />
                  <LimitField label={window.L("Crédits AI / mois", "AI credits / mo", "Créditos de IA / mes")} k="monthly_ai_credits" draft={draft} onChange={onChange} inp={inp} lbl={lbl} />
                </div>
              </div>

{/* Features */}
              <div style={{ padding: "12px 14px", background: "var(--bg-sunken)", borderRadius: 8, border: "1px solid var(--line)", marginBottom: 14 }}>
                <div style={{ fontSize: 11, fontWeight: 700, color: "var(--text-faint)", textTransform: "uppercase", marginBottom: 8 }}>
                  ✨ {window.L("Fonctionnalités incluses", "Included features", "Funcionalidades incluidas")}
                </div>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
                  {FEATURE_OPTIONS.map((f) => {
                    const active = (draft.features || []).indexOf(f.code) >= 0;
                    const label  = (lang === "es" ? (f.es != null ? f.es : f.en) : lang === "fr" ? f.fr : f.en);
                    return (
                      <button key={f.code} type="button" onClick={() => toggleFeature(f.code)}
                        title={f.code}
                        style={{
                          padding: "5px 12px", borderRadius: 999,
                          background: active ? "#0f766e" : "var(--bg)",
                          color: active ? "white" : "var(--text)",
                          border: "1px solid " + (active ? "#0f766e" : "var(--line)"),
                          fontSize: 12, fontWeight: 600, cursor: "pointer",
                          display: "inline-flex", alignItems: "center", gap: 6,
                        }}>
                        {active ? <span>✓</span> : null}
                        <span>{label}</span>
                        <span style={{
                          fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
                          fontSize: 10, opacity: 0.5, fontWeight: 400,
                        }}>{f.code}</span>
                      </button>
                    );
                  })}
                </div>
              </div>

{/* Actions */}
              {err && <div style={{ color: "#dc2626", fontSize: 12.5, marginBottom: 10 }}>{err}</div>}
              <div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
                <button onClick={onSave} disabled={saving}
                  style={{ padding: "9px 16px", borderRadius: 6, border: "none", background: "#0f766e", color: "white", fontWeight: 700, cursor: "pointer", fontSize: 13 }}>
                  {saving ? (window.L("Enregistrement…", "Saving…", "Guardando…")) : (window.L("Enregistrer", "Save", "Guardar"))}
                </button>
              </div>
            </>
          )}
        </div>
      </div>
    );
  }

function LimitField({ label, k, draft, onChange, inp, lbl }) {
    return (
      <div>
        <label style={lbl}>{label}</label>
        <input type="number" min="0"
          value={draft[k] == null ? "" : draft[k]}
          onChange={(e) => onChange(k, e.target.value === "" ? null : e.target.value)}
          placeholder="∞"
          style={inp} />
      </div>
    );
  }

// ── Card 2 · Moyens de paiement ─────────────────────────────────────
  function PaymentMethodsAdminCard({ lang }) {
    const { data: methods, loading, refresh } = window.melr.usePaymentMethods();
    const [editing, setEditing] = useState(null);   // null | row | "new"

return (
      <div className="card">
        <div className="card-head">
          <div className="card-title">💳 {window.L("Moyens de paiement", "Payment methods", "Métodos de pago")}</div>
          <div style={{ flex: 1 }} />
          <button onClick={() => setEditing("new")} className="btn sm primary">
            + {window.L("Ajouter", "Add", "Añadir")}
          </button>
        </div>
        <div style={{ padding: 0 }}>
          {loading && <div style={{ padding: 18, color: "var(--text-faint)" }}>{window.L("Chargement…", "Loading…", "Cargando…")}</div>}
          {!loading && methods.length === 0 && (
            <div style={{ padding: 18, color: "var(--text-faint)", fontSize: 13, lineHeight: 1.5 }}>
              {window.L(
                <>Aucun moyen de paiement configuré. <strong>La migration <code>20260526000000_payment_methods.sql</code> a-t-elle été appliquée ?</strong> Sans elle, la table <code>payment_methods</code> n'existe pas en base. Cliquez « + Ajouter » pour en créer manuellement.</>,
                <>No payment method configured. <strong>Was migration <code>20260526000000_payment_methods.sql</code> applied?</strong> Without it, the <code>payment_methods</code> table doesn't exist. Click "+ Add" to create one manually.</>,
                <>Ningún método de pago configurado. <strong>¿Se aplicó la migración <code>20260526000000_payment_methods.sql</code> ?</strong> Sin ella, la tabla <code>payment_methods</code> no existe en la base de datos. Haga clic en « + Añadir » para crear uno manualmente.</>)}
            </div>
          )}
          {!loading && methods.length > 0 && (
            <table className="tbl" style={{ width: "100%" }}>
              <thead>
                <tr>
                  <th style={{ textAlign: "left", padding: "8px 14px", width: 40 }}></th>
                  <th style={{ textAlign: "left", padding: "8px 14px" }}>{window.L("Nom", "Name", "Nombre")}</th>
                  <th style={{ textAlign: "left", padding: "8px 14px" }}>Code</th>
                  <th style={{ textAlign: "left", padding: "8px 14px" }}>Type</th>
                  <th style={{ textAlign: "left", padding: "8px 14px" }}>{window.L("Devises", "Currencies", "Divisas")}</th>
                  <th style={{ textAlign: "center", padding: "8px 14px" }}>{window.L("Actif", "Active", "Activo")}</th>
                  <th style={{ textAlign: "right", padding: "8px 14px" }}></th>
                </tr>
              </thead>
              <tbody>
                {methods.map((m) => (
                  <tr key={m.code}>
                    <td style={{ padding: "8px 14px", fontSize: 20, textAlign: "center" }}>{m.icon_emoji || "💳"}</td>
                    <td style={{ padding: "8px 14px", fontWeight: 600 }}>{(lang === "es" ? (m.display_name_es != null ? m.display_name_es : m.display_name_en) : lang === "fr" ? m.display_name_fr : m.display_name_en)}</td>
                    <td style={{ padding: "8px 14px", fontFamily: "monospace", fontSize: 11.5, color: "var(--text-faint)" }}>{m.code}</td>
                    <td style={{ padding: "8px 14px" }}>
                      <span style={{ padding: "2px 7px", borderRadius: 4, background: m.kind === "stripe" ? "#dbeafe" : m.kind === "redirect" ? "#fef3c7" : "#e0f2fe", color: m.kind === "stripe" ? "#1e40af" : m.kind === "redirect" ? "#78350f" : "#075985", fontSize: 11, fontWeight: 600 }}>
                        {m.kind}
                      </span>
                    </td>
                    <td style={{ padding: "8px 14px", fontSize: 11, color: "var(--text-faint)" }}>
                      {!m.currencies || m.currencies.length === 0 ? (window.L("Toutes", "All", "Todas")) : m.currencies.join(", ")}
                    </td>
                    <td style={{ padding: "8px 14px", textAlign: "center" }}>
                      <button onClick={() => onToggle(m)}
                        style={{ padding: "3px 12px", borderRadius: 999, border: "none", background: m.enabled ? "#15803d" : "#94a3b8", color: "white", cursor: "pointer", fontSize: 11, fontWeight: 700 }}>
                        {m.enabled ? "ON" : "OFF"}
                      </button>
                    </td>
                    <td style={{ padding: "8px 14px", textAlign: "right" }}>
                      <button onClick={() => setEditing(m)} className="btn xs" style={{ marginRight: 4 }}>✎</button>
                      <button onClick={() => onDelete(m)} className="btn xs" style={{ color: "#dc2626" }}>🗑</button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>
        {editing && (
          <PaymentMethodEditor lang={lang} existing={editing === "new" ? null : editing}
            onClose={() => setEditing(null)} onSaved={refresh} />
        )}
      </div>
    );
  }

// ── Modal d'édition / création d'un moyen de paiement ───────────────
  function PaymentMethodEditor({ lang, existing, onClose, onSaved }) {
    const isNew = !existing;
    const [code, setCode] = useState(existing ? existing.code : "");
    const [displayFr, setDisplayFr] = useState(existing ? existing.display_name_fr : "");
    const [displayEn, setDisplayEn] = useState(existing ? existing.display_name_en : "");
    const [icon, setIcon] = useState(existing ? (existing.icon_emoji || "💳") : "💳");
    const [descFr, setDescFr] = useState(existing ? (existing.description_fr || "") : "");
    const [descEn, setDescEn] = useState(existing ? (existing.description_en || "") : "");
    const [enabled, setEnabled] = useState(existing ? !!existing.enabled : false);
    const [kind, setKind] = useState(existing ? existing.kind : "manual");
    const [redirectUrl, setRedirectUrl] = useState(existing ? (existing.redirect_url || "") : "");
    const [instrFr, setInstrFr] = useState(existing ? (existing.instructions_fr || "") : "");
    const [instrEn, setInstrEn] = useState(existing ? (existing.instructions_en || "") : "");
    const [currencies, setCurrencies] = useState(existing && existing.currencies ? existing.currencies.join(", ") : "");
    const [planCodes, setPlanCodes] = useState(existing && existing.plan_codes ? existing.plan_codes.join(", ") : "");
    const [sortOrder, setSortOrder] = useState(existing ? (existing.sort_order || 100) : 100);
    const [busy, setBusy] = useState(false);
    const [err, setErr] = useState(null);
    const Modal = window.Modal;

const inp = { padding: "8px 10px", borderRadius: 6, border: "1px solid var(--line)", background: "var(--bg)", color: "var(--text)", fontSize: 13, width: "100%", boxSizing: "border-box" };
    const lbl = { display: "block", fontSize: 11, fontWeight: 600, marginBottom: 4, color: "var(--text-faint)", textTransform: "uppercase", letterSpacing: "0.04em" };

return (
      <Modal lang={lang}
        title={isNew ? (window.L("Nouveau moyen de paiement", "New payment method", "Nuevo método de pago")) : (window.L("Modifier le moyen de paiement", "Edit payment method", "Editar el método de pago"))}
        onClose={onClose}>
        <form onSubmit={onSubmit} style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          <div style={{ display: "grid", gridTemplateColumns: "120px 1fr", gap: 12 }}>
            <div>
              <label style={lbl}>{window.L("Icône", "Icon", "Icono")}</label>
              <input value={icon} onChange={(e) => setIcon(e.target.value)} maxLength={4} style={{ ...inp, fontSize: 20, textAlign: "center", padding: "10px 6px" }} />
            </div>
            <div>
              <label style={lbl}>Code <span style={{ color: "#dc2626" }}>*</span></label>
              <input value={code} onChange={(e) => setCode(e.target.value.toLowerCase())} disabled={!isNew} placeholder="orange_money" required style={inp} />
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            <div>
              <label style={lbl}>{window.L("Nom affiché (FR)", "Display (FR)", "Nombre mostrado (FR)")} *</label>
              <input value={displayFr} onChange={(e) => setDisplayFr(e.target.value)} required style={inp} />
            </div>
            <div>
              <label style={lbl}>{window.L("Nom affiché (EN)", "Display (EN)", "Nombre mostrado (EN)")} *</label>
              <input value={displayEn} onChange={(e) => setDisplayEn(e.target.value)} required style={inp} />
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            <div>
              <label style={lbl}>{window.L("Description (FR)", "Description (FR)", "Descripción (FR)")}</label>
              <input value={descFr} onChange={(e) => setDescFr(e.target.value)} style={inp} />
            </div>
            <div>
              <label style={lbl}>{window.L("Description (EN)", "Description (EN)", "Descripción (EN)")}</label>
              <input value={descEn} onChange={(e) => setDescEn(e.target.value)} style={inp} />
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 100px", gap: 12 }}>
            <div>
              <label style={lbl}>{window.L("Type d'intégration", "Integration type", "Tipo de integración")}</label>
              <select value={kind} onChange={(e) => setKind(e.target.value)} style={inp}>
                <option value="manual">{window.L("Manuel (instructions)", "Manual (instructions)", "Manual (instrucciones)")}</option>
                <option value="redirect">{window.L("Redirection (URL externe)", "Redirect (external URL)", "Redirección (URL externa)")}</option>
                <option value="stripe">Stripe</option>
              </select>
            </div>
            <div>
              <label style={lbl}>{window.L("Ordre d'affichage", "Sort order", "Orden de visualización")}</label>
              <input type="number" value={sortOrder} onChange={(e) => setSortOrder(parseInt(e.target.value, 10) || 100)} style={inp} />
            </div>
            <div>
              <label style={lbl}>{window.L("Actif", "Active", "Activo")}</label>
              <button type="button" onClick={() => setEnabled(!enabled)}
                style={{ padding: "8px 10px", borderRadius: 6, border: "none", background: enabled ? "#15803d" : "#94a3b8", color: "white", cursor: "pointer", fontWeight: 700, width: "100%" }}>
                {enabled ? "ON" : "OFF"}
              </button>
            </div>
          </div>
          {kind === "redirect" && (
            <div>
              <label style={lbl}>{window.L("URL de redirection", "Redirect URL", "URL de redirección")}</label>
              <input value={redirectUrl} onChange={(e) => setRedirectUrl(e.target.value)} placeholder="https://www.paypal.com/..." style={inp} />
            </div>
          )}
          {kind === "manual" && (
            <>
              <div>
                <label style={lbl}>{window.L("Instructions (FR, Markdown)", "Instructions (FR, Markdown)", "Instrucciones (FR, Markdown)")}</label>
                <textarea value={instrFr} onChange={(e) => setInstrFr(e.target.value)} rows={6}
                  placeholder={window.L("1. Composez le code USSD…\n2. …", "1. Dial USSD code…\n2. …", "1. Marque el código USSD…\n2. …")}
                  style={{ ...inp, fontFamily: "inherit", resize: "vertical" }} />
              </div>
              <div>
                <label style={lbl}>{window.L("Instructions (EN, Markdown)", "Instructions (EN, Markdown)", "Instrucciones (EN, Markdown)")}</label>
                <textarea value={instrEn} onChange={(e) => setInstrEn(e.target.value)} rows={6} style={{ ...inp, fontFamily: "inherit", resize: "vertical" }} />
              </div>
            </>
          )}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            <div>
              <label style={lbl}>{window.L("Devises (vide = toutes)", "Currencies (empty = all)", "Divisas (vacío = todas)")}</label>
              <input value={currencies} onChange={(e) => setCurrencies(e.target.value)} placeholder="EUR, USD, XOF" style={inp} />
            </div>
            <div>
              <label style={lbl}>{window.L("Plans (vide = tous)", "Plans (empty = all)", "Planes (vacío = todos)")}</label>
              <input value={planCodes} onChange={(e) => setPlanCodes(e.target.value)} placeholder="pro, enterprise" style={inp} />
            </div>
          </div>
          {err && <div style={{ color: "#dc2626", fontSize: 12.5 }}>{err}</div>}
          <div style={{ display: "flex", gap: 8, justifyContent: "flex-end", marginTop: 6 }}>
            <button type="button" onClick={onClose} disabled={busy} style={{ padding: "9px 16px", borderRadius: 6, border: "1px solid var(--line)", background: "var(--bg)", color: "var(--text)", cursor: "pointer" }}>
              {window.L("Annuler", "Cancel", "Cancelar")}
            </button>
            <button type="submit" disabled={busy} className="btn primary">
              {busy ? (window.L("Enregistrement…", "Saving…", "Guardando…")) : (window.L("Enregistrer", "Save", "Guardar"))}
            </button>
          </div>
        </form>
      </Modal>
    );
  }

// ──────────────────────────────────────────────────────────────────────
  // SuperAdminOrgPicker : affiché à la place du screen Facturation quand un
  // super-admin n'a pas d'organisation rattachée (profile.organization_id
  // NULL). Liste toutes les orgs actives et permet de choisir laquelle
  // « acter » — propage via setActingOrgId qui persiste dans localStorage.
  // ──────────────────────────────────────────────────────────────────────
  function SuperAdminOrgPicker({ lang, setActingOrgId }) {
    const { data: allOrgs, loading } = window.melr.useAllOrganizations
      ? window.melr.useAllOrganizations()
      : { data: [], loading: false };
    const [search, setSearch] = useState("");
    const visible = (allOrgs || []).filter((o) => !o.archived_at)
      .filter((o) => !search.trim() || (o.name || "").toLowerCase().includes(search.trim().toLowerCase()));

return (
      <div className="page">
        <div className="page-header">
          <div className="page-eyebrow">{window.L("PARAMÈTRES", "SETTINGS", "AJUSTES")}</div>
          <h1 className="page-title">{window.L("Facturation", "Billing", "Facturación")}</h1>
          <div className="page-sub">
            {window.L("Votre compte super-administrateur n'a pas d'organisation par défaut. Choisissez l'organisation dont vous voulez consulter la facturation.", "Your super-admin account has no default organization. Pick which one's billing you'd like to view.", "Su cuenta de superadministrador no tiene organización por defecto. Elija la organización cuya facturación desea consultar.")}
          </div>
        </div>
        <div style={{
          marginTop: 16, padding: "16px 18px",
          borderRadius: 10, background: "linear-gradient(90deg,#ede9fe 0%,#faf5ff 100%)",
          border: "1px solid #c4b5fd", display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap",
        }}>
          <span style={{ fontSize: 22 }}>👑</span>
          <div style={{ flex: 1, minWidth: 200 }}>
            <div style={{ fontWeight: 700, color: "#5b21b6", marginBottom: 2 }}>
              {window.L("Mode super-administrateur", "Super-admin mode", "Modo superadministrador")}
            </div>
            <div style={{ fontSize: 12, color: "#6b21a8" }}>
              {window.L("Acter une organisation persiste dans votre navigateur. Vous pouvez en changer à tout moment depuis la barre du haut.", "Acting on an organization persists in your browser. You can switch at any time from the topbar.", "Actuar sobre una organización se conserva en su navegador. Puede cambiarla en cualquier momento desde la barra superior.")}
            </div>
          </div>
        </div>

<div className="card" style={{ marginTop: 16 }}>
          <div className="card-head" style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <div className="card-title">{window.L("Organisations", "Organizations", "Organizaciones")}</div>
            <div style={{ flex: 1 }} />
            <input type="search" value={search} onChange={(e) => setSearch(e.target.value)}
              placeholder={window.L("Rechercher…", "Search…", "Buscar…")}
              style={{ padding: "6px 10px", borderRadius: 6, border: "1px solid var(--line)", background: "var(--bg)", fontSize: 12, minWidth: 200 }} />
          </div>
          {loading ? (
            <div style={{ padding: 28, textAlign: "center", color: "var(--text-faint)" }}>
              {window.L("Chargement des organisations…", "Loading organizations…", "Cargando organizaciones…")}
            </div>
          ) : visible.length === 0 ? (
            <div style={{ padding: 28, textAlign: "center", color: "var(--text-faint)" }}>
              {window.L("Aucune organisation trouvée.", "No organization found.", "No se ha encontrado ninguna organización.")}
            </div>
          ) : (
            <div style={{ padding: 8 }}>
              {visible.map((o) => (
                <button key={o.id} onClick={() => { setActingOrgId && setActingOrgId(o.id); }}
                  style={{
                    width: "100%", textAlign: "left",
                    padding: "12px 14px", marginBottom: 6,
                    border: "1px solid var(--line)", borderRadius: 8,
                    background: "var(--bg-elev)", cursor: "pointer",
                    display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12,
                  }}>
                  <div>
                    <div style={{ fontWeight: 600, fontSize: 14, color: "var(--text)" }}>{o.name}</div>
                    <div style={{ fontSize: 11, color: "var(--text-faint)", marginTop: 2 }}>
                      {o.slug} {o.plan_code ? " · " + (window.L("Plan ", "Plan ", "Plan ")) + o.plan_code : ""}
                    </div>
                  </div>
                  <span style={{ color: "#7c3aed", fontWeight: 700, fontSize: 13 }}>
                    {window.L("Acter →", "Act as →", "Actuar →")}
                  </span>
                </button>
              ))}
            </div>
          )}
        </div>

<div style={{ marginTop: 16, padding: 14, borderRadius: 8, background: "var(--bg-sunken)", border: "1px solid var(--line)", fontSize: 12, color: "var(--text-faint)", lineHeight: 1.55 }}>
          <strong>{window.L("Astuce :", "Tip:", "Consejo:")}</strong>{" "}
          {window.L(
            <>pour qu'une organisation soit votre « org par défaut » (sans avoir à l'acter à chaque session), exécutez dans Supabase SQL Editor :{" "}
                <code style={{ background: "var(--bg)", padding: "1px 6px", borderRadius: 4, fontSize: 11 }}>
                  UPDATE profiles SET organization_id = '<org-uuid>' WHERE id = auth.uid()
                </code>
              </>,
            <>to make an organization your "default" (so you don't need to act on it every session), run in Supabase SQL Editor:{" "}
                <code style={{ background: "var(--bg)", padding: "1px 6px", borderRadius: 4, fontSize: 11 }}>
                  UPDATE profiles SET organization_id = '<org-uuid>' WHERE id = auth.uid()
                </code>
              </>,
            <>para que una organización sea su « org por defecto » (sin tener que confirmarla en cada sesión), ejecute en Supabase SQL Editor :{" "}
                <code style={{ background: "var(--bg)", padding: "1px 6px", borderRadius: 4, fontSize: 11 }}>
                  UPDATE profiles SET organization_id = '<org-uuid>' WHERE id = auth.uid()
                </code>
              </>)}
        </div>
      </div>
    );
  }

window.BillingScreen = BillingScreen;

// ──────────────────────────────────────────────────────────────────────
  // FeatureGate : composant de hard-gating Pro / Enterprise.
  // Si l'org de l'user a la feature → rend les children (passe-plat).
  // Sinon → rend un upsell screen (verrou + bouton Voir les plans).
  // Super-admin contourne TOUJOURS le gate (cf. useHasFeature).
  //
  // Usage : <FeatureGate code="exante" lang={lang}>
  //           <ExAnte {...screenProps} />
  //         </FeatureGate>
  // ──────────────────────────────────────────────────────────────────────
  function FeatureGate({ code, lang, featureLabel, children }) {
    const { allowed, loading, plan } = window.melr.useHasFeature(code);
    if (loading) {
      return <div className="page"><div style={{ padding: 28, color: "var(--text-faint)" }}>
        {window.L("Vérification de votre plan…", "Checking your plan…", "Comprobando su plan…")}
      </div></div>;
    }
    if (allowed) return children;
    return <FeatureUpsell code={code} lang={lang} featureLabel={featureLabel} currentPlan={plan} />;
  }
  window.FeatureGate = FeatureGate;

// ── Upsell screen affiché quand le plan courant n'autorise pas la feature
  function FeatureUpsell({ code, lang, featureLabel, currentPlan }) {
    // Mapping code → libellé + description, mêmes textes que le catalogue
    // de la page de tarification (FEATURE_CATALOG dans screens-pricing.jsx).
    const META = {
      exante:           { fr: "Évaluation ex-ante par Prix de Référence", en: "Ex-ante appraisal by Reference Price", es: "Evaluación ex ante por Precio de Referencia",
                          emoji: "📈", required: "Pro",
                          desc_fr: "Module phare de MELR : analyse coût-bénéfice, multicritère, sensibilité, finances publiques. Génération de rapports d'instruction pré-projet exportables au format Word/PDF.",
                          desc_en: "MELR flagship module: CBA, multi-criteria, sensitivity, public finance. Generates pre-project appraisal reports exportable to Word/PDF." },
      dhis2:            { fr: "Intégration DHIS2", en: "DHIS2 integration", es: "Integración DHIS2", emoji: "💾", required: "Pro",
                          desc_fr: "Connexion bidirectionnelle avec votre instance DHIS2 (push valeurs, pull analytics, import catalogue).", desc_en: "Two-way connection with your DHIS2 instance." },
      msc:              { fr: "Histoires de changement (MSC)", en: "Stories of change (MSC)", es: "Historias de cambio (MSC)", emoji: "📖", required: "Pro",
                          desc_fr: "Collecte qualitative + sélection d'histoires significatives + synthèse exportable.", desc_en: "Qualitative collection + selection + exportable synthesis." },
      learning:         { fr: "Apprentissage (le L de MELR)", en: "Learning (the L in MELR)", es: "Aprendizaje (la L de MELR)", emoji: "🧠", required: "Pro",
                          desc_fr: "Questions d'apprentissage instruites par projet + Histoires de changement (MSC). Base d'évidence structurée et synthèse trans-projets pour les bailleurs.",
                          desc_en: "Project-level learning questions + Stories of Change (MSC). Structured evidence base and cross-project synthesis for donors." },
      kobo_odk:         { fr: "Intégration KoboToolbox / ODK Central", en: "KoboToolbox / ODK Central integration", es: "Integración KoboToolbox / ODK Central", emoji: "📲", required: "Pro",
                          desc_fr: "Connectez vos instances Kobo ou ODK Central et importez les soumissions de vos enquêtes terrain comme valeurs d'indicateurs MELR. Pull automatique avec mapping XLSForm → indicateur.",
                          desc_en: "Connect your Kobo or ODK Central instances and import field survey submissions as MELR indicator values. Automated pull with XLSForm → indicator mapping." },
      portfolio:        { fr: "Tableau de bord portefeuille", en: "Portfolio dashboard", es: "Panel de control de cartera", emoji: "📊", required: "Pro",
                          desc_fr: "Vue agrégée multi-projets pour bailleurs et PMU avec alertes RAG.", desc_en: "Aggregated multi-project view for donors/PMUs with RAG alerts." },
      logframe_export:  { fr: "Cadre logique exportable", en: "Logframe export", es: "Marco lógico exportable", emoji: "📋", required: "Pro",
                          desc_fr: "Génération du cadre logique standard 4 colonnes au format donateur (.docx).", desc_en: "Standard 4-column logframe export in donor format (.docx)." },
      ai_assist:        { fr: "Assistant IA", en: "AI Assistant", es: "Asistente de IA", emoji: "🤖", required: "Enterprise",
                          desc_fr: "Suggestions d'indicateurs, génération de PIRS, résumé exécutif, détection d'anomalies.", desc_en: "Indicator suggestions, PIRS generation, exec summary, anomaly detection." },
      api:              { fr: "API publique REST", en: "Public REST API", es: "API pública REST", emoji: "🔌", required: "Enterprise",
                          desc_fr: "Clés API par organisation, doc OpenAPI, intégrations PowerBI / scripts.", desc_en: "Per-org API keys, OpenAPI docs, PowerBI / script integrations." },
      white_label:      { fr: "Marque blanche", en: "White-label", es: "Marca blanca", emoji: "🎨", required: "Enterprise",
                          desc_fr: "Logo, couleurs, sous-domaine personnalisés.", desc_en: "Custom logo, colors, sub-domain." },
      dedicated_support:{ fr: "Support dédié", en: "Dedicated support", es: "Soporte dedicado", emoji: "🎧", required: "Enterprise",
                          desc_fr: "Account manager, chat + visio, réponse garantie.", desc_en: "Account manager, chat + video, guaranteed response." },
      sla:              { fr: "SLA contractuel 99,9 %", en: "99.9% SLA", es: "SLA contractual del 99,9 %", emoji: "⏱", required: "Enterprise",
                          desc_fr: "Garantie de disponibilité avec pénalités contractuelles.", desc_en: "Uptime guarantee with contractual penalties." },
      backup_dr:        { fr: "Backup & Disaster Recovery", en: "Backup & Disaster Recovery", es: "Backup y Disaster Recovery", emoji: "🛡", required: "Enterprise",
                          desc_fr: "Sauvegardes quotidiennes + procédure de restauration documentée + drill trimestriel.", desc_en: "Daily backups + documented restore procedure + quarterly drill." },
    };
    const m = META[code] || { fr: featureLabel || code, en: featureLabel || code, emoji: "🔒", required: "Pro" };
    const planLabel = currentPlan ? currentPlan.charAt(0).toUpperCase() + currentPlan.slice(1) : "—";

return (
      <div className="page">
        <div style={{
          maxWidth: 680, margin: "60px auto 0", padding: "36px 32px",
          background: "white", border: "1px solid #e2e8f0", borderRadius: 14,
          boxShadow: "0 10px 40px rgba(0,0,0,0.08)", textAlign: "center",
        }}>
          <div style={{ fontSize: 64, marginBottom: 12 }}>{m.emoji}🔒</div>
          <div style={{
            display: "inline-block", padding: "4px 12px",
            background: "#fef3c7", color: "#78350f",
            borderRadius: 999, fontSize: 11, fontWeight: 700,
            letterSpacing: "0.05em", textTransform: "uppercase", marginBottom: 16,
          }}>
            {window.L("Fonctionnalité ", "Feature ", "Funcionalidad ")}{m.required}
          </div>
          <h1 style={{ fontSize: 28, fontWeight: 800, margin: "0 0 12px", color: "#0f172a" }}>
            {(lang === "es" ? (m.es != null ? m.es : m.en) : lang === "fr" ? m.fr : m.en)}
          </h1>
          <p style={{ fontSize: 14.5, color: "#475569", lineHeight: 1.6, maxWidth: 520, margin: "0 auto 26px" }}>
            {(lang === "es" ? (m.desc_es != null ? m.desc_es : m.desc_en) : lang === "fr" ? m.desc_fr : m.desc_en)}
          </p>
          <div style={{ padding: "14px 18px", background: "#f8fafc", borderRadius: 10, border: "1px solid #e2e8f0", marginBottom: 24, fontSize: 13 }}>
            <div style={{ color: "#64748b", marginBottom: 4 }}>
              {window.L("Votre plan actuel", "Your current plan", "Su plan actual")}
            </div>
            <div style={{ fontSize: 18, fontWeight: 700, color: "#0f172a" }}>{planLabel}</div>
            <div style={{ fontSize: 12, color: "#64748b", marginTop: 6 }}>
              {window.L(
                <>Passez en <strong>{m.required}</strong> pour débloquer cette fonctionnalité et 4 autres modules métier.</>,
                <>Upgrade to <strong>{m.required}</strong> to unlock this and 4 more business modules.</>,
                <>Cambie a <strong>{m.required}</strong> para desbloquear esta funcionalidad y 4 módulos de negocio más.</>)}
            </div>
          </div>
          <div style={{ display: "flex", gap: 10, justifyContent: "center", flexWrap: "wrap" }}>
            <a href="/MELR?pricing=1"
              style={{
                padding: "12px 22px", borderRadius: 8,
                background: "#0f766e", color: "white", textDecoration: "none",
                fontWeight: 700, fontSize: 14, display: "inline-flex", alignItems: "center", gap: 8,
              }}>
              {window.L("Voir les plans →", "View plans →", "Ver los planes →")}
            </a>
            <a href="mailto:it@reft-africa.org?subject=Upgrade%20MELR"
              style={{
                padding: "12px 22px", borderRadius: 8,
                background: "white", color: "#0f172a", textDecoration: "none",
                border: "1px solid #cbd5e1", fontWeight: 600, fontSize: 14,
              }}>
              {window.L("Contacter REFT", "Contact REFT", "Contactar con REFT")}
            </a>
          </div>
        </div>
      </div>
    );
  }
  window.FeatureUpsell = FeatureUpsell;

// ──────────────────────────────────────────────────────────────────────
  // SuspensionBanner : bandeau rouge affiché sur TOUTES les pages quand
  // l'organisation courante est suspendue. Inséré une seule fois dans App
  // (cf. app.jsx), pas dans chaque écran. Super-admin voit le bandeau mais
  // pas le lock (peut continuer à naviguer pour diagnostiquer).
  // ──────────────────────────────────────────────────────────────────────
  function SuspensionBanner({ lang, isSuperAdmin, setRoute }) {
    const s = window.melr.useOrgSuspension();
    if (s.loading || !s.suspended) return null;
    const reasonLabel = {
      trial_expired:           { fr: "Votre période d'essai est terminée",       en: "Your trial period has ended", es: "Su período de prueba ha finalizado" },
      payment_overdue_monthly: { fr: "Paiement mensuel en retard",                en: "Monthly payment overdue", es: "Pago mensual atrasado" },
      payment_overdue_yearly:  { fr: "Paiement annuel en retard",                 en: "Yearly payment overdue", es: "Pago anual atrasado" },
    };
    const lbl = reasonLabel[s.reason] || { fr: "Organisation suspendue", en: "Organization suspended", es: "Organización suspendida" };
    const sinceStr = s.since
      ? new Date(s.since).toLocaleDateString(window.L("fr-FR", "en-US", "es-ES"), { day: "numeric", month: "short" })
      : null;
    return (
      <div style={{
        position: "sticky", top: 0, zIndex: 99998,
        background: "linear-gradient(90deg, #b91c1c 0%, #dc2626 100%)",
        color: "white", padding: "10px 18px",
        boxShadow: "0 2px 8px rgba(185,28,28,0.3)",
        display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, flexWrap: "wrap",
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, flex: 1, minWidth: 0 }}>
          <span style={{ fontSize: 22 }}>🔒</span>
          <div style={{ minWidth: 0 }}>
            <div style={{ fontWeight: 700, fontSize: 13.5 }}>
              {window.L("⚠ Service suspendu — ", "⚠ Service suspended — ", "⚠ Servicio suspendido — ")}
              {(lang === "es" ? (lbl.es != null ? lbl.es : lbl.en) : lang === "fr" ? lbl.fr : lbl.en)}
              {sinceStr && <span style={{ marginLeft: 8, opacity: 0.85, fontWeight: 400, fontSize: 12 }}>
                {window.L("depuis le " + sinceStr, "since " + sinceStr, "desde el " + sinceStr)}
              </span>}
            </div>
            <div style={{ fontSize: 11.5, opacity: 0.9, marginTop: 1 }}>
              {window.L("Vous gardez l'accès en lecture seule. Régularisez votre abonnement pour réactiver les saisies.", "You still have read-only access. Settle your subscription to re-enable editing.", "Conserva el acceso en solo lectura. Regularice su suscripción para reactivar la edición.")}
            </div>
          </div>
        </div>
        <div style={{ display: "flex", gap: 6, flexShrink: 0 }}>
          <button onClick={() => setRoute && setRoute("billing")}
            style={{ padding: "7px 14px", borderRadius: 6, border: "none", background: "white", color: "#b91c1c", fontWeight: 700, cursor: "pointer", fontSize: 12 }}>
            {window.L("Régulariser →", "Settle →", "Regularizar →")}
          </button>
          {isSuperAdmin && (
            <span style={{ padding: "5px 9px", borderRadius: 6, background: "rgba(255,255,255,0.2)", fontSize: 10.5, fontWeight: 700, alignSelf: "center", letterSpacing: "0.04em" }}>
              {window.L("ACCÈS SUPER-ADMIN", "SUPER-ADMIN BYPASS", "ACCESO SUPERADMIN")}
            </span>
          )}
        </div>
      </div>
    );
  }
  window.SuspensionBanner = SuspensionBanner;

// ──────────────────────────────────────────────────────────────────────
  // UsageBadge : petit chip de quota toujours visible en sidebar.
  // Couleur = pire statut de tous les compteurs (block > warn > ok).
  // Click → ouvre Billing screen.
  // ──────────────────────────────────────────────────────────────────────
  function UsageBadge({ lang, setRoute }) {
    const { data: planData } = window.melr.useOrgPlan();
    const { data: usage } = window.melr.useUsageStats();
    if (!planData || !planData.definition || !usage) return null;
    const rows = window.melr.usageVsLimits(usage, planData.definition);
    if (rows.length === 0) return null;
    const hasBlock = rows.some((r) => r.status === "block");
    const hasWarn  = rows.some((r) => r.status === "warn");
    const status = hasBlock ? "block" : hasWarn ? "warn" : "ok";
    const colorMap = {
      ok:    { bg: "#dcfce7", border: "#86efac", text: "#065f46", icon: "✓" },
      warn:  { bg: "#fef3c7", border: "#fcd34d", text: "#78350f", icon: "⚠" },
      block: { bg: "#fee2e2", border: "#fca5a5", text: "#7f1d1d", icon: "🔒" },
    };
    const c = colorMap[status];
    const planLabel = (lang === "es" ? (planData.definition.display_name_es != null ? planData.definition.display_name_es : planData.definition.display_name_en) : lang === "fr" ? planData.definition.display_name_fr : planData.definition.display_name_en);
    // Stat la plus pertinente à afficher : celle au pct le plus élevé qui n'est pas illimitée
    const top = rows.filter((r) => !r.unlimited).sort((a, b) => b.pct - a.pct)[0];
    return (
      <button onClick={() => setRoute && setRoute("billing")}
        title={window.L(
          "Plan " + planLabel + " · cliquer pour voir l'utilisation et changer de plan",
          "Plan " + planLabel + " · click to view usage and change plan",
          "Plan " + planLabel + " · haga clic para ver el uso y cambiar de plan")}
        style={{
          display: "flex", alignItems: "center", gap: 6,
          padding: "5px 9px", borderRadius: 6,
          background: c.bg, border: "1px solid " + c.border, color: c.text,
          fontSize: 11, fontWeight: 600, cursor: "pointer", width: "100%",
          marginTop: 6,
        }}>
        <span>{c.icon}</span>
        <span style={{ flex: 1, textAlign: "left", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
          {planLabel}{top ? " · " + (top.used || 0) + "/" + top.limit + " " + top.resource : ""}
        </span>
      </button>
    );
  }
  window.UsageBadge = UsageBadge;
})();