// =============================================================================
// STYLE HELPERS — card, label, input/button presets, Empty placeholder.
// Pure-function styles keyed off the theme; nothing stateful here.
// =============================================================================

window.JD_STYLES = (function () {
  const { C } = window.JD_THEME;

  const card = (extra) => ({
    background: C.card,
    border: "0.5px solid " + C.border,
    borderRadius: 10,
    padding: "14px 16px",
    ...extra,
  });

  const ct = {
    fontSize: 13,
    letterSpacing: "0.22em",
    textTransform: "uppercase",
    color: C.gold,
    marginBottom: 10,
    opacity: 0.85,
  };

  const inp = {
    background: C.bg,
    border: "0.5px solid " + C.border,
    borderRadius: 6,
    color: C.cream,
    fontSize: 15,
    padding: "8px 10px",
    fontFamily: "Georgia,serif",
    width: "100%",
    boxSizing: "border-box",
  };

  // Buttons: gold / red / green
  const bg = {
    fontSize: 14,
    padding: "6px 14px",
    background: "rgba(159,117,9,0.15)",
    border: "0.5px solid rgba(159,117,9,0.4)",
    borderRadius: 6,
    color: C.gold,
    cursor: "pointer",
    fontFamily: "Georgia,serif",
  };
  const br = {
    fontSize: 14,
    padding: "5px 12px",
    background: "rgba(224,82,82,0.1)",
    border: "0.5px solid rgba(224,82,82,0.25)",
    borderRadius: 6,
    color: C.red,
    cursor: "pointer",
    fontFamily: "Georgia,serif",
  };
  const bgg = {
    fontSize: 14,
    padding: "5px 12px",
    background: "rgba(62,207,142,0.1)",
    border: "0.5px solid rgba(62,207,142,0.25)",
    borderRadius: 6,
    color: C.green,
    cursor: "pointer",
    fontFamily: "Georgia,serif",
  };

  // Empty-state placeholder — same shape used in every panel
  function Empty({ label, sub }) {
    return (
      <div style={{ textAlign: "center", padding: "24px 12px", fontSize: 14, color: C.muted, fontStyle: "italic", opacity: 0.7 }}>
        <div>{label || "No data yet"}</div>
        {sub && <div style={{ fontSize: 12, marginTop: 4, opacity: 0.7 }}>{sub}</div>}
      </div>
    );
  }

  // Error-state placeholder — used when an adapter call rejects
  function ErrorBox({ message }) {
    return (
      <div style={{ padding: "14px 16px", background: "rgba(224,82,82,0.08)", border: "0.5px solid rgba(224,82,82,0.25)", borderRadius: 8, color: C.red, fontSize: 14 }}>
        <div style={{ letterSpacing: "0.18em", textTransform: "uppercase", fontSize: 12, marginBottom: 6 }}>Adapter error</div>
        <div style={{ color: "rgba(222,214,185,0.85)" }}>{message || "Unknown error reading from data adapter."}</div>
      </div>
    );
  }

  // Loading skeleton — single line
  function Loading({ label }) {
    return (
      <div style={{ textAlign: "center", padding: "16px 12px", fontSize: 13, color: C.muted, opacity: 0.6 }}>
        {label || "Loading…"}
      </div>
    );
  }

  return { card, ct, inp, bg, br, bgg, Empty, ErrorBox, Loading };
})();