/* Console 1 — Refined Terminal. Keeps the 7-segment + ASCII DNA:
   instrument panels, corner ticks, and dense hierarchy. */
(function () {
  const { W, SevenSeg, AsciiSky } = window.POV;
  const AMBER = "#ffcf78";
  const INK = "#f4ecdd";
  const DIM = "rgba(244,236,221,0.52)";

  function Panel({ label, children, style, bodyStyle }) {
    return (
      <div className="tm-panel" style={style}>
        {label && <span className="tm-panel__label">{label}</span>}
        <i className="tm-tick tm-tick--tl" /><i className="tm-tick tm-tick--tr" />
        <i className="tm-tick tm-tick--bl" /><i className="tm-tick tm-tick--br" />
        <div className="tm-panel__body" style={bodyStyle}>{children}</div>
      </div>
    );
  }
  function Stat({ label, value, sub }) {
    return (
      <div className="tm-stat">
        <span className="tm-stat__label">{label}</span>
        <span className="tm-stat__value">{value}{sub && <em className="tm-stat__sub">{sub}</em>}</span>
      </div>
    );
  }
  function Meter({ label, val, pct }) {
    const cells = 22, on = Math.round((pct / 100) * cells);
    return (
      <div className="tm-meter">
        <div className="tm-meter__top"><span>{label}</span><b>{val}</b></div>
        <div className="tm-meter__bar">
          {Array.from({ length: cells }).map((_, i) => (
            <span key={i} className={i < on ? "on" : ""} />
          ))}
        </div>
      </div>
    );
  }

  function ConsoleTerminal() {
    return (
      <div className="tm-root">
        <style>{`
          .tm-root{position:absolute;inset:0;background:#050403;color:${INK};
            font-family:var(--mono);--amber:${AMBER};overflow:hidden;
            display:flex;flex-direction:column;padding:26px 28px 0;}
          .tm-root::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;
            background:radial-gradient(ellipse 130% 90% at 50% 45%,transparent 42%,rgba(0,0,0,.72) 100%),
            repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px);}
          .tm-top{display:flex;align-items:center;justify-content:space-between;
            padding-bottom:13px;border-bottom:1px solid rgba(244,236,221,.1);
            font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:${DIM};flex:none;}
          .tm-top b{color:${AMBER};font-weight:400;}
          .tm-coord{color:${DIM};}
          .tm-grid{flex:1;display:grid;gap:12px;padding:14px 0 0;
            grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(6,1fr);
            grid-template-areas:
              "clk clk clk clk sky sky sky sky rai rai hum hum"
              "clk clk clk clk sky sky sky sky rai rai hum hum"
              "tmp tmp tmp tmp sky sky sky sky rai rai hum hum"
              "tmp tmp tmp tmp wrn wrn wrn wrn sun sun sun sun"
              "tmp tmp tmp tmp wrn wrn wrn wrn fel fel uvi uvi"
              "tmp tmp tmp tmp wrn wrn wrn wrn dew dew win win";}
          .tm-panel{position:relative;background:#0b0907;border:1px solid rgba(244,236,221,.09);
            padding:11px 13px;overflow:hidden;}
          .tm-panel__label{position:absolute;top:9px;left:13px;font-size:9.5px;letter-spacing:.22em;
            text-transform:uppercase;color:${DIM};z-index:2;}
          .tm-panel__body{position:absolute;inset:0;display:flex;flex-direction:column;
            align-items:center;justify-content:center;gap:6px;}
          .tm-tick{position:absolute;width:7px;height:7px;border:1px solid rgba(255,207,120,.4);opacity:.6;}
          .tm-tick--tl{top:5px;left:5px;border-right:0;border-bottom:0;}
          .tm-tick--tr{top:5px;right:5px;border-left:0;border-bottom:0;}
          .tm-tick--bl{bottom:5px;left:5px;border-right:0;border-top:0;}
          .tm-tick--br{bottom:5px;right:5px;border-left:0;border-top:0;}
          .tm-stat{display:flex;flex-direction:column;align-items:center;gap:5px;}
          .tm-stat__label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:${DIM};}
          .tm-stat__value{font-size:30px;color:${INK};font-variant-numeric:tabular-nums;letter-spacing:.01em;}
          .tm-stat__sub{font-style:normal;font-size:13px;color:${DIM};margin-left:4px;}
          .tm-meter{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
            padding:11px 13px 13px;gap:8px;}
          .tm-meter__top{display:flex;align-items:baseline;justify-content:space-between;}
          .tm-meter__top span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:${DIM};}
          .tm-meter__top b{font-size:28px;color:${INK};font-weight:400;font-variant-numeric:tabular-nums;}
          .tm-meter__bar{display:grid;grid-template-columns:repeat(22,1fr);gap:3px;height:14px;align-items:stretch;}
          .tm-meter__bar span{background:rgba(244,236,221,.12);}
          .tm-meter__bar span.on{background:${AMBER};}
          .tm-warn{position:absolute;inset:0;padding:30px 14px 14px;display:flex;flex-direction:column;gap:7px;}
          .tm-warn__item{display:flex;align-items:center;gap:9px;padding:8px 11px;
            border-left:2px solid ${AMBER};background:rgba(255,207,120,.07);
            font-size:13px;color:${INK};letter-spacing:.02em;}
          .tm-warn__item b{margin-left:auto;font-size:9.5px;letter-spacing:.18em;color:${AMBER};text-transform:uppercase;}
          .tm-dot{width:7px;height:7px;background:${AMBER};flex:none;}
          .tm-sun{display:flex;gap:26px;}
          .tm-ticker{flex:none;height:30px;margin:12px -28px 0;border-top:1px solid rgba(244,236,221,.18);
            display:flex;align-items:center;overflow:hidden;padding:0 28px;
            font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:${DIM};white-space:nowrap;}
          .tm-ticker b{color:${AMBER};margin:0 14px;}
        `}</style>

        <div className="tm-top">
          <b>pov.hk</b>
          <span className="tm-coord">{W.city} · 22.30°n 114.17°e · {W.date}</span>
        </div>

        <div className="tm-grid">
          <Panel label="time · hkt" style={{ gridArea: "clk" }}>
            <SevenSeg value={W.time} h={72} onColor={AMBER} glow={false} />
          </Panel>

          <Panel label="temperature" style={{ gridArea: "tmp" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <SevenSeg value={String(W.temp)} h={120} onColor={AMBER} glow={false} />
              <span style={{ fontSize: 34, color: AMBER, marginTop: -40 }}>°</span>
              <div style={{ display: "flex", flexDirection: "column", gap: 12, marginLeft: 4 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                  <span style={{ color: DIM, fontSize: 16 }}>▲</span>
                  <SevenSeg value={String(W.high)} h={30} onColor={"rgba(255,207,120,.7)"} glow={false} /></div>
                <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                  <span style={{ color: DIM, fontSize: 16 }}>▼</span>
                  <SevenSeg value={String(W.low)} h={30} onColor={"rgba(255,207,120,.7)"} glow={false} /></div>
              </div>
            </div>
            <div style={{ marginTop: 8, fontSize: 11, letterSpacing: ".18em", textTransform: "uppercase", color: DIM }}>°c · feels {W.feels}°</div>
          </Panel>

          <Panel label="the sky is" style={{ gridArea: "sky" }}>
            <AsciiSky color={AMBER} size={17} />
            <div style={{ fontSize: 21, color: INK, marginTop: 8, letterSpacing: ".02em" }}>{W.condition}</div>
          </Panel>

          <div className="tm-panel" style={{ gridArea: "rai" }}>
            <i className="tm-tick tm-tick--tl" /><i className="tm-tick tm-tick--tr" /><i className="tm-tick tm-tick--bl" /><i className="tm-tick tm-tick--br" />
            <Meter label="rain" val={W.rain + "%"} pct={W.rain} />
          </div>
          <div className="tm-panel" style={{ gridArea: "hum" }}>
            <i className="tm-tick tm-tick--tl" /><i className="tm-tick tm-tick--tr" /><i className="tm-tick tm-tick--bl" /><i className="tm-tick tm-tick--br" />
            <Meter label="humidity" val={W.humidity + "%"} pct={W.humidity} />
          </div>

          <div className="tm-panel" style={{ gridArea: "wrn" }}>
            <span className="tm-panel__label">warnings · hko</span>
            <i className="tm-tick tm-tick--tl" /><i className="tm-tick tm-tick--tr" /><i className="tm-tick tm-tick--bl" /><i className="tm-tick tm-tick--br" />
            <div className="tm-warn">
              {W.warnings.map((w) => (
                <div className="tm-warn__item" key={w.code}><span className="tm-dot" />{w.name}<b>active</b></div>
              ))}
            </div>
          </div>

          <Panel label="sun" style={{ gridArea: "sun" }} bodyStyle={{ flexDirection: "row", gap: 28 }}>
            <div className="tm-stat"><span className="tm-stat__label">sunrise</span><span className="tm-stat__value" style={{ fontSize: 24 }}>{W.sunrise}</span></div>
            <div className="tm-stat"><span className="tm-stat__label">sunset</span><span className="tm-stat__value" style={{ fontSize: 24 }}>{W.sunset}</span></div>
          </Panel>

          <Panel label="feels" style={{ gridArea: "fel" }}><Stat value={W.feels + "°"} /></Panel>
          <Panel label="uv index" style={{ gridArea: "uvi" }}><Stat value={W.uv} /></Panel>
          <Panel label="dew pt" style={{ gridArea: "dew" }}><Stat value={W.dew + "°"} /></Panel>
          <Panel label="wind" style={{ gridArea: "win" }}><Stat value={W.wind} sub={"km/h " + W.windDir} /></Panel>
        </div>

        <div className="tm-ticker">
          {W.forecast}<b>◆</b>{W.forecast}<b>◆</b>
        </div>
      </div>
    );
  }

  window.ConsoleTerminal = ConsoleTerminal;
})();