/* Simple stroke icon set (lucide-style geometry) + tiny inline charts.
   Exported to window for other babel scripts. */

function Icon({ name, size = 18, sw = 1.8, style, className }) {
  const P = {
    dashboard: <><rect x="3" y="3" width="7" height="9" rx="1.5"/><rect x="14" y="3" width="7" height="5" rx="1.5"/><rect x="14" y="12" width="7" height="9" rx="1.5"/><rect x="3" y="16" width="7" height="5" rx="1.5"/></>,
    boxes: <><path d="M3 8.5 12 4l9 4.5-9 4.5z"/><path d="M3 8.5V15l9 4.5 9-4.5V8.5"/><path d="M12 13v6.5"/></>,
    tag: <><path d="M3 7v5.5L11.5 21l8-8L11 4.5H5.5A2.5 2.5 0 0 0 3 7z"/><circle cx="7.5" cy="8" r="1.3"/></>,
    star: <path d="M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 17l-5.2 2.6 1-5.8L3.5 9.7l5.9-.9z"/>,
    trending: <><path d="M3 16l5-5 4 4 8-8"/><path d="M16 7h4v4"/></>,
    search2: <><circle cx="11" cy="11" r="7"/><path d="M21 21l-4-4"/></>,
    bell: <><path d="M6 9a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6z"/><path d="M10 20a2 2 0 0 0 4 0"/></>,
    settings: <><circle cx="12" cy="12" r="3"/><path d="M19.4 13.5a7.8 7.8 0 0 0 0-3l1.7-1.3-1.8-3.1-2 .8a7.6 7.6 0 0 0-2.6-1.5L14 2h-4l-.4 2.4a7.6 7.6 0 0 0-2.6 1.5l-2-.8L3.2 8.2 4.9 9.5a7.8 7.8 0 0 0 0 3l-1.7 1.3 1.8 3.1 2-.8a7.6 7.6 0 0 0 2.6 1.5L10 22h4l.4-2.4a7.6 7.6 0 0 0 2.6-1.5l2 .8 1.8-3.1z"/></>,
    flame: <path d="M12 3c.5 3-2 4-2 7a2 2 0 1 0 4 0c0-.6-.2-1 0-1.5.8 1 2 2.2 2 4.5a4 4 0 1 1-8 0c0-3.5 3-5 4-10z"/>,
    package: <><path d="M21 8 12 3 3 8v8l9 5 9-5z"/><path d="M3 8l9 5 9-5M12 13v8"/></>,
    logs: <><circle cx="7" cy="8" r="3.2"/><circle cx="7" cy="16" r="3.2"/><path d="M10 6h8M10 10h8M10 14h8M10 18h8"/></>,
    arrowUp: <path d="M12 19V5M6 11l6-6 6 6"/>,
    arrowDown: <path d="M12 5v14M6 13l6 6 6-6"/>,
    arrowRight: <path d="M5 12h14M13 6l6 6-6 6"/>,
    minus: <path d="M5 12h14"/>,
    alert: <><path d="M12 3 2 20h20z"/><path d="M12 10v4M12 17.5v.1"/></>,
    sparkles: <><path d="M12 3l1.6 4.4L18 9l-4.4 1.6L12 15l-1.6-4.4L6 9l4.4-1.6z"/><path d="M18 14l.8 2.2L21 17l-2.2.8L18 20l-.8-2.2L15 17l2.2-.8z"/></>,
    check: <path d="M5 12l5 5 9-10"/>,
    x: <path d="M6 6l12 12M18 6 6 18"/>,
    edit: <><path d="M4 20h4L19 9l-4-4L4 16z"/><path d="M14 6l4 4"/></>,
    clock: <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>,
    calendar: <><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4"/></>,
    external: <><path d="M14 4h6v6"/><path d="M20 4l-9 9"/><path d="M18 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4"/></>,
    truck: <><rect x="1.5" y="6" width="13" height="10" rx="1.5"/><path d="M14.5 9h3.5l2.5 3v4h-6z"/><circle cx="6" cy="18" r="1.8"/><circle cx="17" cy="18" r="1.8"/></>,
    chart: <><path d="M4 4v16h16"/><rect x="7" y="11" width="3" height="6"/><rect x="12" y="7" width="3" height="10"/><rect x="17" y="13" width="3" height="4"/></>,
    euro: <><path d="M16 7a6 6 0 1 0 0 10"/><path d="M5 10h7M5 14h7"/></>,
    eye: <><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></>,
    refresh: <><path d="M3 12a9 9 0 0 1 15-6.7L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-15 6.7L3 16"/><path d="M3 21v-5h5"/></>,
    filter: <path d="M3 5h18l-7 8v6l-4-2v-4z"/>,
    download: <><path d="M12 4v11M7 11l5 5 5-5"/><path d="M5 20h14"/></>,
    plug: <><path d="M9 3v6M15 3v6"/><path d="M7 9h10v3a5 5 0 0 1-10 0z"/><path d="M12 17v4"/></>,
    chevron: <path d="M9 6l6 6-6 6"/>,
    chevronDown: <path d="M6 9l6 6 6-6"/>,
    info: <><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8v.1"/></>,
    target: <><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1.3"/></>,
    lightbulb: <><path d="M9 18h6M10 21h4"/><path d="M12 3a6 6 0 0 0-4 10.5c.7.7 1 1.2 1 2.5h6c0-1.3.3-1.8 1-2.5A6 6 0 0 0 12 3z"/></>,
    doc: <><path d="M6 2h8l4 4v16H6z"/><path d="M14 2v4h4M9 13h6M9 17h6"/></>,
    user: <><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-6 8-6s8 2 8 6"/></>,
    home: <><path d="M4 11l8-7 8 7"/><path d="M6 10v10h12V10"/></>,
  };
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor"
      strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" style={style}
      className={className} aria-hidden="true">
      {P[name] || P.info}
    </svg>
  );
}

/* ---- Sparkline (area line) ---- */
function Sparkline({ data, color = "var(--accent)", w = 120, h = 34, fill = true, sw = 1.8 }) {
  if (!data || !data.length) return null;
  const max = Math.max(...data), min = Math.min(...data);
  const rng = max - min || 1;
  const pts = data.map((v, i) => [ (i / (data.length - 1)) * w, h - 3 - ((v - min) / rng) * (h - 6) ]);
  const d = pts.map((p, i) => (i ? "L" : "M") + p[0].toFixed(1) + " " + p[1].toFixed(1)).join(" ");
  const area = d + ` L${w} ${h} L0 ${h} Z`;
  const gid = "sg" + Math.random().toString(36).slice(2, 7);
  return (
    <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`} style={{ display: "block", overflow: "visible" }}>
      {fill && <defs><linearGradient id={gid} x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor={color} stopOpacity="0.16" /><stop offset="1" stopColor={color} stopOpacity="0" />
      </linearGradient></defs>}
      {fill && <path d={area} fill={`url(#${gid})`} />}
      <path d={d} fill="none" stroke={color} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" />
      <circle cx={pts[pts.length - 1][0]} cy={pts[pts.length - 1][1]} r="2.6" fill={color} />
    </svg>
  );
}

/* ---- Ranking line chart (inverted: lower position = higher line) ---- */
function RankChart({ data, w = 460, h = 150, color = "var(--accent)" }) {
  if (!data || !data.length) return null;
  const max = Math.max(...data), min = Math.min(...data);
  const rng = max - min || 1;
  const padY = 14;
  // invert: position 1 (best) at top
  const pts = data.map((v, i) => [ (i / (data.length - 1)) * w, padY + ((v - min) / rng) * (h - padY * 2) ]);
  const d = pts.map((p, i) => (i ? "L" : "M") + p[0].toFixed(1) + " " + p[1].toFixed(1)).join(" ");
  const gid = "rg" + Math.random().toString(36).slice(2, 7);
  return (
    <svg width="100%" height={h} viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" style={{ display: "block" }}>
      <defs><linearGradient id={gid} x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor={color} stopOpacity="0.14" /><stop offset="1" stopColor={color} stopOpacity="0" />
      </linearGradient></defs>
      {[0.25, 0.5, 0.75].map((g, i) => <line key={i} x1="0" x2={w} y1={padY + g * (h - padY * 2)} y2={padY + g * (h - padY * 2)} stroke="var(--border)" strokeWidth="1" />)}
      <path d={d + ` L${w} ${h} L0 ${h} Z`} fill={`url(#${gid})`} />
      <path d={d} fill="none" stroke={color} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
      {pts.map((p, i) => <circle key={i} cx={p[0]} cy={p[1]} r={i === pts.length - 1 ? 4 : 2.4} fill={i === pts.length - 1 ? color : "#fff"} stroke={color} strokeWidth="1.6" />)}
    </svg>
  );
}

/* ---- Mini bar chart ---- */
function MiniBars({ data, w = 120, h = 34, color = "var(--accent)" }) {
  const max = Math.max(...data) || 1;
  const bw = w / data.length;
  return (
    <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`} style={{ display: "block" }}>
      {data.map((v, i) => {
        const bh = Math.max(2, (v / max) * (h - 4));
        return <rect key={i} x={i * bw + 1} y={h - bh} width={bw - 2} height={bh} rx="1.5" fill={color} opacity={0.35 + 0.65 * (v / max)} />;
      })}
    </svg>
  );
}

Object.assign(window, { Icon, Sparkline, RankChart, MiniBars });