<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI 助手对话界面</title>
    
    <!-- 字体 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#6366f1',
                        secondary: '#8b5cf6'
                    },
                    borderRadius: {
                        'none': '0px',
                        'sm': '2px',
                        DEFAULT: '4px',
                        'md': '8px',
                        'lg': '12px',
                        'xl': '16px',
                        '2xl': '20px',
                        '3xl': '24px',
                        'full': '9999px',
                        'button': '4px'
                    }
                }
            }
        }
    </script>
    
    <!-- 自定义样式 -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body class="relative">
    <!-- 动态背景粒子效果 -->
    <div class="particles" id="particles"></div>
    
    <div class="flex h-screen">
        <!-- 应用选择面板（初始显示） -->
        <div id="app-selector-panel" class="w-full bg-slate-900/80 glass-effect flex flex-col">
            <div class="p-6 border-b border-slate-700 flex justify-between items-center">
                <div>
                    <h1 class="text-3xl font-bold text-white mb-2 font-['Pacifico']">AI 助手</h1>
                    <p class="text-slate-400">选择一个智能体开始对话</p>
                </div>
                <!-- 设置按钮 -->
                <button
                    onclick="openTokenModal()"
                    class="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded-md transition-colors flex items-center gap-2"
                    title="设置认证Token"
                >
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                    </svg>
                    设置
                </button>
            </div>

            <!-- 搜索框 -->
            <div class="p-6 border-b border-slate-700 flex justify-center">
                <div class="relative w-[30%]">
                    <input
                        type="text"
                        id="app-search-input"
                        placeholder="搜索智能体..."
                        class="w-full bg-slate-800 text-white px-4 py-3 pl-12 rounded-xl border border-slate-600 focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all duration-300"
                    >
                    <i class="fas fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-slate-400"></i>
                </div>
            </div>

            <!-- 应用列表 -->
            <div class="flex-1 overflow-y-auto p-6">
                <div id="app-list" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                    <!-- 应用卡片将通过JavaScript动态加载 -->
                    <div class="text-center text-slate-400 py-12 col-span-full">
                        <i class="fas fa-spinner fa-spin text-4xl mb-4"></i>
                        <p>正在加载智能体列表...</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 主对话区域（初始隐藏） -->
        <div id="chat-panel" class="flex-1 flex flex-col hidden">
            <!-- 顶部导航栏 -->
            <div class="h-16 bg-slate-900/80 glass-effect border-b border-slate-700 flex items-center justify-between px-6 relative">
                <div class="flex items-center space-x-4">
                    <!-- 返回按钮 -->
                    <button id="back-to-apps-btn" class="text-white p-2 hover:bg-slate-700 rounded-lg transition">
                        <i class="fas fa-arrow-left"></i>
                    </button>
                    <!-- 当前应用信息 -->
                    <div class="flex items-center space-x-3">
                        <img id="current-app-avatar" src="" alt="" class="w-10 h-10 rounded-full bg-slate-700">
                        <div>
                            <h1 id="current-app-name" class="text-lg font-bold text-white">AI 助手</h1>
                            <p id="current-app-desc" class="text-xs text-slate-400"></p>
                        </div>
                    </div>
                </div>

                <!-- 右侧工具栏 -->
                <div class="flex items-center space-x-4">
                    <select id="font-select" class="bg-slate-800 text-white px-3 py-1 rounded-lg border border-slate-600 focus:outline-none focus:border-primary text-sm">
                        <option value="'Inter', sans-serif">默认字体</option>
                        <option value="'Source Han Sans CN', sans-serif">思源黑体</option>
                        <option value="'PingFang SC', sans-serif">苹方</option>
                        <option value="'Roboto', sans-serif">Roboto</option>
                    </select>

                    <div class="w-8 h-8 bg-gradient-to-r from-primary to-secondary rounded-full flex items-center justify-center text-white">
                        <i class="fas fa-user text-sm"></i>
                    </div>
                </div>
            </div>

            <!-- 智能回复提示（动态加载） -->
            <div id="quick-reply-container" class="p-4 bg-slate-800/50 border-b border-slate-700 hidden">
                <div id="quick-reply-buttons" class="flex space-x-3 overflow-x-auto">
                    <!-- 快捷回复按钮将通过JavaScript动态加载 -->
                </div>
            </div>

            <!-- 对话内容区域 -->
            <div class="flex-1 overflow-y-auto p-6 space-y-4" id="chat-container">
                <!-- 欢迎消息 -->
                <div class="flex justify-center">
                    <div class="text-center text-slate-400 py-8">
                        <i class="fas fa-comments text-4xl mb-4"></i>
                        <p id="welcome-message">开始对话吧！</p>
                    </div>
                </div>
            </div>

            <!-- 输入区域 -->
            <div class="p-6 bg-slate-900/80 glass-effect border-t border-slate-700">
                <div class="flex items-end space-x-4">
                    <!-- 语音输入按钮 -->
                    <button class="w-12 h-12 bg-slate-700 rounded-full flex items-center justify-center text-white hover:bg-slate-600 transition glow-button">
                        <div class="voice-wave">
                            <div class="wave-bar"></div>
                            <div class="wave-bar"></div>
                            <div class="wave-bar"></div>
                            <div class="wave-bar"></div>
                            <div class="wave-bar"></div>
                        </div>
                    </button>

                    <!-- 文本输入框 -->
                    <div class="flex-1 relative">
                        <input
                            type="text"
                            id="message-input"
                            placeholder="输入消息..."
                            class="w-full bg-slate-800 text-white px-4 py-3 rounded-xl border border-slate-600 focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all duration-300"
                            style="border: 1px solid rgba(99, 102, 241, 0.5); box-shadow: 0 0 10px rgba(99, 102, 241, 0.2);"
                        >
                    </div>

                    <!-- 发送按钮 -->
                    <button id="send-button" class="w-12 h-12 bg-gradient-to-r from-primary to-secondary rounded-full flex items-center justify-center text-white hover:from-primary/80 hover:to-secondary/80 transition glow-button pulse">
                        <i class="fas fa-paper-plane"></i>
                    </button>
                </div>

                <!-- 功能按钮 -->
                <div class="flex justify-between items-center mt-3">
                    <div class="flex space-x-2">
                        <button class="p-2 bg-slate-700 text-white rounded-lg hover:bg-slate-600 transition">
                            <i class="fas fa-image"></i>
                        </button>
                        <button class="p-2 bg-slate-700 text-white rounded-lg hover:bg-slate-600 transition">
                            <i class="fas fa-paperclip"></i>
                        </button>
                        <button class="p-2 bg-slate-700 text-white rounded-lg hover:bg-slate-600 transition">
                            <i class="fas fa-microphone"></i>
                        </button>
                    </div>
                    <div class="flex items-center space-x-2">
                        <span class="text-slate-400 text-sm">连接状态</span>
                        <div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Token设置模态框 -->
    <div id="token-modal" class="hidden fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center">
        <div class="bg-slate-800 rounded-lg p-6 w-full max-w-md mx-4 shadow-2xl">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-xl font-bold text-white">设置认证Token</h2>
                <button onclick="closeTokenModal()" class="text-slate-400 hover:text-white transition">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
            <div class="mb-4">
                <label class="block text-sm font-medium text-slate-300 mb-2">
                    Token（自动添加Bearer前缀）
                </label>
                <textarea
                    id="token-input"
                    rows="4"
                    placeholder="粘贴您的认证token..."
                    class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent resize-none"
                ></textarea>
                <p class="mt-2 text-xs text-slate-400">
                    当前状态: <span id="token-status-modal" class="font-medium">未设置</span>
                </p>
            </div>
            <div class="flex gap-3">
                <button
                    onclick="saveToken()"
                    class="flex-1 px-4 py-2 bg-primary hover:bg-primary/80 text-white rounded-md transition-colors"
                >
                    保存
                </button>
                <button
                    onclick="closeTokenModal()"
                    class="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded-md transition-colors"
                >
                    取消
                </button>
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
</body>
</html>
