import type { ChatCompletionMessageParam } from "openai/resources/index";
import { twMerge } from "tailwind-merge";
import { Bot, History, User } 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 Row from "../../layout/Row";
import Card from "../Card";
import Border from "../Border";

import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import Img from "../../layout/Img";

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

export default function AIPromptHistoryModal({
    history,
    user_image_url,
}: 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 (
                            <Row
                                key={index}
                                className="w-full items-start justify-end flex-nowrap"
                            >
                                <Card
                                    className={twMerge(
                                        "bg-background-dark text-foreground-dark dark:!bg-background-light dark:text-foreground-light",
                                        "twui-llm-user-prompt-history-block",
                                    )}
                                >
                                    <Stack className="twui-llm-chat-block">
                                        {hst.content?.toString()}
                                    </Stack>
                                </Card>

                                {user_image_url ? (
                                    <Img
                                        alt="Prompting user"
                                        size={30}
                                        circle
                                        src={user_image_url}
                                    />
                                ) : (
                                    <Border className="w-10 h-10 rounded-full p-2 items-center justify-center">
                                        <User />
                                    </Border>
                                )}
                            </Row>
                        );
                    }

                    return (
                        <Row
                            key={index}
                            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>
                            <Card className="grow overflow-x-auto xl:p-8">
                                <Stack className="twui-llm-chat-block">
                                    <ReactMarkdown remarkPlugins={[remarkGfm]}>
                                        {hst.content?.toString()}
                                    </ReactMarkdown>
                                </Stack>
                            </Card>
                        </Row>
                    );
                })}
            </Stack>
        </Modal>
    );
}