{% extends 'base.html' %}
{% from '_macros.html' import assistant_avatar %}

{% block title %}{{ assistant.title }} - {{ get_app_name() }}{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-10">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <div class="d-flex align-items-center gap-3">
                {{ assistant_avatar(assistant, size='xl') }}
                <div>
                    <h2 class="mb-1" style="color: var(--om-ink); font-weight: 700;">
                        {{ assistant.title }}
                    </h2>
                    {% if assistant.description %}
                    <p class="text-muted mb-0">{{ assistant.description }}</p>
                    {% endif %}
                </div>
            </div>
            <div>
                {% if is_expired %}
                    <span class="badge fs-6" style="background-color: #6B6760; padding: 0.5rem 0.875rem;">链接已过期</span>
                {% elif assistant.status == 'disabled' %}
                    <span class="badge fs-6" style="background-color: #B8463E; padding: 0.5rem 0.875rem;">已禁用</span>
                {% else %}
                    <span class="badge fs-6" style="background-color: #5B7553; padding: 0.5rem 0.875rem;">启用中</span>
                {% endif %}
            </div>
        </div>

        <div class="d-flex gap-2 mb-4 flex-wrap">
            <a href="{{ url_for('assistant_list') }}" class="btn btn-secondary btn-sm">
                <i class="bi bi-arrow-left"></i> 返回列表
            </a>
            <a href="{{ url_for('assistant_audit', assistant_id=assistant.id) }}" class="btn btn-primary btn-sm">
                <i class="bi bi-eye"></i> 对话审计 ({{ conv_count }} 学生)
            </a>
            <a href="{{ url_for('assistant_screen', assistant_id=assistant.id) }}" target="_blank" rel="noopener" class="btn btn-outline-primary btn-sm" title="全屏大二维码 + 实时进入统计，专为投影仪设计">
                <i class="bi bi-cast"></i> 投屏
            </a>
            <a href="{{ url_for('assistant_try_chat', assistant_id=assistant.id) }}" target="_blank" rel="noopener" class="btn btn-outline-primary btn-sm" title="以「教师试聊」身份体验学生端，不计入学生数据和审计">
                <i class="bi bi-chat-heart"></i> 试聊
            </a>
            <a href="{{ url_for('assistant_edit', assistant_id=assistant.id) }}" class="btn btn-outline-primary btn-sm">
                <i class="bi bi-pencil"></i> 编辑
            </a>
            <button class="btn btn-outline-{{ 'danger' if assistant.status == 'active' else 'success' }} btn-sm" onclick="toggleAssistant({{ assistant.id }})">
                <i class="bi bi-{{ 'pause-fill' if assistant.status == 'active' else 'play-fill' }}"></i>
                {{ '禁用（紧急熔断）' if assistant.status == 'active' else '启用' }}
            </button>
            <a href="{{ url_for('assistant_export_template', assistant_id=assistant.id) }}" class="btn btn-outline-secondary btn-sm">
                <i class="bi bi-box-arrow-up"></i> 导出模板
            </a>
            <form method="POST" action="{{ url_for('assistant_clone', assistant_id=assistant.id) }}" style="display: inline;">
                <button type="submit" class="btn btn-outline-secondary btn-sm">
                    <i class="bi bi-files"></i> 克隆
                </button>
            </form>
            <button type="button" class="btn btn-outline-secondary btn-sm" id="om-share-plaza-btn" data-assistant-id="{{ assistant.id }}" data-assistant-title="{{ assistant.title }}">
                <i class="bi bi-broadcast"></i> 分享到广场
            </button>
        </div>

        <!-- 分享到广场模态框 -->
        <div id="om-plaza-share-modal" style="display:none; position:fixed; inset:0; background:rgba(20,17,12,0.55); z-index:1100; align-items:center; justify-content:center; padding:1rem; overflow-y:auto;">
            <div style="background:#fff; border-radius:14px; max-width:600px; width:100%; max-height:92vh; overflow-y:auto; padding:1.5rem 1.75rem; border:1px solid #E5E0D8;">
                <div style="display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:0.5rem;">
                    <div>
                        <h4 style="margin:0; color:#141413; font-weight:700;"><i class="bi bi-broadcast"></i> 分享到 AI 导师广场</h4>
                        <p style="margin:0.25rem 0 0; color:#6B6760; font-size:0.9rem;">选择分享位置，让好的 AI 导师被更多老师复用</p>
                    </div>
                    <button type="button" id="om-share-close" style="background:transparent; border:none; font-size:1.5rem; color:#94918B; cursor:pointer; padding:0 0.25rem;">×</button>
                </div>

                <div style="background:#F2DCD9; border:1px solid rgba(184,70,62,0.25); color:#7A2A26; padding:0.6rem 0.875rem; border-radius:8px; font-size:0.85rem; margin:0.75rem 0 1rem;">
                    ⚠️ <strong>请先确认：</strong>分享到公共广场后<strong>不可撤回 / 不可编辑</strong>；校内广场仅本校可见，管理员可禁用或启用。请先检查 system prompt 是否含真实姓名 / 学校 / 学生信息等敏感内容。
                </div>

                <div class="mb-3">
                    <label class="fw-semibold mb-2" style="font-size:0.92rem;">分享方式 <span class="text-danger">*</span></label>
                    <div style="display:grid; gap:0.55rem;">
                        <label style="display:flex; gap:0.6rem; align-items:flex-start; padding:0.65rem 0.75rem; border:1px solid #E5E0D8; border-radius:8px; cursor:pointer;">
                            <input type="checkbox" class="form-check-input om-share-destination" value="public" checked style="margin-top:0.2rem;">
                            <span>
                                <span style="display:block; font-weight:650; color:#141413;">公共广场</span>
                                <span style="display:block; color:#6B6760; font-size:0.84rem;">全国 OpenMentor 老师可见，沿用原来的公共广场分享方式。</span>
                            </span>
                        </label>
                        {% if om_is_campus %}
                        <label style="display:flex; gap:0.6rem; align-items:flex-start; padding:0.65rem 0.75rem; border:1px solid #E5E0D8; border-radius:8px; cursor:pointer;">
                            <input type="checkbox" class="form-check-input om-share-destination" value="campus" checked style="margin-top:0.2rem;">
                            <span>
                                <span style="display:block; font-weight:650; color:#141413;">校内广场</span>
                                <span style="display:block; color:#6B6760; font-size:0.84rem;">保存到本校服务器，校园版教师可复用，管理员可禁用或启用。</span>
                            </span>
                        </label>
                        {% endif %}
                    </div>
                </div>

                <div class="mb-3">
                    <label class="fw-semibold mb-1" style="font-size:0.92rem;">学科 <span class="text-danger">*</span></label>
                    <input type="text" id="om-share-subject" class="form-control" list="om-share-subject-list" placeholder="选择或自己输入" required>
                    <datalist id="om-share-subject-list">
                        <option value="语文"><option value="数学"><option value="英语"><option value="物理"><option value="化学"><option value="生物"><option value="历史"><option value="政治"><option value="地理"><option value="信息"><option value="科学"><option value="音乐"><option value="体育"><option value="美术"><option value="心理"><option value="劳动"><option value="综合实践"><option value="通用">
                    </datalist>
                </div>
                <div class="mb-3">
                    <label class="fw-semibold mb-1" style="font-size:0.92rem;">学段 <span class="text-danger">*</span></label>
                    <input type="text" id="om-share-grade" class="form-control" list="om-share-grade-list" placeholder="选择或自己输入" required>
                    <datalist id="om-share-grade-list">
                        <option value="小学"><option value="初中"><option value="高中"><option value="大学"><option value="培训">
                    </datalist>
                </div>
                <div class="mb-3">
                    <label class="fw-semibold mb-1" style="font-size:0.92rem;">用途 <span class="text-danger">*</span></label>
                    <input type="text" id="om-share-purpose" class="form-control" placeholder="例：二次函数辅导 / 作文批改 / 实验探究启发 / 心理倾听" required>
                </div>
                <div class="mb-3">
                    <label class="fw-semibold mb-1" style="font-size:0.92rem;">广场展示用的描述（可选，不填用导师原描述）</label>
                    <textarea id="om-share-desc" class="form-control" rows="2" placeholder="一两句话告诉别的老师，这个 AI 导师有啥用 / 适合什么场景"></textarea>
                </div>
                <div class="row g-2 mb-3">
                    <div class="col-md-6">
                        <label class="fw-semibold mb-1" style="font-size:0.92rem;">你的昵称（选填）</label>
                        <input type="text" id="om-share-nickname" class="form-control" placeholder="留空就显示「匿名」">
                    </div>
                    <div class="col-md-6">
                        <label class="fw-semibold mb-1" style="font-size:0.92rem;">你的学校（选填）</label>
                        <input type="text" id="om-share-school" class="form-control" placeholder="留空就不显示">
                    </div>
                </div>

                <div id="om-share-error" style="display:none; padding:0.5rem 0.75rem; background:#F2DCD9; color:#8B342E; border-radius:6px; margin-bottom:0.75rem; font-size:0.875rem;"></div>

                <div style="display:flex; gap:0.5rem; justify-content:flex-end; flex-wrap:wrap;">
                    <button type="button" id="om-share-cancel" class="btn btn-secondary" style="background:#6B6760; border:none;">取消</button>
                    <button type="button" id="om-share-submit" class="btn btn-primary" style="background:#D97757; border:none; font-weight:600;"><i class="bi bi-broadcast"></i> 确认分享</button>
                </div>
            </div>
        </div>

        <script>
        (function(){
            var btn = document.getElementById('om-share-plaza-btn');
            var modal = document.getElementById('om-plaza-share-modal');
            if (!btn || !modal) return;
            var assistantId = btn.dataset.assistantId;
            var byId = function(id){ return document.getElementById(id); };
            var elSubject = byId('om-share-subject');
            var elGrade = byId('om-share-grade');
            var elPurpose = byId('om-share-purpose');
            var elDesc = byId('om-share-desc');
            var elNickname = byId('om-share-nickname');
            var elSchool = byId('om-share-school');
            var elError = byId('om-share-error');
            var elSubmit = byId('om-share-submit');
            var btnClose = byId('om-share-close');
            var btnCancel = byId('om-share-cancel');
            var destinationInputs = Array.prototype.slice.call(document.querySelectorAll('.om-share-destination'));

            function openModal(){
                elError.style.display = 'none';
                elSubmit.disabled = false;
                elSubmit.innerHTML = '<i class="bi bi-broadcast"></i> 确认分享';
                modal.style.display = 'flex';
            }
            function closeModal(){ modal.style.display = 'none'; }
            function showError(msg){ elError.textContent = msg; elError.style.display = 'block'; }

            btn.addEventListener('click', openModal);
            btnClose.addEventListener('click', closeModal);
            btnCancel.addEventListener('click', closeModal);
            modal.addEventListener('click', function(e){ if (e.target === modal) closeModal(); });

            elSubmit.addEventListener('click', async function(){
                var subject = (elSubject.value || '').trim();
                var grade = (elGrade.value || '').trim();
                var purpose = (elPurpose.value || '').trim();
                if (!subject || !grade || !purpose) {
                    showError('学科 / 学段 / 用途都是必填'); return;
                }
                var destinations = destinationInputs
                    .filter(function(input){ return input.checked; })
                    .map(function(input){ return input.value; });
                if (!destinations.length) {
                    showError('请至少选择一个分享方式'); return;
                }
                elError.style.display = 'none';
                elSubmit.disabled = true;
                elSubmit.innerHTML = '<i class="bi bi-hourglass-split"></i> 分享中…';
                try {
                    var resp = await fetch('/api/assistant/' + assistantId + '/share_to_plaza', {
                        method: 'POST',
                        headers: {'Content-Type': 'application/json'},
                        body: JSON.stringify({
                            subject: subject, grade: grade, purpose: purpose,
                            description: (elDesc.value || '').trim(),
                            nickname: (elNickname.value || '').trim(),
                            school: (elSchool.value || '').trim(),
                            destinations: destinations,
                        }),
                    });
                    var data = await resp.json().catch(function(){ return {}; });
                    if (!resp.ok || !data.success) {
                        showError(data.message || ('分享失败 HTTP ' + resp.status));
                        elSubmit.disabled = false;
                        elSubmit.innerHTML = '<i class="bi bi-broadcast"></i> 确认分享';
                        return;
                    }
                    closeModal();
                    alert('✓ ' + (data.message || '已成功分享到广场'));
                } catch (e) {
                    showError('请求失败：' + (e.message || e));
                    elSubmit.disabled = false;
                    elSubmit.innerHTML = '<i class="bi bi-broadcast"></i> 确认分享';
                }
            });
        })();
        </script>

        <!-- 学生链接卡片 -->
        <div class="card mb-4">
            <div class="card-header">
                <i class="bi bi-link-45deg me-1"></i>学生访问链接
            </div>
            <div class="card-body">
                <div class="row g-4 align-items-center">
                    <div class="col-md-7">
                        <div class="mb-3">
                            <label class="form-label fw-semibold small text-muted">链接地址</label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="student-url" readonly value="{{ student_url }}" style="font-family: monospace;">
                                <button class="btn btn-secondary" onclick="copyUrl()">
                                    <i class="bi bi-clipboard"></i> 复制
                                </button>
                            </div>
                        </div>

                        <div class="row g-2 mb-2">
                            <div class="col-6">
                                <small class="text-muted d-block">链接有效期至</small>
                                <strong style="color: #141413;">
                                    {% if assistant.link_expires_at %}
                                        {{ assistant.link_expires_at.strftime('%Y-%m-%d %H:%M') }}
                                    {% else %}
                                        未设置
                                    {% endif %}
                                </strong>
                            </div>
                            <div class="col-6">
                                <small class="text-muted d-block">每生每日上限</small>
                                <strong style="color: #141413;">{{ assistant.max_messages_per_student_daily or 50 }} 条</strong>
                            </div>
                        </div>

                        <div class="alert alert-info mb-0 small" style="padding: 0.625rem 0.875rem;">
                            <i class="bi bi-info-circle me-1"></i>
                            学生需在同一局域网/校园网内才能访问。
                            {% if assistant.roster_mode == 'strict' %}
                            老师已启用<a href="{{ url_for('roster_index') }}" target="_blank" rel="noopener">花名册校验</a>，学生需从下拉中选择班级和姓名。
                            {% else %}
                            打开链接后填写「班级 + 姓名」即可开始对话。
                            {% endif %}
                        </div>
                    </div>
                    <div class="col-md-5 text-center">
                        <div id="qrcode" style="display: inline-block; padding: 0.5rem; background: white; border: 1px solid #E5E0D8; border-radius: 8px;"></div>
                        <div class="mt-2">
                            <small class="text-muted">学生扫码进入</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 配置概览 -->
        <div class="row g-3 mb-4">
            <div class="col-md-3 col-sm-6">
                <div class="card text-center">
                    <div class="card-body" style="padding: 1rem 0.5rem;">
                        <div class="text-muted small mb-1">使用模型</div>
                        <div style="font-weight: 600; color: #141413;">
                            {{ model_capabilities.get(assistant.selected_model_name, {}).get('label', assistant.selected_model_name or '默认') }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="card text-center">
                    <div class="card-body" style="padding: 1rem 0.5rem;">
                        <div class="text-muted small mb-1">已对话学生</div>
                        <div style="font-weight: 600; color: #141413; font-size: 1.5rem;">{{ conv_count }}</div>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="card text-center">
                    <div class="card-body" style="padding: 1rem 0.5rem;">
                        <div class="text-muted small mb-1">消息总数</div>
                        <div style="font-weight: 600; color: #141413; font-size: 1.5rem;">{{ msg_count }}</div>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="card text-center">
                    <div class="card-body" style="padding: 1rem 0.5rem;">
                        <div class="text-muted small mb-1">多模态</div>
                        <div style="font-weight: 600; color: #141413; font-size: 0.875rem;">
                            {% if assistant.allow_image_input %}<i class="bi bi-image text-primary" title="图片输入"></i>{% endif %}
                            {% if assistant.allow_file_upload %}<i class="bi bi-paperclip text-primary ms-1" title="文件上传"></i>{% endif %}
                            {% if assistant.allow_image_generation %}<i class="bi bi-magic text-primary ms-1" title="图片生成"></i>{% endif %}
                            {% if not assistant.allow_image_input and not assistant.allow_file_upload and not assistant.allow_image_generation %}
                            <span class="text-muted">仅文字</span>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 系统提示词预览 -->
        <div class="card mb-4">
            <div class="card-header" style="background-color: #F7F4EC; border-bottom: 1px solid #E5E0D8; font-weight: 600;">
                <i class="bi bi-chat-square-text me-1"></i>系统提示词
            </div>
            <div class="card-body">
                {% if assistant.system_prompt %}
                <pre class="mb-0" style="white-space: pre-wrap; font-family: inherit; font-size: 0.95rem; color: #2D2A24; background: #F7F4EC; padding: 0.875rem; border-radius: 6px; border: 1px solid #E5E0D8;">{{ assistant.system_prompt }}</pre>
                {% else %}
                <p class="text-muted fst-italic mb-0">暂未设置系统提示词</p>
                {% endif %}

                {% if assistant.welcome_message %}
                <div class="mt-3">
                    <div class="text-muted small mb-1">欢迎语：</div>
                    <div style="background: #F7F4EC; padding: 0.625rem 0.875rem; border-radius: 6px; color: #141413;">{{ assistant.welcome_message }}</div>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- 知识库（RAG） -->
        <div class="card mb-4">
            <div class="card-header" style="background-color: #F7F4EC; border-bottom: 1px solid #E5E0D8; font-weight: 600;">
                <i class="bi bi-journal-bookmark me-1"></i>知识库
                <span class="text-muted small fw-normal ms-1">学生提问时，AI 会自动引用最相关的资料片段回答</span>
            </div>
            <div class="card-body">
                {% if not kb_enabled %}
                <div class="alert alert-warning mb-0" style="border-radius: 8px;">
                    <i class="bi bi-exclamation-triangle me-1"></i>
                    知识库需要<strong>硅基流动 API Key</strong>做资料向量化（免费，与对话模型无关），
                    请先到 <a href="{{ url_for('profile') }}">个人设置</a> 配置后再上传资料。
                </div>
                {% else %}
                <form method="POST" action="{{ url_for('assistant_knowledge_upload', assistant_id=assistant.id) }}"
                      enctype="multipart/form-data" class="d-flex gap-2 align-items-center flex-wrap mb-3"
                      onsubmit="var b=this.querySelector('button[type=submit]'); b.disabled=true; b.innerHTML='<span class=\'spinner-border spinner-border-sm me-1\'></span>处理中，文件大时需要几十秒…';">
                    <input type="file" name="kb_files" class="form-control" style="max-width: 420px;" multiple required
                           accept=".pdf,.doc,.docx,.txt,.md,.markdown,.csv,.tsv,.xlsx,.xls,.pptx,.ppt,.html,.htm">
                    <button type="submit" class="btn btn-dark" style="border-radius: 6px;">
                        <i class="bi bi-upload me-1"></i>上传并入库
                    </button>
                    <span class="text-muted small">支持 PDF / Word / TXT / Markdown 等，单文件 ≤ 10MB</span>
                </form>

                {% if kb_docs %}
                <div class="table-responsive">
                    <table class="table table-sm align-middle mb-0">
                        <thead>
                            <tr class="text-muted small">
                                <th>资料</th><th style="width:110px;">知识片段</th><th style="width:140px;">上传时间</th><th style="width:80px;"></th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for d in kb_docs %}
                            <tr>
                                <td>
                                    <i class="bi bi-file-earmark-text me-1"></i>{{ d.file_name }}
                                    {% if d.status != 'ready' %}<span class="badge bg-danger ms-1">失败</span>{% endif %}
                                </td>
                                <td>{{ d.chunk_count }} 段</td>
                                <td class="text-muted small">{{ d.created_at.strftime('%m-%d %H:%M') if d.created_at else '—' }}</td>
                                <td>
                                    <form method="POST" action="{{ url_for('assistant_knowledge_delete', assistant_id=assistant.id, doc_id=d.id) }}"
                                          onsubmit="return confirm('删除资料「{{ d.file_name }}」？AI 将不再引用其中内容。');" style="margin:0;">
                                        <button type="submit" class="btn btn-sm btn-outline-danger" style="border-radius: 6px;">删除</button>
                                    </form>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <p class="text-muted fst-italic mb-0 small">还没有上传资料。上传教材、教案、课文后，AI 导师回答学生时会优先依据这些资料。</p>
                {% endif %}
                {% endif %}
            </div>
        </div>

    </div>
</div>

<!-- 加载 qrcodejs（QuickForm 已 vendored） -->
<script src="{{ url_for('static', filename='vendor/qrcodejs/qrcode.min.js') }}"></script>
<script>
    // 生成二维码
    document.addEventListener('DOMContentLoaded', function() {
        var url = "{{ student_url }}";
        new QRCode(document.getElementById('qrcode'), {
            text: url,
            width: 180,
            height: 180,
            correctLevel: QRCode.CorrectLevel.M
        });
    });

    function copyUrl() {
        var text = document.getElementById('student-url').value;
        var ok = false;

        // 1) 尝试现代 API（HTTPS / localhost 才可用）
        if (window.isSecureContext && navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(text).then(function() {
                showCopyToast('链接已复制 ✓');
            }).catch(function() {
                fallbackCopy(text);
            });
            return;
        }

        // 2) 降级：临时 textarea + execCommand（HTTP 局域网兼容）
        fallbackCopy(text);
    }

    function fallbackCopy(text) {
        var ta = document.createElement('textarea');
        ta.value = text;
        ta.style.cssText = 'position:fixed;top:-9999px;left:-9999px;opacity:0;';
        document.body.appendChild(ta);
        ta.focus();
        ta.select();
        ta.setSelectionRange(0, ta.value.length);
        try {
            var ok = document.execCommand('copy');
            showCopyToast(ok ? '链接已复制 ✓' : '复制失败，请手动选中复制', !ok);
        } catch (e) {
            showCopyToast('复制失败：' + e.message, true);
        } finally {
            document.body.removeChild(ta);
        }
    }

    function showCopyToast(msg, isError) {
        var existing = document.getElementById('copy-toast-popup');
        if (existing) existing.remove();
        var t = document.createElement('div');
        t.id = 'copy-toast-popup';
        t.textContent = msg;
        t.style.cssText = 'position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);' +
            'padding:0.625rem 1.25rem;border-radius:999px;font-size:0.92rem;font-weight:500;' +
            'box-shadow:0 8px 24px rgba(20,17,12,0.18);z-index:9999;' +
            'background:' + (isError ? '#B8463E' : '#141413') + ';color:#F7F4EC;';
        document.body.appendChild(t);
        setTimeout(function() { if (t.parentNode) t.remove(); }, 1800);
    }

    function toggleAssistant(id) {
        fetch(`/assistant/${id}/toggle`, {method: 'POST'})
            .then(r => r.json())
            .then(data => {
                if (data.success) location.reload();
                else alert(data.message || '操作失败');
            })
            .catch(() => alert('网络错误'));
    }
</script>
{% endblock %}