<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<%@ page import="org.springframework.web.util.HtmlUtils" %>
<%
    boolean owner = Boolean.TRUE.equals(request.getAttribute("owner"));
    String ctx = request.getContextPath();
    String gameIdValue = HtmlUtils.htmlEscape(String.valueOf(request.getAttribute("gameId")));
    String gameNameValue = HtmlUtils.htmlEscape(String.valueOf(request.getAttribute("gameName")));
    String creatorValue = HtmlUtils.htmlEscape(String.valueOf(request.getAttribute("creator")));
    String likeCountFormattedValue = HtmlUtils.htmlEscape(String.valueOf(request.getAttribute("likeCountFormatted")));
    String creatorNoteValue = HtmlUtils.htmlEscape(String.valueOf(request.getAttribute("creatorNote")));
    String gitUrlValue = HtmlUtils.htmlEscape(String.valueOf(request.getAttribute("gitUrl")));
    String webglFrameSrc = String.valueOf(request.getAttribute("webglFrameSrc"));
    if (webglFrameSrc == null || webglFrameSrc.isBlank() || "null".equals(webglFrameSrc)) {
        webglFrameSrc = String.valueOf(request.getAttribute("webglUrl"));
    }
    if (webglFrameSrc == null || webglFrameSrc.isBlank() || "null".equals(webglFrameSrc)) {
        webglFrameSrc = "";
    } else if (webglFrameSrc.startsWith("/")) {
        webglFrameSrc = ctx + webglFrameSrc;
    }
    String webglFrameSrcValue = HtmlUtils.htmlEscape(webglFrameSrc);
%>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <jsp:include page="/WEB-INF/views/theme-init.jsp"/>
    <title><%= gameNameValue %> — bibimbap</title>
    <style>
      html {
        color-scheme: light;
        --surface: #faf8f5;
        --card-bg: #fff;
        --text: #1a1a1a;
        --text-muted: #5c5c5c;
        --accent: #e8a54b;
        --accent-soft: rgba(232, 165, 75, 0.14);
        --border: rgba(0, 0, 0, 0.08);
        --webgl-bg: #0d0d0d;
        --panel-shadow: 0 4px 24px rgba(26, 26, 26, 0.06);
        --radius: 16px;
      }
      html[data-theme="dark"] {
        color-scheme: dark;
        --surface: #121212;
        --card-bg: #1e1e1e;
        --text: #ece8e1;
        --text-muted: #a39e96;
        --border: rgba(255, 255, 255, 0.1);
        --accent-soft: rgba(232, 165, 75, 0.12);
        --webgl-bg: #080808;
        --panel-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
      }
      body {
        margin: 0;
        min-height: 100vh;
        font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
        background: var(--surface);
        color: var(--text);
      }
      html[data-theme="dark"] body {
        background: linear-gradient(165deg, #1c1a18 0%, var(--surface) 38%, #0e0e0e 100%);
        background-attachment: fixed;
      }
      html:not([data-theme="dark"]) body {
        background: linear-gradient(165deg, #fff9f0 0%, var(--surface) 45%, #f3ede6 100%);
        background-attachment: fixed;
      }
      .game-page {
        max-width: 56rem;
        margin: 0 auto;
        padding: 1.25rem max(1rem, env(safe-area-inset-left)) 2.75rem max(1rem, env(safe-area-inset-right));
      }
      .game-back {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        margin-bottom: 1.25rem;
        padding: 0.5rem 0.95rem 0.5rem 0.75rem;
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--text-muted);
        text-decoration: none;
        background: var(--card-bg);
        border: 1px solid var(--border);
        border-radius: 999px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
        transition: color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
      }
      .game-back svg {
        width: 1rem;
        height: 1rem;
        flex-shrink: 0;
        opacity: 0.85;
      }
      .game-back:hover {
        color: var(--accent);
        border-color: rgba(232, 165, 75, 0.45);
        box-shadow: 0 4px 16px rgba(232, 165, 75, 0.12);
        transform: translateX(-2px);
      }
      .game-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        margin-bottom: 1.25rem;
      }
      .game-topbar .game-back {
        margin-bottom: 0;
      }
      .game-owner-actions {
        display: flex;
        gap: 0.5rem;
        flex-shrink: 0;
      }
      .game-owner-button {
        min-height: 2.25rem;
        padding: 0 0.8rem;
        border: 1px solid var(--border);
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--card-bg);
        color: var(--text);
        font-size: 0.8125rem;
        font-weight: 800;
        text-decoration: none;
        cursor: pointer;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
      }
      .game-owner-button:hover {
        border-color: rgba(232, 165, 75, 0.45);
        color: var(--accent);
      }
      .game-owner-button--danger:hover {
        border-color: rgba(180, 50, 50, 0.32);
        color: #b33;
        background: rgba(180, 50, 50, 0.06);
      }
      @media (max-width: 520px) {
        .game-topbar {
          align-items: stretch;
          flex-direction: column;
        }
        .game-owner-actions {
          justify-content: flex-end;
        }
      }

      .game-info-card {
        margin-bottom: 1.75rem;
        padding: 1.5rem 1.35rem 1.6rem;
        background: var(--card-bg);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: var(--panel-shadow);
        position: relative;
        overflow: hidden;
      }
      .game-info-card::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--accent), rgba(232, 165, 75, 0.25), transparent);
        opacity: 0.9;
      }
      .game-info-card h1 {
        margin: 0 0 1.25rem;
        padding-bottom: 0.85rem;
        font-size: clamp(1.5rem, 4.5vw, 1.85rem);
        font-weight: 800;
        letter-spacing: -0.04em;
        line-height: 1.2;
        border-bottom: 1px solid var(--border);
      }

      .game-meta-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.65rem;
      }
      @media (max-width: 640px) {
        .game-meta-grid {
          grid-template-columns: 1fr;
        }
      }
      .game-meta-item {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
        padding: 0.85rem 0.9rem;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 12px;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
      }
      .game-meta-item:hover {
        border-color: rgba(232, 165, 75, 0.25);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
      }
      html[data-theme="dark"] .game-meta-item:hover {
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
      }
      .game-meta-item__row {
        display: flex;
        align-items: center;
        gap: 0.45rem;
      }
      .game-meta-item__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.75rem;
        height: 1.75rem;
        border-radius: 8px;
        background: var(--accent-soft);
        color: var(--accent);
        flex-shrink: 0;
      }
      .game-meta-item__icon svg {
        width: 0.95rem;
        height: 0.95rem;
      }
      .game-meta-item__label {
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text-muted);
      }
      .game-meta-item__value {
        font-size: 0.9375rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--text);
        word-break: break-word;
      }
      .game-meta-item--likes {
        padding: 0.65rem 0.75rem 0.75rem;
      }
      .game-meta-like-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        width: 100%;
        margin: 0;
        margin-top: 0.1rem;
        padding: 0.55rem 0.7rem;
        font: inherit;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--card-bg);
        color: var(--text);
        cursor: pointer;
        transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease;
        -webkit-tap-highlight-color: transparent;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
      }
      .game-meta-like-btn:hover {
        border-color: rgba(232, 165, 75, 0.45);
        box-shadow: 0 3px 12px rgba(232, 165, 75, 0.12);
      }
      .game-meta-like-btn:active {
        transform: scale(0.98);
      }
      .game-meta-like-btn[aria-pressed="true"] {
        background: var(--accent-soft);
        border-color: rgba(232, 165, 75, 0.55);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
      }
      .game-meta-item--likes:has(.game-meta-like-btn[aria-pressed="true"]) {
        border-color: rgba(232, 165, 75, 0.38);
      }
      .game-meta-like-btn__heart {
        width: 1.15rem;
        height: 1.15rem;
        flex-shrink: 0;
      }
      .game-meta-like-btn__heart path {
        fill: none;
        stroke: var(--accent);
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .game-meta-like-btn[aria-pressed="true"] .game-meta-like-btn__heart path {
        fill: var(--accent);
        stroke: none;
      }
      .game-meta-like-btn__count {
        font-size: 1.0625rem;
        font-weight: 800;
        letter-spacing: -0.03em;
        font-variant-numeric: tabular-nums;
        color: var(--accent);
      }
      html[data-theme="dark"] .game-meta-like-btn[aria-pressed="true"] .game-meta-like-btn__count {
        color: #f0c47a;
      }

      .game-webgl {
        margin-bottom: 1.75rem;
      }
      .game-webgl__head {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem 0.75rem;
        margin-bottom: 0.85rem;
      }
      .game-webgl__head h2 {
        margin: 0;
        font-size: 1.05rem;
        font-weight: 800;
        letter-spacing: -0.03em;
      }
      .game-webgl__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        border-radius: 10px;
        background: var(--accent-soft);
        color: var(--accent);
      }
      .game-webgl__icon svg {
        width: 1.1rem;
        height: 1.1rem;
      }
      .game-webgl__badge {
        margin-left: auto;
        padding: 0.2rem 0.55rem;
        font-size: 0.625rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--accent);
        background: var(--accent-soft);
        border: 1px solid rgba(232, 165, 75, 0.35);
        border-radius: 6px;
      }
      @media (max-width: 480px) {
        .game-webgl__badge {
          margin-left: 0;
        }
      }
      .game-webgl__shell {
        position: relative;
        padding: 3px;
        border-radius: 18px;
        background: linear-gradient(135deg, rgba(232, 165, 75, 0.45) 0%, rgba(232, 165, 75, 0.08) 50%, rgba(255, 255, 255, 0.06) 100%);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
      }
      html:not([data-theme="dark"]) .game-webgl__shell {
        box-shadow: 0 12px 36px rgba(26, 26, 26, 0.12);
      }
      .game-webgl__frame-wrap {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        max-height: min(70vh, 520px);
        background: var(--webgl-bg);
        border-radius: 15px;
        overflow: hidden;
        border: 1px solid rgba(0, 0, 0, 0.35);
      }
      html:not([data-theme="dark"]) .game-webgl__frame-wrap {
        border-color: rgba(0, 0, 0, 0.12);
      }
      .game-webgl__frame-wrap iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: none;
      }
      /* 제작자 한마디 ~ 덧글: 공통 패널 */
      .game-community {
        margin-top: 2rem;
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
      }
      .game-panel {
        position: relative;
        padding: 1.35rem 1.35rem 1.5rem;
        background: var(--card-bg);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: var(--panel-shadow);
        overflow: hidden;
      }
      .game-panel::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: linear-gradient(180deg, var(--accent) 0%, rgba(232, 165, 75, 0.35) 100%);
        border-radius: 4px 0 0 4px;
      }
      .game-panel__head {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        margin-bottom: 1rem;
      }
      .game-panel__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 10px;
        background: var(--accent-soft);
        color: var(--accent);
        flex-shrink: 0;
      }
      .game-panel__icon svg {
        width: 1.15rem;
        height: 1.15rem;
      }
      .game-panel__title {
        margin: 0;
        font-size: 0.9375rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--text);
      }
      .game-panel__subtitle {
        margin: 0.15rem 0 0;
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--text-muted);
      }

      .game-panel--creator .game-panel__quote {
        margin: 0;
        padding: 1rem 1rem 1rem 1.15rem;
        font-size: 0.9375rem;
        line-height: 1.75;
        font-style: normal;
        color: var(--text);
        background: linear-gradient(135deg, var(--surface) 0%, transparent 55%);
        border-radius: 12px;
        border-left: 3px solid var(--accent);
      }
      .game-panel__git-wrap {
        margin-top: 1.15rem;
        padding-top: 1rem;
        border-top: 1px dashed var(--border);
      }
      .game-panel__git {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.55rem 1rem;
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--text);
        text-decoration: none;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 999px;
        transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
        word-break: break-all;
      }
      .game-panel__git svg {
        flex-shrink: 0;
        width: 1.1rem;
        height: 1.1rem;
        color: var(--text-muted);
      }
      .game-panel__git:hover {
        border-color: var(--accent);
        color: var(--accent);
        background: var(--accent-soft);
      }
      .game-panel__git:hover svg {
        color: var(--accent);
      }

      .game-comments__composer {
        margin-bottom: 1.25rem;
      }
      .game-comments__label {
        display: block;
        margin-bottom: 0.45rem;
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--text-muted);
      }
      .game-comments__form {
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
      }
      .game-comments__form textarea {
        width: 100%;
        box-sizing: border-box;
        min-height: 6.5rem;
        padding: 0.85rem 1rem;
        font-size: 0.875rem;
        font-family: inherit;
        line-height: 1.55;
        color: var(--text);
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 12px;
        resize: vertical;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
      }
      .game-comments__form textarea::placeholder {
        color: var(--text-muted);
        opacity: 0.85;
      }
      .game-comments__form textarea:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 4px rgba(232, 165, 75, 0.18);
      }
      .game-comments__actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
      }
      .game-comments__form button[type="submit"] {
        padding: 0.55rem 1.5rem;
        font-size: 0.875rem;
        font-weight: 700;
        color: #1a1a1a;
        background: linear-gradient(180deg, #f0c978 0%, var(--accent) 100%);
        border: none;
        border-radius: 10px;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(232, 165, 75, 0.35);
        transition: transform 0.15s ease, box-shadow 0.2s ease;
        -webkit-tap-highlight-color: transparent;
      }
      .game-comments__form button[type="submit"]:hover {
        box-shadow: 0 4px 14px rgba(232, 165, 75, 0.45);
      }
      .game-comments__form button[type="submit"]:active {
        transform: scale(0.98);
      }
      .game-comments__hint {
        font-size: 0.6875rem;
        color: var(--text-muted);
      }

      .game-comments__list {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
      }
      .game-comments__empty {
        margin: 0;
        padding: 1.5rem 1rem;
        font-size: 0.875rem;
        text-align: center;
        color: var(--text-muted);
        background: var(--surface);
        border-radius: 12px;
        border: 1px dashed var(--border);
      }
      .game-comments__item {
        display: flex;
        gap: 0.75rem;
        align-items: flex-start;
        padding: 0.85rem 1rem;
        font-size: 0.875rem;
        line-height: 1.55;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 14px;
        transition: border-color 0.2s ease;
      }
      .game-comments__item:hover {
        border-color: rgba(232, 165, 75, 0.2);
      }
      .game-comments__avatar {
        flex-shrink: 0;
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        font-weight: 800;
        color: var(--accent);
        background: var(--accent-soft);
        border: 1px solid rgba(232, 165, 75, 0.25);
      }
      .game-comments__body {
        flex: 1;
        min-width: 0;
      }
      .game-comments__meta {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.35rem 0.65rem;
        margin-bottom: 0.4rem;
      }
      .game-comments__nick {
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--text);
      }
      .game-comments__meta time {
        font-size: 0.6875rem;
        font-weight: 500;
        letter-spacing: 0.02em;
        color: var(--text-muted);
      }
      .game-comments__item p {
        margin: 0;
        white-space: pre-wrap;
        word-break: break-word;
        color: var(--text);
      }
      .game-comments__footer {
        margin-top: 0.5rem;
        display: flex;
        justify-content: flex-end;
      }
      .game-comments__delete {
        padding: 0.25rem 0.6rem;
        font-size: 0.6875rem;
        font-weight: 600;
        color: var(--text-muted);
        background: transparent;
        border: 1px solid transparent;
        border-radius: 6px;
        cursor: pointer;
        transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
      }
      .game-comments__delete:hover {
        color: #b33;
        border-color: rgba(180, 50, 50, 0.25);
        background: rgba(180, 50, 50, 0.06);
      }
      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
      }
      @media (max-width: 480px) {
        .game-panel {
          padding: 1.15rem 1.1rem 1.35rem;
        }
        .game-comments__actions {
          flex-direction: column-reverse;
          align-items: stretch;
        }
        .game-comments__form button[type="submit"] {
          width: 100%;
        }
        .game-comments__hint {
          text-align: center;
        }
      }
    </style>
</head>
<body>
    <jsp:include page="/WEB-INF/views/header.jsp"/>
    <main class="game-page">
        <div class="game-topbar">
            <a class="game-back" href="<%= ctx %>/">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
                목록으로
            </a>
            <% if (owner) { %>
            <div class="game-owner-actions" aria-label="게시물 관리">
                <a class="game-owner-button" href="<%= ctx %>/game/<%= gameIdValue %>/edit">수정</a>
                <button type="button" class="game-owner-button game-owner-button--danger" id="game-delete-button">삭제</button>
            </div>
            <% } %>
        </div>

        <section class="game-info-card" aria-labelledby="game-title">
            <h1 id="game-title"><%= gameNameValue %></h1>
            <div class="game-meta-grid">
                <div class="game-meta-item">
                    <div class="game-meta-item__row">
                        <span class="game-meta-item__icon" aria-hidden="true">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 9h16M4 15h16M10 3L8 21M16 3l-2 18"/></svg>
                        </span>
                        <span class="game-meta-item__label">번호</span>
                    </div>
                    <span class="game-meta-item__value">#<%= gameIdValue %></span>
                </div>
                <div class="game-meta-item">
                    <div class="game-meta-item__row">
                        <span class="game-meta-item__icon" aria-hidden="true">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                        </span>
                        <span class="game-meta-item__label">제작자</span>
                    </div>
                    <span class="game-meta-item__value"><%= creatorValue %></span>
                </div>
                <div class="game-meta-item game-meta-item--likes">
                    <div class="game-meta-item__row">
                        <span class="game-meta-item__icon" aria-hidden="true">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg>
                        </span>
                        <span class="game-meta-item__label">좋아요</span>
                    </div>
                    <button type="button" id="game-like-btn" class="game-meta-like-btn" aria-pressed="false" aria-label="좋아요">
                        <svg class="game-meta-like-btn__heart" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                            <path d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
                        </svg>
                        <span id="game-like-count" class="game-meta-like-btn__count"><%= likeCountFormattedValue %></span>
                    </button>
                </div>
            </div>
        </section>

        <section class="game-webgl" aria-labelledby="webgl-heading">
            <div class="game-webgl__head">
                <span class="game-webgl__icon" aria-hidden="true">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>
                </span>
                <h2 id="webgl-heading">플레이</h2>
                <span class="game-webgl__badge">WebGL</span>
            </div>
            <div class="game-webgl__shell">
                <div class="game-webgl__frame-wrap">
                    <iframe title="<%= gameNameValue %> WebGL"
                            src="<%= webglFrameSrcValue %>"
                            sandbox="allow-scripts allow-same-origin allow-pointer-lock"
                            allow="fullscreen; autoplay; xr-spatial-tracking"
                            loading="eager"
                            referrerpolicy="same-origin"></iframe>
                </div>
            </div>
        </section>

        <div class="game-community">
            <section class="game-panel game-panel--creator" aria-labelledby="creator-heading">
                <div class="game-panel__head">
                    <span class="game-panel__icon" aria-hidden="true">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z"/><path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z"/></svg>
                    </span>
                    <div>
                        <h2 id="creator-heading" class="game-panel__title">제작자의 한마디</h2>
                        <p class="game-panel__subtitle">이 게임을 만들며 전하고 싶었던 이야기예요.</p>
                    </div>
                </div>
                <blockquote class="game-panel__quote"><%= creatorNoteValue %></blockquote>
                <div class="game-panel__git-wrap">
                    <a class="game-panel__git" href="<%= gitUrlValue %>" target="_blank" rel="noopener noreferrer">
                        <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
                        소스 코드 · GitHub
                    </a>
                </div>
            </section>

            <section class="game-panel game-panel--comments" aria-labelledby="comments-heading">
                <div class="game-panel__head">
                    <span class="game-panel__icon" aria-hidden="true">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
                    </span>
                    <div>
                        <h2 id="comments-heading" class="game-panel__title">덧글</h2>
                        <p class="game-panel__subtitle">플레이 소감이나 버그 제보를 남겨 주세요.</p>
                    </div>
                </div>
                <div class="game-comments__composer">
                    <form id="game-comment-form" class="game-comments__form" novalidate>
                        <label class="game-comments__label" for="game-comment-input">내용</label>
                        <textarea id="game-comment-input" name="comment" rows="4" maxlength="1000" placeholder="여기에 덧글을 작성해 주세요." required></textarea>
                        <div class="game-comments__actions">
                            <span class="game-comments__hint">최대 1,000자</span>
                            <button type="submit">덧글 등록</button>
                        </div>
                    </form>
                </div>
                <p id="game-comments-empty" class="game-comments__empty" hidden>아직 덧글이 없습니다.<br>첫 번째 덧글을 남겨 보세요.</p>
                <ul id="game-comment-list" class="game-comments__list" aria-labelledby="comments-heading"></ul>
            </section>
        </div>
    </main>
    <jsp:include page="/WEB-INF/views/footer.jsp"/>

    <script>
(function () {
  var ctx = '${pageContext.request.contextPath}';
  var gameId = ${gameId};
  var baseLikes = ${likeCount};
  var LIKE_KEY = 'bibimbap-game-liked';
  var COMMENT_KEY = 'bibimbap-game-comments';

  function getLikedMap() {
    try {
      var raw = localStorage.getItem(LIKE_KEY);
      var o = raw ? JSON.parse(raw) : {};
      return o && typeof o === 'object' ? o : {};
    } catch (e) {
      return {};
    }
  }

  function setLiked(gameIdStr, liked) {
    var m = getLikedMap();
    if (liked) m[gameIdStr] = true;
    else delete m[gameIdStr];
    try {
      localStorage.setItem(LIKE_KEY, JSON.stringify(m));
    } catch (err) {}
  }

  function isLiked(gameIdStr) {
    return !!getLikedMap()[gameIdStr];
  }

  function formatCount(n) {
    return n.toLocaleString('ko-KR');
  }

  var likeBtn = document.getElementById('game-like-btn');
  var likeCountEl = document.getElementById('game-like-count');
  var gid = String(gameId);
  var deleteBtn = document.getElementById('game-delete-button');

  function deleteGame() {
    fetch(ctx + '/game/' + encodeURIComponent(gid), {
      method: 'DELETE',
      headers: window.BibimbapCsrf ? window.BibimbapCsrf.headers({
        'Accept': 'application/json',
        'X-Requested-With': 'XMLHttpRequest'
      }) : {
        'Accept': 'application/json',
        'X-Requested-With': 'XMLHttpRequest'
      }
    }).then(function (res) {
      return res.json().catch(function () {
        return { message: '게시물을 삭제하지 못했습니다.' };
      }).then(function (data) {
        if (!res.ok) {
          throw new Error(data && data.message ? data.message : '게시물을 삭제하지 못했습니다.');
        }
        return data;
      });
    }).then(function () {
      window.location.href = ctx + '/';
    }).catch(function (err) {
      if (window.BibimbapModal && typeof window.BibimbapModal.alert === 'function') {
        window.BibimbapModal.alert({
          title: '삭제 실패',
          message: err.message || '게시물을 삭제하지 못했습니다.',
          confirmText: '확인'
        });
      } else {
        alert(err.message || '게시물을 삭제하지 못했습니다.');
      }
    });
  }

  if (deleteBtn) {
    deleteBtn.addEventListener('click', function () {
      if (window.BibimbapModal && typeof window.BibimbapModal.confirm === 'function') {
        window.BibimbapModal.confirm({
          title: '게시물 삭제',
          message: '삭제하시겠습니까? 삭제 후 복구가 불가능합니다.',
          confirmText: '삭제',
          cancelText: '취소',
          onConfirm: deleteGame
        });
      } else if (confirm('게시물을 삭제할까요?')) {
        deleteGame();
      }
    });
  }

  function syncLike() {
    var liked = isLiked(gid);
    likeBtn.setAttribute('aria-pressed', liked ? 'true' : 'false');
    likeBtn.setAttribute('aria-label', liked ? '좋아요 취소' : '좋아요');
    likeCountEl.textContent = formatCount(baseLikes + (liked ? 1 : 0));
  }

  likeBtn.addEventListener('click', function () {
    var next = !isLiked(gid);
    setLiked(gid, next);
    syncLike();
  });
  syncLike();

  function getComments() {
    try {
      var raw = localStorage.getItem(COMMENT_KEY);
      var o = raw ? JSON.parse(raw) : {};
      var list = o[gid];
      return Array.isArray(list) ? list : [];
    } catch (e) {
      return [];
    }
  }

  function saveComments(list) {
    try {
      var raw = localStorage.getItem(COMMENT_KEY);
      var o = raw ? JSON.parse(raw) : {};
      if (typeof o !== 'object' || o === null) o = {};
      o[gid] = list;
      localStorage.setItem(COMMENT_KEY, JSON.stringify(o));
    } catch (err) {}
  }

  var listEl = document.getElementById('game-comment-list');
  var emptyEl = document.getElementById('game-comments-empty');
  var form = document.getElementById('game-comment-form');
  var input = document.getElementById('game-comment-input');
  var DEFAULT_NICK = '익명';

  function renderComments() {
    var items = getComments().slice().sort(function (a, b) {
      return (b.at || '').localeCompare(a.at || '');
    });
    listEl.innerHTML = '';
    emptyEl.hidden = items.length > 0;
    items.forEach(function (c) {
      var li = document.createElement('li');
      li.className = 'game-comments__item';
      var av = document.createElement('div');
      var nick = (c.nickname && String(c.nickname).trim()) ? String(c.nickname).trim() : DEFAULT_NICK;
      av.className = 'game-comments__avatar';
      av.setAttribute('aria-hidden', 'true');
      av.textContent = nick.charAt(0).toUpperCase();
      var body = document.createElement('div');
      body.className = 'game-comments__body';
      var meta = document.createElement('div');
      meta.className = 'game-comments__meta';
      var nickEl = document.createElement('span');
      nickEl.className = 'game-comments__nick';
      nickEl.textContent = nick;
      var t = document.createElement('time');
      t.dateTime = c.at || '';
      try {
        t.textContent = c.at ? new Date(c.at).toLocaleString('ko-KR') : '';
      } catch (e) {
        t.textContent = '';
      }
      meta.appendChild(nickEl);
      meta.appendChild(t);
      var p = document.createElement('p');
      p.textContent = c.text || '';
      body.appendChild(meta);
      body.appendChild(p);
      if (c.id) {
        var foot = document.createElement('div');
        foot.className = 'game-comments__footer';
        var del = document.createElement('button');
        del.type = 'button';
        del.className = 'game-comments__delete';
        del.textContent = '삭제';
        del.setAttribute('aria-label', '이 덧글 삭제');
        del.addEventListener('click', function () {
          var next = getComments().filter(function (x) { return x.id !== c.id; });
          saveComments(next);
          renderComments();
        });
        foot.appendChild(del);
        body.appendChild(foot);
      }
      li.appendChild(av);
      li.appendChild(body);
      listEl.appendChild(li);
    });
  }

  form.addEventListener('submit', function (ev) {
    ev.preventDefault();
    var text = (input.value || '').trim();
    if (!text) return;
    var id = (typeof crypto !== 'undefined' && crypto.randomUUID) ? crypto.randomUUID() : String(Date.now()) + '-' + Math.random();
    var entry = { id: id, text: text, at: new Date().toISOString(), nickname: DEFAULT_NICK };
    var list = getComments();
    list.push(entry);
    saveComments(list);
    input.value = '';
    renderComments();
  });

  renderComments();
})();
    </script>
</body>
</html>
