<?php
/**
 * AI助手模块 - 智能婚礼顾问
 * 提供智能引导、常见问题解答、操作指导等功能
 */
$pageTitle = 'AI婚礼顾问';
require_once 'header.php';

// AI配置
$aiProviders = [
    ['name' => '硅基流动', 'value' => 'siliconflow', 'status' => 'available', 'description' => '国内直连，性价比高'],
    ['name' => '豆包', 'value' => 'doubao', 'status' => 'available', 'description' => '百度旗下，响应迅速'],
    ['name' => '本地模型', 'value' => 'local', 'status' => 'available', 'description' => '内置知识库，无需联网']
];

// 预设问题
$presetQuestions = [
    ['text' => '如何策划一场完美的婚礼？', 'category' => 'planning'],
    ['text' => '阳泉有哪些推荐的婚庆公司？', 'category' => 'vendors'],
    ['text' => '婚礼预算如何分配？', 'category' => 'budget'],
    ['text' => '传统婚俗有哪些注意事项？', 'category' => 'traditions'],
    ['text' => '如何选择婚礼日期？', 'category' => 'date'],
    ['text' => '电子请柬怎么制作？', 'category' => 'invitation'],
    ['text' => '婚礼当天流程安排', 'category' => 'schedule'],
    ['text' => '父母致辞怎么写？', 'category' => 'speech']
];
?>

<main class="site-main">
    <section class="page-banner ai-banner">
        <div class="container">
            <h1><i class="fas fa-robot"></i> AI婚礼顾问</h1>
            <p>您的专属智能婚礼助手，随时为您解答婚礼相关问题</p>
        </div>
    </section>

    <section class="ai-section">
        <div class="container">
            <div class="ai-wrapper">
                <div class="ai-sidebar">
                    <div class="ai-control-card">
                        <h3><i class="fas fa-cpu"></i> AI引擎</h3>
                        <div class="provider-switch">
                            <?php foreach ($aiProviders as $provider): ?>
                            <label class="provider-option">
                                <input type="radio" name="aiProvider" value="<?php echo $provider['value']; ?>" <?php echo $provider['value'] === 'siliconflow' ? 'checked' : ''; ?>>
                                <span class="provider-label">
                                    <div class="provider-info">
                                        <span class="provider-name"><?php echo $provider['name']; ?></span>
                                        <span class="provider-desc"><?php echo $provider['description']; ?></span>
                                    </div>
                                    <span class="provider-status available">可用</span>
                                </span>
                            </label>
                            <?php endforeach; ?>
                        </div>
                    </div>

                    <div class="ai-control-card">
                        <h3><i class="fas fa-lightbulb"></i> 热门问题</h3>
                        <div class="quick-questions">
                            <?php foreach ($presetQuestions as $question): ?>
                            <button class="quick-question-btn" data-question="<?php echo htmlspecialchars($question['text']); ?>">
                                <i class="fas fa-question-circle"></i>
                                <span><?php echo htmlspecialchars($question['text']); ?></span>
                            </button>
                            <?php endforeach; ?>
                        </div>
                    </div>

                    <div class="ai-control-card">
                        <h3><i class="fas fa-feather-alt"></i> AI功能</h3>
                        <ul class="feature-list">
                            <li><i class="fas fa-check-circle"></i> 智能引导网站使用</li>
                            <li><i class="fas fa-check-circle"></i> 婚礼策划咨询</li>
                            <li><i class="fas fa-check-circle"></i> 预算分配建议</li>
                            <li><i class="fas fa-check-circle"></i> 婚俗文化解答</li>
                            <li><i class="fas fa-check-circle"></i> 流程安排指导</li>
                            <li><i class="fas fa-check-circle"></i> 常见问题解答</li>
                        </ul>
                    </div>

                    <div class="ai-control-card tips-card">
                        <h3><i class="fas fa-info-circle"></i> 使用提示</h3>
                        <p>请用自然语言描述您的问题，AI会为您提供专业的婚礼建议</p>
                        <p>可以询问具体问题，如："婚礼预算怎么分配？"</p>
                    </div>
                </div>

                <div class="ai-chat-container">
                    <div class="chat-header">
                        <div class="chat-title">
                            <i class="fas fa-comments"></i>
                            <span>AI婚礼顾问</span>
                        </div>
                        <div class="chat-actions">
                            <button id="clearChatBtn" class="chat-action-btn" title="清空聊天">
                                <i class="fas fa-trash"></i>
                            </button>
                            <button id="exportChatBtn" class="chat-action-btn" title="导出记录">
                                <i class="fas fa-download"></i>
                            </button>
                        </div>
                    </div>

                    <div id="chatMessages" class="chat-messages">
                        <div class="message ai-message">
                            <div class="message-avatar ai-avatar">AI</div>
                            <div class="message-content">
                                <div class="message-bubble">
                                    <p>您好！我是您的AI婚礼顾问</p>
                                    <p>请问有什么可以帮助您的？您可以：</p>
                                    <ul>
                                        <li>询问婚礼策划相关问题</li>
                                        <li>了解阳泉本地婚俗文化</li>
                                        <li>获取预算分配建议</li>
                                        <li>了解婚礼流程安排</li>
                                    </ul>
                                </div>
                                <div class="message-time">刚刚</div>
                            </div>
                        </div>
                    </div>

                    <div class="chat-input-area">
                        <div class="input-wrapper">
                            <textarea id="chatInput" placeholder="输入您的问题，AI婚礼顾问为您解答..." rows="2"></textarea>
                            <button id="sendBtn" class="send-btn" disabled>
                                <i class="fas fa-paper-plane"></i>
                            </button>
                        </div>
                        <div class="input-actions">
                            <button id="voiceBtn" class="input-action-btn" title="语音输入">
                                <i class="fas fa-microphone"></i>
                            </button>
                            <button id="suggestBtn" class="input-action-btn" title="获取建议">
                                <i class="fas fa-magic"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>

<style>
.site-footer, .breadcrumb { display: none !important; }

.ai-banner {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 40px 0;
    text-align: center;
}

.ai-banner h1 { font-size: 2.2rem; margin-bottom: 10px; }
.ai-banner p { font-size: 1.1rem; opacity: 0.9; }

.ai-section { padding: 0; background: #f5f7fa; min-height: calc(100vh - 200px); }
.ai-wrapper { display: flex; height: calc(100vh - 200px); }

.ai-sidebar {
    width: 320px;
    background: white;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    overflow-y: auto;
    flex-shrink: 0;
}

.ai-control-card { padding: 20px; border-bottom: 1px solid #eee; }
.ai-control-card h3 {
    font-size: 1rem;
    color: #333;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ai-control-card h3 i { color: #667eea; }

.provider-switch { display: flex; flex-direction: column; gap: 10px; }
.provider-option { cursor: pointer; }
.provider-option input { display: none; }
.provider-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    transition: all 0.3s;
}
.provider-option input:checked + .provider-label {
    border-color: #667eea;
    background: #f0f3ff;
}
.provider-info { display: flex; flex-direction: column; align-items: flex-start; }
.provider-name { font-weight: 500; font-size: 14px; }
.provider-desc { font-size: 12px; color: #888; margin-top: 2px; }
.provider-status {
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 10px;
    background: #e0e0e0;
    color: #666;
}
.provider-status.available { background: #e8f5e9; color: #2e7d32; }

.quick-questions { display: flex; flex-direction: column; gap: 8px; }
.quick-question-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #f8f9fa;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
    font-size: 13px;
}
.quick-question-btn:hover {
    background: #e8f0fe;
    transform: translateX(5px);
}
.quick-question-btn i { color: #667eea; }

.feature-list { list-style: none; padding: 0; }
.feature-list li { padding: 8px 0; font-size: 14px; color: #555; }
.feature-list li i { color: #28a745; margin-right: 8px; }

.tips-card {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    border-radius: 10px;
    margin: 15px;
    border: none;
}
.tips-card p { font-size: 13px; color: #5d4037; margin-bottom: 8px; }

.ai-chat-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: white;
    border-left: 1px solid #eee;
}

.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
}

.chat-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
}
.chat-title i { color: #667eea; }

.chat-actions { display: flex; gap: 10px; }
.chat-action-btn {
    padding: 8px 12px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}
.chat-action-btn:hover { background: #f0f0f0; }

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.message { display: flex; gap: 12px; max-width: 80%; }
.message.user-message { margin-left: auto; }
.message.ai-message { margin-right: auto; }

.message-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    flex-shrink: 0;
}
.ai-avatar { background: linear-gradient(135deg, #667eea, #764ba2); color: white; }
.user-avatar { background: #e8f5e9; color: #2e7d32; }

.message-content { flex: 1; }
.message-bubble { padding: 12px 16px; border-radius: 15px; line-height: 1.6; }
.ai-message .message-bubble { background: #f0f3ff; border-radius: 15px 15px 15px 5px; }
.user-message .message-bubble {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border-radius: 15px 15px 5px 15px;
}
.message-time { font-size: 12px; color: #999; margin-top: 5px; }

.chat-input-area {
    padding: 15px 20px;
    border-top: 1px solid #eee;
    background: #f8f9fa;
}

.input-wrapper { display: flex; gap: 10px; }
#chatInput {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 10px;
    resize: none;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.3s;
}
#chatInput:focus { border-color: #667eea; }

.send-btn {
    padding: 12px 20px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.send-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.send-btn:disabled { background: #ccc; cursor: not-allowed; }

.input-actions { display: flex; gap: 10px; margin-top: 10px; }
.input-action-btn {
    padding: 8px 15px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}
.input-action-btn:hover { background: #f0f3ff; border-color: #667eea; }

.loading-indicator { display: inline-flex; gap: 4px; }
.loading-dot {
    width: 6px;
    height: 6px;
    background: #667eea;
    border-radius: 50%;
    animation: loading 1s infinite;
}
.loading-dot:nth-child(2) { animation-delay: 0.2s; }
.loading-dot:nth-child(3) { animation-delay: 0.4s; }

.engine-notification {
    text-align: center;
    padding: 8px 16px;
    background: #e8f5e9;
    color: #2e7d32;
    border-radius: 20px;
    font-size: 13px;
    margin: 10px 0;
    animation: fadeInOut 3s ease-in-out;
}

@keyframes fadeInOut {
    0% { opacity: 0; transform: translateY(-10px); }
    10% { opacity: 1; transform: translateY(0); }
    90% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-10px); }
}

@keyframes loading {
    0%, 100% { opacity: 0.3; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-5px); }
}

@media (max-width: 768px) {
    .ai-wrapper { flex-direction: column; height: auto; }
    .ai-sidebar { width: 100%; max-height: 300px; order: 2; }
    .ai-chat-container { height: 400px; order: 1; border-left: none; }
    .message { max-width: 95%; }
}
</style>

<script src="js/ai.js?v=<?php echo time(); ?>"></script>
<script>document.addEventListener('DOMContentLoaded', initAI);</script>

<?php require_once 'footer.php'; ?>