// Shared icons + tiny helpers — attached to window for cross-file use.
(function () {
  const s = (p, extra) => <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" {...extra}>{p}</svg>;
  window.IC = {
    grid: s(<><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></>),
    folder: s(<path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>),
    gantt: s(<><path d="M8 6h11M5 6h.01"/><path d="M8 12h8M5 12h.01"/><path d="M8 18h5M5 18h.01"/></>),
    meet: s(<><rect x="3" y="4.5" width="18" height="16" rx="2"/><path d="M16 2.5v4M8 2.5v4M3 9.5h18"/></>),
    appr: s(<><path d="m8.5 12.5 2.2 2.2 4.8-4.8"/><circle cx="12" cy="12" r="9"/></>),
    dec: s(<><path d="M12 7v5l3 1.6"/><circle cx="12" cy="12" r="9"/></>),
    doc: s(<><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/></>),
    rep: s(<><path d="M5 20V4M5 20h15M9 16V9M14 16v-5M19 16V7"/></>),
    search: s(<><circle cx="11" cy="11" r="7"/><path d="m20 20-3-3"/></>),
    bell: s(<><path d="M6 9a6 6 0 0 1 12 0c0 6 2 7 2 7H4s2-1 2-7"/><path d="M10 20a2 2 0 0 0 4 0"/></>),
    chevR: s(<path d="m9 6 6 6-6 6"/>),
    chevL: s(<path d="m15 6-6 6 6 6"/>),
    chevD: s(<path d="m6 9 6 6 6-6"/>),
    arrowR: s(<path d="M5 12h14M13 6l6 6-6 6"/>),
    check: s(<path d="m5 12 5 5 9-11"/>),
    x: s(<path d="M6 6l12 12M18 6L6 18"/>),
    plus: s(<path d="M12 5v14M5 12h14"/>),
    filter: s(<path d="M3 5h18l-7 8v6l-4-2v-4z"/>),
    sort: s(<><path d="M7 4v16M7 4 4 7M7 4l3 3"/><path d="M17 20V4M17 20l-3-3M17 20l3-3"/></>),
    group: s(<><path d="M4 6h16M4 12h16M4 18h16"/></>),
    board: s(<><rect x="3" y="4" width="5" height="16" rx="1.4"/><rect x="10" y="4" width="5" height="11" rx="1.4"/><rect x="17" y="4" width="4" height="14" rx="1.4"/></>),
    cal: s(<><rect x="3" y="4.5" width="18" height="16" rx="2"/><path d="M16 2.5v4M8 2.5v4M3 9.5h18"/></>),
    list: s(<><path d="M8 6h12M8 12h12M8 18h12M4 6h.01M4 12h.01M4 18h.01"/></>),
    flag: s(<><path d="M5 21V4"/><path d="M5 4h11l-2 4 2 4H5"/></>),
    user: s(<><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></>),
    users: s(<><circle cx="9" cy="8" r="3.4"/><path d="M2.5 20a6.5 6.5 0 0 1 13 0"/><path d="M16 5.5a3.4 3.4 0 0 1 0 6.6M21.5 20a6.5 6.5 0 0 0-4-6"/></>),
    money: s(<><path d="M12 2v20M17 6H9.5a3 3 0 0 0 0 6h5a3 3 0 0 1 0 6H6"/></>),
    warn: s(<><path d="M12 9v4M12 17h.01"/><path d="M10.3 3.8 2.4 18a1.9 1.9 0 0 0 1.7 2.9h15.8a1.9 1.9 0 0 0 1.7-2.9L13.7 3.8a1.9 1.9 0 0 0-3.4 0Z"/></>),
    clock: s(<><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>),
    download: s(<><path d="M12 4v11M7 11l5 5 5-5M5 20h14"/></>),
    link: s(<><path d="M10 14a4 4 0 0 0 6 .5l2-2a4 4 0 0 0-5.7-5.7L11 8"/><path d="M14 10a4 4 0 0 0-6-.5l-2 2A4 4 0 0 0 11.7 17L13 16"/></>),
    dots: s(<><circle cx="5" cy="12" r="1.6"/><circle cx="12" cy="12" r="1.6"/><circle cx="19" cy="12" r="1.6"/></>),
    layers: s(<><path d="m12 3 9 5-9 5-9-5 9-5Z"/><path d="m3 13 9 5 9-5"/></>),
    target: s(<><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1.4" fill="currentColor"/></>),
    menu: s(<path d="M4 7h16M4 12h16M4 17h16"/>),
    settings: s(<><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M19 5l-2 2M7 17l-2 2"/></>),
    sun: s(<><circle cx="12" cy="12" r="4.2"/><path d="M12 2v2.4M12 19.6V22M2 12h2.4M19.6 12H22M4.6 4.6l1.7 1.7M17.7 17.7l1.7 1.7M19.4 4.6l-1.7 1.7M6.3 17.7l-1.7 1.7"/></>),
    moon: s(<path d="M20 13.5A8 8 0 1 1 10.5 4a6.3 6.3 0 0 0 9.5 9.5Z"/>),
    grid2: s(<><rect x="3" y="3" width="8" height="8" rx="1.5"/><rect x="13" y="3" width="8" height="5" rx="1.5"/><rect x="13" y="10" width="8" height="11" rx="1.5"/><rect x="3" y="13" width="8" height="8" rx="1.5"/></>),
    pdf: s(<><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/><path d="M8.5 13.5h1a1.2 1.2 0 0 1 0 2.4h-1zm0 4.5v-4.5M13 13.5V18M13 13.5h1.6M13 15.7h1.3"/></>),
    chart: s(<><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M7 15v2M11.5 11v6M16 8v9"/></>),
    upload: s(<><path d="M12 16V5M7 10l5-5 5 5M5 20h14"/></>),
    eye: s(<><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"/></>),
    star: s(<path d="m12 3 2.6 5.5 6 .8-4.4 4.1 1.1 5.9L12 16.6 6.7 19.4l1.1-5.9L3.4 9.3l6-.8Z"/>),
    trend: s(<><path d="M3 17l6-6 4 4 8-8"/><path d="M17 7h4v4"/></>),
    arrowUp: s(<path d="M12 19V5M6 11l6-6 6 6"/>),
    arrowDown: s(<path d="M12 5v14M6 13l6 6 6-6"/>),
    calClock: s(<><path d="M8 2.5v4M16 2.5v4M21 11V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h6"/><circle cx="17.5" cy="17.5" r="4"/><path d="M17.5 15.8v1.7l1.2.9"/></>),
    pin: s(<><path d="M12 21s7-5.7 7-11a7 7 0 1 0-14 0c0 5.3 7 11 7 11Z"/><circle cx="12" cy="10" r="2.5"/></>),
    lock: s(<><rect x="4.5" y="10.5" width="15" height="10" rx="2"/><path d="M8 10.5V7a4 4 0 0 1 8 0v3.5"/></>),
    shield: s(<path d="M12 3l7 3v5c0 4.4-3 8.3-7 9.5C8 19.3 5 15.4 5 11V6l7-3Z"/>),
    logout: s(<><path d="M14 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4"/><path d="M9 12h11M16 8l4 4-4 4"/></>),
    copy: s(<><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h8"/></>),
    send: s(<><path d="M22 2 11 13"/><path d="M22 2 15 22l-4-9-9-4Z"/></>),
    chat: s(<path d="M21 12a8 8 0 0 1-11.5 7.2L3 21l1.8-6.5A8 8 0 1 1 21 12Z"/>),
  };

  // status icon helper for tasks
  window.taskIcon = function (status) {
    const IC = window.IC;
    if (status === "done") return <span style={{ color: "var(--ok)" }}>{IC.check}</span>;
    if (status === "active") return <span style={{ color: "var(--accent)" }}>{IC.clock}</span>;
    if (status === "blocked") return <span style={{ color: "var(--danger)" }}>{IC.warn}</span>;
    return <span style={{ color: "var(--faint)", opacity: .6 }}><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.8"><circle cx="12" cy="12" r="8"/></svg></span>;
  };

  // Reusable empty-state — centered icon + Thai message + (admin-only) first-item CTA
  window.EmptyState = function EmptyState({ icon, title, sub, ctaLabel, onCta }) {
    const IC = window.IC;
    const isAdmin = window.can && window.can("edit");
    return (
      <div className="empty-state">
        <div className="empty-ic">{IC[icon] || IC.folder}</div>
        <div className="empty-title">{title}</div>
        {sub && <div className="empty-sub">{sub}</div>}
        {ctaLabel && isAdmin && <button className="btn pri" style={{ marginTop: 16 }} onClick={onCta}>{IC.plus} {ctaLabel}</button>}
      </div>
    );
  };
})();
