/* global React */
// =====================================================================
// Primitives UI partagées : jeu d'icônes SVG (trait, style Feather) et
// notifications « toast » (window.lcToast). Chargé avant les écrans.
// =====================================================================

const _ICONS = {
  home:    "M3 11l9-8 9 8M5 10v10a1 1 0 001 1h4v-6h4v6h4a1 1 0 001-1V10",
  receipt: "M5 3v18l2-1 2 1 2-1 2 1 2-1 2 1V3l-2 1-2-1-2 1-2-1-2 1-2-1zM8 8h8M8 12h8M8 16h5",
  file:    "M14 3H7a2 2 0 00-2 2v14a2 2 0 002 2h10a2 2 0 002-2V8zM14 3v5h5M9 13h6M9 17h6",
  users:   "M17 21v-2a4 4 0 00-4-4H6a4 4 0 00-4 4v2M9.5 11a4 4 0 100-8 4 4 0 000 8zM22 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75",
  tag:     "M20.6 13.4l-7.2 7.2a2 2 0 01-2.8 0l-7.6-7.6V4h9l8.6 8.6a2 2 0 010 2.8zM7.5 7.5h.01",
  settings:"M12 15a3 3 0 100-6 3 3 0 000 6zM19.4 15a1.6 1.6 0 00.3 1.8l.1.1a2 2 0 11-2.8 2.8l-.1-.1a1.6 1.6 0 00-2.7 1.1V21a2 2 0 11-4 0v-.1A1.6 1.6 0 005 19.4l-.1.1a2 2 0 11-2.8-2.8l.1-.1A1.6 1.6 0 003 13.6H3a2 2 0 110-4h.1A1.6 1.6 0 004.6 5l-.1-.1a2 2 0 112.8-2.8l.1.1A1.6 1.6 0 009 3.6V3a2 2 0 114 0v.1a1.6 1.6 0 002.7 1.1l.1-.1a2 2 0 112.8 2.8l-.1.1a1.6 1.6 0 00-.3 1.8V9a2 2 0 110 4h-.1a1.6 1.6 0 00-1.4 1z",
  building:"M3 21h18M5 21V7l8-4v18M19 21V11l-6-3M9 9v.01M9 12v.01M9 15v.01M9 18v.01",
  userCog: "M9 7a4 4 0 100 8 4 4 0 000-8zM2 21v-1a5 5 0 015-5h2M18 14v.01M18 20v.01M21 17h-.01M15 17H15M19.5 15.5l-.01.01M16.5 18.5l-.01.01M19.5 18.5l-.01.01M16.5 15.5l-.01.01",
  sun:     "M12 17a5 5 0 100-10 5 5 0 000 10zM12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4",
  moon:    "M21 12.8A9 9 0 1111.2 3a7 7 0 009.8 9.8z",
  history: "M3 3v5h5M3.05 13a9 9 0 102.13-5.66L3 8M12 7v5l4 2",
};

function Icon({ name, size = 18 }) {
  const d = _ICONS[name];
  if (!d) return null;
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
      stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"
      style={{ flex: "0 0 auto" }} aria-hidden="true">
      <path d={d} />
    </svg>
  );
}

// ---- Export CSV (séparateur ';' + BOM UTF-8 = ouverture directe Excel FR) ----
(function () {
  function cell(v) {
    if (v == null) return "";
    const s = String(v);
    return /[";\n]/.test(s) ? '"' + s.replace(/"/g, '""') + '"' : s;
  }
  // rows: tableau d'objets ; columns: [{ key, label, map? }]
  window.exportCsv = function (filename, rows, columns) {
    const head = columns.map((c) => cell(c.label)).join(";");
    const body = rows.map((r) =>
      columns.map((c) => cell(c.map ? c.map(r) : r[c.key])).join(";")
    ).join("\n");
    const csv = "" + head + "\n" + body;
    const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url; a.download = filename;
    document.body.appendChild(a); a.click(); a.remove();
    setTimeout(() => URL.revokeObjectURL(url), 1000);
  };
})();

// ---- Graphique en barres (SVG, sans dépendance) ----------------------
function BarChart({ data, height = 140, currency }) {
  // data: [{ label, value }]
  const max = Math.max(1, ...data.map((d) => d.value));
  const bw = 100 / (data.length * 1.6);
  const gap = bw * 0.6;
  return (
    <svg viewBox={`0 0 100 ${height / 2}`} preserveAspectRatio="none"
      style={{ width: "100%", height, overflow: "visible" }} role="img">
      {data.map((d, i) => {
        const h = (d.value / max) * (height / 2 - 14);
        const x = i * (bw + gap) + gap;
        const y = (height / 2 - 8) - h;
        return (
          <g key={i}>
            <rect x={x} y={y} width={bw} height={Math.max(0.5, h)} rx="0.8"
              fill="var(--primary)" />
            <text x={x + bw / 2} y={height / 2 - 2} fontSize="2.6" textAnchor="middle"
              fill="var(--muted)">{d.label}</text>
          </g>
        );
      })}
    </svg>
  );
}

// ---- Toasts ----------------------------------------------------------
(function () {
  function ensureHost() {
    let host = document.getElementById("lc-toast-host");
    if (!host) {
      host = document.createElement("div");
      host.id = "lc-toast-host";
      document.body.appendChild(host);
    }
    return host;
  }
  window.lcToast = function (message, type = "info") {
    const host = ensureHost();
    const el = document.createElement("div");
    el.className = "lc-toast lc-toast-" + type;
    el.textContent = message;
    host.appendChild(el);
    // animation d'entrée
    requestAnimationFrame(() => el.classList.add("show"));
    setTimeout(() => {
      el.classList.remove("show");
      setTimeout(() => el.remove(), 250);
    }, 3200);
  };
})();