// ChatWindow.jsx
import React, { useRef, useEffect } from "react";
import UserMessage from "./UserMessage";
import AssistantMessage from "./AssistantMessage";

export default function ChatWindow({ messages, loading, theme }) {
  const endRef = useRef(null);

  useEffect(() => {
    endRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [messages]);

  return (
    <main className={`flex-1 overflow-y-auto p-3 ${theme.bodyBg}`}>
      {messages.map((msg, idx) =>
        msg.role === "user" ? (
          <UserMessage
            key={idx}
            content={msg.content}
            theme={theme}
            timestamp={msg.timestamp}
	    startedAt={msg.startedAt} 
	    endedAt={msg.endedAt}
          />
        ) : (
          <AssistantMessage
            key={idx}
            content={msg.content}
            theme={theme}
            timestamp={msg.timestamp}
	    startedAt={msg.startedAt} 
	    endedAt={msg.endedAt}
            isFinal={msg.isFinal}
          />
        )
      )}
      {loading && (
	<div
	    className="thinking-block text-muted small fst-italic"
	    style={{
	      maxHeight: "150px",
	      overflowY: "auto",
	      padding: "0.5rem",
	      border: "1px solid #ddd",
	      borderRadius: "4px"
	    }}
	  >
          The model is processing...
        </div>
      )}

      {loading && (
        <div className="text-muted small fst-italic">
          The model is processing...
        </div>
      )}
      <div ref={endRef} />
    </main>
  );
}