// Bottom terminal CLI w/ live log feed.
const SEED_LOG = [
  { t: "14:32:01", lv: "FEED", txt: "usgs.tr.eq · M3.2 · 39.4501, 28.1722 · BALIKESIR" },
  { t: "14:32:03", lv: "OK",   txt: "mapbox.tile.satellite · z14 · konya.r14 · 247ms" },
  { t: "14:32:04", lv: "SIG",  txt: "bist.xu100 ▼ 0.213% · vol 4.2B · sniper.alert.no" },
  { t: "14:32:06", lv: "WARN", txt: "firms.fire · 41 hotspots · ege.region · severity.med" },
  { t: "14:32:08", lv: "OK",   txt: "habitat.lounge · +1 operator · session.4f2a91" },
  { t: "14:32:11", lv: "FEED", txt: "frankfurter.eur.try · 36.4821 ▲ 0.082%" },
  { t: "14:32:14", lv: "OK",   txt: "gdelt.tr · 7 articles ingested · sentiment.neutral" },
  { t: "14:32:18", lv: "SIG",  txt: "coingecko.btc.usd · 71,420.18 ▲ 1.221% · vol $32.4B" },
];

const LV_COLOR = {
  FEED: "var(--wire-cyan)",
  OK: "var(--phosphor)",
  WARN: "var(--amber)",
  ERR: "var(--alert)",
  SIG: "var(--amber)",
};

const Terminal = () => {
  const [log, setLog] = React.useState(SEED_LOG);
  const [cmd, setCmd] = React.useState("");
  const [history, setHistory] = React.useState([]);

  React.useEffect(() => {
    const phrases = [
      { lv: "FEED", txt: "usgs.tr.eq · M2.8 · AEGEAN SEA · 37.62, 26.01" },
      { lv: "OK",   txt: "habitat.lounge · post.4f3e21 · @operator_07" },
      { lv: "SIG",  txt: "bist.asels ▲ 0.512% · entry zone confirmed" },
      { lv: "FEED", txt: "kick.api · live.viewers 412 · channel.bfsahin" },
      { lv: "WARN", txt: "anomaly.fx.usdtry · spread widening · 11bp" },
      { lv: "OK",   txt: "ws.presence · operators 238 → 239" },
      { lv: "FEED", txt: "coingecko.eth.usd · 3,841 ▲ 0.642%" },
    ];
    const i = setInterval(() => {
      const d = new Date();
      const t = `${String(d.getHours()).padStart(2,"0")}:${String(d.getMinutes()).padStart(2,"0")}:${String(d.getSeconds()).padStart(2,"0")}`;
      const p = phrases[Math.floor(Math.random() * phrases.length)];
      setLog(prev => [...prev.slice(-30), { t, ...p }]);
    }, 2400);
    return () => clearInterval(i);
  }, []);

  const exec = e => {
    if (e.key !== "Enter" || !cmd.trim()) return;
    const d = new Date();
    const t = `${String(d.getHours()).padStart(2,"0")}:${String(d.getMinutes()).padStart(2,"0")}:${String(d.getSeconds()).padStart(2,"0")}`;
    setLog(prev => [...prev,
      { t, lv: "OK", txt: `> ${cmd}` },
      { t, lv: "FEED", txt: `command parsed · 0 results · type 'help' for index` },
    ]);
    setHistory(h => [cmd, ...h]);
    setCmd("");
  };

  const scrollerRef = React.useRef();
  React.useEffect(() => {
    if (scrollerRef.current) scrollerRef.current.scrollTop = scrollerRef.current.scrollHeight;
  }, [log]);

  return (
    <div style={{ height: "100%", display: "flex", flexDirection: "column", background: "var(--panel)", overflow: "hidden" }}>
      <div ref={scrollerRef} style={{ flex: 1, overflow: "auto", padding: "8px 12px", fontSize: 11, lineHeight: 1.55 }}>
        {log.map((l, i) => (
          <div key={i} style={{
            color: "var(--bone-soft)",
            animation: i === log.length - 1 ? "logIn 200ms cubic-bezier(.2,.8,.2,1)" : "none",
          }}>
            <span style={{ color: "var(--ash-deep)" }}>[{l.t}]</span>{" "}
            <span style={{ color: LV_COLOR[l.lv], fontWeight: 600 }}>[{l.lv}]</span>{" "}
            <span>{l.txt}</span>
          </div>
        ))}
      </div>
      <div style={{ display: "flex", borderTop: "1px solid var(--edge)", padding: "6px 12px", alignItems: "center", gap: 8 }}>
        <span style={{ color: "var(--amber)", fontWeight: 700, fontSize: 12 }}>fg-ops$</span>
        <input value={cmd} onChange={e => setCmd(e.target.value)} onKeyDown={exec}
          placeholder="query --signal trader.btc --window 1h --confidence high"
          style={{
            flex: 1, background: "transparent", border: "none", outline: "none",
            color: "var(--bone)", fontFamily: "var(--font-mono)", fontSize: 12,
            fontVariantNumeric: "tabular-nums",
          }} />
        <span style={{ width: 7, height: 13, background: "var(--amber)", animation: "blink 1s steps(1) infinite" }} />
      </div>
      <style>{`
        @keyframes blink { 50% { opacity: 0; } }
        @keyframes logIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
      `}</style>
    </div>
  );
};

window.Terminal = Terminal;