import { ConversationEmptyState } from "@code/ui/components/ai-elements/conversation";
import { Button } from "@code/ui/components/button";
import { MobileChatMark } from "@code/ui/components/mobile-chat";

import { SUGGESTIONS } from "@/lib/chat/constants";
import type { ChatConversationProps } from "@/lib/chat/types";

import { ChatMessage } from "./chat-message";
import { ChatThinkingResponse } from "./chat-thinking-response";

export const ChatConversation = ({
  historyReady,
  messages,
  onSuggestion,
  status,
}: ChatConversationProps) => {
  if (historyReady && messages.length === 0) {
    return (
      <ConversationEmptyState className="min-h-full items-start justify-end px-0 pt-14 pb-5 text-left">
        <MobileChatMark className="size-10 rounded-[12px] [&_svg]:size-5" />
        <div className="space-y-1">
          <h2 className="text-[22px] font-semibold tracking-[-0.035em]">
            What can I help with?
          </h2>
          <p className="max-w-[320px] text-[14px] leading-5 text-muted-foreground">
            Think, write, plan, or explore an idea with Zopu.
          </p>
        </div>
        <div className="mt-3 grid w-full gap-2">
          {SUGGESTIONS.map(([title, prompt]) => (
            <Button
              key={title}
              className="group h-auto min-h-14 w-full flex-col items-start justify-center gap-0.5 rounded-[16px] border-[#e7e7e4] bg-[#f7f7f5] px-4 py-3 text-left shadow-none transition-colors active:bg-[#eeeeeb]"
              onClick={() => onSuggestion(prompt)}
              variant="outline"
            >
              <span className="font-medium text-foreground">{title}</span>
              <span className="text-xs leading-4 font-normal text-muted-foreground whitespace-normal">
                {prompt}
              </span>
            </Button>
          ))}
        </div>
      </ConversationEmptyState>
    );
  }

  return (
    <div className="flex min-w-0 flex-col gap-5 pb-5">
      {messages.map((message) => (
        <ChatMessage key={message.id} message={message} />
      ))}
      {status === "submitted" && <ChatThinkingResponse />}
    </div>
  );
};