import clsx from "clsx";
import { X } from "lucide-preact";
import { useState } from "preact/hooks";
import styles from "../assets/settings-modal.module.css";
import { BannedTokensSettings } from "./settings/banned-tokens";
import { ChatSystemInstructionSettings } from "./settings/chat-system-instruction";
import { ContinuePromptSettings } from "./settings/continue-prompt";
import { ConnectionSettings } from "./settings/connection";
import { SystemInstructionSettings } from "./settings/system-instruction";
import { UserSettings } from "./settings/user";

interface Props {
    onClose: () => void;
}

type Tab = "banned-tokens" | "system-instruction" | "chat-system-instruction" | "continue-prompt" | "connection" | "user";

export const SettingsModal = ({ onClose }: Props) => {
    const [activeTab, setActiveTab] = useState<Tab>("connection");

    return (
        <div class={styles.overlay} onClick={onClose}>
            <div class={styles.modal} onClick={(e) => e.stopPropagation()}>
                <div class={styles.header}>
                    <h2 class={styles.title}>Settings</h2>
                    <button class={styles.closeButton} onClick={onClose}>
                        <X size={20} />
                    </button>
                </div>
                <div class={styles.body}>
                    <nav class={styles.sidebar}>
                        <button
                            class={clsx(styles.menuItem, activeTab === "connection" && styles.active)}
                            onClick={() => setActiveTab("connection")}
                        >
                            Connection
                        </button>
                        <button
                            class={clsx(styles.menuItem, activeTab === "user" && styles.active)}
                            onClick={() => setActiveTab("user")}
                        >
                            User
                        </button>
                        <button
                            class={clsx(styles.menuItem, activeTab === "system-instruction" && styles.active)}
                            onClick={() => setActiveTab("system-instruction")}
                        >
                            System Instruction
                        </button>
                        <button
                            class={clsx(styles.menuItem, activeTab === "continue-prompt" && styles.active)}
                            onClick={() => setActiveTab("continue-prompt")}
                        >
                            Continue Prompt
                        </button>
                        <button
                            class={clsx(styles.menuItem, activeTab === "chat-system-instruction" && styles.active)}
                            onClick={() => setActiveTab("chat-system-instruction")}
                        >
                            Chat System Instruction
                        </button>
                        <button
                            class={clsx(styles.menuItem, activeTab === "banned-tokens" && styles.active)}
                            onClick={() => setActiveTab("banned-tokens")}
                        >
                            Banned Tokens
                        </button>
                    </nav>
                    <div class={styles.content}>
                        {activeTab === "user" && <UserSettings />}
                        {activeTab === "banned-tokens" && <BannedTokensSettings />}
                        {activeTab === "system-instruction" && <SystemInstructionSettings />}
                        {activeTab === "chat-system-instruction" && <ChatSystemInstructionSettings />}
                        {activeTab === "continue-prompt" && <ContinuePromptSettings />}
                        {activeTab === "connection" && <ConnectionSettings />}
                    </div>
                </div>
                <div class={styles.footer}>
                    <button onClick={onClose} class={clsx(styles.button, styles.buttonSecondary)}>
                        Done
                    </button>
                </div>
            </div>
        </div>
    );
};