/* State 376 — room furniture. The OFFICIAL layer (chrome, eye, productivity) and the
   HUMAN layer (the photo, the plant, the crack in the wall) live in the same frame.
   Sanity decides how much of the human layer you can still see. */
/* ---------- the State emblem: an eye, ringed, radiating. Drawn, not photographed. ---------- */
function Emblem({ size = 30, color = "#cdbf9b" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" aria-hidden="true">
      <circle cx="50" cy="50" r="47" fill="none" stroke={color} strokeWidth="2" />
      {Array.from({ length: 24 }).map((_, i) => {
        const a = (i / 24) * Math.PI * 2;
        return <line key={i} x1={50 + Math.cos(a) * 38} y1={50 + Math.sin(a) * 38}
          x2={50 + Math.cos(a) * 46} y2={50 + Math.sin(a) * 46} stroke={color} strokeWidth="1.4" />;
      })}
      <path d="M16 50 Q50 24 84 50 Q50 76 16 50 Z" fill="none" stroke={color} strokeWidth="2.4" />
      <circle cx="50" cy="50" r="12" fill="none" stroke={color} strokeWidth="2.4" />
      <circle cx="50" cy="50" r="5" fill={color} />
    </svg>
  );
}

/* ---------- the official top bar. Productivity as oppression. ---------- */
function ChromeBar({ clock, quota, processed, efficiency, loyalty, ticker, suspicion }) {
  const warmth = Math.min(1, loyalty / 100); // the more loyal, the more the bar "approves" of you
  return (
    <div className="chrome" style={{ "--approve": warmth }}>
      <div className="chrome-left">
        <Emblem size={22} color="#b9c4bb" />
        <div className="chrome-id">
          <div className="lbl">DIRECTORATE OF CIVIC COMPLIANCE</div>
          <div className="sub">SECTION 2 · DESK 7 · OFFICER 1187</div>
        </div>
      </div>

      <div className="chrome-ticker">
        <div className="ticker-track">
          {[...ticker, ...ticker].map((t, i) => <span key={i}>{t}</span>)}
        </div>
      </div>

      <div className="chrome-right">
        <div className="readout">
          <span className="rk">QUOTA</span>
          <span className="rv">{processed}<i>/{quota}</i></span>
        </div>
        <div className="readout">
          <span className="rk">EFFICIENCY</span>
          <span className="rv" style={{ color: efficiency >= 90 ? "#9bd29b" : efficiency >= 70 ? "#cdbf9b" : "#c98b6b" }}>
            {efficiency}<i>%</i>
          </span>
        </div>
        <div className="readout clock"><span className="rk">SHIFT</span><span className="rv">{clock}</span></div>
        <div className={"eye" + (suspicion > 45 ? " eye-watch" : "")} title="The State sees the whole.">
          <Emblem size={26} color={suspicion > 45 ? "#7fc6e0" : "#9aa39a"} />
        </div>
      </div>
    </div>
  );
}

/* ---------- the back wall. Poster + window + the crack only the human eye finds. ---------- */
function Wall({ sanity, tod = 0 }) {
  const human = sanity / 100;            // 1 = you still see the world
  const crackOpacity = Math.max(0, (sanity - 45) / 55) * 0.9;
  const lerp = (a, b) => a.map((v, i) => Math.round(v + (b[i] - v) * tod));
  const rgb = (c) => `rgb(${c[0]},${c[1]},${c[2]})`;
  const skyTop = rgb(lerp([58, 70, 84], [44, 36, 46]));   // cool morning -> dusk violet
  const skyBot = rgb(lerp([111, 106, 93], [124, 92, 56])); // -> amber
  return (
    <div className="wall">
      <div className="fluorescent" style={{ opacity: 1 - tod * 0.25 }} />
      <div className="poster">
        <Emblem size={62} color="#6c7d70" />
        <div className="poster-slogan">ORDER<br/>IS<br/>MERCY</div>
        <div className="poster-sub">DIRECTORATE OF CIVIC COMPLIANCE · 376</div>
      </div>
      <div className="window">
        <div className="window-sky" style={{ backgroundImage: `linear-gradient(${skyTop},${skyBot})`, opacity: 0.45 + human * 0.55 }} />
        <div className="skyline" />
        <div className="window-bars" />
      </div>
      <div className="wall-clock">
        <div className="wc-face"><div className="wc-h" /><div className="wc-m" /></div>
      </div>
      <div className="crack" style={{ opacity: crackOpacity }} />
    </div>
  );
}

/* ---------- the desk's human cargo. Vivid at high sanity, erased at low. ---------- */
function DeskItems({ sanity, loyalty }) {
  const h = sanity / 100;                     // humanity you can still perceive
  const sterile = Math.min(1, loyalty / 100); // the State tidies your desk for you
  const itemStyle = (extra = 0) => ({
    opacity: Math.max(0.06, h - extra),
    filter: `grayscale(${(1 - h) * 100}%) saturate(${40 + h * 90}%)`,
  });
  return (
    <div className="desk-items" style={{ "--sterile": sterile }}>
      {/* framed photo — a face at high sanity, a redaction bar at low */}
      <div className="photo-frame" style={itemStyle(0)}>
        <div className="photo">
          {sanity > 38
            ? <div className="photo-face"><span className="pf-head" /><span className="pf-head small" /></div>
            : <div className="photo-redacted">RECORD<br/>SEALED</div>}
        </div>
      </div>
      {/* the plant — alive and green, or gray and drooping */}
      <div className="plant" style={{ filter: `grayscale(${(1 - h) * 100}%)`, opacity: Math.max(0.1, h) }}>
        <span className="leaf l1" /><span className="leaf l2" /><span className="leaf l3" />
        <span className="pot" />
      </div>
      {/* coffee mug + ring */}
      <div className="mug" style={{ opacity: Math.max(0.12, h * 0.9) }}><span className="mug-body" /><span className="mug-handle" /></div>
      {/* child's drawing, pinned — the warmest, the first to fade */}
      <div className="drawing" style={itemStyle(0.18)}>
        <span className="d-sun" /><span className="d-fig" /><span className="d-fig two" /><span className="d-fig three" />
      </div>
    </div>
  );
}

/* ---------- inbox / outbox trays. The stack IS the quota meter, diegetically. ---------- */
function Tray({ side, count, label }) {
  const sheets = Math.min(count, 9);
  return (
    <div className={"tray tray-" + side}>
      <div className="tray-stack">
        {Array.from({ length: sheets }).map((_, i) => (
          <div className="sheet" key={i} style={{ bottom: i * 2.2 + "px", transform: `rotate(${(i % 2 ? 1 : -1) * (0.4 + i * 0.12)}deg)` }} />
        ))}
      </div>
      <div className="tray-rim" />
      <div className="tray-label">{label}</div>
    </div>
  );
}

/* ---------- the three stamps. The AI nudges you toward one. The nudge is the regime. ---------- */
function Stamps({ onPick, disabled, recommend, hint }) {
  const tools = [
    { key: "ARREST",  word: "DETAIN",  tone: "red"   },
    { key: "MONITOR", word: "OBSERVE", tone: "amber" },
    { key: "CLEAR",   word: "RELEASE", tone: "blue"  },
  ];
  return (
    <div className="stamps">
      {tools.map(t => (
        <button
          key={t.key}
          className={"stamp tone-" + t.tone + (recommend === t.key ? " recommended" : "")}
          disabled={disabled}
          onClick={() => onPick(t.key)}
          onMouseEnter={() => hint && hint(t.key)}
        >
          <span className="stamp-handle" />
          <span className="stamp-collar" />
          <span className="stamp-base"><span className="stamp-word">{t.word}</span></span>
          {recommend === t.key && <span className="stamp-rec">RECOMMENDED</span>}
        </button>
      ))}
    </div>
  );
}

Object.assign(window, { Emblem, ChromeBar, Wall, DeskItems, Tray, Stamps });