"use client";

import React, { useState, useRef, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { X, Send, Maximize2, Minimize2, Loader2, Bot, Zap, Brain } from 'lucide-react';
import { cn } from '@/lib/utils';
import { useStore } from '@/lib/store';

interface Message {
    role: 'user' | 'assistant';
    content: string;
}

type AIProvider = 'grok' | 'meta';

const aiProviders = [
    { id: 'grok' as AIProvider, name: 'Grok', icon: Zap, color: 'text-purple-400' },
    { id: 'meta' as AIProvider, name: 'Llama 3', icon: Brain, color: 'text-blue-400' },
];

export function GrokChat() {
    const [isOpen, setIsOpen] = useState(false);
    const [isMinimized, setIsMinimized] = useState(false);
    const [messages, setMessages] = useState<Message[]>([]);
    const [input, setInput] = useState('');
    const [isLoading, setIsLoading] = useState(false);
    const [selectedAI, setSelectedAI] = useState<AIProvider>('grok');
    const messagesEndRef = useRef<HTMLDivElement>(null);
    const inputRef = useRef<HTMLInputElement>(null);

    // Auto-scroll to bottom
    useEffect(() => {
        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
    }, [messages, isOpen]);

    // Focus input when opened
    useEffect(() => {
        if (isOpen && !isMinimized) {
            setTimeout(() => inputRef.current?.focus(), 100);
        }
    }, [isOpen, isMinimized]);

    const handleSend = async () => {
        if (!input.trim() || isLoading) return;

        const userMsg = input.trim();
        setInput('');
        setMessages(prev => [...prev, { role: 'user', content: userMsg }]);
        setIsLoading(true);

        try {
            const history = messages.slice(-10).map(m => ({ role: m.role, content: m.content }));
            const { settings } = useStore.getState();

            let res: Response;

            if (selectedAI === 'grok') {
                // Use Grok via xLmiler backend
                const grokApiUrl = settings.grokApiUrl || 'http://localhost:3000';
                const apiKey = settings.grokApiKey;

                res = await fetch('/api/grok-chat', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        message: userMsg,
                        history,
                        grokApiUrl,
                        apiKey
                    })
                });
            } else {
                // Use Meta AI (Llama 3)
                res = await fetch('/api/meta-chat', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        message: userMsg,
                        history,
                        metaCookies: settings.metaCookies
                    })
                });
            }

            const data = await res.json();

            if (data.error || data.detail) {
                const errorMsg = data.error || JSON.stringify(data.detail);
                throw new Error(errorMsg);
            }

            setMessages(prev => [...prev, { role: 'assistant', content: data.response }]);

        } catch (error: any) {
            console.error('Chat Error:', error);
            setMessages(prev => [...prev, {
                role: 'assistant',
                content: `Error: ${error.message || 'Failed to connect.'}`
            }]);
        } finally {
            setIsLoading(false);
        }
    };

    const handleKeyDown = (e: React.KeyboardEvent) => {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            handleSend();
        }
    };

    const currentProvider = aiProviders.find(p => p.id === selectedAI)!;

    return (
        <div className="fixed bottom-4 right-4 z-[100] flex flex-col items-end pointer-events-none">

            {/* Toggle Button */}
            {!isOpen && (
                <motion.button
                    initial={{ scale: 0 }}
                    animate={{ scale: 1 }}
                    whileHover={{ scale: 1.1 }}
                    whileTap={{ scale: 0.9 }}
                    onClick={() => setIsOpen(true)}
                    className="pointer-events-auto bg-black border border-white/20 text-white p-4 rounded-full shadow-2xl hover:shadow-purple-500/20 hover:border-purple-500/50 transition-all group"
                >
                    <Bot className="h-8 w-8 group-hover:text-purple-400 transition-colors" />
                </motion.button>
            )}

            {/* Chat Window */}
            <AnimatePresence>
                {isOpen && (
                    <motion.div
                        initial={{ opacity: 0, y: 20, scale: 0.9 }}
                        animate={{
                            opacity: 1,
                            y: 0,
                            scale: 1,
                            height: isMinimized ? 'auto' : '500px',
                            width: isMinimized ? '300px' : '400px'
                        }}
                        exit={{ opacity: 0, y: 20, scale: 0.9 }}
                        className="pointer-events-auto bg-black/90 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl overflow-hidden flex flex-col"
                    >
                        {/* Header */}
                        <div className="flex items-center justify-between p-4 border-b border-white/10 bg-white/5">
                            <div className="flex items-center gap-3">
                                {/* AI Selector */}
                                <div className="flex bg-white/5 rounded-lg p-0.5">
                                    {aiProviders.map((provider) => (
                                        <button
                                            key={provider.id}
                                            onClick={() => {
                                                setSelectedAI(provider.id);
                                                setMessages([]); // Clear history on switch
                                            }}
                                            className={cn(
                                                "flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-medium transition-all",
                                                selectedAI === provider.id
                                                    ? "bg-white/10 text-white"
                                                    : "text-white/50 hover:text-white/80"
                                            )}
                                        >
                                            <provider.icon className={cn("h-3.5 w-3.5", selectedAI === provider.id && provider.color)} />
                                            {provider.name}
                                        </button>
                                    ))}
                                </div>
                            </div>
                            <div className="flex items-center gap-1">
                                <button
                                    onClick={() => setIsMinimized(!isMinimized)}
                                    className="p-1.5 hover:bg-white/10 rounded-md text-white/70 hover:text-white transition-colors"
                                >
                                    {isMinimized ? <Maximize2 className="h-4 w-4" /> : <Minimize2 className="h-4 w-4" />}
                                </button>
                                <button
                                    onClick={() => setIsOpen(false)}
                                    className="p-1.5 hover:bg-red-500/20 hover:text-red-400 rounded-md text-white/70 transition-colors"
                                >
                                    <X className="h-4 w-4" />
                                </button>
                            </div>
                        </div>

                        {/* Messages Area */}
                        {!isMinimized && (
                            <>
                                <div className="flex-1 overflow-y-auto p-4 space-y-4 custom-scrollbar">
                                    {messages.length === 0 && (
                                        <div className="flex flex-col items-center justify-center h-full text-center text-white/30 space-y-2">
                                            <currentProvider.icon className={cn("h-12 w-12 opacity-50", currentProvider.color)} />
                                            <p className="text-sm">Ask {currentProvider.name} anything...</p>
                                        </div>
                                    )}
                                    {messages.map((msg, idx) => (
                                        <div key={idx} className={cn(
                                            "flex w-full",
                                            msg.role === 'user' ? "justify-end" : "justify-start"
                                        )}>
                                            <div className={cn(
                                                "max-w-[85%] rounded-2xl px-4 py-2.5 text-sm leading-relaxed",
                                                msg.role === 'user'
                                                    ? selectedAI === 'grok'
                                                        ? "bg-purple-600/80 text-white rounded-br-sm"
                                                        : "bg-blue-600/80 text-white rounded-br-sm"
                                                    : "bg-white/10 text-white/90 rounded-bl-sm"
                                            )}>
                                                {msg.content}
                                            </div>
                                        </div>
                                    ))}
                                    {isLoading && (
                                        <div className="flex justify-start">
                                            <div className="bg-white/5 rounded-2xl px-4 py-2 flex items-center gap-2">
                                                <Loader2 className={cn("h-4 w-4 animate-spin", currentProvider.color)} />
                                                <span className="text-xs text-white/50">Thinking...</span>
                                            </div>
                                        </div>
                                    )}
                                    <div ref={messagesEndRef} />
                                </div>

                                {/* Input Area */}
                                <div className="p-4 border-t border-white/10 bg-white/5">
                                    <div className="flex gap-2">
                                        <input
                                            ref={inputRef}
                                            type="text"
                                            value={input}
                                            onChange={(e) => setInput(e.target.value)}
                                            onKeyDown={handleKeyDown}
                                            placeholder={`Message ${currentProvider.name}...`}
                                            className={cn(
                                                "flex-1 bg-black/50 border border-white/10 rounded-xl px-4 py-2.5 text-sm text-white focus:outline-none transition-all placeholder:text-white/20",
                                                selectedAI === 'grok'
                                                    ? "focus:border-purple-500/50 focus:ring-1 focus:ring-purple-500/20"
                                                    : "focus:border-blue-500/50 focus:ring-1 focus:ring-blue-500/20"
                                            )}
                                            disabled={isLoading}
                                        />
                                        <button
                                            onClick={handleSend}
                                            disabled={!input.trim() || isLoading}
                                            className={cn(
                                                "p-2.5 disabled:opacity-50 disabled:cursor-not-allowed rounded-xl text-white transition-colors shadow-lg",
                                                selectedAI === 'grok'
                                                    ? "bg-purple-600 hover:bg-purple-500 shadow-purple-900/20"
                                                    : "bg-blue-600 hover:bg-blue-500 shadow-blue-900/20"
                                            )}
                                        >
                                            <Send className="h-4 w-4" />
                                        </button>
                                    </div>
                                </div>
                            </>
                        )}
                    </motion.div>
                )}
            </AnimatePresence>
        </div>
    );
}