<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" language="java" %>
<%@ page import="java.util.List" %>
<%@ page import="java.net.URLEncoder" %>
<%@ page import="java.nio.charset.StandardCharsets" %>
<%@ page import="com.pandoli365.bibimbap.data.JamData" %>
<%@ page import="org.springframework.web.util.HtmlUtils" %>
<%
    String ctx = request.getContextPath();
    List<JamData> jams = (List<JamData>) request.getAttribute("jams");
    Object rawNext = request.getAttribute("nextCursor");
    String nextCursor = rawNext == null ? null : String.valueOf(rawNext);
%>
<!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>게임잼 | 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.16);
        --border: rgba(0, 0, 0, 0.08);
        --shadow: rgba(0, 0, 0, 0.06);
      }
      html[data-theme="dark"] {
        color-scheme: dark;
        --surface: #121212;
        --card-bg: #1e1e1e;
        --text: #ece8e1;
        --text-muted: #a39e96;
        --border: rgba(255, 255, 255, 0.1);
        --shadow: 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);
      }
      .jam-page {
        max-width: 64rem;
        margin: 0 auto;
        padding: 1.5rem max(1rem, env(safe-area-inset-left)) 3rem max(1rem, env(safe-area-inset-right));
      }
      .jam-page > h1 {
        margin: 0 0 1.25rem;
        font-size: 2rem;
        line-height: 1.2;
        letter-spacing: 0;
      }
      .jam-empty {
        padding: 2rem 1.25rem;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--card-bg);
        box-shadow: 0 2px 8px var(--shadow);
        color: var(--text-muted);
        text-align: center;
        font-weight: 800;
      }
      .jam-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
        gap: 1rem;
      }
      .jam-card {
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
        padding: 1.25rem;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--card-bg);
        box-shadow: 0 2px 8px var(--shadow);
        text-decoration: none;
        color: inherit;
      }
      .jam-card:hover {
        border-color: var(--accent);
      }
      .jam-badge {
        align-self: flex-start;
        min-height: 1.85rem;
        padding: 0 0.65rem;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        background: var(--accent-soft);
        color: var(--accent);
        font-size: 0.75rem;
        font-weight: 900;
      }
      .jam-card h2 {
        margin: 0;
        font-size: 1.15rem;
        line-height: 1.3;
        letter-spacing: 0;
      }
      .jam-card p {
        margin: 0;
        color: var(--text-muted);
        line-height: 1.6;
        font-size: 0.9375rem;
      }
      .jam-more {
        display: flex;
        justify-content: center;
        margin-top: 1.5rem;
      }
      .jam-more a {
        min-height: 2.75rem;
        padding: 0 1.5rem;
        border: 1px solid var(--border);
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--card-bg);
        color: var(--text);
        font-size: 0.9375rem;
        font-weight: 900;
        text-decoration: none;
      }
      .jam-more a:hover {
        border-color: var(--accent);
        color: var(--accent);
      }
    </style>
</head>
<body>
    <jsp:include page="/WEB-INF/views/header.jsp"/>
    <main class="jam-page">
        <h1>게임잼</h1>
<%
        if (jams == null || jams.isEmpty()) {
%>
        <div class="jam-empty">진행 중인 게임잼이 없습니다.</div>
<%
        } else {
%>
        <div class="jam-grid">
<%
            for (JamData jam : jams) {
                String title = jam.getTitle() == null ? "" : jam.getTitle();
                String status = jam.getStatus() == null ? "" : jam.getStatus();
                String description = jam.getDescription() == null ? "" : jam.getDescription();
                if (description.length() > 120) {
                    description = description.substring(0, 120) + "…";
                }
                String slug = jam.getSlug() == null ? "" : jam.getSlug();
%>
            <a class="jam-card" href="<%= ctx %>/jams/<%= HtmlUtils.htmlEscape(slug) %>">
<%
                if (!status.isBlank()) {
%>
                <span class="jam-badge"><%= HtmlUtils.htmlEscape(status) %></span>
<%
                }
%>
                <h2><%= HtmlUtils.htmlEscape(title) %></h2>
                <p><%= HtmlUtils.htmlEscape(description) %></p>
            </a>
<%
            }
%>
        </div>
<%
            if (nextCursor != null) {
                String encodedCursor = URLEncoder.encode(nextCursor, StandardCharsets.UTF_8);
%>
        <div class="jam-more">
            <a href="<%= ctx %>/jams?cursor=<%= encodedCursor %>">더 보기</a>
        </div>
<%
            }
        }
%>
    </main>
    <jsp:include page="/WEB-INF/views/footer.jsp"/>
</body>
</html>
