import React from "react";
import { ChatCompletionMessageParam } from "openai/resources/index";
import { twMerge } from "tailwind-merge";
import { Bot, 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 MarkdownEditorPreviewComponent from "../../mdx/markdown/MarkdownEditorPreviewComponent";

type Props = {
    history: ChatCompletionMessageParam[];
};

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

    return (
        <Modal
            target={
                <Button
                    title="View Chat History"
                    size="smaller"
                    color="gray"
                    variant="outlined"
                >
                    View History
                </Button>
            }
            className="max-w-[900px] bg-slate-100 dark:bg-white/5 xl:p-10"
        >
            <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"
                            >
                                <Card
                                    className={twMerge(
                                        "bg-background-dark text-foreground-dark dark:!bg-background-light dark:text-foreground-light"
                                    )}
                                >
                                    {hst.content?.toString()}
                                </Card>

                                <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">
                                <MarkdownEditorPreviewComponent
                                    value={hst.content?.toString() || ""}
                                    maxHeight="none"
                                    wrapperProps={{
                                        className:
                                            "border-none p-0 ai-response-content w-full",
                                    }}
                                />
                            </Card>
                        </Row>
                    );
                })}
            </Stack>
        </Modal>
    );
}