import { useEffect, useRef } from "react";
import PanelFrame from "./PanelFrame.jsx";

export default function ChatStream({ chat, session, headerExtra = null }) {
  const scrollerRef = useRef(null);

  useEffect(() => {
    const node = scrollerRef.current;
    if (!node) {
      return;
    }

    node.scrollTop = node.scrollHeight;
  }, [chat]);

  const isEmpty = !chat.trim();

  return (
    <PanelFrame
      title="Claude Live Feed"
      eyebrow="PRIMARY STREAM"
      className="chat-panel"
      headerExtra={headerExtra}
    >
      <div className="chat-stream" ref={scrollerRef}>
        {isEmpty ? (
          <div className="empty-state">
            <span>NO ACTIVE SESSION</span>
            <span>PRESS START TO BOOT CLAUDE CONSOLE</span>
            {session.runtime?.anthropicBaseUrl ? <span>ROUTE: {session.runtime.anthropicBaseUrl}</span> : null}
          </div>
        ) : (
          <pre>{chat}</pre>
        )}
      </div>
    </PanelFrame>
  );
}