import { useMemo, useRef } from "preact/hooks";

import { useQuery } from "@common/hooks/useAsyncState";
import { useInputState } from "@common/hooks/useInputState";
import { useUpdate } from "@common/hooks/useUpdate";

import { useAppState } from "../contexts/state";
import LLM from "../utils/llm";
import styles from "../assets/settings-modal.module.css";

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

export const SettingsModal = ({ onClose }: Props) => {
    const { connection, model, dispatch } = useAppState();
    const [url, setUrl] = useInputState(connection?.url ?? "");
    const [apiKey, setApiKey] = useInputState(connection?.apiKey ?? "");
    const [selectedModel, setSelectedModel] = useInputState(model ?? "");
    const [update, triggerFetch] = useUpdate();

    const urlRef = useRef(url);
    const apiKeyRef = useRef(apiKey);

    urlRef.current = url;
    apiKeyRef.current = apiKey;

    const connectionToFetch = useMemo<LLM.Connection | null>(() => {
        const currentUrl = urlRef.current;
        const currentApiKey = apiKeyRef.current;
        if (!currentUrl || !currentApiKey) return null;
        return { url: currentUrl, apiKey: currentApiKey };
    }, [update]);

    const fetchModels = useMemo(() => async (conn: LLM.Connection | null) => {
        if (!conn) return [];
        const r = await LLM.getModels(conn);
        return r.data;
    }, []);

    const modelsData = useQuery(fetchModels, connectionToFetch);

    const isLoadingModels = connectionToFetch != null && modelsData == undefined;
    const models = modelsData ?? [];

    const handleBlur = () => {
        if (url && apiKey) {
            triggerFetch();
        }
    };

    const handleKeyDown = (e: KeyboardEvent) => {
        if (e.key === 'Enter' && url && apiKey) {
            triggerFetch();
        }
    };

    const handleConfirm = () => {
        dispatch({
            type: 'SET_CONNECTION',
            connection: connectionToFetch,
        });
        dispatch({
            type: 'SET_MODEL',
            model: selectedModel || null,
        });
        onClose();
    };

    const connectionToTest = url && apiKey ? { url, apiKey } : null;

    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}>
                        ×
                    </button>
                </div>
                <div class={styles.content}>
                    <div class={styles.form} autocomplete="off">
                        <div class={styles.formGroup}>
                            <label class={styles.label}>
                                API URL
                            </label>
                            <input
                                type="text"
                                value={url}
                                onInput={setUrl}
                                onBlur={handleBlur}
                                onKeyDown={handleKeyDown}
                                placeholder="http://localhost:1234"
                                class={styles.input}
                                autocomplete="off"
                                name="api-url-random"
                            />
                        </div>
                        <div class={styles.formGroup}>
                            <label class={styles.label}>
                                API Key
                            </label>
                            <input
                                type="password"
                                value={apiKey}
                                onInput={setApiKey}
                                onBlur={handleBlur}
                                onKeyDown={handleKeyDown}
                                placeholder="your-api-key"
                                class={styles.input}
                                autocomplete="new-password"
                                name="api-key-random"
                            />
                        </div>
                        <div class={styles.formGroup}>
                            <label class={styles.label}>
                                Model
                            </label>
                            {connectionToTest ? (
                                isLoadingModels ? (
                                    <p>Loading models...</p>
                                ) : models.length > 0 ? (
                                    <select
                                        value={selectedModel}
                                        onChange={setSelectedModel}
                                        class={styles.select}
                                    >
                                        <option value="">Select a model</option>
                                        {models.map(m => (
                                            <option key={m.id} value={m.id}>{m.id}</option>
                                        ))}
                                    </select>
                                ) : (
                                    <p>No models available</p>
                                )
                            ) : (
                                <p>Enter connection details to load models</p>
                            )}
                        </div>
                    </div>
                </div>
                <div class={styles.footer}>
                    <button onClick={onClose} class={`${styles.button} ${styles.buttonSecondary}`}>
                        Cancel
                    </button>
                    <button onClick={handleConfirm} class={`${styles.button} ${styles.buttonPrimary}`}>
                        Confirm
                    </button>
                </div>
            </div>
        </div>
    );
};
