'use client';

import { useEffect, useRef } from 'react';
import type { Message } from '../../lib/types';
import { MessageBubble } from './MessageBubble';

interface MessageThreadProps {
  messages: Message[];
  streamingId?: string;
  streamTokens?: number;
  streamTokPerSec?: number;
  onRegenerate?: (messageId: string, model?: string) => void;
  onRate?: (messageId: string, rating: 'up' | 'down') => void;
  models?: string[];
}

export function MessageThread({
  messages,
  streamingId,
  streamTokens,
  streamTokPerSec,
  onRegenerate,
  onRate,
  models,
}: MessageThreadProps) {
  const ref = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    ref.current?.scrollTo({ top: ref.current.scrollHeight, behavior: 'smooth' });
  }, [messages]);

  return (
    <div ref={ref} className="flex-1 space-y-3 overflow-auto p-4">
      {messages.length === 0 ? (
        <p className="text-sm text-[var(--text-tertiary)]">No messages yet. Ask anything.</p>
      ) : (
        messages.map(msg => (
          <MessageBubble
            key={msg.id}
            message={msg}
            isStreaming={msg.id === streamingId}
            streamTokens={msg.id === streamingId ? streamTokens : undefined}
            streamTokPerSec={msg.id === streamingId ? streamTokPerSec : undefined}
            onRegenerate={onRegenerate}
            onRate={onRate}
            models={models}
          />
        ))
      )}
    </div>
  );
}
