<?php

// 写真视频站 - 抖音风格首页（数据来源于后台）

require_once __DIR__ . '/includes/bootstrap.php';

// 接收代理推广 ?ref=AGENT_CODE
if (isset($_GET['ref']) && $_GET['ref'] !== '') {
    $refCode = trim($_GET['ref']);
    $ag = user_find_by_agent_code($refCode);
    if ($ag) {
        setcookie('agent_ref', $refCode, time() + 86400 * 30, '/');
    }
}

$userInfo = site_get();

// 若数据库未初始化（首次访问且未安装），回退默认值

if (!$userInfo) {

    $userInfo = [

        'backdrop_img' => 'bg.jpg', 'avatar' => 'avatar.jpg', 'nickname' => '颜遇',

        'douyin_id' => '13632086', 'total_like' => '5.8亿', 'follow_num' => '52',

        'fans_num' => '2478.4万', 'bio' => "承蒙厚爱 万分感激🙏\n视频均为自己创作 未签约 不直播\n工作v❤️ orangelaby",

        'ip_location' => '云南', 'works_count' => 0,

    ];

}

// 当前用户会员状态

$userId = current_user_id();
$isVip = is_vip($userId);

// 作品列表（按分类读取）
$currentCat = isset($_GET['cat']) ? $_GET['cat'] : '';
$catType = '';
if ($currentCat === 'photo') { $catType = 'photo'; }
elseif ($currentCat === 'video') { $catType = 'video'; }
else { $catType = ''; } // 空=全部

$worksList = video_list(true, 0, $catType);

// 实际作品数（若 works_count 未填则用视频数）
$userInfo['works_count'] = (int)$userInfo['works_count'];
if ($userInfo['works_count'] <= 0) {
    $userInfo['works_count'] = count($worksList);
}

// 分类总数
$videoTotal = video_count('video');
$photoTotal = video_count('photo');
$allTotal   = $videoTotal + $photoTotal;

?>

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <!-- 1. 浏览器/桌面快捷方式名称 -->
    <title>颜遇</title>
    <meta name="application-name" content="颜遇">
    <!-- 2. 苹果手机桌面图标（关键，解决灰色默认图标） -->
    <link rel="apple-touch-icon" sizes="180x180" href="./assets/logo_neon.png">
    <link rel="apple-touch-icon-precomposed" sizes="180x180" href="./assets/logo_neon.png">
    <!-- 3. 浏览器标签favicon -->
    <link rel="icon" type="image/png" href="./assets/1logo_neon.png">
    <link rel="shortcut icon" href="./assets/1logo_neon.png">
    <!-- 4. PWA 安卓桌面标准图标 -->
    <link rel="manifest" href="./manifest.json">

    <link rel="stylesheet" href="assets/style.css">

    <style>
        /* ========== 全局白底修改 ========== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: system-ui, -apple-system, sans-serif;
        }
        body {
            background: #ffffff; /* 原#000黑色 改为白色 */
            color: #000000;     /* 原#fff白色文字 改为黑色 */
            max-width: 480px;
            margin: 0 auto;
        }
        /* 作品卡片底色从黑色改成浅灰 */
        .work-item{position:relative;aspect-ratio:9/16;overflow:hidden;background:#f5f5f5;cursor:pointer;display:block;}
        .work-item.locked::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(2px);}
        .work-item .lock-tag{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;font-size:12px;background:rgba(255,91,138,.95);color:#000;padding:4px 10px;border-radius:12px;font-weight:600;display:none;align-items:center;gap:4px;}
        .work-item.locked .lock-tag{display:inline-flex;}
        .play-ic{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);z-index:2;font-size:32px;color:#fff;opacity:.8;display:none;}
        .work-item:hover .play-ic{display:block;}
        .work-item .work-like{position:absolute;left:8px;bottom:8px;font-size:14px;display:flex;align-items:center;gap:4px;z-index:3;text-shadow:0 1px 3px rgba(0,0,0,.8);color:#fff;}
        .work-item .work-cover{width:100%;height:100%;object-fit:cover;}
        .work-item .type-tag{position:absolute;right:8px;top:8px;font-size:11px;padding:2px 6px;border-radius:8px;z-index:3;background:rgba(0,0,0,.55);color:#fff;backdrop-filter:blur(4px);}
        .work-item .img-count{position:absolute;right:8px;bottom:8px;font-size:12px;z-index:3;color:#fff;background:rgba(0,0,0,.5);padding:1px 6px;border-radius:8px;}

        /* ===== 两排 6 按钮区 ===== */
        .quick-grid{padding:0 12px 12px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
        .quick-grid .qbtn{
            display:flex;flex-direction:column;align-items:center;justify-content:center;
            padding:12px 4px;border-radius:10px;text-decoration:none;color:#222;
            background:#f5f5f5;font-size:12px;font-weight:500;line-height:1.2;
            transition:transform .12s ease,background .12s ease;
            position:relative;overflow:hidden;
        }
        .quick-grid .qbtn:active{transform:scale(.97);background:#ebebeb;}
        .quick-grid .qbtn .qi{font-size:22px;line-height:1;margin-bottom:6px;}

        /* 第二排 开通VIP / 个人中心 - 矮化 + 粉色 + 扫光 */
        .quick-grid .q-vip,
        .quick-grid .q-me{
            flex-direction:row;justify-content:center;gap:6px;
            padding:8px 10px;font-size:13px;height:36px;
            color:#fff;background:linear-gradient(135deg,#ff8eb3,#ff5b8a);
            box-shadow:0 2px 8px rgba(255,91,138,.25);
        }
        .quick-grid .q-vip .qi,
        .quick-grid .q-me .qi{font-size:15px;margin:0;}
        .quick-grid .q-vip:active,
        .quick-grid .q-me:active{background:linear-gradient(135deg,#f47ba3,#e84a78);}

        /* 扫光动画 */
        .quick-grid .q-vip::before,
        .quick-grid .q-me::before{
            content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
            background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);
            transform:skewX(-20deg);animation:sweepLight 2.4s linear infinite;
            pointer-events:none;
        }
        @keyframes sweepLight{
            0%{left:-120%;}
            100%{left:130%;}
        }

        .quick-grid .q-cat{background:#fff5f7;color:#ff5b8a;}
        .quick-grid .q-cat.is-active{background:#ff5b8a;color:#fff;}

        /* ===== 分类切换 tab ===== */
        .cat-tabs{
            display:flex;align-items:center;gap:6px;padding:6px 12px 4px;
            border-top:1px solid #f0f0f0;background:#fafafa;
        }
        .cat-tabs a{
            flex:1;text-align:center;padding:8px 0;border-radius:8px;
            font-size:14px;color:#666;text-decoration:none;font-weight:500;
        }
        .cat-tabs a.is-active{background:#fe2c55;color:#fff;}
        .cat-tabs .ct-count{display:inline-block;margin-left:4px;font-size:12px;opacity:.85;}

        /* IP标签适配白底 */
        .ip-tag {
            background: #eeeeee;
            color: #333;
            padding: 4px 8px;
            border-radius: 4px;
            font-size:13px;
            display:inline-block;
            margin:10px 0 20px;
        }
        /* 底部版权文字颜色加深 */
        .copyright-text {
            color:#666 !important;
        }

        /* ========== 在线客服入口按钮 ========== */
        .cs-row{display:flex;align-items:center;gap:8px;margin:10px 0 20px;flex-wrap:wrap;}
        .cs-btn{
            display:inline-flex;align-items:center;gap:6px;
            background:linear-gradient(135deg,#ff5b8a,#fe2c55);
            color:#fff;padding:6px 14px;border-radius:18px;font-size:13px;font-weight:600;
            box-shadow:0 3px 10px rgba(254,44,85,.25);
            border:none;cursor:pointer;
            transition:transform .15s;
        }
        .cs-btn:active{transform:scale(.96);}
        .cs-btn .dot{
            width:8px;height:8px;border-radius:50%;background:#7CFFA8;box-shadow:0 0 6px #7CFFA8;
            animation:csBlink 1.4s infinite;
        }
        @keyframes csBlink{0%,100%{opacity:1;}50%{opacity:.4;}}
        .cs-btn .badge{
            display:none;background:#fff;color:#fe2c55;font-size:10px;font-weight:700;
            padding:0 6px;border-radius:8px;margin-left:2px;
        }
        .cs-btn.has-new .badge{display:inline-block;}

        /* ========== 客服弹窗 ========== */
        .cs-mask{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9998;display:none;align-items:flex-end;justify-content:center;}
        .cs-mask.show{display:flex;}
        .cs-panel{
            background:#fff;width:100%;max-width:480px;height:80vh;max-height:680px;
            border-radius:18px 18px 0 0;display:flex;flex-direction:column;overflow:hidden;
            box-shadow:0 -10px 40px rgba(0,0,0,.25);
            animation:csSlideUp .28s ease;
        }
        @keyframes csSlideUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
        .cs-header{
            background:linear-gradient(135deg,#ff5b8a,#fe2c55);color:#fff;padding:14px 16px;
            display:flex;align-items:center;gap:10px;position:relative;
        }
        .cs-avatar{
            width:38px;height:38px;border-radius:50%;background:#fff;color:#fe2c55;
            display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;
            box-shadow:0 2px 6px rgba(0,0,0,.18);
        }
        .cs-info .t{font-size:15px;font-weight:600;display:flex;align-items:center;gap:6px;}
        .cs-info .s{font-size:11px;opacity:.9;margin-top:1px;}
        .cs-info .s::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#7CFFA8;margin-right:4px;vertical-align:1px;}
        .cs-close{
            position:absolute;right:12px;top:50%;transform:translateY(-50%);
            width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.18);
            color:#fff;border:none;font-size:18px;cursor:pointer;line-height:1;
        }
        .cs-body{flex:1;overflow-y:auto;background:#f5f5f7;padding:12px;display:flex;flex-direction:column;gap:8px;}
        .cs-body::-webkit-scrollbar{width:4px;}
        .cs-body::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:2px;}
        .cs-msg{display:flex;gap:6px;align-items:flex-end;max-width:80%;}
        .cs-msg .av{
            width:30px;height:30px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
            font-size:13px;font-weight:700;
        }
        .cs-msg .bubble{
            padding:9px 12px;border-radius:14px;font-size:14px;line-height:1.45;word-break:break-word;
            box-shadow:0 1px 2px rgba(0,0,0,.05);
        }
        .cs-msg .time{font-size:10px;color:#999;margin-top:2px;text-align:center;align-self:center;}
        .cs-msg.user{margin-left:auto;flex-direction:row-reverse;}
        .cs-msg.user .av{background:#fe2c55;color:#fff;}
        .cs-msg.user .bubble{background:#fe2c55;color:#fff;border-bottom-right-radius:4px;}
        .cs-msg.admin .av{background:#fff;color:#fe2c55;border:1px solid #ffd5e0;}
        .cs-msg.admin .bubble{background:#fff;color:#222;border-bottom-left-radius:4px;}
        .cs-msg.system{margin:0 auto;}
        .cs-msg.system .bubble{background:rgba(0,0,0,.08);color:#666;font-size:12px;border-radius:8px;padding:4px 10px;}
        .cs-msg .bubble img{max-width:180px;max-height:240px;border-radius:8px;display:block;cursor:pointer;}
        .cs-msg .bubble video{max-width:220px;max-height:300px;border-radius:8px;display:block;background:#000;}

        .cs-empty{text-align:center;color:#999;padding:60px 20px;font-size:13px;}
        .cs-empty .ic{font-size:48px;margin-bottom:10px;}

        .cs-input{
            border-top:1px solid #eee;background:#fff;padding:8px 10px;
            display:flex;flex-direction:column;gap:6px;
        }
        .cs-input .row1{display:flex;align-items:center;gap:6px;}
        .cs-input textarea{
            flex:1;resize:none;border:1px solid #e8e8ef;border-radius:18px;padding:8px 12px;
            font-size:14px;line-height:1.4;min-height:38px;max-height:90px;outline:none;background:#f9fafc;
        }
        .cs-input textarea:focus{border-color:#ff5b8a;background:#fff;}
        .cs-input .send-btn{
            background:linear-gradient(135deg,#ff5b8a,#fe2c55);color:#fff;border:none;
            padding:8px 16px;border-radius:18px;font-size:14px;font-weight:600;cursor:pointer;
        }
        .cs-input .send-btn:disabled{opacity:.5;cursor:not-allowed;}
        .cs-input .row2{display:flex;align-items:center;gap:14px;padding:0 4px;}
        .cs-input .tool{
            display:flex;align-items:center;justify-content:center;gap:4px;
            color:#666;font-size:12px;background:none;border:none;cursor:pointer;padding:4px 6px;
        }
        .cs-input .tool .ic{font-size:18px;}

        /* 关闭会话提示 */
        .cs-closed{padding:14px 16px;background:#fff7e6;color:#ad6800;font-size:13px;text-align:center;border-top:1px solid #ffe0a0;}
        .cs-closed a{color:#fe2c55;font-weight:600;cursor:pointer;text-decoration:underline;}
    </style>

</head>

<body>

    <!-- 顶部背景图 -->

    <div class="backdrop-wrap">

        <img class="backdrop-img" src="<?php echo htmlspecialchars($userInfo['backdrop_img']); ?>" alt="背景" onerror="this.style.background='#eee'">

        <div class="avatar-box">

            <img class="avatar-img" src="<?php echo htmlspecialchars($userInfo['avatar']); ?>" alt="头像" onerror="this.style.background='#ddd'">

        </div>

    </div>

    <!-- 用户信息区 -->

    <div class="user-info" style="padding:70px 16px 0;">
        <div class="nickname" style="font-size:28px;font-weight:bold;margin-bottom:6px;">
            <?php echo htmlspecialchars($userInfo['nickname']); ?>
            <?php if ($isVip): ?><span class="vip-badge" style="background:#ff3c57;color:#fff;padding:2px 6px;border-radius:4px;font-size:12px;margin-left:6px;">VIP</span><?php endif; ?>
        </div>
        <div class="douyin-id" style="color:#777;font-size:14px;margin-bottom:20px;">抖音号：<?php echo htmlspecialchars($userInfo['douyin_id']); ?></div>

        <div class="data-row" style="display:flex;gap:32px;margin-bottom:20px;">
            <div class="data-item text-center">
                <div class="num" style="font-size:22px;font-weight:bold;"><?php echo htmlspecialchars($userInfo['total_like']); ?></div>
                <div class="text" style="font-size:14px;color:#666;">获赞</div>
            </div>
            <div class="data-item text-center">
                <div class="num" style="font-size:22px;font-weight:bold;"><?php echo htmlspecialchars($userInfo['follow_num']); ?></div>
                <div class="text" style="font-size:14px;color:#666;">关注</div>
            </div>
            <div class="data-item text-center">
                <div class="num" style="font-size:22px;font-weight:bold;"><?php echo htmlspecialchars($userInfo['fans_num']); ?></div>
                <div class="text" style="font-size:14px;color:#666;">粉丝</div>
            </div>
        </div>

        <div class="bio-text" style="font-size:15px;line-height:1.6;margin-bottom:12px;white-space:pre-line;">
            <?php echo nl2br(htmlspecialchars($userInfo['bio'])); ?>
        </div>

        <div class="ip-tag">IP属地：<?php echo htmlspecialchars($userInfo['ip_location']); ?></div>

        <!-- 在线客服 + IP 同行展示 -->
        <div class="cs-row">
            <button type="button" class="cs-btn" id="csOpenBtn" onclick="csOpen()">
                <span class="dot"></span>
                <span>在线客服</span>
                <span class="badge" id="csBadge">新消息</span>
            </button>
            <span style="font-size:11px;color:#999">有问题点这里联系我们</span>
        </div>

        <!-- 两排6选项：4 + 2 -->
        <div class="quick-grid">
            
            </a>

            <a class="qbtn q-vip" href="vip.php" style="grid-column:span 2">
                <div class="qi"></div>
                <div><?php echo $isVip ? '续费 VIP' : '开通 VIP'; ?></div>
            </a>
            <a class="qbtn q-me" href="user/login.php" style="grid-column:span 2">
                <div class="qi"></div>
                <div>个人中心</div>
            </a>
        </div>

        <!-- 分类 tab：作品标题下显示 -->
        <div class="cat-tabs">
            <a class="<?= $catType===''  ?'is-active':'' ?>" href="index.php">全部 <span class="ct-count"><?= (int)$allTotal ?></span></a>
            <a class="<?= $catType==='video' ?'is-active':'' ?>" href="index.php?cat=video">视频 <span class="ct-count"><?= (int)$videoTotal ?></span></a>
            <a class="<?= $catType==='photo' ?'is-active':'' ?>" href="index.php?cat=photo">图片 <span class="ct-count"><?= (int)$photoTotal ?></span></a>
        </div>

        <div class="work-title" style="display:flex;align-items:center;gap:6px;font-size:20px;padding:8px 0 12px;">作品 <?php echo (int)count($worksList); ?> ▾</div>

        <div class="works-grid" style="display:grid;grid-template-columns:repeat(3,1fr);gap:2px;">
            <?php if (!$worksList): ?>
                <div style="grid-column:1/-1;text-align:center;color:#888;padding:60px 20px">
                    <div style="font-size:32px;margin-bottom:8px"></div>
                    <div>暂无作品 敬请期待！<a href="admin/login.php" style="color:#fe2c55"></a></div>
                </div>
            <?php else: foreach ($worksList as $work):
                $locked = !$isVip;
                $imgCount = 0;
                if (($work['type'] ?? 'video') === 'photo' && !empty($work['images'])) {
                    $tmp = json_decode($work['images'], true);
                    if (is_array($tmp)) $imgCount = count($tmp);
                }
            ?>
            <a class="work-item <?= $locked ? 'locked' : '' ?>" href="play.php?id=<?= (int)$work['id'] ?>">
                <img class="work-cover" src="<?php echo htmlspecialchars($work['cover']); ?>" alt="作品封面">
                <?php if (($work['type'] ?? 'video') === 'video'): ?>
                    <div class="play-ic">▶</div>
                    <div class="type-tag">视频</div>
                <?php else: ?>
                    <div class="type-tag">图片</div>
                    <?php if ($imgCount > 1): ?><div class="img-count"><?= (int)$imgCount ?>张</div><?php endif; ?>
                <?php endif; ?>
                <?php if ($locked): ?><div class="lock-tag">vip</div><?php endif; ?>
                <div class="work-like">♡ <?php echo htmlspecialchars($work['likes']); ?></div>
            </a>
            <?php endforeach; endif; ?>
        </div>

        <div class="copyright-text" style="text-align:center;color:#444;padding:20px 0;font-size:12px">
            © <?php echo date('Y'); ?> 瀚宇独家开发-颜遇系统
        </div>
    </div>

    <!-- ===== 在线客服弹窗 ===== -->
    <div class="cs-mask" id="csMask" onclick="if(event.target===this)csClose()">
        <div class="cs-panel">
            <div class="cs-header">
                <div class="cs-avatar">客</div>
                <div class="cs-info">
                    <div class="t">在线客服 <span style="font-size:11px;background:rgba(255,255,255,.2);padding:1px 6px;border-radius:6px">官方</span></div>
                    <div class="s">在线服务 · 工作时间 9:00-22:00</div>
                </div>
                <button class="cs-close" type="button" onclick="csClose()">×</button>
            </div>
            <div class="cs-body" id="csBody">
                <div class="cs-empty"><div class="ic"></div>正在为您接入客服…</div>
            </div>
            <div class="cs-input" id="csInputBox">
                <div class="row1">
                    <textarea id="csText" rows="1" placeholder="请输入消息…" onkeydown="if(event.keyCode===13&&!event.shiftKey){event.preventDefault();csSendText();}"></textarea>
                    <button class="send-btn" type="button" id="csSendBtn" onclick="csSendText()">发送</button>
                </div>
                <div class="row2">
                    <button class="tool" type="button" onclick="csPickFile('image')"><span class="ic"></span><span>图片</span></button>
                    <button class="tool" type="button" onclick="csPickFile('video')"><span class="ic"></span><span>视频</span></button>
                    <span style="flex:1"></span>
                    <span style="font-size:11px;color:#bbb">按 Enter 发送</span>
                </div>
                <input type="file" id="csFile" accept="image/*,video/*" style="display:none">
            </div>
        </div>
    </div>

    <script>
// ===== 在线客服 =====
var CS = {
    sessionId: 0,
    lastId: 0,
    pollTimer: null,
    closed: false,
    renderedIds: {},
};

function csToast(msg){
    var d = document.createElement('div');
    d.textContent = msg;
    d.style.cssText = 'position:fixed;top:30%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.78);color:#fff;padding:10px 18px;border-radius:20px;font-size:13px;z-index:99999';
    document.body.appendChild(d);
    setTimeout(function(){d.remove();},1800);
}

function csOpen(){
    var m = document.getElementById('csMask');
    m.classList.add('show');
    document.body.style.overflow = 'hidden';
    if (!CS.sessionId) csInit();
    else { csScrollBottom(); csStartPoll(); }
    document.getElementById('csBadge').style.display = 'none';
    document.getElementById('csOpenBtn').classList.remove('has-new');
}

function csClose(){
    document.getElementById('csMask').classList.remove('show');
    document.body.style.overflow = '';
    if (CS.pollTimer) { clearInterval(CS.pollTimer); CS.pollTimer = null; }
}

function csInit(){
    var fd = new FormData();
    fd.append('action', 'open_session');
    fetch('chat_api.php', { method: 'POST', body: fd, credentials: 'same-origin' })
        .then(function(r){ return r.json(); })
        .then(function(j){
            if (j.ok) {
                CS.sessionId = j.session_id;
                CS.closed = (j.status === 0);
                csLoadHistory();
                csStartPoll();
            } else {
                csToast(j.msg || '接入失败');
            }
        }).catch(function(){ csToast('网络错误'); });
}

function csLoadHistory(){
    var body = document.getElementById('csBody');
    body.innerHTML = '';
    CS.renderedIds = {};
    fetch('chat_api.php?' + new URLSearchParams({action:'poll', session_id:CS.sessionId, after_id:0}), {credentials:'same-origin'})
        .then(function(r){ return r.json(); })
        .then(function(j){
            if (j.ok) {
                if (!j.msgs.length) {
                    body.innerHTML = '<div class="cs-msg admin"><div class="bubble">您好！很高兴为您服务，请问有什么可以帮您？</div></div>' +
                                     '<div class="cs-msg system"><div class="bubble">消息仅用于客服沟通，请勿违法违规行为！</div></div>';
                } else {
                    j.msgs.forEach(function(m){ csRenderMsg(m); });
                }
                CS.lastId = j.msgs.length ? j.msgs[j.msgs.length-1].id : 0;
                csScrollBottom();
                csCheckClosed(j.session_status);
            }
        });
}

function csStartPoll(){
    if (CS.pollTimer) clearInterval(CS.pollTimer);
    CS.pollTimer = setInterval(function(){
        if (!CS.sessionId) return;
        fetch('chat_api.php?' + new URLSearchParams({action:'poll', session_id:CS.sessionId, after_id:CS.lastId}), {credentials:'same-origin'})
            .then(function(r){ return r.json(); })
            .then(function(j){
                if (j.ok) {
                    var hasNew = false;
                    j.msgs.forEach(function(m){
                        if (CS.renderedIds[m.id]) return;
                        csRenderMsg(m);
                        CS.lastId = Math.max(CS.lastId, m.id);
                        if (m.sender_type === 'admin') hasNew = true;
                    });
                    if (hasNew) csScrollBottom();
                    csCheckClosed(j.session_status);
                }
            }).catch(function(){});
    }, 1500);
}

function csRenderMsg(m){
    if (CS.renderedIds[m.id]) return;
    CS.renderedIds[m.id] = true;
    var body = document.getElementById('csBody');
    var wrap = document.createElement('div');
    wrap.className = 'cs-msg ' + (m.sender_type === 'user' ? 'user' : (m.sender_type === 'admin' ? 'admin' : 'system'));
    var av = '', bubble = '';
    if (m.sender_type === 'user') av = '<div class="av">我</div>';
    else if (m.sender_type === 'admin') av = '<div class="av">客</div>';
    var t = csFormatTime(m.created_at);
    var timeHtml = '<div class="time">' + t + '</div>';
    if (m.msg_type === 'text') {
        bubble = '<div class="bubble">' + csEscapeHtml(m.content) + '</div>';
    } else if (m.msg_type === 'image') {
        bubble = '<div class="bubble"><img src="' + csEscapeHtml(m.content) + '" onclick="window.open(this.src)"></div>';
    } else if (m.msg_type === 'video') {
        bubble = '<div class="bubble"><video src="' + csEscapeHtml(m.content) + '" controls playsinline></video></div>';
    } else {
        bubble = '<div class="bubble">' + csEscapeHtml(m.content) + '</div>';
    }
    wrap.innerHTML = av + bubble + timeHtml;
    body.appendChild(wrap);
}

function csFormatTime(ts){
    var d = new Date(ts * 1000);
    var pad = function(n){ return n < 10 ? '0' + n : '' + n; };
    return pad(d.getHours()) + ':' + pad(d.getMinutes());
}
function csEscapeHtml(s){
    return String(s == null ? '' : s).replace(/[&<>"']/g, function(c){
        return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c];
    });
}
function csScrollBottom(){
    var b = document.getElementById('csBody');
    setTimeout(function(){ b.scrollTop = b.scrollHeight; }, 30);
}

function csSendText(){
    var ta = document.getElementById('csText');
    var txt = ta.value.trim();
    if (!txt) return;
    if (CS.closed) { csToast('会话已结束'); return; }
    var fd = new FormData();
    fd.append('action', 'send');
    fd.append('session_id', CS.sessionId);
    fd.append('msg_type', 'text');
    fd.append('content', txt);
    var btn = document.getElementById('csSendBtn');
    btn.disabled = true;
    fetch('chat_api.php', { method:'POST', body: fd, credentials:'same-origin' })
        .then(function(r){ return r.json(); })
        .then(function(j){
            btn.disabled = false;
            if (j.ok) {
                ta.value = '';
                ta.style.height = '38px';
            } else {
                csToast(j.msg || '发送失败');
            }
        }).catch(function(){ btn.disabled = false; csToast('网络错误'); });
}

function csPickFile(type){
    var inp = document.getElementById('csFile');
    inp.value = '';
    inp.accept = type === 'image' ? 'image/*' : 'video/*';
    inp.onchange = function(){
        if (!inp.files || !inp.files[0]) return;
        csUploadFile(inp.files[0], type);
    };
    inp.click();
}

function csUploadFile(file, type){
    if (CS.closed) { csToast('会话已结束'); return; }
    if (type === 'image' && file.size > 5*1024*1024) { csToast('图片最大 5MB'); return; }
    if (type === 'video' && file.size > 50*1024*1024) { csToast('视频最大 50MB'); return; }
    csToast(type === 'image' ? '图片发送中…' : '视频发送中…');
    var fd = new FormData();
    fd.append('action', 'send');
    fd.append('session_id', CS.sessionId);
    fd.append('msg_type', type);
    fd.append('file', file);
    fetch('chat_api.php', { method:'POST', body: fd, credentials:'same-origin' })
        .then(function(r){ return r.json(); })
        .then(function(j){
            if (!j.ok) csToast(j.msg || '发送失败');
        }).catch(function(){ csToast('网络错误'); });
}

function csCheckClosed(st){
    if (st === 0 && !CS.closed) {
        CS.closed = true;
        var body = document.getElementById('csBody');
        var d = document.createElement('div');
        d.className = 'cs-msg system';
        d.innerHTML = '<div class="bubble">客服已结束本次会话</div>';
        body.appendChild(d);
        csScrollBottom();
    }
}

// 自动调整 textarea 高度
document.addEventListener('DOMContentLoaded', function(){
    var ta = document.getElementById('csText');
    if (ta) {
        ta.addEventListener('input', function(){
            ta.style.height = '38px';
            ta.style.height = Math.min(ta.scrollHeight, 90) + 'px';
        });
    }
});
    </script>
</body>

</html>