import { memo, type ReactNode } from 'react';

import { ChatWelcomeSpotlight } from '@/features/chat/chat-welcome-spotlight';
import { MessageBubble } from '@/features/chat/messages/message-bubble';
import type { Message, ProgressState, ReasoningLevel } from '@/features/chat/messages/messages.types';
import { isLastUserMessageInThread } from '@/features/chat/messages/user-message-plain-text';
import { messageRowKey } from '@/features/chat/messages/thinking-blocks';
import { messages } from '@/i18n/messages';
import { useLocaleStore } from '@/stores/locale-store';

export const MessageList = memo(function MessageList({
  messages: list,
  authToken,
  sessionKey,
  streaming,
  progress,
  reasoningLevel,
  registerListContentRef,
  onPickWelcomePrompt,
  welcomeOverlay,
  onDeleteRound,
  onRetryUserMessageRound,
  deleteRoundDisabled,
  onAbortCurrentTurn,
  onSendUserMessage,
}: {
  messages: Message[];
  authToken?: string;
  sessionKey?: string | null;
  streaming: boolean;
  progress: ProgressState | null;
  reasoningLevel: ReasoningLevel;
  /** Plain column root — observed by scroll viewport for tail-follow (Cursor-style, non-virtual). */
  registerListContentRef: (el: HTMLDivElement | null) => void;
  onPickWelcomePrompt?: (text: string) => void;
  welcomeOverlay?: ReactNode;
  onDeleteRound?: (messageIndex: number) => void;
  onRetryUserMessageRound?: (messageIndex: number) => void;
  deleteRoundDisabled?: boolean;
  onAbortCurrentTurn?: () => void;
  onSendUserMessage?: (text: string) => void;
}) {
  const language = useLocaleStore((s) => s.language);
  const m = messages(language);

  const showWelcome = list.length === 0 && !streaming;

  if (showWelcome) {
    if (welcomeOverlay) {
      return <div className="flex w-full flex-col items-center pb-6 pt-4">{welcomeOverlay}</div>;
    }
    if (onPickWelcomePrompt && m.chat.welcomeSpotlight) {
      return (
        <div className="pb-1.5">
          <ChatWelcomeSpotlight chat={m.chat} onPickPrompt={onPickWelcomePrompt} />
        </div>
      );
    }
    return (
      <div className="flex flex-col gap-10 pb-8">
        <div className="flex flex-col items-center justify-center gap-3 py-20 text-center">
          <div className="text-4xl" aria-hidden>
            🤖
          </div>
          <div className="text-xl font-semibold tracking-tight text-fg">{m.chat.welcomeTitle}</div>
          <div className="max-w-sm text-sm leading-relaxed text-fg-muted">{m.chat.welcomeDescription}</div>
        </div>
      </div>
    );
  }

  return (
    <div ref={registerListContentRef} className="flex w-full min-w-0 flex-col gap-10 pb-8">
      {list.map((msg, index) => {
        const isLast = index === list.length - 1;
        const isStreamRow = Boolean(streaming && isLast && msg.role === 'assistant');
        return (
          <MessageBubble
            key={messageRowKey(msg, index)}
            message={msg}
            authToken={authToken}
            sessionKey={sessionKey}
            isStreaming={isStreamRow}
            progress={isStreamRow ? progress : null}
            reasoningLevel={reasoningLevel}
            messageIndex={index}
            onDeleteRound={onDeleteRound}
            onRetryUserMessageRound={onRetryUserMessageRound}
            userMessageCanRetry={
              Boolean(onRetryUserMessageRound) && isLastUserMessageInThread(list, index)
            }
            deleteRoundDisabled={deleteRoundDisabled}
            onAbortCurrentTurn={onAbortCurrentTurn}
            onSendUserMessage={onSendUserMessage}
          />
        );
      })}
    </div>
  );
});
