/* Mantis web UI kit · primitives + shared icon set
   Loaded by index.html first; exports to window.
*/

/* ---------- icons (outline, 18px stroke-1.5) ---------- */
const I = ({ d, fill = "currentColor", stroked, size = 18, ...rest }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={stroked ? "none" : fill}
       stroke={stroked ? "currentColor" : "none"} strokeWidth={stroked ? 1.6 : 0}
       strokeLinecap="round" strokeLinejoin="round" {...rest}>
    {Array.isArray(d) ? d.map((p, i) => <path key={i} d={p} />) : <path d={d} />}
  </svg>
);

const Icon = {
  Menu:    (p) => <I {...p} stroked d={["M3 6h18","M3 12h18","M3 18h18"]}/>,
  Search:  (p) => <I {...p} stroked d={["M21 21l-4.3-4.3","M11 19a8 8 0 1 1 0-16 8 8 0 0 1 0 16Z"]}/>,
  Bell:    (p) => <I {...p} stroked d={["M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9","M10.3 21a1.94 1.94 0 0 0 3.4 0"]}/>,
  Chat:    (p) => <I {...p} stroked d={["M21 11.5a8.4 8.4 0 0 1-1.5 4.9 8.5 8.5 0 0 1-7 4 8.4 8.4 0 0 1-3.9-.9L3 21l1.5-5.5a8.4 8.4 0 0 1-1-4A8.5 8.5 0 0 1 8.6 3a8.4 8.4 0 0 1 4.9-1.5h.6a8.4 8.4 0 0 1 7.9 7.9Z"]}/>,
  Setting: (p) => <I {...p} stroked d={["M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z","M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 0 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 0 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 0 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 0 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z"]}/>,
  Grid:    (p) => <I {...p} stroked d={["M3 3h7v7H3z","M14 3h7v7h-7z","M14 14h7v7h-7z","M3 14h7v7H3z"]}/>,
  Trans:   (p) => <I {...p} stroked d={["M5 8h14","M19 8l-3-3","M19 16H5","M5 16l3 3"]}/>,
  Dash:    (p) => <I {...p} stroked d={["M3 13l9-9 9 9","M5 13v8h14v-8"]}/>,
  Stats:   (p) => <I {...p} stroked d={["M3 21V10","M9 21V3","M15 21v-7","M21 21V12"]}/>,
  Data:    (p) => <I {...p} stroked d={["M3 6c0-1.7 4-3 9-3s9 1.3 9 3-4 3-9 3-9-1.3-9-3Z","M3 6v6c0 1.7 4 3 9 3s9-1.3 9-3V6","M3 12v6c0 1.7 4 3 9 3s9-1.3 9-3v-6"]}/>,
  Chart:   (p) => <I {...p} stroked d={["M3 3v18h18","M7 15l4-4 3 3 5-6"]}/>,
  Mail:    (p) => <I {...p} stroked d={["M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z","M22 6l-10 7L2 6"]}/>,
  Calendar:(p) => <I {...p} stroked d={["M19 4H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Z","M16 2v4","M8 2v4","M3 10h18"]}/>,
  Cart:    (p) => <I {...p} stroked d={["M9 22a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z","M20 22a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z","M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6"]}/>,
  Invoice: (p) => <I {...p} stroked d={["M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z","M14 2v6h6","M9 13h6","M9 17h6"]}/>,
  Form:    (p) => <I {...p} stroked d={["M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z","M14 2v6h6","M8 12h2","M12 12h4","M8 16h8"]}/>,
  UI:      (p) => <I {...p} stroked d={["M21 16V8a2 2 0 0 0-1-1.7l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.7l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z","M3.3 7L12 12l8.7-5","M12 22V12"]}/>,
  Chev:    (p) => <I {...p} stroked d={["M9 18l6-6-6-6"]}/>,
  Down:    (p) => <I {...p} stroked d={["M6 9l6 6 6-6"]}/>,
  Up:      (p) => <I {...p} stroked d={["M18 15l-6-6-6 6"]}/>,
  Plus:    (p) => <I {...p} stroked d={["M12 5v14","M5 12h14"]}/>,
  Arrow:   (p) => <I {...p} stroked d={["M5 12h14","M12 5l7 7-7 7"]}/>,
  Check:   (p) => <I {...p} stroked d={["M20 6L9 17l-5-5"]}/>,
  X:       (p) => <I {...p} stroked d={["M18 6L6 18","M6 6l12 12"]}/>,
  Eye:     (p) => <I {...p} stroked d={["M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7Z","M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"]}/>,
  Filter:  (p) => <I {...p} stroked d={["M22 3H2l8 9v7l4 2v-9l8-9Z"]}/>,
  Star:    (p) => <I {...p} stroked d={["M12 2l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1 3-7Z"]}/>,
  Help:    (p) => <I {...p} stroked d={["M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Z","M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3","M12 17h0"]}/>,
  Logout:  (p) => <I {...p} stroked d={["M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4","M16 17l5-5-5-5","M21 12H9"]}/>,
  Doc:     (p) => <I {...p} stroked d={["M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z","M14 2v6h6"]}/>,
  User:    (p) => <I {...p} stroked d={["M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2","M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"]}/>,
  Trash:   (p) => <I {...p} stroked d={["M3 6h18","M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2","M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"]}/>,
  Pencil:  (p) => <I {...p} stroked d={["M12 20h9","M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"]}/>,
};

/* ---------- Button / Tag / Avatar ---------- */
const Button = ({ children, type = "default", size, icon, onClick, className = "", ...rest }) => (
  <button onClick={onClick}
          className={`btn btn-${type} ${size ? size : ""} ${className}`} {...rest}>
    {icon ? <span className="ic" style={{display:"inline-flex"}}>{icon}</span> : null}
    {children}
  </button>
);

const Tag = ({ children, type = "default", dot = false }) => (
  <span className={`tag tag-${type}`}>
    {dot ? <span className="dot" style={{
      background: { success:"#52c41a", pending:"#faad14", error:"#f5222d", blue:"#1677ff", default:"#bfbfbf" }[type]
    }}/> : null}
    {children}
  </span>
);

const Avatar = ({ children, size = 36, bg = "linear-gradient(135deg,#69b1ff,#1677ff)", color = "#fff" }) => (
  <div style={{
    width:size, height:size, borderRadius:"50%", background:bg, color,
    display:"flex", alignItems:"center", justifyContent:"center",
    fontWeight:600, fontSize:size*0.4, flexShrink:0
  }}>{children}</div>
);

const Card = ({ title, extra, children, padding = true }) => (
  <div className="card">
    {(title || extra) && (
      <div className="card-head">
        <span className="t">{title}</span>
        {extra ?? <span className="more">···</span>}
      </div>
    )}
    <div className="card-body" style={padding ? null : { padding: 0 }}>{children}</div>
  </div>
);

Object.assign(window, { Icon, Button, Tag, Avatar, Card });