// Shared primitives for PTCG Dashboard UI kit.
// Kept small and cosmetic — not production components.

const Icon = ({ name, size = 16, color = "currentColor", stroke = 1.75 }) => {
  const paths = {
    "map-pin": <><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></>,
    "clock": <><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></>,
    "filter": <><path d="M3 6h18M6 12h12M10 18h4"/></>,
    "search": <><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></>,
    "external": <><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14 21 3"/></>,
    "chevron-down": <><path d="m6 9 6 6 6-6"/></>,
    "chevron-right": <><path d="m9 6 6 6-6 6"/></>,
    "info": <><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></>,
    "x": <><path d="M18 6 6 18M6 6l12 12"/></>,
    "check": <><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></>,
    "alert": <><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></>,
    "calendar": <><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></>,
    "refresh": <><path d="M21 12a9 9 0 1 1-9-9"/><path d="M21 3v6h-6"/></>,
    "menu": <><path d="M3 12h18M3 6h18M3 18h18"/></>,
    "settings": <><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
      stroke={color} strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round"
      style={{ flexShrink: 0 }}>
      {paths[name] || <circle cx="12" cy="12" r="10"/>}
    </svg>
  );
};

const Button = ({ variant = "secondary", size = "md", children, onClick, icon, iconRight, ...rest }) => {
  const base = {
    display: "inline-flex", alignItems: "center", gap: 6,
    font: size === "sm" ? "500 13px/1 var(--font-body)" : "500 14px/1 var(--font-body)",
    border: "1px solid transparent", borderRadius: 8,
    padding: size === "sm" ? "6px 10px" : "8px 14px",
    cursor: "pointer", transition: "all 120ms var(--ease-out)",
    whiteSpace: "nowrap",
  };
  const v = {
    primary: { background: "var(--red-500)", color: "#fff" },
    secondary: { background: "#fff", color: "var(--fg-1)", borderColor: "var(--border-2)" },
    ghost: { background: "transparent", color: "var(--fg-2)" },
  }[variant];
  return (
    <button {...rest} onClick={onClick} style={{ ...base, ...v }}
      onMouseEnter={e => {
        if (variant === "primary") e.currentTarget.style.background = "var(--red-600)";
        if (variant === "secondary") { e.currentTarget.style.background = "var(--ink-50)"; e.currentTarget.style.borderColor = "var(--ink-300)"; }
        if (variant === "ghost") { e.currentTarget.style.background = "var(--ink-50)"; e.currentTarget.style.color = "var(--fg-1)"; }
      }}
      onMouseLeave={e => Object.assign(e.currentTarget.style, { background: v.background, color: v.color, borderColor: v.borderColor || "transparent" })}
    >
      {icon && <Icon name={icon} size={14} />}
      {children}
      {iconRight && <Icon name={iconRight} size={14} />}
    </button>
  );
};

const Chip = ({ tone = "gray", dot, children }) => {
  const tones = {
    gray:  { bg: "var(--ink-50)", fg: "var(--fg-2)", bd: "var(--border-1)" },
    red:   { bg: "var(--red-50)", fg: "var(--red-700)", bd: "var(--red-100)" },
    blue:  { bg: "#EFF6FF", fg: "#1D4ED8", bd: "#DBEAFE" },
    green: { bg: "#ECFDF5", fg: "#047857", bd: "#D1FAE5" },
    amber: { bg: "#FFFBEB", fg: "#B45309", bd: "#FEF3C7" },
  }[tone];
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 5,
      height: 22, padding: "0 9px", borderRadius: 999,
      fontSize: 11.5, fontWeight: 500,
      background: tones.bg, color: tones.fg, border: `1px solid ${tones.bd}`,
    }}>
      {dot && <span style={{ width: 6, height: 6, borderRadius: 999, background: dot }} />}
      {children}
    </span>
  );
};

const Checkbox = ({ label, jp, checked, onChange, count }) => (
  <label style={{
    display: "flex", alignItems: "center", gap: 8,
    padding: "6px 8px", margin: "0 -8px", borderRadius: 6,
    cursor: "pointer", transition: "background 120ms",
    userSelect: "none",
  }}
  onMouseEnter={e => e.currentTarget.style.background = "var(--ink-50)"}
  onMouseLeave={e => e.currentTarget.style.background = "transparent"}>
    <input type="checkbox" checked={checked} onChange={onChange}
      style={{ accentColor: "var(--red-500)", width: 14, height: 14, margin: 0 }} />
    <span style={{ fontSize: 13, color: "var(--fg-1)", fontWeight: 500 }}>{label}</span>
    {jp && <span className="jp-sub" style={{ fontSize: 11 }}>{jp}</span>}
    {count !== undefined && <span style={{ marginLeft: "auto", fontSize: 11, color: "var(--fg-3)", fontVariantNumeric: "tabular-nums" }}>{count}</span>}
  </label>
);

const StatCard = ({ label, jp, value, delta, deltaTone = "ok", suffix }) => (
  <div style={{
    flex: 1, background: "#fff",
    border: "1px solid var(--border-1)", borderRadius: 8,
    padding: "14px 16px", boxShadow: "var(--shadow-1)",
  }}>
    <div style={{ fontSize: 11, color: "var(--fg-3)", fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.04em" }}>{label}</div>
    <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginTop: 6 }}>
      <span style={{ font: "600 26px/1 var(--font-latin)", color: "var(--fg-1)", fontVariantNumeric: "tabular-nums" }}>{value}</span>
      {suffix && <span style={{ fontSize: 13, color: "var(--fg-3)" }}>{suffix}</span>}
      {delta && <span style={{ fontSize: 12, fontWeight: 500, color: deltaTone === "ok" ? "var(--ok)" : "var(--fg-3)" }}>{delta}</span>}
    </div>
    <div className="jp-sub" style={{ marginTop: 4 }}>{jp}</div>
  </div>
);

// Responsive hook — subscribes to matchMedia so components re-render on resize.
// Breakpoint 768px matches the mobile CSS in colors_and_type.css.
const useIsMobile = (breakpoint = 768) => {
  const [isMobile, setIsMobile] = React.useState(() =>
    typeof window !== "undefined" && window.matchMedia(`(max-width: ${breakpoint}px)`).matches
  );
  React.useEffect(() => {
    const mq = window.matchMedia(`(max-width: ${breakpoint}px)`);
    const handler = e => setIsMobile(e.matches);
    // Safari < 14 uses addListener/removeListener; modern uses addEventListener.
    if (mq.addEventListener) mq.addEventListener("change", handler);
    else mq.addListener(handler);
    return () => {
      if (mq.removeEventListener) mq.removeEventListener("change", handler);
      else mq.removeListener(handler);
    };
  }, [breakpoint]);
  return isMobile;
};

Object.assign(window, { Icon, Button, Chip, Checkbox, StatCard, useIsMobile });