import { html, useRef, useEffect } from '../lib/preact.js';
import { getUserMessageBg } from '../utils/status.js';
import { MessageBubble, filterDisplayMessages } from './MessageBubble.js';

export function ChatMessages({ messages, status }) {
  const containerRef = useRef(null);
  const userBgClass = getUserMessageBg(status);
  const wasAtBottomRef = useRef(true);
  const prevMessagesLenRef = useRef(0);

  // Scroll to bottom on initial mount
  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    // Always scroll to bottom on first render
    container.scrollTop = container.scrollHeight;
  }, []);

  // Check if scrolled to bottom before render
  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    const checkScroll = () => {
      const threshold = 50;
      const isAtBottom = container.scrollHeight - container.scrollTop - container.clientHeight < threshold;
      wasAtBottomRef.current = isAtBottom;
    };

    container.addEventListener('scroll', checkScroll);
    return () => container.removeEventListener('scroll', checkScroll);
  }, []);

  // Scroll to bottom on new messages if user was at bottom
  useEffect(() => {
    const container = containerRef.current;
    if (!container || !messages) return;

    const hasNewMessages = messages.length > prevMessagesLenRef.current;
    prevMessagesLenRef.current = messages.length;

    if (hasNewMessages && wasAtBottomRef.current) {
      container.scrollTop = container.scrollHeight;
    }
  }, [messages]);

  if (!messages || messages.length === 0) {
    return html`
      <div class="flex h-full items-center justify-center rounded-xl border border-dashed border-selection/70 bg-bg/30 px-4 text-center text-sm text-dim">
        No messages yet
      </div>
    `;
  }

  const displayMessages = filterDisplayMessages(messages).slice(-20);

  return html`
    <div ref=${containerRef} class="h-full space-y-2.5 overflow-y-auto overflow-x-hidden pr-0.5">
      ${displayMessages.map((msg, i) => html`
        <${MessageBubble}
          key=${i}
          msg=${msg}
          userBg=${userBgClass}
          compact=${true}
        />
      `)}
    </div>
  `;
}