// ui.jsx — shared UI primitives for the Boost Claimer prototype

const Btn = ({ children, kind = "default", sm, lg, block, onClick, disabled, type, style, ...rest }) => (
  <button
    type={type || "button"}
    onClick={onClick}
    disabled={disabled}
    className={["btn", kind === "primary" && "primary", kind === "ghost" && "ghost", sm && "sm", lg && "lg", block && "block"].filter(Boolean).join(" ")}
    style={style}
    {...rest}>
    {children}
  </button>
);

const Pill = ({ children, kind, dot, style }) => (
  <span className={["pill", kind].filter(Boolean).join(" ")} style={style}>
    {dot && <span className="dot"></span>}
    {children}
  </span>
);

const Field = ({ label, hint, error, children }) => (
  <div className="field">
    {label && <label className="field-label">{label}</label>}
    {children}
    {(hint || error) && <div className={"help " + (error ? "err" : "")}>{error || hint}</div>}
  </div>
);

const Input = React.forwardRef(({ error, ...rest }, ref) => (
  <input ref={ref} className={"input " + (error ? "error" : "")} {...rest} />
));

const Select = ({ options, ...rest }) => (
  <select className="select" {...rest}>
    {options.map((o) => {
      const v = typeof o === "object" ? o.value : o;
      const l = typeof o === "object" ? o.label : o;
      return <option key={v} value={v}>{l}</option>;
    })}
  </select>
);

const Card = ({ children, accent, glow, lift, flat, style, className, ...rest }) => (
  <div
    className={["card", accent && "accent", glow && "glow", lift && "lift", flat && "flat", className].filter(Boolean).join(" ")}
    style={style} {...rest}>
    {children}
  </div>
);

const Stat = ({ k, n, d, down }) => (
  <div className="stat">
    <div className="k">{k}</div>
    <div className="n">{n}</div>
    {d && <div className={"d" + (down ? " down" : "")}>{d}</div>}
  </div>
);

const Steps = ({ items, current = 0 }) => (
  <div className="steps">
    {items.map((label, i) => (
      <React.Fragment key={i}>
        <div className={"step " + (i < current ? "done" : i === current ? "active" : "")}>
          <div className="n">{i < current ? "✓" : i + 1}</div>
          <span>{label}</span>
        </div>
        {i < items.length - 1 && <div className="step-bar"></div>}
      </React.Fragment>
    ))}
  </div>
);

const Toast = ({ children, kind }) => (
  <div className={"toast " + (kind || "")}>{children}</div>
);

// Tiny inline icons
const Icon = ({ name, size = 16, style }) => {
  const s = size;
  const stroke = "currentColor";
  const props = { width: s, height: s, viewBox: "0 0 24 24", fill: "none", stroke, strokeWidth: 1.8, strokeLinecap: "round", strokeLinejoin: "round", style };
  switch (name) {
    case "check":   return <svg {...props}><path d="M5 12 10 17 19 6" /></svg>;
    case "arrow":   return <svg {...props}><path d="M5 12h14M13 6l6 6-6 6" /></svg>;
    case "left":    return <svg {...props}><path d="M19 12H5M11 6l-6 6 6 6" /></svg>;
    case "lock":    return <svg {...props}><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>;
    case "bolt":    return <svg {...props}><path d="M13 2 4 14h7l-1 8 9-12h-7l1-8z" fill={stroke} stroke="none"/></svg>;
    case "cloud":   return <svg {...props}><path d="M7 18a5 5 0 1 1 .4-9.97A6 6 0 0 1 19 12a4 4 0 0 1-1 7Z"/></svg>;
    case "puzzle":  return <svg {...props}><path d="M10 3a2 2 0 1 1 4 0v2h3a2 2 0 0 1 2 2v3h-2a2 2 0 1 0 0 4h2v3a2 2 0 0 1-2 2h-3v-2a2 2 0 1 0-4 0v2H7a2 2 0 0 1-2-2v-3H3a2 2 0 1 1 0-4h2V7a2 2 0 0 1 2-2h3V3Z"/></svg>;
    case "spark":   return <svg {...props}><path d="M12 2v6M12 16v6M2 12h6M16 12h6M5 5l4 4M15 15l4 4M19 5l-4 4M9 15l-4 4"/></svg>;
    case "x":       return <svg {...props}><path d="M6 6l12 12M18 6 6 18"/></svg>;
    case "shield":  return <svg {...props}><path d="M12 3 4 6v6c0 5 3.5 8.5 8 9 4.5-.5 8-4 8-9V6l-8-3z"/></svg>;
    case "code":    return <svg {...props}><path d="m8 8-4 4 4 4M16 8l4 4-4 4M14 4l-4 16"/></svg>;
    case "user":    return <svg {...props}><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7"/></svg>;
    case "rocket":  return <svg {...props}><path d="M14 3a8 8 0 0 0-7 7l-3 3 5 1 1 5 3-3a8 8 0 0 0 7-7l1-6-7 0Z"/><circle cx="14" cy="9" r="1.5"/></svg>;
    case "play":    return <svg {...props}><path d="M6 4l14 8-14 8z" fill={stroke}/></svg>;
    case "pause":   return <svg {...props}><rect x="5" y="4" width="5" height="16"/><rect x="14" y="4" width="5" height="16"/></svg>;
    case "refresh": return <svg {...props}><path d="M3 12a9 9 0 0 1 15-6.7M21 4v5h-5"/><path d="M21 12a9 9 0 0 1-15 6.7M3 20v-5h5"/></svg>;
    case "copy":    return <svg {...props}><rect x="8" y="8" width="13" height="13" rx="2"/><path d="M3 16V5a2 2 0 0 1 2-2h11"/></svg>;
    case "external":return <svg {...props}><path d="M14 3h7v7M21 3l-9 9M19 14v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h6"/></svg>;
    case "tg":      return <svg {...props}><path d="m2 12 19-8-3 19-6-6-2 5-2-5L2 12Z" fill={stroke} stroke="none"/></svg>;
    case "mail":    return <svg {...props}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>;
    case "key":     return <svg {...props}><circle cx="8" cy="15" r="4"/><path d="m11 12 9-9M16 7l3 3M14 9l3 3"/></svg>;
    case "gauge":   return <svg {...props}><path d="M3 17a9 9 0 1 1 18 0M12 13l5-5"/></svg>;
    case "settings":return <svg {...props}><circle cx="12" cy="12" r="3"/><path d="M19 12a7 7 0 0 0-.1-1.2l2-1.5-2-3.4-2.3 1a7 7 0 0 0-2.1-1.2L14 3h-4l-.5 2.7a7 7 0 0 0-2.1 1.2l-2.3-1-2 3.4 2 1.5A7 7 0 0 0 5 12a7 7 0 0 0 .1 1.2l-2 1.5 2 3.4 2.3-1a7 7 0 0 0 2.1 1.2L10 21h4l.5-2.7a7 7 0 0 0 2.1-1.2l2.3 1 2-3.4-2-1.5c0-.4.1-.8.1-1.2Z"/></svg>;
    case "users":   return <svg {...props}><circle cx="9" cy="8" r="4"/><circle cx="17" cy="10" r="3"/><path d="M2 21c0-4 3-6 7-6s7 2 7 6M14 21c0-3 2-5 5-5"/></svg>;
    case "chart":   return <svg {...props}><path d="M3 21h18M5 17V9M10 17v-6M15 17V7M20 17v-3"/></svg>;
    case "credit":  return <svg {...props}><rect x="3" y="6" width="18" height="13" rx="2"/><path d="M3 10h18M7 15h3"/></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>;
    default: return null;
  }
};

// Browser glyphs (small, recognizable)
const Browser = ({ name, size = 28 }) => {
  const s = size;
  if (name === "chrome") return (
    <svg width={s} height={s} viewBox="0 0 48 48">
      <circle cx="24" cy="24" r="22" fill="#fff"/>
      <circle cx="24" cy="24" r="8" fill="#4285f4" stroke="#fff" strokeWidth="2"/>
      <path d="M24 2a22 22 0 0 1 19 11l-11 .5L24 24l-7-15.5A22 22 0 0 1 24 2Z" fill="#ea4335"/>
      <path d="M2 24a22 22 0 0 0 11 19l8-14L13 13A22 22 0 0 0 2 24Z" fill="#fbbc04"/>
      <path d="M24 46a22 22 0 0 0 19-11l-17-.5L18 47A22 22 0 0 0 24 46Z" fill="#34a853"/>
    </svg>
  );
  if (name === "brave") return (
    <svg width={s} height={s} viewBox="0 0 48 48">
      <path d="M24 4 33 7l5-2 3 5-3 5 1 14-15 13L9 29l1-14-3-5 3-5 5 2 9-3Z" fill="#fb542b"/>
      <path d="M19 20l5 8 5-8-5-3-5 3Z" fill="#fff"/>
    </svg>
  );
  if (name === "firefox") return (
    <svg width={s} height={s} viewBox="0 0 48 48">
      <circle cx="24" cy="24" r="22" fill="#ff6611"/>
      <circle cx="24" cy="24" r="14" fill="#fee" opacity=".25"/>
      <path d="M10 18c2-8 12-12 18-8 6 5 4 14-4 16-7 2-15-1-14-8Z" fill="#fec00e"/>
      <circle cx="32" cy="14" r="2.5" fill="#fff"/>
    </svg>
  );
  if (name === "safari") return (
    <svg width={s} height={s} viewBox="0 0 48 48">
      <circle cx="24" cy="24" r="22" fill="#fff"/>
      <circle cx="24" cy="24" r="22" fill="none" stroke="#0a84ff" strokeWidth="2"/>
      <path d="M16 16l9 9-2 8 8-2 9-9-9-9-8 2-7 1Z" fill="#0a84ff"/>
      <path d="M22 22l4 4 5-12-9 8Z" fill="#fff"/>
    </svg>
  );
  return null;
};

// platform logos (small wordmarks)
const Platform = ({ name }) => {
  const map = {
    stake_com: { label: "Stake.com", color: "#5a8bff" },
    stake_us:  { label: "Stake.us",  color: "#ff6a5a" },
    shuffle:   { label: "Shuffle",   color: "#a78bfa" },
    thrill:    { label: "Thrill",    color: "#fbbf24" },
  };
  const p = map[name] || map.stake_com;
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
      <span style={{
        width: 8, height: 8, borderRadius: 2, background: p.color,
        boxShadow: `0 0 8px ${p.color}80`,
      }}></span>
      <span style={{ fontWeight: 600, fontSize: 13 }}>{p.label}</span>
    </span>
  );
};

Object.assign(window, {
  Btn, Pill, Field, Input, Select, Card, Stat, Steps, Toast, Icon, Browser, Platform,
});