<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" language="java" %>
<%@ page import="com.pandoli365.bibimbap.data.RecruitPostData" %>
<%@ page import="org.springframework.web.util.HtmlUtils" %>
<%
    String ctx = request.getContextPath();
    RecruitPostData post = (RecruitPostData) request.getAttribute("post");
    String projectName = post == null || post.getProjectName() == null || post.getProjectName().isBlank() ? "모집글" : post.getProjectName();
    String genre = post == null || post.getGenre() == null || post.getGenre().isBlank() ? "장르 미정" : post.getGenre();
    String summary = post == null || post.getSummary() == null || post.getSummary().isBlank() ? "소개가 아직 없습니다." : post.getSummary();
    String role = post == null || post.getRole() == null || post.getRole().isBlank() ? "역할" : post.getRole();
    String projectStatus = post == null || post.getProjectStatus() == null || post.getProjectStatus().isBlank() ? "진행 상태 미정" : post.getProjectStatus();
    String participationType = post == null || post.getParticipationType() == null || post.getParticipationType().isBlank() ? "참여 방식 미정" : post.getParticipationType();
    String expectedPeriod = post == null || post.getExpectedPeriod() == null || post.getExpectedPeriod().isBlank() ? "기간 미정" : post.getExpectedPeriod();
    String teamMembers = post == null || post.getTeamMembers() == null || post.getTeamMembers().isBlank() ? "팀 구성 미정" : post.getTeamMembers();
    String contact = post == null || post.getContact() == null || post.getContact().isBlank() ? "연락 방법 미정" : post.getContact();
    String description = post == null || post.getDescription() == null || post.getDescription().isBlank() ? "상세 설명이 아직 없습니다." : post.getDescription();
    String creator = post == null || post.getCreator() == null || post.getCreator().isBlank() ? "작성자" : post.getCreator();
    String contactHref = contact.contains("@") && !contact.contains(" ") ? "mailto:" + contact : "#contact-info";
%>
<!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><%= HtmlUtils.htmlEscape(projectName) %> 팀원 모집 | 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);
      }
      .detail-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));
      }
      .detail-back {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        min-height: 2.25rem;
        margin-bottom: 1rem;
        color: var(--text-muted);
        font-size: 0.875rem;
        font-weight: 800;
        text-decoration: none;
      }
      .detail-back:hover {
        color: var(--accent);
      }
      .detail-hero {
        margin-bottom: 1rem;
        padding: 1.5rem;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--card-bg);
        box-shadow: 0 2px 8px var(--shadow);
      }
      .detail-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 0.85rem;
      }
      .detail-badge {
        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;
      }
      .detail-hero h1 {
        margin: 0;
        font-size: 2rem;
        line-height: 1.2;
        letter-spacing: 0;
      }
      .detail-hero p {
        margin: 0.65rem 0 0;
        color: var(--text-muted);
        line-height: 1.65;
      }
      .detail-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem;
        margin-top: 1.25rem;
      }
      .detail-button {
        min-height: 2.75rem;
        padding: 0 1rem;
        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;
      }
      .detail-button--primary {
        border-color: transparent;
        background: var(--accent);
        color: #1a1a1a;
      }
      .detail-grid {
        display: grid;
        grid-template-columns: 18rem minmax(0, 1fr);
        gap: 1rem;
        align-items: start;
      }
      .detail-meta,
      .detail-section {
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--card-bg);
        box-shadow: 0 2px 8px var(--shadow);
      }
      .detail-meta {
        position: sticky;
        top: 5rem;
        padding: 1rem;
      }
      .detail-meta dl {
        margin: 0;
        display: grid;
        gap: 0.8rem;
      }
      .detail-meta dt {
        margin: 0 0 0.18rem;
        color: var(--text-muted);
        font-size: 0.75rem;
        font-weight: 900;
      }
      .detail-meta dd {
        margin: 0;
        color: var(--text);
        font-size: 0.9375rem;
        font-weight: 800;
        line-height: 1.45;
      }
      .detail-content {
        display: grid;
        gap: 1rem;
      }
      .detail-section {
        padding: 1.25rem;
      }
      .detail-section h2 {
        margin: 0 0 0.75rem;
        font-size: 1.1rem;
        letter-spacing: 0;
      }
      .detail-section p,
      .detail-section li {
        color: var(--text-muted);
        line-height: 1.7;
      }
      .detail-section p {
        margin: 0;
      }
      .detail-section ul {
        margin: 0;
        padding-left: 1.15rem;
      }
      @media (max-width: 760px) {
        .detail-grid {
          grid-template-columns: 1fr;
        }
        .detail-meta {
          position: static;
        }
        .detail-actions {
          flex-direction: column;
        }
        .detail-button {
          width: 100%;
          box-sizing: border-box;
        }
      }
    </style>
</head>
<body>
    <jsp:include page="/WEB-INF/views/header.jsp"/>
    <main class="detail-page">
        <a class="detail-back" href="<%= ctx %>/recruit">← 목록으로</a>

        <section class="detail-hero" aria-labelledby="detail-title">
            <div class="detail-badges">
                <span class="detail-badge"><%= HtmlUtils.htmlEscape(role) %> 모집</span>
                <span class="detail-badge"><%= HtmlUtils.htmlEscape(participationType) %></span>
                <span class="detail-badge"><%= HtmlUtils.htmlEscape(projectStatus) %></span>
            </div>
            <h1 id="detail-title"><%= HtmlUtils.htmlEscape(projectName) %></h1>
            <p><%= HtmlUtils.htmlEscape(summary) %></p>
            <div class="detail-actions">
                <a class="detail-button detail-button--primary" href="<%= HtmlUtils.htmlEscape(contactHref) %>">연락하기</a>
                <a class="detail-button" href="<%= ctx %>/recruit">목록으로</a>
            </div>
        </section>

        <div class="detail-grid">
            <aside class="detail-meta" aria-label="모집 정보">
                <dl>
                    <div>
                        <dt>게임 장르</dt>
                        <dd><%= HtmlUtils.htmlEscape(genre) %></dd>
                    </div>
                    <div>
                        <dt>현재 단계</dt>
                        <dd><%= HtmlUtils.htmlEscape(projectStatus) %></dd>
                    </div>
                    <div>
                        <dt>모집 역할</dt>
                        <dd><%= HtmlUtils.htmlEscape(role) %></dd>
                    </div>
                    <div>
                        <dt>참여 방식</dt>
                        <dd><%= HtmlUtils.htmlEscape(participationType) %></dd>
                    </div>
                    <div>
                        <dt>예상 기간</dt>
                        <dd><%= HtmlUtils.htmlEscape(expectedPeriod) %></dd>
                    </div>
                    <div>
                        <dt>현재 팀 구성</dt>
                        <dd><%= HtmlUtils.htmlEscape(teamMembers) %></dd>
                    </div>
                    <div id="contact-info">
                        <dt>연락 방법</dt>
                        <dd><%= HtmlUtils.htmlEscape(contact) %></dd>
                    </div>
                    <div>
                        <dt>작성자</dt>
                        <dd><%= HtmlUtils.htmlEscape(creator) %></dd>
                    </div>
                </dl>
            </aside>

            <div class="detail-content">
                <section class="detail-section" aria-labelledby="project-about">
                    <h2 id="project-about">프로젝트 소개</h2>
                    <p><%= HtmlUtils.htmlEscape(summary) %></p>
                </section>
                <section class="detail-section" aria-labelledby="project-role">
                    <h2 id="project-role">찾는 사람</h2>
                    <ul>
                        <li><%= HtmlUtils.htmlEscape(role) %> 역할로 프로젝트에 참여할 분</li>
                        <li><%= HtmlUtils.htmlEscape(participationType) %> 방식에 동의하고 꾸준히 소통할 수 있는 분</li>
                        <li>작은 범위부터 함께 완성해보고 싶은 분</li>
                    </ul>
                </section>
                <section class="detail-section" aria-labelledby="project-work">
                    <h2 id="project-work">작업 방식</h2>
                    <p><%= HtmlUtils.htmlEscape(description) %></p>
                </section>
                <section class="detail-section" aria-labelledby="project-links">
                    <h2 id="project-links">참고 링크</h2>
                    <p><%= post != null && post.getReferenceUrl() != null && !post.getReferenceUrl().isBlank() ? HtmlUtils.htmlEscape(post.getReferenceUrl()) : "참고 링크는 아직 없습니다." %></p>
                </section>
            </div>
        </div>
    </main>
    <jsp:include page="/WEB-INF/views/footer.jsp"/>
</body>
</html>
