/* global React, Icon, PROJECTS, SECTORS, sectorById, sectorLabel, projectName, projectCountries */
// ============================================================================
// Dashboard V2 — refonte ergonomique (réduction du bruit visuel)
// ----------------------------------------------------------------------------
// Activée par `?ui=v2` ou `#ui=v2` dans l'URL. Le legacy reste accessible
// par défaut tant que le toggle n'a pas été promu en `default` global.
//
// Décisions de design (vs legacy) :
//
//   1. Hero compact : 1 ligne de contexte + 1 CTA primaire « + Nouveau ».
//      Les options Période / Filtrer / Exporter sont regroupées sous un
//      menu kebab discret « ⋯ Options » (réduit de 4 boutons à 1).
//
//   2. KPI grid : 3 cartes au lieu de 4 (Projets / Décaissé / Indicateurs OK).
//      « Bénéficiaires » dropped — chiffre vanity peu actionable au quotidien.
//      Sparklines retirées (lecture rapide impossible à cette échelle).
//      Pas de delta « vs Q4 » (info dénuée de contexte sans tooltip).
//      Une seule micro-flèche directionnelle (vert/rouge) à droite de la valeur.
//
//   3. Une SEULE carte « Répartition » avec onglets Secteurs / Programmes
//      (au lieu de 2 cards quasi-identiques empilées). Cohérence cognitive
//      + 280 px de scroll économisés.
//      Légende simplifiée : nom + budget en colonne unique (pas de
//      duplication des % via le tile chip dot + le tile %).
//
//   4. Portefeuille condensé : 4 colonnes (au lieu de 7).
//      Projet · Secteur · Statut · Avancement.
//      Lead / Pays / Indicateurs accessibles via clic ligne (drill-in).
//
//   5. Performance & Alertes côte à côte mais réduits :
//      Performance affiche TOP 3 + BOTTOM 3 (au lieu des 7 secteurs).
//      Alertes limitées à 3 lignes avec un seul code couleur RAG.
//      Plus de pills statut redondantes.
//
//   6. Flux d'activité : 4 lignes max, icônes harmonisées (3 types max).
// ============================================================================

(function () {
  const { useState, useMemo, useRef, useEffect } = React;

  // Détecte si l'URL force la v2 : ?ui=v2 ou #ui=v2
  function isV2Route() {
    if (typeof window === "undefined") return false;
    try {
      const p = new URLSearchParams(window.location.search);
      if (p.get("ui") === "v2") return true;
    } catch (_) {}
    return window.location.hash === "#ui=v2";
  }
  window.isDashboardV2 = isV2Route;

  // ── Helper formaté du delta : pas de "vs Q4" verbeux, juste ↗ ↘ → ─
  function DeltaArrow({ dir }) {
    const map = { up: { c: "#16a34a", s: "↗" }, down: { c: "#dc2626", s: "↘" }, flat: { c: "#94a3b8", s: "→" } };
    const m = map[dir] || map.flat;
    return <span style={{ color: m.c, fontWeight: 700, marginLeft: 6 }}>{m.s}</span>;
  }

  // ── Card primitives (réutilise styles.css mais override densité) ──
  function KpiCard({ label, value, dir }) {
    return (
      <div style={{
        background: "var(--bg-elev)",
        border: "1px solid var(--line)",
        borderRadius: 10,
        padding: "16px 20px",
      }}>
        <div style={{ fontSize: 11, color: "var(--text-faint)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600, marginBottom: 6 }}>
          {label}
        </div>
        <div style={{ fontSize: 26, fontWeight: 800, color: "var(--text)", display: "inline-flex", alignItems: "baseline" }}>
          <span>{value}</span>
          {dir && <DeltaArrow dir={dir} />}
        </div>
      </div>
    );
  }

  // ── Composant principal ─────────────────────────────────────────────────
  function DashboardV2({ t, lang, onOpen, isSuperAdmin, actingOrgId, myOrgId }) {
    const acting = !!(isSuperAdmin && actingOrgId && actingOrgId !== myOrgId);
    const { projects: ALL_PROJECTS, loading, error, realtime } = window.melr.useProjects();
    const { programmes: PROGRAMMES_DASH } = window.melr.usePrograms(acting ? actingOrgId : undefined);
    const PROJECTS_ALL = ALL_PROJECTS || [];
    const PROJECTS = acting ? PROJECTS_ALL.filter((p) => p.organizationId === actingOrgId) : PROJECTS_ALL;

    const { currency } = window.melr.useCurrency();
    const fmtM = (v, src) => window.melr.formatAmount(v, src || "EUR", currency, lang);
    const fmtAgg = (projs, field) => {
      const inEur = (projs || []).reduce((s, p) => s + window.melr.convertToEur(p[field] || 0, p.nativeCurrency || "EUR"), 0);
      return window.melr.formatMoney(inEur, currency, lang);
    };

    const [optionsOpen, setOptionsOpen]   = useState(false);
    const [createOpen, setCreateOpen]     = useState(false);
    const [partTab, setPartTab]           = useState("sector");  // sector | programme
    const optionsRef = useRef(null);

    // Click-outside pour le menu ⋯ Options
    useEffect(() => {
      const onDoc = (e) => {
        if (!optionsRef.current) return;
        if (!optionsRef.current.contains(e.target)) setOptionsOpen(false);
      };
      window.addEventListener("click", onDoc);
      return () => window.removeEventListener("click", onDoc);
    }, []);

    // ── Données dérivées (AVANT toute early return — Rules of Hooks) ──
    // Les useMemo doivent être appelés à CHAQUE render dans le même ordre,
    // sinon React jette "Rendered more hooks than during the previous render"
    // quand on passe de loading=true à loading=false.
    const sectorBreakdown = useMemo(() => SECTORS.map((s) => {
      const matches = PROJECTS.filter((p) => p.sector === s.id);
      const toEur = (v, ccy) => window.melr.convertToEur(v, ccy || "EUR");
      return {
        sector: s, count: matches.length,
        budget:    matches.reduce((sum, p) => sum + toEur(p.budget,    p.nativeCurrency), 0),
        disbursed: matches.reduce((sum, p) => sum + toEur(p.disbursed, p.nativeCurrency), 0),
      };
    }).filter((b) => b.count > 0).sort((a, b) => b.budget - a.budget), [PROJECTS]);
    const totalBudget = sectorBreakdown.reduce((s, b) => s + b.budget, 0);

    const programmeBreakdown = useMemo(() => (PROGRAMMES_DASH || []).map((pg) => {
      const matches = PROJECTS.filter((p) => p.programmeId === pg.id);
      const toEur = (v, ccy) => window.melr.convertToEur(v, ccy || "EUR");
      return {
        programme: pg, sector: sectorById(pg.sector_id),
        count: matches.length,
        budget: matches.reduce((sum, p) => sum + toEur(p.budget, p.nativeCurrency), 0),
      };
    }).filter((b) => b.count > 0).sort((a, b) => b.budget - a.budget), [PROJECTS, PROGRAMMES_DASH]);
    const totalBudgetProg = programmeBreakdown.reduce((s, b) => s + b.budget, 0);

    if (loading) {
      return <div className="page"><div className="page-body" style={{ padding: 40, color: "var(--text-faint)" }}>{window.L("Chargement…", "Loading…", "Cargando…")}</div></div>;
    }
    if (error) {
      return <div className="page"><div className="page-body" style={{ padding: 40, color: "#b91c1c" }}>{(window.L("Erreur : ", "Error: ", "Error: ")) + error}</div></div>;
    }

    // KPIs : 3 cartes
    const indicatorsOnTarget = Math.round(PROJECTS.length * 0.82);  // placeholder live à brancher
    const kpis = [
      { label: window.L("Projets actifs", "Active projects", "Proyectos activos"),        value: PROJECTS.length,             dir: "up" },
      { label: window.L("Décaissé", "Disbursed", "Desembolsado"),              value: fmtAgg(PROJECTS, "disbursed"), dir: "flat" },
      { label: window.L("Indicateurs OK", "On-target indicators", "Indicadores en objetivo"),   value: indicatorsOnTarget + "/" + (PROJECTS.length || 1) * 12, dir: "up" },
    ];

    // Portefeuille : 4 colonnes, 6 projets max
    const portfolio = PROJECTS.slice(0, 6).map((p) => {
      const s = sectorById(p.sector);
      const status = p.risk === "ok" ? "ok" : p.risk === "warn" ? "warn" : "risk";
      return { id: p.id, name: projectName(p, lang), sector: s, status, progress: Math.round(p.progress || 0), raw: p };
    });

    // Performance top/bottom : 3 + 3 (au lieu de 7)
    const perfRanked = sectorBreakdown.map((b) => ({
      sector: b.sector, budget: b.budget,
      pct: b.budget > 0 ? Math.round((b.disbursed / b.budget) * 100) : 0,
    })).sort((a, b) => b.pct - a.pct);
    const perfTop = perfRanked.slice(0, 3);
    const perfBottom = perfRanked.slice(-3).reverse();

    // Alertes condensées : 3 max
    const alerts = [
      { rag: "risk", title: window.L("Audit de données en retard", "Data audit overdue", "Auditoría de datos atrasada"), sub: "P-377 · WASH Tchad — 4 sites" },
      { rag: "warn", title: window.L("Rapport bailleur dans 5 j", "Donor report in 5d", "Informe al donante en 5 d"), sub: "P-241 · format AFD" },
      { rag: "warn", title: window.L("7 indicateurs sous la cible", "7 indicators below target", "7 indicadores por debajo del objetivo"), sub: window.L("Couverture 78 % au Q1", "78% Q1 coverage", "Cobertura 78 % en T1") },
    ];

    // Activité : 4 lignes max, icônes harmonisées (3 types)
    const activity = [
      { who: "Aïssata D.", what: window.L("rapport trimestriel", "Q1 report", "informe trimestral"), obj: "P-241",  when: "12 m", kind: "doc" },
      { who: "Modibo K.",  what: window.L("validation des rendements", "yield validation", "validación de los rendimientos"), obj: "P-302", when: "1 h", kind: "check" },
      { who: "Halima I.",  what: window.L("412 enquêtes importées", "412 surveys imported", "412 encuestas importadas"), obj: "Kobo", when: "3 h", kind: "doc" },
      { who: "Fatima O.",  what: window.L("audit fiscal clôturé", "fiscal audit closed", "auditoría fiscal cerrada"), obj: "P-098", when: "1j", kind: "check" },
    ];
    const actIcon = (k) => k === "check" ? <Icon.shieldCheck /> : k === "alert" ? <Icon.alert /> : <Icon.fileText />;

    const ragColor = (r) => r === "risk" ? "#dc2626" : r === "warn" ? "#d97706" : "#16a34a";
    const ragBg    = (r) => r === "risk" ? "#fee2e2" : r === "warn" ? "#fef3c7" : "#dcfce7";

    return (
      <div className="page">
        {/* ── Hero compact ──────────────────────────────────────────── */}
        <div className="page-header">
          <div className="page-eyebrow">{window.L("TABLEAU DE BORD", "DASHBOARD", "PANEL DE CONTROL")}</div>
          <div className="page-header-row">
            <div>
              <h1 className="page-title">
                {window.L("Vue d'ensemble", "Overview", "Visión general")}
                {window.melr.LiveBadge && <window.melr.LiveBadge on={realtime} lang={lang} />}
              </h1>
              <div className="page-sub" style={{ fontSize: 13 }}>
                {window.L(`${PROJECTS.length} projets actifs · ${fmtM(totalBudget)} engagés`, `${PROJECTS.length} active projects · ${fmtM(totalBudget)} committed`, `${PROJECTS.length} proyectos activos · ${fmtM(totalBudget)} comprometidos`)}
              </div>
            </div>
            <div className="page-header-actions" style={{ position: "relative" }}>
              {/* Une seule CTA primaire. Le reste est sous ⋯ */}
              <button className="btn sm primary" onClick={() => setCreateOpen(true)}>
                <Icon.plus /> {t ? t("top.new") : (window.L("Nouveau", "New", "Nuevo"))}
              </button>
              <div ref={optionsRef} style={{ position: "relative" }}>
                <button className="btn sm h-secondary" onClick={(e) => { e.stopPropagation(); setOptionsOpen(!optionsOpen); }}
                  title={window.L("Options", "Options", "Opciones")}>
                  ⋯
                </button>
                {optionsOpen && (
                  <div style={{
                    position: "absolute", top: "100%", right: 0, marginTop: 4,
                    minWidth: 180, background: "var(--bg-elev)", border: "1px solid var(--line)",
                    borderRadius: 8, boxShadow: "0 6px 16px rgba(0,0,0,.12)", padding: 4, zIndex: 50,
                  }}>
                    <button className="btn xs ghost" style={{ width: "100%", justifyContent: "flex-start" }}
                      onClick={() => { setOptionsOpen(false); if (onOpen) onOpen("projects-list"); }}>
                      <Icon.list /> {window.L("Tous les projets", "All projects", "Todos los proyectos")}
                    </button>
                    <button className="btn xs ghost" style={{ width: "100%", justifyContent: "flex-start" }}
                      onClick={() => { setOptionsOpen(false); window.print(); }}>
                      <Icon.download /> {window.L("Exporter (PDF)", "Export (PDF)", "Exportar (PDF)")}
                    </button>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>

        <div className="page-body">
          {/* ── 3 KPI cards ─────────────────────────────────────────── */}
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 12, marginBottom: 18 }}>
            {kpis.map((k, i) => <KpiCard key={i} {...k} />)}
          </div>

          {/* ── Carte unique « Répartition » avec onglets ─────────── */}
          <div className="card" style={{ marginBottom: 16 }}>
            <div className="card-head" style={{ alignItems: "center" }}>
              <div className="card-title">{window.L("Répartition", "Breakdown", "Desglose")}</div>
              <div style={{ flex: 1 }} />
              <div style={{ display: "inline-flex", border: "1px solid var(--line)", borderRadius: 6, overflow: "hidden" }}>
                <button onClick={() => setPartTab("sector")}
                  style={{ padding: "5px 14px", border: "none", background: partTab === "sector" ? "var(--accent, #0f766e)" : "transparent", color: partTab === "sector" ? "white" : "var(--text)", fontSize: 12, fontWeight: 600, cursor: "pointer" }}>
                  {window.L("Secteurs", "Sectors", "Sectores")}
                </button>
                <button onClick={() => setPartTab("programme")}
                  style={{ padding: "5px 14px", border: "none", background: partTab === "programme" ? "var(--accent, #0f766e)" : "transparent", color: partTab === "programme" ? "white" : "var(--text)", fontSize: 12, fontWeight: 600, cursor: "pointer" }}>
                  {window.L("Programmes", "Programmes", "Programas")}
                </button>
              </div>
            </div>
            <div className="card-body">
              {/* Stacked bar (commune) */}
              <div className="sector-bar" style={{ marginBottom: 14 }}>
                {(partTab === "sector" ? sectorBreakdown : programmeBreakdown).map((b, i) => {
                  const total = partTab === "sector" ? totalBudget : totalBudgetProg;
                  const color = (b.sector && b.sector.color) || "#94a3b8";
                  return (
                    <div key={i} className="sector-bar-seg"
                      style={{ width: (b.budget / (total || 1) * 100) + "%", background: color }}
                      title={`${partTab === "sector" ? sectorLabel(b.sector, lang) : b.programme.name_fr || b.programme.name} · ${fmtM(b.budget)}`} />
                  );
                })}
              </div>
              {/* Légende en LISTE simple (pas de grille redondante) */}
              <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                {(partTab === "sector" ? sectorBreakdown : programmeBreakdown).slice(0, 6).map((b, i) => {
                  const total = partTab === "sector" ? totalBudget : totalBudgetProg;
                  const pct = total > 0 ? Math.round((b.budget / total) * 100) : 0;
                  const color = (b.sector && b.sector.color) || "#94a3b8";
                  const label = partTab === "sector" ? sectorLabel(b.sector, lang) : ((lang === "es" ? (b.programme.name_es != null ? b.programme.name_es : b.programme.name_en || b.programme.name_fr) : lang === "fr" ? b.programme.name_fr : b.programme.name_en || b.programme.name_fr));
                  return (
                    <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 13, padding: "4px 0" }}>
                      <span style={{ width: 10, height: 10, borderRadius: 3, background: color, flexShrink: 0 }}></span>
                      <span style={{ flex: 1, color: "var(--text)" }}>{label}</span>
                      <span style={{ color: "var(--text-faint)", fontSize: 12 }}>{b.count} {window.L("projets", "proj.", "proy.")}</span>
                      <span style={{ minWidth: 90, textAlign: "right", fontWeight: 600 }}>{fmtM(b.budget)}</span>
                      <span style={{ minWidth: 42, textAlign: "right", color: "var(--text-faint)", fontSize: 12 }}>{pct} %</span>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>

          {/* ── 2 colonnes : Portefeuille (4 cols) + Alertes ──────── */}
          <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 16, marginBottom: 16 }}>
            <div className="card">
              <div className="card-head">
                <div className="card-title">{window.L("Portefeuille", "Portfolio", "Cartera")}</div>
                <div style={{ flex: 1 }} />
                <button className="btn xs ghost" onClick={() => onOpen && onOpen("projects-list")}>
                  {window.L("Tout voir →", "View all →", "Ver todo →")}
                </button>
              </div>
              <table className="tbl" style={{ width: "100%", borderCollapse: "collapse" }}>
                <thead>
                  <tr style={{ borderBottom: "1px solid var(--line)" }}>
                    <th style={{ textAlign: "left", padding: "8px 12px", fontSize: 11, color: "var(--text-faint)", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.04em" }}>{window.L("Projet", "Project", "Proyecto")}</th>
                    <th style={{ textAlign: "left", padding: "8px 12px", fontSize: 11, color: "var(--text-faint)", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.04em" }}>{window.L("Secteur", "Sector", "Sector")}</th>
                    <th style={{ textAlign: "center", padding: "8px 12px", fontSize: 11, color: "var(--text-faint)", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.04em" }}>{window.L("Statut", "Status", "Estado")}</th>
                    <th style={{ textAlign: "left", padding: "8px 12px", fontSize: 11, color: "var(--text-faint)", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.04em", minWidth: 100 }}>{window.L("Avancement", "Progress", "Avance")}</th>
                  </tr>
                </thead>
                <tbody>
                  {portfolio.map((p) => (
                    <tr key={p.id} style={{ borderBottom: "1px solid var(--line)", cursor: "pointer" }}
                        onClick={() => onOpen && onOpen(p.id)}>
                      <td style={{ padding: "10px 12px" }}>
                        <div style={{ fontWeight: 600, fontSize: 13 }}>{p.name}</div>
                        <div style={{ fontSize: 11, color: "var(--text-faint)", fontFamily: "monospace" }}>{p.id}</div>
                      </td>
                      <td style={{ padding: "10px 12px", fontSize: 12.5, color: "var(--text-faint)" }}>
                        {sectorLabel(p.sector, lang)}
                      </td>
                      <td style={{ padding: "10px 12px", textAlign: "center" }}>
                        <span style={{ display: "inline-block", padding: "2px 8px", borderRadius: 999, background: ragBg(p.status), color: ragColor(p.status), fontSize: 10.5, fontWeight: 700 }}>
                          {p.status === "ok" ? (window.L("OK", "OK", "OK")) : p.status === "warn" ? (window.L("Att.", "Warn", "Aten.")) : (window.L("Crit.", "Crit.", "Crít."))}
                        </span>
                      </td>
                      <td style={{ padding: "10px 12px" }}>
                        <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                          <div style={{ flex: 1, height: 6, background: "var(--bg-sunken)", borderRadius: 3, overflow: "hidden" }}>
                            <div style={{ height: "100%", width: p.progress + "%", background: p.status === "risk" ? "#dc2626" : p.status === "warn" ? "#d97706" : "#16a34a", transition: "width 200ms" }}></div>
                          </div>
                          <span style={{ fontSize: 11, fontWeight: 600, color: "var(--text-faint)", minWidth: 28, textAlign: "right" }}>{p.progress}%</span>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            <div className="card">
              <div className="card-head">
                <div className="card-title">{window.L("Alertes", "Alerts", "Alertas")}</div>
                <span style={{ fontSize: 11, color: "var(--text-faint)" }}>{alerts.length}</span>
              </div>
              <div style={{ padding: 8, display: "flex", flexDirection: "column", gap: 4 }}>
                {alerts.map((a, i) => (
                  <div key={i} style={{ display: "flex", gap: 10, padding: "10px 12px", borderRadius: 6, alignItems: "flex-start" }}>
                    <span style={{ width: 8, height: 8, borderRadius: "50%", background: ragColor(a.rag), marginTop: 6, flexShrink: 0 }}></span>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 13, fontWeight: 600, color: "var(--text)" }}>{a.title}</div>
                      <div style={{ fontSize: 11.5, color: "var(--text-faint)", marginTop: 2 }}>{a.sub}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* ── Performance Top/Bottom + Activité ──────────────────── */}
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 16 }}>
            <div className="card">
              <div className="card-head">
                <div className="card-title">{window.L("Performance par secteur", "Sector performance", "Rendimiento por sector")}</div>
                <span style={{ fontSize: 11, color: "var(--text-faint)" }}>{window.L("% décaissement", "Disbursement %", "% de desembolso")}</span>
              </div>
              <div style={{ padding: "14px 18px", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                <div>
                  <div style={{ fontSize: 10.5, fontWeight: 700, color: "#16a34a", textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: 8 }}>
                    ▲ {window.L("Top 3", "Top 3", "Top 3")}
                  </div>
                  {perfTop.map((p, i) => (
                    <PerfRow key={i} sector={p.sector} pct={p.pct} lang={lang} color="#16a34a" />
                  ))}
                </div>
                <div>
                  <div style={{ fontSize: 10.5, fontWeight: 700, color: "#dc2626", textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: 8 }}>
                    ▼ {window.L("Bas 3", "Bottom 3", "Últimos 3")}
                  </div>
                  {perfBottom.map((p, i) => (
                    <PerfRow key={i} sector={p.sector} pct={p.pct} lang={lang} color="#dc2626" />
                  ))}
                </div>
              </div>
            </div>

            <div className="card">
              <div className="card-head">
                <div className="card-title">{window.L("Activité récente", "Recent activity", "Actividad reciente")}</div>
              </div>
              <div style={{ padding: 8, display: "flex", flexDirection: "column", gap: 2 }}>
                {activity.map((a, i) => (
                  <div key={i} style={{ display: "flex", gap: 10, padding: "10px 12px", alignItems: "flex-start" }}>
                    <span style={{ color: "var(--text-faint)", marginTop: 2 }}>{actIcon(a.kind)}</span>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 13, lineHeight: 1.45 }}>
                        <strong>{a.who}</strong> · {a.what} <span style={{ fontFamily: "monospace", color: "var(--text-faint)" }}>{a.obj}</span>
                      </div>
                      <div style={{ fontSize: 11, color: "var(--text-faint)", marginTop: 2 }}>{a.when}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Indicateur v2 + retour legacy */}
          <div style={{ marginTop: 22, textAlign: "center", fontSize: 11, color: "var(--text-faint)" }}>
            🎨 UI v2 active —{" "}
            <a href={(() => { try { const u = new URL(window.location.href); u.searchParams.delete("ui"); return u.toString(); } catch (_) { return "/MELR"; } })()}
              style={{ color: "var(--accent, #0f766e)" }}>
              {window.L("Revenir à la version legacy", "Switch back to legacy", "Volver a la versión heredada")}
            </a>
          </div>
        </div>

        {createOpen && window.CreateProjectModal && (
          <window.CreateProjectModal lang={lang} onClose={() => setCreateOpen(false)} />
        )}
      </div>
    );
  }

  // Petite ligne « secteur — % » dans Performance
  function PerfRow({ sector, pct, lang, color }) {
    return (
      <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "6px 0", fontSize: 13 }}>
        <span style={{ width: 8, height: 8, borderRadius: 3, background: (sector && sector.color) || "#94a3b8", flexShrink: 0 }}></span>
        <span style={{ flex: 1, color: "var(--text)" }}>{sectorLabel(sector, lang)}</span>
        <span style={{ fontWeight: 700, color }}>{pct} %</span>
      </div>
    );
  }

  window.DashboardV2 = DashboardV2;
})();