/* console-drawer.jsx — Bottom multi-stream tabbed log, auto-scroll, pause on hover */
function ConsoleDrawer({ height, onResize, collapsed, onToggle }) {
  const [filter, setFilter] = React.useState("ALL");
  const [lines, setLines] = React.useState(() => window.NTData.getInitialLog());
  const [paused, setPaused] = React.useState(false);
  const [hovered, setHovered] = React.useState(false);
  const scrollRef = React.useRef(null);

  React.useEffect(() => {
    return window.NTData.subscribe((evt) => {
      if (evt.type === "log") {
        if (hovered) return; // pause on hover
        setLines(prev => [evt.line, ...prev].slice(0, 200));
      }
    });
  }, [hovered]);

  const filtered = filter === "ALL" ? lines : lines.filter(l => l.agent === filter);
  const counts = window.NTData.AGENTS.reduce((m, a) => {
    m[a.id] = lines.filter(l => l.agent === a.id).length;
    return m;
  }, { ALL: lines.length });

  return (
    <div className="console" data-collapsed={collapsed} style={{ height: collapsed ? 32 : height }}>
      <style>{`
        .console {
          background: var(--bg-elev);
          border-top: 1px solid var(--border);
          display: flex; flex-direction: column;
          flex-shrink: 0;
          transition: height .15s ease;
          overflow: hidden;
          position: relative;
        }
        .console__resize {
          position: absolute; top: 0; left: 0; right: 0; height: 4px;
          cursor: row-resize;
          z-index: 3;
        }
        .console__resize:hover { background: var(--accent); opacity: 0.4; }

        .console__bar {
          display: flex; align-items: center; gap: 6px;
          padding: 4px 12px;
          border-bottom: 1px solid var(--border);
          background: var(--bg-panel-2);
          flex-shrink: 0;
          height: 32px;
        }
        .console__title {
          font-family: var(--font-mono); font-size: 9.5px;
          color: var(--accent); letter-spacing: 0.12em; text-transform: uppercase;
          font-weight: 700;
          display: flex; align-items: center; gap: 6px;
        }
        .console__title .live-dot { width: 5px; height: 5px; }
        .console__tabs {
          display: flex; gap: 2px;
          margin-left: 12px;
        }
        .console__tab {
          appearance: none; background: transparent;
          border: 1px solid transparent;
          color: var(--fg-muted);
          font-family: var(--font-mono); font-size: 9px;
          letter-spacing: 0.1em; text-transform: uppercase;
          padding: 2px 8px;
          border-radius: 3px;
          cursor: pointer;
          font-weight: 600;
          display: inline-flex; align-items: center; gap: 5px;
        }
        .console__tab:hover { color: var(--fg); }
        .console__tab[data-active="true"] {
          background: var(--bg-elev);
          color: var(--accent);
          border-color: var(--accent-line);
        }
        .console__tab-count {
          font-size: 8.5px; color: var(--fg-dim);
          font-weight: 500;
        }
        .console__tab[data-active="true"] .console__tab-count { color: var(--accent); opacity: 0.6; }
        .console__right {
          margin-left: auto; display: flex; align-items: center; gap: 8px;
          font-family: var(--font-mono); font-size: 9px;
          color: var(--fg-muted); letter-spacing: 0.06em;
        }
        .console__chevron {
          appearance: none; background: transparent; border: 0;
          color: var(--fg-muted); cursor: pointer;
          padding: 2px 6px; border-radius: 3px;
          font-family: var(--font-mono); font-size: 9px;
        }
        .console__chevron:hover { color: var(--accent); background: var(--bg-hover); }

        .console__body {
          flex: 1; min-height: 0;
          overflow-y: auto;
          font-family: var(--font-mono); font-size: 10.5px;
          background: var(--bg-inset);
        }
        .log-row {
          display: grid;
          grid-template-columns: 78px 76px 1fr 60px 36px;
          gap: 10px;
          padding: 3px 12px;
          align-items: baseline;
          border-bottom: 1px dotted var(--divider);
        }
        .log-row:hover { background: var(--bg-hover); }
        .log-row__time { color: var(--fg-dim); font-size: 9.5px; letter-spacing: 0.04em; }
        .log-row__agent {
          font-size: 9px; font-weight: 700;
          letter-spacing: 0.1em; text-transform: uppercase;
        }
        .log-row__msg { color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .log-row__sev {
          font-size: 8.5px; font-weight: 700;
          padding: 1px 6px; border-radius: 2px;
          letter-spacing: 0.08em; text-transform: uppercase;
          text-align: center;
        }
        .log-row__sev--hi { background: var(--loss-soft); color: var(--loss); border: 1px solid color-mix(in srgb, var(--loss) 30%, transparent); }
        .log-row__sev--mid { background: var(--warn-soft); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
        .log-row__sev--lo { background: var(--gain-soft); color: var(--gain); border: 1px solid color-mix(in srgb, var(--gain) 30%, transparent); }
        .log-row__action { color: var(--fg-dim); font-size: 9px; text-align: right; opacity: 0; }
        .log-row:hover .log-row__action { opacity: 1; color: var(--accent); cursor: pointer; }

        .log-prompt {
          display: flex; align-items: center; gap: 6px;
          padding: 4px 12px;
          border-top: 1px solid var(--border);
          background: var(--bg-elev);
          font-family: var(--font-mono); font-size: 10.5px;
          color: var(--fg-2);
        }
        .log-prompt__caret {
          color: var(--accent); font-weight: 700;
        }
        .log-prompt input {
          flex: 1; appearance: none; border: 0; background: transparent;
          color: var(--fg); outline: none;
          font: inherit;
        }
        .log-prompt input::placeholder { color: var(--fg-dim); }
        .log-prompt__hint { color: var(--fg-faint); font-size: 9px; letter-spacing: 0.08em; }
      `}</style>

      {!collapsed && (
        <div className="console__resize" onMouseDown={onResize}></div>
      )}

      <div className="console__bar">
        <span className="console__title">
          <span className="live-dot"></span>
          nt-ops · console
        </span>
        {!collapsed && (
          <div className="console__tabs">
            <button className="console__tab" data-active={filter === "ALL"} onClick={() => setFilter("ALL")}>
              ALL <span className="console__tab-count">{counts.ALL}</span>
            </button>
            {window.NTData.AGENTS.map(a => (
              <button key={a.id} className="console__tab" data-active={filter === a.id} onClick={() => setFilter(a.id)} style={{ color: filter === a.id ? a.color : undefined, borderColor: filter === a.id ? a.color : "transparent" }}>
                <span style={{ width: 4, height: 4, borderRadius: "50%", background: a.color }}></span>
                {a.id} <span className="console__tab-count">{counts[a.id]}</span>
              </button>
            ))}
          </div>
        )}
        <div className="console__right">
          {!collapsed && (
            <>
              <span style={{ color: hovered ? "var(--warn)" : "var(--fg-dim)" }}>
                {hovered ? "PAUSED · hover" : "live"}
              </span>
              <span className="fg-faint">{lines.length} buffered</span>
            </>
          )}
          <button className="console__chevron" onClick={onToggle}>
            {collapsed ? "▲ EXPAND" : "▼ COLLAPSE"}
          </button>
        </div>
      </div>

      {!collapsed && (
        <>
          <div className="console__body" ref={scrollRef}
               onMouseEnter={() => setHovered(true)}
               onMouseLeave={() => setHovered(false)}>
            {filtered.slice(0, 80).map(line => {
              const agent = window.NTData.AGENTS.find(a => a.id === line.agent);
              return (
                <div className="log-row" key={line.id}>
                  <span className="log-row__time">{line.t}</span>
                  <span className="log-row__agent" style={{ color: agent ? agent.color : "var(--fg-muted)" }}>
                    {line.agent}
                  </span>
                  <span className="log-row__msg">{line.msg}</span>
                  <span className={`log-row__sev log-row__sev--${line.sev}`}>
                    {line.sev === "hi" ? "high" : line.sev === "mid" ? "med" : "info"}
                  </span>
                  <span className="log-row__action">↗ open</span>
                </div>
              );
            })}
          </div>

          <div className="log-prompt">
            <span className="log-prompt__caret">nt-ops$</span>
            <input placeholder="query — e.g. agent:execute filled BTC limit  ·  press / to focus" />
            <span className="log-prompt__hint">⌘K to search · ESC to clear</span>
          </div>
        </>
      )}
    </div>
  );
}

window.ConsoleDrawer = ConsoleDrawer;