import type { ChatCompletionMessageParam } from "openai/resources/index";
import { History } from "lucide-react";
import Modal from "../Modal";
import Button from "../../layout/Button";
import Stack from "../../layout/Stack";
import H2 from "../../layout/H2";
import Span from "../../layout/Span";
import Divider from "../../layout/Divider";
import type { VoiceTranscriptionParams } from "./types";
import AIPromptHistoryUserCard from "./AIPromptHistoryUserCard";
import AIPromptHistoryAssistantCard from "./AIPromptHistoryAssistantCard";

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

export default function AIPromptHistoryModal({
    history,
    user_image_url,
    ...props
}: Props) {
    if (!history[0]) return null;

    return (
        <Modal
            target={
                <Button
                    title="View Chat History"
                    size="smaller"
                    color="gray"
                    variant="ghost"
                    className="p-1!"
                >
                    <History size={20} opacity={0.7} />
                </Button>
            }
            className="max-w-[900px] bg-slate-100 dark:bg-white/5 xl:p-8"
        >
            <Stack className="gap-10 w-full">
                <Stack className="gap-1">
                    <H2 className="!text-xl m-0">Chat History</H2>
                    <Span className="text-xs">
                        AI chat history for this session.
                    </Span>
                </Stack>

                <Divider />

                {history.map((hst, index) => {
                    if (hst.role == "user") {
                        return (
                            <AIPromptHistoryUserCard
                                history={hst}
                                {...props}
                                key={index}
                                user_image_url={user_image_url}
                            />
                        );
                    }

                    return (
                        <AIPromptHistoryAssistantCard
                            history={hst}
                            {...props}
                            key={index}
                            user_image_url={user_image_url}
                        />
                    );
                })}
            </Stack>
        </Modal>
    );
}