// Icons + tiny shared components.
// Tabler-style line icons drawn inline.

const Icon = ({ name, size = 14, stroke = 1.6 }) => {
  const props = {
    width: size, height: size, viewBox: "0 0 24 24",
    fill: "none", stroke: "currentColor", strokeWidth: stroke,
    strokeLinecap: "round", strokeLinejoin: "round"
  };
  switch (name) {
    case "grid": return (
      <svg {...props}><rect x="3.5" y="3.5" width="7" height="7" rx="1.5"/><rect x="13.5" y="3.5" width="7" height="7" rx="1.5"/><rect x="3.5" y="13.5" width="7" height="7" rx="1.5"/><rect x="13.5" y="13.5" width="7" height="7" rx="1.5"/></svg>
    );
    case "users": return (
      <svg {...props}><circle cx="9" cy="8" r="3.2"/><path d="M2.5 20c0-3.6 2.9-6 6.5-6s6.5 2.4 6.5 6"/><circle cx="17.5" cy="9" r="2.5"/><path d="M16 14.5c2.6 0 5 1.6 5 4.5"/></svg>
    );
    case "log": return (
      <svg {...props}><rect x="4" y="3.5" width="16" height="17" rx="2"/><path d="M8 8h8M8 12h8M8 16h5"/></svg>
    );
    case "chat": return (
      <svg {...props}><path d="M21 12c0 4.4-4 8-9 8-1.4 0-2.7-.3-3.9-.8L3 20l1-3.7C3.4 15 3 13.5 3 12c0-4.4 4-8 9-8s9 3.6 9 8z"/></svg>
    );
    case "settings": return (
      <svg {...props}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-1.8-.3 1.6 1.6 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.6 1.6 0 0 0-1-1.5 1.6 1.6 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.6 1.6 0 0 0 .3-1.8 1.6 1.6 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.6 1.6 0 0 0 1.5-1 1.6 1.6 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.6 1.6 0 0 0 1.8.3H9a1.6 1.6 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.6 1.6 0 0 0 1 1.5 1.6 1.6 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.6 1.6 0 0 0-.3 1.8V9a1.6 1.6 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.6 1.6 0 0 0-1.5 1z"/></svg>
    );
    case "shield": return (
      <svg {...props}><path d="M12 3l8 3v6c0 4.5-3.4 8.2-8 9-4.6-.8-8-4.5-8-9V6l8-3z"/></svg>
    );
    case "ban": return (
      <svg {...props}><circle cx="12" cy="12" r="9"/><path d="M5.6 5.6l12.8 12.8"/></svg>
    );
    case "kick": return (
      <svg {...props}><path d="M15 4h3a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-3"/><path d="M10 17l-5-5 5-5"/><path d="M5 12h11"/></svg>
    );
    case "send": return (
      <svg {...props}><path d="M22 2L11 13"/><path d="M22 2l-7 20-4-9-9-4z"/></svg>
    );
    case "megaphone": return (
      <svg {...props}><path d="M3 11v2a2 2 0 0 0 2 2h2l5 4V5L7 9H5a2 2 0 0 0-2 2z"/><path d="M16 8a4 4 0 0 1 0 8"/></svg>
    );
    case "power": return (
      <svg {...props}><path d="M12 3v9"/><path d="M5.6 7.6a8 8 0 1 0 12.8 0"/></svg>
    );
    case "note": return (
      <svg {...props}><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/></svg>
    );
    case "search": return (
      <svg {...props}><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
    );
    case "arrow-left": return (
      <svg {...props}><path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/></svg>
    );
    case "dot": return (
      <svg {...props}><circle cx="12" cy="12" r="3" fill="currentColor" stroke="none"/></svg>
    );
    case "skull": return (
      <svg {...props}><path d="M5 11a7 7 0 1 1 14 0v3l1 2v2a2 2 0 0 1-2 2h-1v-3h-2v3H9v-3H7v3H6a2 2 0 0 1-2-2v-2l1-2z"/><circle cx="9" cy="11" r="1.2"/><circle cx="15" cy="11" r="1.2"/></svg>
    );
    case "alert": return (
      <svg {...props}><path d="M10.3 3.9L1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/><path d="M12 9v4M12 17h0"/></svg>
    );
    case "check": return (
      <svg {...props}><path d="M5 13l4 4L19 7"/></svg>
    );
    case "refresh": return (
      <svg {...props}><path d="M21 12a9 9 0 1 1-3.5-7.1"/><path d="M21 4v5h-5"/></svg>
    );
    case "x": return (
      <svg {...props}><path d="M6 6l12 12M18 6L6 18"/></svg>
    );
    case "map": return (
      <svg {...props}><path d="M9 4L3 6v14l6-2 6 2 6-2V4l-6 2-6-2z"/><path d="M9 4v14M15 6v14"/></svg>
    );
    case "clock": return (
      <svg {...props}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
    );
    case "globe": return (
      <svg {...props}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg>
    );
    case "external": return (
      <svg {...props}><path d="M14 4h6v6M10 14L21 3M19 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h5"/></svg>
    );
    case "flag": return (
      <svg {...props}><path d="M5 21V4M5 4l9 2 5-1v9l-5 1-9-2"/></svg>
    );
    default: return null;
  }
};

// Platform glyph (small monogram, no logos)
const Platform = ({ p }) => {
  const map = { steam: ["STM", "platform-steam"], xbox: ["XBL", "platform-xbox"], ps: ["PSN", "platform-ps"] };
  const [label, cls] = map[p] || ["—",""];
  return <span className={`badge ${cls}`} style={{
    display: "inline-block", padding: "1px 5px", borderRadius: 3,
    background: "#2a2c33", fontSize: 9.5, fontFamily: "var(--mono)",
    letterSpacing: 0.3, textTransform: "uppercase"
  }}>{label}</span>;
};

// Sparkline
const Sparkline = ({ data, color = "var(--accent)" }) => {
  if (!data || !data.length) return <svg className="spark"/>;
  const max = Math.max(...data, 1);
  const w = 100, h = 28;
  const pts = data.map((v, i) => `${(i/(data.length-1))*w},${h - (v/max)*h*0.9 - 2}`).join(" ");
  const area = `M0,${h} L${pts.replace(/ /g,' L')} L${w},${h} Z`;
  return (
    <svg className="spark" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none">
      <path d={area} fill={color} opacity="0.10"/>
      <polyline points={pts} fill="none" stroke={color} strokeWidth="1.2" strokeLinejoin="round" strokeLinecap="round"/>
    </svg>
  );
};

// Toast manager
const ToastCtx = React.createContext(null);
const ToastProvider = ({ children }) => {
  const [toasts, setToasts] = React.useState([]);
  const push = (msg, kind = "ok") => {
    const id = Math.random().toString(36).slice(2);
    setToasts(t => [...t, { id, msg, kind }]);
    setTimeout(() => setToasts(t => t.filter(x => x.id !== id)), 3200);
  };
  return (
    <ToastCtx.Provider value={push}>
      {children}
      <div className="toasts">
        {toasts.map(t => (
          <div key={t.id} className="toast">
            <span className={"ico " + t.kind}>
              {t.kind === "ok" && <Icon name="check" />}
              {t.kind === "bad" && <Icon name="alert" />}
              {t.kind === "warn" && <Icon name="alert" />}
            </span>
            <span>{t.msg}</span>
          </div>
        ))}
      </div>
    </ToastCtx.Provider>
  );
};
const useToast = () => React.useContext(ToastCtx);

const pingClass = (p) => p < 70 ? "good" : p < 140 ? "mid" : "bad";

Object.assign(window, { Icon, Platform, Sparkline, ToastProvider, useToast, pingClass });