import React, { useState, useEffect, useRef } from 'react';
import { useAuth } from '@/hooks/useAuth';
import AIToolsLayout from '@/components/aitools/AIToolsLayout';
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Bot, Send, Loader2, Eraser } from 'lucide-react';
import { toast } from 'sonner';
import { cn } from '@/lib/utils';
import ReactMarkdown from 'react-markdown';

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


export default function AIChat() {
    const { user } = useAuth();
    const [messages, setMessages] = useState<Message[]>([]);
    const [input, setInput] = useState('');
    const [isLoading, setIsLoading] = useState(false);
    const [selectedAssistant, setSelectedAssistant] = useState<string>('system');
    const messagesEndRef = useRef<HTMLDivElement>(null);

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

    // Load initial system message based on selected assistant
    useEffect(() => {
        if (selectedAssistant === 'system') {
            // System default
        } else {
            // Find custom assistant
            const assistant = user?.AI配置?.自定义助手列表?.find((a: any) => a.名称 === selectedAssistant);
            if (assistant && assistant.系统提示词) {
                // Optionally add a system message to context (not visible)
            }
        }
    }, [selectedAssistant, user]);

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

        const userMessage: Message = {
            role: 'user',
            content: input,
            timestamp: Date.now()
        };

        setMessages(prev => [...prev, userMessage]);
        setInput('');
        setIsLoading(true);

        try {
            const response = await fetch('/api/ai/chat', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    messages: [...messages, userMessage].map(m => ({ role: m.role, content: m.content })),
                    assistantId: selectedAssistant === 'system' ? 'system' : selectedAssistant,
                    mode: selectedAssistant === 'system' ? 'system' : 'custom',
                    // Pass custom config if needed, but backend should fetch from user profile for security
                }),
            });

            if (!response.ok) {
                const errorData = await response.json();
                throw new Error(errorData.message || 'Failed to send message');
            }

            // Handle streaming response
            const reader = response.body?.getReader();
            const decoder = new TextDecoder();
            const assistantMessage: Message = {
                role: 'assistant',
                content: '',
                timestamp: Date.now()
            };

            setMessages(prev => [...prev, assistantMessage]);

            if (reader) {
                while (true) {
                    const { done, value } = await reader.read();
                    if (done) break;
                    const chunk = decoder.decode(value);
                    assistantMessage.content += chunk;

                    setMessages(prev => {
                        const newMessages = [...prev];
                        newMessages[newMessages.length - 1] = { ...assistantMessage };
                        return newMessages;
                    });
                }
            }

        } catch (error: any) {
            toast.error(error.message || '发送失败，请重试');
            // Remove the failed user message or show error state?
            // For now just show toast
        } finally {
            setIsLoading(false);
        }
    };

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

    const clearHistory = () => {
        setMessages([]);
        toast.success('对话历史已清空');
    };

    // Get available assistants
    const assistants = [
        { value: 'system', label: '系统默认助手 (System)' },
        ...(user?.AI配置?.自定义助手列表?.map((a: any) => ({
            value: a.名称,
            label: `${a.名称} (Custom)`
        })) || [])
    ];

    return (
        <AIToolsLayout title="AI 智能对话" description="多模型智能问答助手，支持自定义模型配置">
            <div className="h-[calc(100vh-140px)] flex flex-col bg-card rounded-2xl border border-border overflow-hidden shadow-sm">
                {/* Header */}
                <div className="p-4 border-b border-border flex items-center justify-between bg-muted/50/50">
                    <div className="flex items-center gap-3">
                        <div className="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center text-green-600">
                            <Bot className="w-6 h-6" />
                        </div>
                        <div>
                            <h2 className="font-bold text-foreground">AI 智能对话</h2>
                            <p className="text-xs text-muted-foreground">
                                当前模式: {selectedAssistant === 'system' ? '系统托管 (消耗积分)' : '自定义 (免费)'}
                            </p>
                        </div>
                    </div>

                    <div className="flex items-center gap-2">
                        <Select value={selectedAssistant} onValueChange={setSelectedAssistant}>
                            <SelectTrigger className="w-[200px] bg-background">
                                <SelectValue placeholder="选择助手" />
                            </SelectTrigger>
                            <SelectContent>
                                {assistants.map(a => (
                                    <SelectItem key={a.value} value={a.value}>{a.label}</SelectItem>
                                ))}
                            </SelectContent>
                        </Select>

                        <Button variant="ghost" size="icon" onClick={clearHistory} title="清空对话">
                            <Eraser className="w-4 h-4 text-muted-foreground" />
                        </Button>
                    </div>
                </div>

                {/* Chat Area */}
                <div className="flex-1 overflow-y-auto p-4 space-y-6 bg-muted/50/30">
                    {messages.length === 0 ? (
                        <div className="h-full flex flex-col items-center justify-center text-muted-foreground space-y-4">
                            <Bot className="w-16 h-16 opacity-20" />
                            <p>开始一个新的对话吧...</p>
                            <div className="grid grid-cols-2 gap-2 max-w-md w-full">
                                {['帮我写一篇关于AI的文章', '解释一下量子纠缠', '如何优化React性能', '翻译这段代码'].map((q, i) => (
                                    <Button
                                        key={i}
                                        variant="outline"
                                        className="text-xs justify-start h-auto py-3 px-4 bg-background hover:bg-green-50 hover:text-green-600 hover:border-green-200"
                                        onClick={() => setInput(q)}
                                    >
                                        {q}
                                    </Button>
                                ))}
                            </div>
                        </div>
                    ) : (
                        messages.map((msg, index) => (
                            <div
                                key={index}
                                className={cn(
                                    "flex gap-3 max-w-3xl",
                                    msg.role === 'user' ? "ml-auto flex-row-reverse" : "mr-auto"
                                )}
                            >
                                <Avatar className={cn("w-8 h-8", msg.role === 'user' ? "bg-primary" : "bg-green-600")}>
                                    {msg.role === 'user' ? (
                                        <AvatarImage src={user?.头像} />
                                    ) : (
                                        <div className="w-full h-full flex items-center justify-center bg-green-100 text-green-600">
                                            <Bot className="w-5 h-5" />
                                        </div>
                                    )}
                                    <AvatarFallback>{msg.role === 'user' ? 'U' : 'AI'}</AvatarFallback>
                                </Avatar>

                                <div className={cn(
                                    "rounded-2xl px-4 py-3 text-sm shadow-sm",
                                    msg.role === 'user'
                                        ? "bg-primary text-white rounded-tr-none"
                                        : "bg-card border border-border text-foreground rounded-tl-none"
                                )}>
                                    {msg.role === 'assistant' ? (
                                        <div className="prose prose-sm max-w-none dark:prose-invert">
                                            <ReactMarkdown>{msg.content}</ReactMarkdown>
                                        </div>
                                    ) : (
                                        <div className="whitespace-pre-wrap">{msg.content}</div>
                                    )}
                                </div>
                            </div>
                        ))
                    )}
                    {isLoading && (
                        <div className="flex gap-3 mr-auto max-w-3xl">
                            <div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600">
                                <Bot className="w-5 h-5" />
                            </div>
                            <div className="bg-card border border-border rounded-2xl rounded-tl-none px-4 py-3 flex items-center">
                                <Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />
                                <span className="text-xs text-muted-foreground ml-2">正在思考...</span>
                            </div>
                        </div>
                    )}
                    <div ref={messagesEndRef} />
                </div>

                {/* Input Area */}
                <div className="p-4 bg-card border-t border-border">
                    <div className="relative max-w-4xl mx-auto">
                        <Input
                            value={input}
                            onChange={(e) => setInput(e.target.value)}
                            onKeyDown={handleKeyDown}
                            placeholder="输入您的问题... (Shift+Enter 换行)"
                            className="pr-12 py-6 rounded-xl bg-muted/50 border-border focus:bg-background transition-colors"
                            disabled={isLoading}
                        />
                        <Button
                            size="icon"
                            className="absolute right-2 top-1/2 -translate-y-1/2 h-8 w-8 rounded-lg"
                            onClick={handleSend}
                            disabled={!input.trim() || isLoading}
                        >
                            <Send className="w-4 h-4" />
                        </Button>
                    </div>
                    <div className="text-center mt-2">
                        <p className="text-[10px] text-muted-foreground">
                            AI 生成的内容可能不准确，请核实重要信息。
                        </p>
                    </div>
                </div>
            </div>
        </AIToolsLayout>
    );
}