import { useCallback, useEffect, useRef, useState } from 'react';
import { apiFetch } from '@/lib/loading/api-fetch';

export type AiLang = 'fr' | 'en' | 'auto';
export type AiTone = 'warm' | 'formal' | 'concise';

interface UseAiSuggestOptions {
    discussionId: number | string | null | undefined;
    hasMessages: boolean;
    onSuggestion: (text: string) => void;
}

interface UseAiSuggestResult {
    suggesting: boolean;
    selectedLang: AiLang;
    setSelectedLang: (lang: AiLang) => void;
    selectedTone: AiTone;
    setSelectedTone: (tone: AiTone) => void;
    showLangPicker: boolean;
    setShowLangPicker: (show: boolean) => void;
    langPickerRef: React.RefObject<HTMLDivElement>;
    handleAiPointerDown: () => void;
    handleAiPointerUp: () => void;
    handleAiPointerLeave: () => void;
}

export function useAiSuggest({ discussionId, hasMessages, onSuggestion }: UseAiSuggestOptions): UseAiSuggestResult {
    const [suggesting, setSuggesting] = useState(false);
    const [selectedLang, setSelectedLang] = useState<AiLang>('fr');
    const [selectedTone, setSelectedTone] = useState<AiTone>('warm');
    const [showLangPicker, setShowLangPicker] = useState(false);

    const longPressTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
    const wasLongPress = useRef(false);
    const langPickerRef = useRef<HTMLDivElement>(null);

    // Close picker on outside click
    useEffect(() => {
        if (!showLangPicker) return;
        const handler = (e: MouseEvent) => {
            if (langPickerRef.current && !langPickerRef.current.contains(e.target as Node)) {
                setShowLangPicker(false);
            }
        };
        document.addEventListener('mousedown', handler);
        return () => document.removeEventListener('mousedown', handler);
    }, [showLangPicker]);

    const triggerSuggest = useCallback(
        async (lang: AiLang = selectedLang, tone: AiTone = selectedTone) => {
            if (!discussionId || suggesting || !hasMessages) return;
            setSuggesting(true);
            try {
                const res = await apiFetch(
                    `/guest-communication/discussions/${discussionId}/ai-suggest?lang=${lang}&tone=${tone}`,
                    {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') ?? '',
                        },
                    },
                );
                if (res.ok) {
                    const { suggestion } = await res.json();
                    if (suggestion) onSuggestion(suggestion);
                }
            } catch {
                /* silent */
            } finally {
                setSuggesting(false);
            }
        },
        [discussionId, suggesting, hasMessages, selectedLang, selectedTone, onSuggestion],
    );

    const handleAiPointerDown = () => {
        wasLongPress.current = false;
        longPressTimer.current = setTimeout(() => {
            wasLongPress.current = true;
            setShowLangPicker(true);
            longPressTimer.current = null;
        }, 500);
    };

    const handleAiPointerUp = () => {
        if (longPressTimer.current) {
            clearTimeout(longPressTimer.current);
            longPressTimer.current = null;
        }
        if (!wasLongPress.current) {
            triggerSuggest();
        }
    };

    const handleAiPointerLeave = () => {
        if (longPressTimer.current) {
            clearTimeout(longPressTimer.current);
            longPressTimer.current = null;
        }
    };

    return {
        suggesting,
        selectedLang,
        setSelectedLang,
        selectedTone,
        setSelectedTone,
        showLangPicker,
        setShowLangPicker,
        langPickerRef,
        handleAiPointerDown,
        handleAiPointerUp,
        handleAiPointerLeave,
    };
}