// Small primitives shared across the command surface.

const Dot = ({ status = "online", size = 6 }) => (
  <span
    className={`dot dot--${status}`}
    style={{ width: size, height: size, display: "inline-block", borderRadius: "50%", verticalAlign: "middle" }}
  />
);

const Pill = ({ status = "online", children }) => {
  const colors = {
    online: { c: "var(--phosphor)", b: "rgba(57,255,136,.4)" },
    warn:   { c: "var(--amber)",    b: "rgba(255,176,0,.4)" },
    down:   { c: "var(--alert)",    b: "rgba(255,51,85,.4)" },
    idle:   { c: "var(--ash-deep)", b: "var(--edge)" },
  }[status];
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 6, padding: "3px 7px",
      border: `1px solid ${colors.b}`, color: colors.c,
      fontSize: 10, letterSpacing: ".16em", textTransform: "uppercase", fontWeight: 600,
    }}>
      <Dot status={status} size={5} />{children}
    </span>
  );
};

const Coord = ({ children, style }) => (
  <span style={{
    fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--ash-deep)",
    letterSpacing: ".08em", ...style,
  }}>{children}</span>
);

const Eyebrow = ({ children, style, color = "var(--ash)" }) => (
  <span style={{
    fontFamily: "var(--font-mono)", fontSize: 11, color,
    letterSpacing: ".16em", textTransform: "uppercase", fontWeight: 600, ...style,
  }}>{children}</span>
);

// Crosshair corner
const Crosshair = ({ color = "var(--amber)" }) => (
  <>
    {[
      { top: -3, left: -3 }, { top: -3, right: -3 },
      { bottom: -3, left: -3 }, { bottom: -3, right: -3 },
    ].map((pos, i) => (
      <span key={i} style={{
        position: "absolute", width: 6, height: 6, pointerEvents: "none",
        background: `linear-gradient(${color}, ${color}) 50% 0/100% 1px no-repeat,
                     linear-gradient(${color}, ${color}) 0 50%/1px 100% no-repeat`,
        ...pos,
      }} />
    ))}
  </>
);

Object.assign(window, { Dot, Pill, Coord, Eyebrow, Crosshair });