MovieLog_Server/detail.php

<?php
// ============================================
// 文件: detail.php (含观影人头像)
// ============================================

require_once 'config.php';
checkLogin();

$id = isset($_GET['id']) ? (int)$_GET['id'] : 0;
if ($id <= 0) {
    header('Location: index.php');
    exit;
}

$movie = getMovie($id);
if (!$movie) {
    header('Location: index.php');
    exit;
}

$admin = getCurrentAdmin();
$adminId = (int)($admin['id'] ?? 0);

// ---------- 评价与讨论 ----------
// 规则：只要有登录账号就能对任意一部电影打分（1-10）+ 写评价，并在别人的评价
// 下面参与讨论；评价人是「账号」（admins），与「观影人」（persons / viewers）无关。
// 提交后一律重定向回本页（POST → 重定向 → GET），刷新不会重复提交，
// 一次性提示走 session。
$rvFlash = null;
if (isset($_SESSION['rv_flash'])) {
    $rvFlash = $_SESSION['rv_flash'];
    unset($_SESSION['rv_flash']);
}

$rvError        = '';    // 评价表单的错误
$rvFormRating   = 0;
$rvFormContent  = '';
$rvCommentErrId = 0;     // 哪一条评价的讨论表单报错
$rvCommentErr   = '';

// 当前账号已有的评价（有则表单变成「修改」）
$myReview = getMyReview($id, $adminId);
if ($myReview) {
    $rvFormRating  = (int)$myReview['rating'];
    $rvFormContent = $myReview['content'];
}

if ($_SERVER['REQUEST_METHOD'] === 'POST' && $adminId > 0) {
    $rvAction    = $_POST['action'] ?? '';
    $postedMovie = (int)($_POST['movie_id'] ?? 0);

    // movie_id 必须对得上：表单里的 id 是客户端可控的，防止写到别的电影上
    if ($postedMovie === $id) {
        if ($rvAction === 'save_review') {
            $rating  = (int)($_POST['rating'] ?? 0);
            $content = trim((string)($_POST['content'] ?? ''));
            $rvFormRating  = $rating;
            $rvFormContent = $content;

            if ($rating < 1 || $rating > 10) {
                $rvError = '请先选一个 1-10 的评分';
            } elseif ($content === '') {
                $rvError = '评价内容不能为空';
            } elseif (reviewTextLength($content) > REVIEW_CONTENT_MAX) {
                $rvError = '评价内容太长了（最多 ' . REVIEW_CONTENT_MAX . ' 字）';
            } elseif (saveReview($id, $adminId, $rating, $content)) {
                $_SESSION['rv_flash'] = ['type' => 'success', 'msg' => $myReview ? '评价已更新' : '评价已发布'];
                header('Location: detail.php?id=' . $id . '#reviews');
                exit;
            } else {
                $rvError = '保存失败，请稍后再试';
            }

        } elseif ($rvAction === 'delete_review') {
            $reviewId = (int)($_POST['review_id'] ?? 0);
            if (deleteReview($reviewId, $adminId)) {
                $_SESSION['rv_flash'] = ['type' => 'success', 'msg' => '评价已删除'];
            } else {
                $_SESSION['rv_flash'] = ['type' => 'error', 'msg' => '只能删除自己的评价'];
            }
            header('Location: detail.php?id=' . $id . '#reviews');
            exit;

        } elseif ($rvAction === 'add_comment') {
            $reviewId = (int)($_POST['review_id'] ?? 0);
            $content  = trim((string)($_POST['content'] ?? ''));
            $feelings = normalizeFeelings($_POST['feelings'] ?? []);
            $review   = getReviewById($reviewId);

            if ($content === '') {
                $rvCommentErrId = $reviewId;
                $rvCommentErr   = '讨论内容不能为空';
            } elseif (reviewTextLength($content) > REVIEW_COMMENT_MAX) {
                $rvCommentErrId = $reviewId;
                $rvCommentErr   = '讨论内容太长了（最多 ' . REVIEW_COMMENT_MAX . ' 字）';
            } elseif (!$review || (int)$review['movie_id'] !== $id) {
                $rvCommentErrId = $reviewId;
                $rvCommentErr   = '这条评价不存在';
            } else {
                $newId = addReviewComment($reviewId, $adminId, $content, $feelings);
                if ($newId) {
                    $_SESSION['rv_flash'] = ['type' => 'success', 'msg' => '讨论已发表'];
                    header('Location: detail.php?id=' . $id . '#reviews');
                    exit;
                }
                $rvCommentErrId = $reviewId;
                $rvCommentErr   = '保存失败，请稍后再试';
            }

        } elseif ($rvAction === 'delete_comment') {
            $commentId = (int)($_POST['comment_id'] ?? 0);
            if (deleteReviewComment($commentId, $adminId)) {
                $_SESSION['rv_flash'] = ['type' => 'success', 'msg' => '讨论已删除'];
            } else {
                $_SESSION['rv_flash'] = ['type' => 'error', 'msg' => '只能删除自己的讨论'];
            }
            header('Location: detail.php?id=' . $id . '#reviews');
            exit;
        }
    }
}

$reviews  = getMovieReviews($id);
$rvStats  = reviewStats($id);
$feelings = feelingCatalog();
// 讨论的错误提示默认贴在那条评价自己的表单上；但如果出错的评价根本不在这部电影
// 下（比如被改过的 review_id），页面上找不到对应的表单，就退化成整段顶部的提示，
// 否则错误会被静默吞掉。
$rvCommentErrShown = false;
if ($rvCommentErrId > 0) {
    foreach ($reviews as $rv) {
        if ((int)$rv['id'] === $rvCommentErrId) { $rvCommentErrShown = true; break; }
    }
}
// 1-10 分对应的文案，交给前端实时显示（下标 = 分值 - 1）
$rvRatingWords = array_map('ratingWord', range(1, 10));

// ---------- 灯箱图片序列：海报 → 票根 → 观影照片 ----------
// 以前每张图都是用 JS 的 window.open 弹到新窗口，没有关闭按钮、体验很差。
// 现在把所有图片收进这一个序列：点任意一张都在当前页弹出查看，
// 可以左右翻着看票根、合影等，Esc / 点空白处关闭。
// 这里一次性组装，英雄区海报与下方图库共用同一套下标。
$gallery = [];
$heroIndex   = -1;   // 海报在序列里的下标（没有真实海报时不点亮英雄区）
$ticketIndex = -1;
$photoIndexes = [];

$posterUrl = posterUrl($movie['poster_path']);
$hasRealPoster = ($posterUrl !== '' && strpos($posterUrl, 'placeholder') === false);
if ($hasRealPoster) {
    $gallery[] = [
        'url'     => $posterUrl,
        'label'   => '🖼️ 海报',
        'caption' => '电影海报 · ' . $movie['title'],
    ];
    $heroIndex = 0;
}

$hasTicket = storageExists($movie['ticket_path'] ?? '');
if ($hasTicket) {
    $gallery[] = [
        'url'     => storageUrl($movie['ticket_path']),
        'label'   => '🎫 电影票',
        'caption' => '电影票根 · ' . $movie['title'],
    ];
    $ticketIndex = count($gallery) - 1;
}

// 观影照片：旧字段 photo_path（历史单张）+ movie_photos（多张）
$all_photos = [];
if (storageExists($movie['photo_path'] ?? '')) {
    $all_photos[] = ['path' => $movie['photo_path'], 'label' => '📸 旧照片'];
}
foreach ($movie['photos'] as $p) {
    if (storageExists($p['photo_path'] ?? '')) {
        $all_photos[] = ['path' => $p['photo_path'], 'label' => '📸 观影照片'];
    }
}
foreach ($all_photos as $photo) {
    $gallery[] = [
        'url'     => storageUrl($photo['path']),
        'label'   => $photo['label'],
        'caption' => $photo['label'] . ' · ' . $movie['title'],
    ];
    $photoIndexes[] = count($gallery) - 1;
}
$hasGallery = !empty($gallery);
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= h($movie['title']) ?> - 电影日志</title>
    <link rel="stylesheet" href="css/style.css">
    <style>
        .detail-container {
            max-width: 900px;
            margin: 0 auto;
            padding: 20px;
        }
        .detail-back {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--text-secondary);
            text-decoration: none;
            font-size: 15px;
            margin-bottom: 24px;
            transition: color 0.2s;
        }
        .detail-back:hover {
            color: var(--primary);
        }
        .detail-hero {
            display: grid;
            grid-template-columns: 300px 1fr;
            gap: 32px;
            background: var(--card-bg);
            border-radius: 16px;
            padding: 28px;
            box-shadow: var(--shadow);
            margin-bottom: 24px;
        }
        .detail-poster {
            border-radius: 12px;
            overflow: hidden;
            background: var(--bg-secondary);
            aspect-ratio: 2/3;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .detail-poster img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .detail-poster .placeholder-poster {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #2d2d44, #1a1a2e);
            color: rgba(255,255,255,0.6);
            font-size: 48px;
        }
        .detail-poster .placeholder-poster .placeholder-title {
            font-size: 16px;
            margin-top: 8px;
            text-align: center;
            padding: 0 12px;
        }
        .detail-info {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .detail-info h1 {
            font-size: 28px;
            font-weight: 700;
            margin: 0 0 4px;
            color: var(--text-primary);
        }
        .detail-info .meta-row {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            font-size: 14px;
            color: var(--text-secondary);
        }
        .detail-info .meta-row span {
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .detail-info .info-text {
            color: var(--text-secondary);
            line-height: 1.7;
            margin: 8px 0 0;
            font-size: 15px;
            white-space: pre-wrap;
        }
        .detail-section {
            background: var(--card-bg);
            border-radius: 16px;
            padding: 24px 28px;
            box-shadow: var(--shadow);
            margin-bottom: 20px;
        }
        .detail-section h3 {
            font-size: 18px;
            font-weight: 600;
            margin: 0 0 16px;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .detail-section h3 .badge {
            font-size: 13px;
            font-weight: 400;
            background: var(--bg-secondary);
            padding: 2px 12px;
            border-radius: 20px;
            color: var(--text-secondary);
        }
        .viewers-list {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }
        .viewer-tag {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--bg-secondary);
            padding: 4px 12px 4px 6px;
            border-radius: 20px;
            font-size: 14px;
            color: var(--text-primary);
        }
        .viewer-tag img {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            object-fit: cover;
        }
        .cinema-info {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px 24px;
            font-size: 15px;
        }
        .cinema-info .label {
            color: var(--text-secondary);
        }
        .cinema-info .value {
            color: var(--text-primary);
        }
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 16px;
        }
        .gallery-item {
            border-radius: 10px;
            overflow: hidden;
            background: var(--bg-secondary);
            aspect-ratio: 4/3;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: transform 0.2s;
            position: relative;
        }
        .gallery-item:hover {
            transform: scale(1.02);
        }
        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .gallery-item .label-badge {
            position: absolute;
            bottom: 8px;
            left: 8px;
            background: rgba(0,0,0,0.7);
            color: #fff;
            font-size: 11px;
            padding: 2px 12px;
            border-radius: 12px;
            backdrop-filter: blur(4px);
        }
        .detail-actions {
            display: flex;
            gap: 12px;
            margin-top: 8px;
            flex-wrap: wrap;
        }
        .detail-actions .btn {
            padding: 10px 24px;
        }
        .btn-danger {
            background: #e74c3c;
            color: #fff;
        }
        .btn-danger:hover {
            background: #c0392b;
        }
        .remark-text {
            background: var(--bg-secondary);
            padding: 12px 16px;
            border-radius: 8px;
            color: var(--text-primary);
            border-left: 4px solid var(--primary);
            margin-top: 8px;
        }

        /* ---------- 评价与讨论 ---------- */
        .rv-flash {
            padding: 10px 14px;
            border-radius: 10px;
            font-size: 14px;
            margin-bottom: 16px;
        }
        .rv-flash-success {
            background: rgba(46, 204, 113, 0.10);
            border: 1px solid rgba(46, 204, 113, 0.28);
            color: #1e8449;
        }
        .rv-flash-error {
            background: rgba(231, 76, 60, 0.08);
            border: 1px solid rgba(231, 76, 60, 0.25);
            color: #c0392b;
        }
        .rv-error {
            background: rgba(231, 76, 60, 0.08);
            border: 1px solid rgba(231, 76, 60, 0.25);
            color: #c0392b;
            padding: 8px 12px;
            border-radius: 8px;
            font-size: 13px;
            margin-bottom: 10px;
        }
        .rv-form {
            background: var(--bg-secondary);
            border-radius: 12px;
            padding: 16px 18px;
            margin-bottom: 22px;
        }
        .rv-form-head {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 12px;
        }
        .rv-rating-row {
            display: flex;
            align-items: center;
            gap: 8px 14px;
            flex-wrap: wrap;
            margin-bottom: 12px;
        }
        .rv-rating-label {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
        }
        /* 1-10 打分：用原生 radio，没 JS 也能选；外观全在 + 后面的 span 上 */
        .rv-scale {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }
        .rv-num {
            position: relative;
        }
        .rv-num input {
            position: absolute;
            width: 1px;
            height: 1px;
            opacity: 0;
        }
        .rv-num span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 34px;
            height: 34px;
            padding: 0 6px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            /* --input-bg 在部分页面未定义，给个兜底 */
            background: var(--input-bg, var(--card-bg));
            color: var(--text-secondary);
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            user-select: none;
            transition: var(--transition);
        }
        .rv-num:hover span {
            border-color: var(--primary);
            color: var(--primary);
        }
        .rv-num input:checked + span {
            background: linear-gradient(135deg, var(--primary), var(--primary-light));
            border-color: transparent;
            color: #fff;
            box-shadow: 0 3px 10px rgba(230, 126, 34, 0.30);
        }
        .rv-num:focus-within span {
            outline: 2px solid var(--primary);
            outline-offset: 1px;
        }
        .rv-word {
            font-size: 13px;
            color: var(--text-secondary);
        }
        .rv-word.is-set {
            color: var(--primary);
            font-weight: 600;
        }
        .rv-textarea {
            width: 100%;
            min-height: 92px;
            resize: vertical;
            padding: 12px 14px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            font-size: 15px;
            font-family: inherit;
            line-height: 1.7;
            background: var(--input-bg, var(--card-bg));
            color: var(--text-primary);
            box-sizing: border-box;
        }
        .rv-textarea:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(230, 126, 34, 0.12);
        }
        .rv-textarea-sm {
            min-height: 62px;
            font-size: 14px;
        }
        .rv-form-foot {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 12px;
            margin-top: 10px;
            flex-wrap: wrap;
        }
        .rv-form-foot .rv-hint {
            margin-right: auto;
        }
        .rv-hint {
            font-size: 12px;
            color: var(--text-secondary);
        }
        .rv-empty {
            color: var(--text-secondary);
            font-size: 14px;
        }
        .rv-list {
            display: flex;
            flex-direction: column;
            gap: 18px;
        }
        .rv-item {
            border-top: 1px solid var(--border-color);
            padding-top: 16px;
        }
        .rv-item:first-child {
            border-top: none;
            padding-top: 0;
        }
        .rv-head {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .rv-avatar {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            object-fit: cover;
            flex: 0 0 auto;
        }
        .rv-avatar-sm {
            width: 26px;
            height: 26px;
        }
        .rv-who {
            flex: 1;
            min-width: 0;
        }
        .rv-name {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
        }
        .rv-mine {
            display: inline-block;
            vertical-align: middle;
            margin-left: 6px;
            font-size: 11px;
            line-height: 16px;
            background: var(--primary);
            color: #fff;
            border-radius: 6px;
            padding: 0 6px;
        }
        .rv-time {
            display: block;
            font-size: 12px;
            color: var(--text-secondary);
        }
        .rv-score {
            flex: 0 0 auto;
            font-size: 20px;
            font-weight: 700;
            color: var(--primary);
            font-variant-numeric: tabular-nums;
        }
        .rv-score-max {
            font-size: 12px;
            font-weight: 500;
            color: var(--text-secondary);
        }
        .rv-del {
            margin-left: auto;
        }
        .rv-del-btn {
            background: none;
            border: none;
            cursor: pointer;
            color: var(--text-secondary);
            font-size: 14px;
            line-height: 1;
            padding: 4px 6px;
            border-radius: 6px;
            transition: background-color 0.2s ease;
        }
        .rv-del-btn:hover {
            background: rgba(231, 76, 60, 0.12);
            color: #e74c3c;
        }
        /* 正文用 pre-wrap 保留换行，就不必再 nl2br 了（也避免转义后再插标签） */
        .rv-content {
            margin: 8px 0 2px 44px;
            font-size: 15px;
            line-height: 1.75;
            color: var(--text-primary);
            white-space: pre-wrap;
            word-break: break-word;
        }
        .rv-updated {
            margin-left: 44px;
            font-size: 12px;
            color: var(--text-secondary);
        }
        .rv-comments {
            margin: 10px 0 10px 44px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .rv-comment {
            display: flex;
            gap: 8px;
            background: var(--bg-secondary);
            border-radius: 10px;
            padding: 8px 12px;
        }
        .rv-c-body {
            flex: 1;
            min-width: 0;
        }
        .rv-c-head {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        .rv-c-head .rv-name {
            font-size: 13px;
        }
        .rv-c-text {
            font-size: 14px;
            line-height: 1.7;
            color: var(--text-primary);
            white-space: pre-wrap;
            word-break: break-word;
        }
        .rv-feelings {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin: 4px 0 2px;
        }
        .rv-comment-form {
            margin-left: 44px;
        }
        .rv-feeling-pick {
            margin-top: 8px;
        }
        .rv-pick-label {
            display: block;
            font-size: 12px;
            color: var(--text-secondary);
            margin-bottom: 6px;
        }
        .feel-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        .feel-chip {
            display: inline-flex;
        }
        /* 可勾选的感受：原生 checkbox，外观在 .feel-inner 上 */
        .feel-pick {
            position: relative;
        }
        .feel-pick input {
            position: absolute;
            width: 1px;
            height: 1px;
            opacity: 0;
        }
        .feel-inner {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 10px;
            border: 1px solid var(--border-color);
            border-radius: 20px;
            background: var(--input-bg, var(--card-bg));
            font-size: 13px;
            color: var(--text-secondary);
            cursor: pointer;
            user-select: none;
            transition: var(--transition);
        }
        .feel-pick:hover .feel-inner {
            border-color: var(--primary);
        }
        .feel-pick input:checked + .feel-inner {
            border-color: var(--primary);
            background: rgba(230, 126, 34, 0.12);
            color: var(--primary);
            font-weight: 600;
        }
        .feel-pick:focus-within .feel-inner {
            outline: 2px solid var(--primary);
            outline-offset: 1px;
        }
        .feel-emoji {
            font-size: 14px;
        }
        /* 已保存的感受：只读展示 */
        .feel-chip.is-static {
            align-items: center;
            gap: 4px;
            padding: 2px 10px;
            border-radius: 20px;
            background: rgba(230, 126, 34, 0.10);
            color: var(--primary);
            font-size: 12px;
        }
        @media (max-width: 600px) {
            .rv-content,
            .rv-updated,
            .rv-comments,
            .rv-comment-form {
                margin-left: 0;
            }
        }

        /* ---------- 图片灯箱（替代原来的 window.open 弹窗） ----------
           z-index 要压过导航栏（导航栏是 100），这里用 300。 */
        .lb-openable {
            cursor: zoom-in;
        }
        .lb-openable:focus-visible {
            outline: 2px solid var(--primary);
            outline-offset: 2px;
        }
        .lightbox {
            position: fixed;
            inset: 0;
            z-index: 300;
            display: none;
            align-items: center;
            justify-content: center;
            background: rgba(0, 0, 0, 0.88);
            backdrop-filter: blur(4px);
            /* 打开时不给滚动条留闪烁空间 */
            overscroll-behavior: contain;
        }
        .lightbox.open {
            display: flex;
        }
        .lb-stage {
            display: flex;
            align-items: center;
            justify-content: center;
            max-width: 92vw;
            max-height: 82vh;
        }
        .lb-img {
            max-width: 92vw;
            max-height: 78vh;
            width: auto;
            height: auto;
            object-fit: contain;
            border-radius: 8px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
            background: transparent;
            user-select: none;
            -webkit-user-drag: none;
        }
        .lb-btn {
            position: absolute;
            border: none;
            cursor: pointer;
            color: #fff;
            background: rgba(255, 255, 255, 0.12);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.2s ease;
            font-family: inherit;
        }
        .lb-btn:hover {
            background: rgba(255, 255, 255, 0.26);
        }
        .lb-btn:focus-visible {
            outline: 2px solid var(--primary);
            outline-offset: 2px;
        }
        /* 只有一张图时 JS 会加 hidden；但作者样式 display:flex 优先级高于
           UA 的 [hidden]{display:none}，必须显式写这条才能真正隐藏箭头。 */
        .lb-btn[hidden] {
            display: none;
        }
        .lb-close {
            top: 14px;
            right: 16px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            font-size: 18px;
            line-height: 1;
        }
        .lb-nav {
            top: 50%;
            transform: translateY(-50%);
            width: 48px;
            height: 48px;
            border-radius: 50%;
            font-size: 28px;
            line-height: 1;
            padding-bottom: 4px;   /* 让箭头符号视觉上居中 */
        }
        .lb-prev { left: 14px; }
        .lb-next { right: 14px; }
        .lb-bar {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 14px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            color: #fff;
            font-size: 14px;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
        }
        .lb-caption {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .lb-counter {
            flex: 0 0 auto;
            opacity: 0.75;
            font-variant-numeric: tabular-nums;
        }
        .lb-open { overflow: hidden; }   /* 给 <body> 加，弹出时锁背景滚动 */
        @media (max-width: 768px) {
            .detail-hero {
                grid-template-columns: 1fr;
                padding: 20px;
            }
            .detail-poster {
                max-width: 240px;
                margin: 0 auto;
            }
            .cinema-info {
                grid-template-columns: 1fr;
            }
            .gallery-grid {
                grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            }
        }
        @media (max-width: 480px) {
            .detail-section {
                padding: 16px 18px;
            }
            .detail-hero {
                padding: 16px;
            }
            .detail-info h1 {
                font-size: 22px;
            }
            /* 手机上手指够得到：箭头缩小位置也内收一点，给图片留出更多宽度 */
            .lb-nav {
                width: 40px;
                height: 40px;
                font-size: 24px;
            }
            .lb-prev { left: 6px; }
            .lb-next { right: 6px; }
            .lb-img {
                max-width: 88vw;
                max-height: 70vh;
            }
            .lb-bar {
                padding: 10px 14px;
                font-size: 13px;
            }
        }
    </style>
</head>
<body>
    <?php include 'nav.php'; ?>

    <main class="main-content">
        <div class="detail-container">
            <a href="index.php" class="detail-back">← 返回列表</a>

            <!-- 主信息 -->
            <div class="detail-hero">
                <div class="detail-poster<?= $hasRealPoster ? ' lb-openable' : '' ?>"
                     <?php if ($hasRealPoster): ?>
                         data-lb-index="0" role="button" tabindex="0"
                         aria-label="放大查看《<?= h($movie['title']) ?>》的电影海报"
                         title="点击查看大图"
                     <?php endif; ?>>
                    <?php if (!$hasRealPoster): ?>
                        <div class="placeholder-poster">
                            <span>🎬</span>
                            <span class="placeholder-title"><?= h($movie['title']) ?></span>
                        </div>
                    <?php else: ?>
                        <img src="<?= $posterUrl ?>" alt="<?= h($movie['title']) ?>">
                    <?php endif; ?>
                </div>
                <div class="detail-info">
                    <h1><?= h($movie['title']) ?></h1>
                    <div class="meta-row">
                        <span>📅 <?= $movie['watch_date'] ? date('Y年m月d日', strtotime($movie['watch_date'])) : '日期待补' ?></span>
                        <?php if ($movie['cinema_name']): ?>
                            <span>🏛️ <?= h($movie['cinema_name']) ?></span>
                        <?php endif; ?>
                        <span>🎫 观影人: <?= count($movie['viewers']) ?> 人</span>
                    </div>
                    <?php if ($movie['info']): ?>
                        <div class="info-text"><?= h($movie['info']) ?></div>
                    <?php endif; ?>
                    <?php if ($movie['remark']): ?>
                        <div class="remark-text">📝 <?= h($movie['remark']) ?></div>
                    <?php endif; ?>
                    <div class="detail-actions">
                        <a href="edit.php?id=<?= $movie['id'] ?>" class="btn btn-primary">✏️ 编辑</a>
                        <a href="delete.php?id=<?= $movie['id'] ?>" class="btn btn-danger" onclick="return confirm('确定要删除《<?= h($movie['title']) ?>》吗？此操作不可恢复！')">🗑️ 删除</a>
                    </div>
                </div>
            </div>

            <!-- 一起看的人（带头像） -->
            <div class="detail-section">
                <h3>👥 一起看的人 <span class="badge"><?= count($movie['viewers']) ?> 人</span></h3>
                <?php if (count($movie['viewers']) > 0): ?>
                    <div class="viewers-list">
                        <?php foreach ($movie['viewers'] as $viewer): ?>
                            <span class="viewer-tag" style="color: <?= h($viewer['person_color'] ?? '#888888') ?>;">
                                <img src="<?= getAvatarUrl($viewer['person_avatar'] ?? null, $viewer['name']) ?>" alt="<?= h($viewer['name']) ?>">
                                <?= h($viewer['name']) ?>
                            </span>
                        <?php endforeach; ?>
                    </div>
                <?php else: ?>
                    <p style="color: var(--text-secondary); font-size: 14px;">暂无记录</p>
                <?php endif; ?>
            </div>

            <!-- 电影院信息 -->
            <div class="detail-section">
                <h3>🏛️ 电影院信息</h3>
                <?php if ($movie['cinema_name']): ?>
                    <div class="cinema-info">
                        <span class="label">所在地方</span>
                        <span class="value"><?= h($movie['place'] ?? '-') ?></span>
                        <span class="label">影院名称</span>
                        <span class="value" style="color: <?= h($movie['cinema_color'] ?? '#888888') ?>;">
                            <?= h($movie['cinema_name']) ?>
                        </span>
                        <span class="label">详细地址</span>
                        <span class="value"><?= h($movie['cinema_address'] ?? '-') ?></span>
                    </div>
                <?php else: ?>
                    <p style="color: var(--text-secondary); font-size: 14px;">未记录电影院信息</p>
                <?php endif; ?>
            </div>

            <!-- 图片展示（票根 + 多张观影照片）
                 注意：$gallery / $hasTicket / $all_photos 已在页面顶部统一组装，
                 这里只负责渲染，避免同一份数据在两处各算一遍。 -->
            <?php if ($hasTicket || count($all_photos) > 0): ?>
                <div class="detail-section">
                    <h3>🖼️ 影像记录 <span class="badge"><?= count($all_photos) + ($hasTicket ? 1 : 0) ?> 张</span></h3>
                    <div class="gallery-grid">
                        <?php if ($hasTicket): ?>
                            <div class="gallery-item" data-lb-index="<?= $ticketIndex ?>"
                                 role="button" tabindex="0" aria-label="放大查看电影票根" title="点击查看大图">
                                <img src="<?= $gallery[$ticketIndex]['url'] ?>" alt="电影票">
                                <span class="label-badge">🎫 电影票</span>
                            </div>
                        <?php endif; ?>
                        <?php foreach ($all_photos as $i => $photo): ?>
                            <?php $idx = $photoIndexes[$i]; ?>
                            <div class="gallery-item" data-lb-index="<?= $idx ?>"
                                 role="button" tabindex="0" aria-label="放大查看观影照片" title="点击查看大图">
                                <img src="<?= $gallery[$idx]['url'] ?>" alt="观影照片">
                                <span class="label-badge"><?= $photo['label'] ?></span>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>
            <?php endif; ?>

            <!-- 评价与讨论
                 只要有登录账号就能打分（1-10）+ 写评价，并可以在任意一条评价下面参与讨论；
                 评价人是「账号」，与「观影人」无关——没去看过的人也能评。 -->
            <div class="detail-section" id="reviews">
                <h3>💬 评价与讨论
                    <span class="badge">
                        <?php if ($rvStats['count'] > 0): ?>
                            <?= $rvStats['count'] ?> 条评价 · 均分 <?= $rvStats['avg'] ?>
                        <?php else: ?>
                            还没有评价
                        <?php endif; ?>
                    </span>
                </h3>

                <?php if ($rvFlash): ?>
                    <div class="rv-flash rv-flash-<?= $rvFlash['type'] === 'success' ? 'success' : 'error' ?>">
                        <?= h($rvFlash['msg']) ?>
                    </div>
                <?php endif; ?>

                <!-- 我的评分 + 评价（已评过时这里就是「修改」） -->
                <form method="post" action="#reviews" class="rv-form" id="reviewForm">
                    <input type="hidden" name="action" value="save_review">
                    <input type="hidden" name="movie_id" value="<?= $id ?>">
                    <div class="rv-form-head"><?= $myReview ? '✏️ 修改我的评价' : '⭐ 写下我的评价' ?></div>
                    <div class="rv-rating-row">
                        <span class="rv-rating-label">我的评分</span>
                        <div class="rv-scale" role="radiogroup" aria-label="评分，1 分到 10 分">
                            <?php for ($i = 1; $i <= 10; $i++): ?>
                                <label class="rv-num" title="<?= $i ?> 分 · <?= h(ratingWord($i)) ?>">
                                    <input type="radio" name="rating" value="<?= $i ?>"<?= $rvFormRating === $i ? ' checked' : '' ?>>
                                    <span><?= $i ?></span>
                                </label>
                            <?php endfor; ?>
                        </div>
                        <span class="rv-word<?= $rvFormRating > 0 ? ' is-set' : '' ?>" id="rvWord">
                            <?= $rvFormRating > 0 ? $rvFormRating . ' 分 · ' . h(ratingWord($rvFormRating)) : '未评分' ?>
                        </span>
                    </div>
                    <?php if ($rvError): ?>
                        <div class="rv-error"><?= h($rvError) ?></div>
                    <?php endif; ?>
                    <textarea name="content" class="rv-textarea" maxlength="<?= REVIEW_CONTENT_MAX ?>"
                              placeholder="这部电影怎么样？剧情、表演、画面、音效……随便聊聊"><?= h($rvFormContent) ?></textarea>
                    <div class="rv-form-foot">
                        <span class="rv-hint">每个账号对每部电影只有一条评价，再次提交即为修改。</span>
                        <button type="submit" class="btn btn-primary btn-sm"><?= $myReview ? '💾 保存修改' : '📝 发表评价' ?></button>
                    </div>
                </form>

                <?php if (empty($reviews)): ?>
                    <p class="rv-empty">还没有人评价这部电影，你可以是第一个 👆</p>
                <?php else: ?>
                    <div class="rv-list">
                        <?php foreach ($reviews as $rv): ?>
                            <?php
                            $rvMine   = ((int)$rv['admin_id'] === $adminId);
                            $rvName   = ($rv['username'] !== null && $rv['username'] !== '') ? $rv['username'] : '已注销账号';
                            $rvRating = (int)$rv['rating'];
                            ?>
                            <div class="rv-item">
                                <div class="rv-head">
                                    <img class="rv-avatar" src="<?= getAvatarUrl($rv['avatar'] ?? null, $rvName) ?>" alt="">
                                    <div class="rv-who">
                                        <span class="rv-name"><?= h($rvName) ?></span>
                                        <?php if ($rvMine): ?><span class="rv-mine">我</span><?php endif; ?>
                                        <span class="rv-time"><?= h(substr((string)$rv['created_at'], 0, 16)) ?></span>
                                    </div>
                                    <span class="rv-score" title="<?= h(ratingWord($rvRating)) ?>"><?= $rvRating ?><span class="rv-score-max">/10</span></span>
                                    <?php if ($rvMine): ?>
                                        <form method="post" action="#reviews" class="rv-del"
                                              onsubmit="return confirm('删除我的这条评价？下面的讨论也会一起删除，不可恢复。')">
                                            <input type="hidden" name="action" value="delete_review">
                                            <input type="hidden" name="movie_id" value="<?= $id ?>">
                                            <input type="hidden" name="review_id" value="<?= $rv['id'] ?>">
                                            <button type="submit" class="rv-del-btn" title="删除我的评价" aria-label="删除我的评价">🗑️</button>
                                        </form>
                                    <?php endif; ?>
                                </div>
                                <div class="rv-content"><?= h($rv['content']) ?></div>
                                <?php if (!empty($rv['updated_at']) && $rv['updated_at'] !== $rv['created_at']): ?>
                                    <div class="rv-updated">已编辑 <?= h(substr((string)$rv['updated_at'], 0, 16)) ?></div>
                                <?php endif; ?>

                                <?php if (!empty($rv['comments'])): ?>
                                    <div class="rv-comments">
                                        <?php foreach ($rv['comments'] as $c): ?>
                                            <?php
                                            $cMine = ((int)$c['admin_id'] === $adminId);
                                            $cName = ($c['username'] !== null && $c['username'] !== '') ? $c['username'] : '已注销账号';
                                            ?>
                                            <div class="rv-comment">
                                                <img class="rv-avatar rv-avatar-sm" src="<?= getAvatarUrl($c['avatar'] ?? null, $cName) ?>" alt="">
                                                <div class="rv-c-body">
                                                    <div class="rv-c-head">
                                                        <span class="rv-name"><?= h($cName) ?></span>
                                                        <?php if ($cMine): ?><span class="rv-mine">我</span><?php endif; ?>
                                                        <span class="rv-time"><?= h(substr((string)$c['created_at'], 0, 16)) ?></span>
                                                        <?php if ($cMine): ?>
                                                            <form method="post" action="#reviews" class="rv-del"
                                                                  onsubmit="return confirm('删除我的这条讨论？')">
                                                                <input type="hidden" name="action" value="delete_comment">
                                                                <input type="hidden" name="movie_id" value="<?= $id ?>">
                                                                <input type="hidden" name="comment_id" value="<?= $c['id'] ?>">
                                                                <button type="submit" class="rv-del-btn" title="删除我的讨论" aria-label="删除我的讨论">✕</button>
                                                            </form>
                                                        <?php endif; ?>
                                                    </div>
                                                    <?php if (!empty($c['feelings'])): ?>
                                                        <div class="rv-feelings">
                                                            <?php foreach ($c['feelings'] as $fkey): ?>
                                                                <?php $f = feelingInfo($fkey); if (!$f) continue; ?>
                                                                <span class="feel-chip is-static" title="观后感受：<?= h($f['label']) ?>">
                                                                    <span class="feel-emoji"><?= $f['emoji'] ?></span><span class="feel-label"><?= h($f['label']) ?></span>
                                                                </span>
                                                            <?php endforeach; ?>
                                                        </div>
                                                    <?php endif; ?>
                                                    <div class="rv-c-text"><?= h($c['content']) ?></div>
                                                </div>
                                            </div>
                                        <?php endforeach; ?>
                                    </div>
                                <?php endif; ?>

                                <!-- 在这条评价下参与讨论：可多选观后感受 -->
                                <form method="post" action="#reviews" class="rv-comment-form">
                                    <input type="hidden" name="action" value="add_comment">
                                    <input type="hidden" name="movie_id" value="<?= $id ?>">
                                    <input type="hidden" name="review_id" value="<?= $rv['id'] ?>">
                                    <?php if ($rvCommentErrId === (int)$rv['id']): ?>
                                        <div class="rv-error"><?= h($rvCommentErr) ?></div>
                                    <?php endif; ?>
                                    <textarea name="content" class="rv-textarea rv-textarea-sm" maxlength="<?= REVIEW_COMMENT_MAX ?>"
                                              placeholder="说说你的看法…"></textarea>
                                    <div class="rv-feeling-pick">
                                        <span class="rv-pick-label">看完的感受（可多选）</span>
                                        <div class="feel-chips">
                                            <?php foreach ($feelings as $fkey => $f): ?>
                                                <label class="feel-chip feel-pick" title="<?= h($f['label']) ?>">
                                                    <input type="checkbox" name="feelings[]" value="<?= h($fkey) ?>">
                                                    <span class="feel-inner">
                                                        <span class="feel-emoji"><?= $f['emoji'] ?></span><span class="feel-label"><?= h($f['label']) ?></span>
                                                    </span>
                                                </label>
                                            <?php endforeach; ?>
                                        </div>
                                    </div>
                                    <div class="rv-form-foot">
                                        <button type="submit" class="btn btn-outline btn-sm">💬 发表讨论</button>
                                    </div>
                                </form>
                            </div>
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>

                <?php if ($rvCommentErr && !$rvCommentErrShown): ?>
                    <div class="rv-error" style="margin-top: 14px;"><?= h($rvCommentErr) ?></div>
                <?php endif; ?>
            </div>
        </div>
    </main>

    <?php if ($hasGallery): ?>
    <!-- 图片灯箱：点任意一张图在当前页弹出，可左右翻看 / Esc 关闭 -->
    <div class="lightbox" id="lightbox" role="dialog" aria-modal="true"
         aria-hidden="true" aria-label="图片查看器">
        <button type="button" class="lb-btn lb-close" id="lbClose" aria-label="关闭">✕</button>
        <button type="button" class="lb-btn lb-nav lb-prev" id="lbPrev" aria-label="上一张">‹</button>
        <button type="button" class="lb-btn lb-nav lb-next" id="lbNext" aria-label="下一张">›</button>
        <div class="lb-stage" id="lbStage">
            <img class="lb-img" id="lbImg" alt="">
        </div>
        <div class="lb-bar">
            <span class="lb-caption" id="lbCaption"></span>
            <span class="lb-counter" id="lbCounter"></span>
        </div>
    </div>

    <script>
    (function () {
        var GALLERY = <?= json_encode(
            array_values($gallery),
            JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT
        ) ?>;
        var box     = document.getElementById('lightbox');
        var stageEl = document.getElementById('lbStage');
        var imgEl   = document.getElementById('lbImg');
        var capEl   = document.getElementById('lbCaption');
        var cntEl   = document.getElementById('lbCounter');
        var closeEl = document.getElementById('lbClose');
        var prevEl  = document.getElementById('lbPrev');
        var nextEl  = document.getElementById('lbNext');
        if (!box || !GALLERY.length) return;

        var idx = 0;
        var opener = null;      // 记住是从哪张图点开的，关闭后焦点还回去

        function render() {
            var item = GALLERY[idx];
            // img 元素在整段浏览过程中是复用的，而 main.js 的破图兜底会给
            // <img> 打上 data-fallback-applied 标记后就不再处理；这里换图时清掉，
            // 保证每张新图失败时都能正常退回到占位图。
            // 注意：dataset.fallbackApplied 对应的属性名是 data-fallback-applied。
            // 这里用 removeAttribute 而不是 delete dataset.x —— 前者在所有浏览器都确定生效。
            imgEl.removeAttribute('data-fallback-applied');
            imgEl.src = item.url;
            imgEl.alt = item.caption || item.label;
            capEl.textContent = item.caption || item.label;
            cntEl.textContent = (idx + 1) + ' / ' + GALLERY.length;

            // 只有一张图时不显示左右箭头
            var multi = GALLERY.length > 1;
            prevEl.hidden = !multi;
            nextEl.hidden = !multi;

            // 预取相邻两张，翻页时不白屏
            [idx - 1, idx + 1].forEach(function (i) {
                var j = (i + GALLERY.length) % GALLERY.length;
                if (j !== idx) { var pre = new Image(); pre.src = GALLERY[j].url; }
            });
        }

        function open(i, trigger) {
            idx = Math.max(0, Math.min(GALLERY.length - 1, i));
            opener = trigger || null;
            box.classList.add('open');
            box.setAttribute('aria-hidden', 'false');
            document.body.classList.add('lb-open');     // 锁背景滚动
            render();
            closeEl.focus();
        }

        function close() {
            box.classList.remove('open');
            box.setAttribute('aria-hidden', 'true');
            document.body.classList.remove('lb-open');
            if (opener && opener.focus) opener.focus();
            opener = null;
        }

        function step(d) {
            idx = (idx + d + GALLERY.length) % GALLERY.length;   // 循环翻看
            render();
        }

        // 绑定所有触发点：英雄区海报 + 图库格子（都用 data-lb-index 标明下标）
        Array.prototype.forEach.call(document.querySelectorAll('[data-lb-index]'), function (el) {
            var i = parseInt(el.getAttribute('data-lb-index'), 10);
            if (isNaN(i)) return;
            el.addEventListener('click', function (e) { e.preventDefault(); open(i, el); });
            el.addEventListener('keydown', function (e) {
                if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); open(i, el); }
            });
        });

        closeEl.addEventListener('click', close);
        prevEl.addEventListener('click', function (e) { e.stopPropagation(); step(-1); });
        nextEl.addEventListener('click', function (e) { e.stopPropagation(); step(1); });

        // 点画面空白处关闭；点在图片或按钮上不关
        box.addEventListener('click', function (e) {
            if (e.target === box || e.target === stageEl) close();
        });
        imgEl.addEventListener('click', function (e) { e.stopPropagation(); });

        document.addEventListener('keydown', function (e) {
            if (!box.classList.contains('open')) return;
            if (e.key === 'Escape')         { close(); }
            else if (e.key === 'ArrowLeft') { e.preventDefault(); step(-1); }
            else if (e.key === 'ArrowRight'){ e.preventDefault(); step(1); }
        });

        // 移动端左右滑动翻页
        var tx = 0, ty = 0;
        stageEl.addEventListener('touchstart', function (e) {
            tx = e.changedTouches[0].clientX;
            ty = e.changedTouches[0].clientY;
        }, { passive: true });
        stageEl.addEventListener('touchend', function (e) {
            var dx = e.changedTouches[0].clientX - tx;
            var dy = e.changedTouches[0].clientY - ty;
            if (Math.abs(dx) > 40 && Math.abs(dx) > Math.abs(dy)) step(dx < 0 ? 1 : -1);
        }, { passive: true });
    })();
    </script>
    <?php endif; ?>

    <!-- 打分时实时提示「几分 · 怎么样」。
         纯增强：评分用的是原生 radio，没有 JS 也能正常选中并提交。 -->
    <script>
    (function () {
        var WORDS = <?= json_encode(
            $rvRatingWords,
            JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT
        ) ?>;
        var form = document.getElementById('reviewForm');
        var word = document.getElementById('rvWord');
        if (!form || !word) return;

        function sync() {
            var picked = form.querySelector('input[name="rating"]:checked');
            if (!picked) {
                word.textContent = '未评分';
                word.classList.remove('is-set');
                return;
            }
            var v = parseInt(picked.value, 10);
            word.textContent = v + ' 分 · ' + (WORDS[v - 1] || '');
            word.classList.add('is-set');
        }

        Array.prototype.forEach.call(form.querySelectorAll('input[name="rating"]'), function (el) {
            el.addEventListener('change', sync);
        });
        sync();
    })();
    </script>

    <script src="js/main.js"></script>
</body>
</html>