<?php
/**
 * 用户会话页面模板：提供当前用户与管理员的一对一聊天入口。
 * 作者: @ccfork
 */
session_start();

$raw_session_id = $_GET['session_id'] ?? '';
$session_id = preg_replace('/[^A-Za-z0-9_-]/', '', $raw_session_id);
if ($session_id === '') {
    $session_id = uniqid('user_');
}
if ($raw_session_id !== $session_id) {
    header('Location: chat.php?session_id=' . rawurlencode($session_id));
    exit;
}
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <title>🌸 小纸条 · 少女心笔记本 🌸</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <link rel="stylesheet" href="chat_emoji.css?v=20260615c">
    <link rel="stylesheet" href="chat.css?v=20260615d">
    <link rel="stylesheet" href="image_viewer.css?v=20260615a">
    <link rel="stylesheet" href="scrollbar.css?v=20260615a">
</head>
<body>
<main class="chat-shell" data-page="chat">
    <header class="chat-header">
        <div class="chat-user-info">
            <div class="chat-user-avatar">💌</div>
            <div class="chat-user-details">
                <h1>小纸条信箱</h1>
                <p id="currentSessionStatus">写点悄悄话也可以～</p>
            </div>
        </div>
        <div class="chat-actions">
            <button class="icon-btn" type="button" id="questionnaireBtn" aria-label="返回问卷" title="返回问卷">
                <i class="fas fa-clipboard-list"></i>
            </button>
            <button class="icon-btn" type="button" id="refreshBtn" aria-label="刷新消息" title="刷新">
                <i class="fas fa-rotate-right"></i>
            </button>
        </div>
    </header>

    <section class="watch-panel chat-watch-panel" id="chatWatchPanel" hidden>
        <video id="chatWatchVideo" playsinline controls controlslist="nofullscreen nodownload noplaybackrate noremoteplayback" disablepictureinpicture></video>
    </section>

    <section class="messages-container" id="messagesContainer" aria-live="polite">
        <div class="empty-state">
            <i class="fas fa-heart"></i>
            <strong>还没有小纸条</strong>
            <span>想说的话，可以慢慢写在这里～</span>
        </div>
    </section>

    <section class="input-area" aria-label="消息输入">
        <div id="emojiPanelHost"></div>
        <div class="upload-progress" id="imageUploadProgress" hidden>
            <div class="upload-progress-bar"><span></span></div>
            <p>图片发送中 0%</p>
        </div>

        <div class="composer">
            <button class="tool-btn" type="button" id="emojiToggle" aria-label="打开表情" title="表情">
                <i class="far fa-face-smile"></i>
            </button>
            <button class="tool-btn" type="button" id="imageBtn" aria-label="发送图片" title="图片">
                <i class="far fa-image"></i>
            </button>
            <input id="imageInput" class="hidden-file-input" type="file" accept="image/jpeg,image/png,image/gif,image/webp">
            <textarea class="message-input" id="messageInput" rows="1" placeholder="写一张小纸条..."></textarea>
            <button class="send-btn" type="button" id="sendBtn" aria-label="发送">
                <i class="fas fa-paper-plane"></i>
            </button>
        </div>
    </section>
</main>

<div class="toast" id="toast" role="status" aria-live="polite" hidden></div>

<script>
    window.CHAT_CONFIG = {
        sessionId: <?php echo json_encode($session_id, JSON_UNESCAPED_UNICODE); ?>,
        apiUrl: 'chat_api.php'
    };
</script>
<script src="chat_emoji.js?v=20260615c"></script>
<script src="message_actions.js?v=20260615a"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js@1.5.18/dist/hls.min.js"></script>
<script src="watch_player.js?v=20260615a"></script>
<script src="chat_watch.js?v=20260615a"></script>
<script src="image_viewer.js?v=20260615a"></script>
<script src="chat.js?v=20260615d"></script>
</body>
</html>
