// Shared primitives: cards, sparkline, pills, etc.
const { useMemo: useMemoP } = React;

function Card({ children, style, title, sub, action, dense, noPad }) {
  return (
    <section style={{ ...cardStyles.card, ...(dense ? cardStyles.cardDense : {}), ...style }}>
      {(title || action) && (
        <header style={cardStyles.header}>
          <div>
            {title && <div style={cardStyles.title}>{title}</div>}
            {sub && <div style={cardStyles.sub}>{sub}</div>}
          </div>
          {action}
        </header>
      )}
      <div style={noPad ? {} : { padding: (title || action) ? "0 20px 20px" : 20 }}>{children}</div>
    </section>
  );
}

function Sparkline({ data, width = 80, height = 28, color = "#FFE9D0", accent }) {
  const max = Math.max(...data, 10);
  const min = Math.min(...data, 0);
  const range = Math.max(1, max - min);
  const pts = data.map((v, i) => {
    const x = (i / (data.length - 1)) * width;
    const y = height - ((v - min) / range) * (height - 4) - 2;
    return [x, y];
  });
  const d = pts.map(([x, y], i) => (i === 0 ? `M${x},${y}` : `L${x},${y}`)).join(" ");
  const areaD = `${d} L${width},${height} L0,${height} Z`;
  const last = pts[pts.length - 1];
  return (
    <svg width={width} height={height} style={{ display: "block" }}>
      <defs>
        <linearGradient id={`sp-${color.replace(/[^a-z0-9]/gi, "")}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={color} stopOpacity="0.25" />
          <stop offset="100%" stopColor={color} stopOpacity="0" />
        </linearGradient>
      </defs>
      <path d={areaD} fill={`url(#sp-${color.replace(/[^a-z0-9]/gi, "")})`} />
      <path d={d} fill="none" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
      <circle cx={last[0]} cy={last[1]} r="2.5" fill={accent || color} />
    </svg>
  );
}

function Pill({ children, tone = "neutral", style }) {
  const tones = {
    neutral: { bg: "rgba(255,233,208,0.06)", color: "#FFE9D0", border: "rgba(255,233,208,0.1)" },
    healthy: { bg: "rgba(0,178,74,0.1)", color: "#4ED88A", border: "rgba(0,178,74,0.3)" },
    attention: { bg: "rgba(240,180,40,0.08)", color: "#F0B428", border: "rgba(240,180,40,0.3)" },
    critical: { bg: "rgba(225,80,70,0.1)", color: "#FF7A70", border: "rgba(225,80,70,0.3)" },
    brand: { bg: "rgba(255,233,208,0.08)", color: "#FFE9D0", border: "rgba(255,233,208,0.2)" },
  };
  const t = tones[tone] || tones.neutral;
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 6,
      padding: "3px 9px", borderRadius: 999, fontSize: 11, fontWeight: 500,
      background: t.bg, color: t.color, border: `1px solid ${t.border}`,
      whiteSpace: "nowrap", ...style,
    }}>
      {children}
    </span>
  );
}

function Stat({ label, value, delta, tone = "neutral", sub }) {
  const toneColor = { up: "#4ED88A", down: "#FF7A70", neutral: "rgba(255,233,208,0.55)" }[tone];
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
      <div style={{ fontSize: 11, color: "rgba(255,233,208,0.55)", textTransform: "uppercase", letterSpacing: "0.08em" }}>{label}</div>
      <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
        <div style={{ fontSize: 28, fontWeight: 600, color: "#FFE9D0", fontFeatureSettings: '"tnum"' }}>{value}</div>
        {delta && <div style={{ fontSize: 12, color: toneColor, fontWeight: 500 }}>{delta}</div>}
      </div>
      {sub && <div style={{ fontSize: 11, color: "rgba(255,233,208,0.45)" }}>{sub}</div>}
    </div>
  );
}

const cardStyles = {
  card: {
    background: "#141416", border: "1px solid rgba(255,233,208,0.06)",
    borderRadius: 14, overflow: "hidden",
  },
  cardDense: { borderRadius: 10 },
  header: {
    display: "flex", justifyContent: "space-between", alignItems: "flex-start",
    padding: 20, paddingBottom: 14, gap: 12,
  },
  title: { fontSize: 14, fontWeight: 600, color: "#FFE9D0", letterSpacing: "-0.01em" },
  sub: { fontSize: 12, color: "rgba(255,233,208,0.5)", marginTop: 3 },
};

Object.assign(window, { Card, Sparkline, Pill, Stat, cardStyles });