/* Relay — shared screen primitives */

function PageHeader({ title, subtitle, icon, children }) {
  return (
    <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 16, marginBottom: 18, flexWrap: "wrap" }}>
      <div>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          {icon && <span style={{ width: 34, height: 34, borderRadius: 9, background: "var(--graphite)", color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>{icon}</span>}
          <h1 style={{ margin: 0, fontSize: 22, fontWeight: 700, letterSpacing: "-.01em" }}>{title}</h1>
        </div>
        {subtitle && <div style={{ color: "var(--text-3)", fontSize: 13.5, marginTop: 5 }}>{subtitle}</div>}
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>{children}</div>
    </div>
  );
}

function Segmented({ options, value, onChange, size = "md" }) {
  return (
    <div style={{ display: "flex", background: "var(--surface-3)", borderRadius: 8, padding: 3, gap: 2 }}>
      {options.map((o) => {
        const id = typeof o === "string" ? o : o.id;
        const label = typeof o === "string" ? o : o.label;
        const active = value === id;
        return (
          <button key={id} onClick={() => onChange(id)} style={{
            padding: size === "sm" ? "5px 10px" : "6px 13px", fontSize: size === "sm" ? 12 : 12.5, fontWeight: 600,
            border: "none", borderRadius: 6, textTransform: "capitalize",
            background: active ? "var(--surface)" : "transparent",
            color: active ? "var(--text)" : "var(--text-2)",
            boxShadow: active ? "var(--shadow-sm)" : "none",
            display: "flex", alignItems: "center", gap: 6,
          }}>{typeof o !== "string" && o.icon}{label}</button>
        );
      })}
    </div>
  );
}

// sortable column header
function SortTH({ label, col, sort, setSort, align = "left", width }) {
  const active = sort.col === col;
  return (
    <button onClick={() => setSort({ col, dir: active && sort.dir === "desc" ? "asc" : "desc" })}
      style={{
        display: "flex", alignItems: "center", gap: 4, border: "none", background: "transparent",
        fontSize: 10.5, fontWeight: 600, color: active ? "var(--text)" : "var(--text-3)",
        textTransform: "uppercase", letterSpacing: ".05em", padding: 0, cursor: "pointer",
        justifyContent: align === "right" ? "flex-end" : "flex-start", width: width || "auto",
        marginLeft: align === "right" ? "auto" : 0,
      }}>
      {label}
      <span style={{ opacity: active ? 1 : 0.25, fontSize: 9, transform: active && sort.dir === "asc" ? "rotate(180deg)" : "none" }}>▼</span>
    </button>
  );
}

// vertical bar chart
function BarChart({ data, height = 150, accent }) {
  const max = Math.max(1, ...data.map((d) => d.value));
  return (
    <div style={{ display: "flex", alignItems: "flex-end", gap: 8, height, paddingTop: 8 }}>
      {data.map((d, i) => (
        <div key={i} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 7, height: "100%", justifyContent: "flex-end" }}>
          <div style={{ fontSize: 11, fontWeight: 600, color: "var(--text-2)", fontFamily: "var(--mono)" }}>{d.top}</div>
          <div title={d.value} style={{
            width: "100%", maxWidth: 46, height: `${(d.value / max) * 100}%`, minHeight: 3,
            background: d.color || accent || "var(--new)", borderRadius: "5px 5px 2px 2px", transition: "height .3s",
          }} />
          <div style={{ fontSize: 11, color: "var(--text-3)", fontWeight: 500, whiteSpace: "nowrap" }}>{d.label}</div>
        </div>
      ))}
    </div>
  );
}

// horizontal proportion bar (per-platform share)
function ShareBar({ rows, total }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
      {rows.map((r) => (
        <div key={r.id} style={{ display: "flex", alignItems: "center", gap: 11 }}>
          <span style={{ width: 96, fontSize: 12.5, fontWeight: 600, display: "flex", alignItems: "center", gap: 7, flexShrink: 0 }}>
            <span style={{ width: 9, height: 9, borderRadius: 3, background: r.color }} />{r.label}
          </span>
          <div style={{ flex: 1, height: 9, background: "var(--surface-3)", borderRadius: 999, overflow: "hidden" }}>
            <div style={{ width: `${total ? (r.value / total) * 100 : 0}%`, height: "100%", background: r.color, borderRadius: 999, transition: "width .3s" }} />
          </div>
          <span className="mono" style={{ width: 52, textAlign: "right", fontSize: 12.5, fontWeight: 600, flexShrink: 0 }}>{total ? Math.round((r.value / total) * 100) : 0}%</span>
        </div>
      ))}
    </div>
  );
}

function Scroller({ children, pad = "22px 26px" }) {
  return <div style={{ flex: 1, minHeight: 0, overflowY: "auto", padding: pad }}>{children}</div>;
}

Object.assign(window, { PageHeader, Segmented, SortTH, BarChart, ShareBar, Scroller });