import type { ChatCompletionMessageParam } from "openai/resources/index";
import { twMerge } from "tailwind-merge";
import { Bot, User } from "lucide-react";
import Stack from "../../layout/Stack";
import Row from "../../layout/Row";
import Card from "../Card";
import Border from "../Border";
import Img from "../../layout/Img";
import type { VoiceTranscriptionParams } from "./types";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import AIVoiceTranscription from "./AIVoiceTranscription";
import Span from "../../layout/Span";
import CopySlug from "../CopySlug";
import EmptyContent from "../EmptyContent";

type Props = VoiceTranscriptionParams & {
    history: ChatCompletionMessageParam;
    user_image_url?: string;
};

export default function AIPromptHistoryAssistantCard({
    history,
    user_image_url,
    cancel_voice_transcription_fn,
    transcribing,
    voice_transcription_fn,
}: Props) {
    const text_content = history.content?.toString();

    if (!text_content) {
        return <EmptyContent title="No Text response content" />;
    }

    return (
        <Row className={"w-full items-start flex-nowrap"}>
            <Stack>
                <Border
                    className={twMerge(
                        "w-10 h-10 rounded-full items-center justify-center bg-white p-2",
                        "dark:bg-background-dark",
                    )}
                >
                    <Bot />
                </Border>
            </Stack>

            <Stack className="grow items-stretch">
                <Card className="w-full overflow-x-auto xl:p-8">
                    <Stack className="twui-llm-chat-block">
                        <ReactMarkdown remarkPlugins={[remarkGfm]}>
                            {history.content?.toString()}
                        </ReactMarkdown>
                    </Stack>
                </Card>{" "}
                <Row>
                    <AIVoiceTranscription
                        transcribing={transcribing}
                        voice_transcription_fn={voice_transcription_fn}
                        cancel_voice_transcription_fn={
                            cancel_voice_transcription_fn
                        }
                        history={[history]}
                        last_response={history.content?.toString()}
                    />

                    <CopySlug
                        slugText={text_content}
                        justIcon
                        iconProps={{ size: 18, opacity: 0.7 }}
                        title="Copy Content"
                    />
                </Row>
            </Stack>
        </Row>
    );
}