/* Detail page — single post with summary, body, comments */

window.Detail = function Detail({ post, source, onBack, onUpvote, onToggleSave, voted, saved, comments }) {
  const Thumb = window.Thumbs[post.thumb];
  return (
    <div className="detail-wrap">
      <button className="detail-back" onClick={onBack}>← 피드로 돌아가기</button>

      <header className="detail-head">
        <div className={`upvote-col ${voted ? "voted" : ""}`} onClick={onUpvote}>
          <div className="arrow"></div>
          <div className="points">{post.points + (voted ? 1 : 0)}</div>
        </div>
        <div>
          <h1>{post.title}</h1>
          {post.titleOrig && <div className="orig-title">{post.titleOrig}</div>}
          <div className="meta">
            <span>{window.regionFlag(source.region)} <strong style={{ color: "var(--fg)" }}>{source.name}</strong></span>
            <span className="dot">·</span>
            <span>by <a>@{post.submittedBy}</a></span>
            <span className="dot">·</span>
            <span>{window.timeAgo(post.submittedAt)}</span>
            <span className="dot">·</span>
            <a className="original-link" href={post.url} target="_blank" rel="noopener noreferrer">원문 ↗ {window.urlDomain(post.url)}</a>
            <span className="dot">·</span>
            <button className={`save-btn ${saved ? "saved" : ""}`} onClick={onToggleSave} style={{ background: "transparent", border: "none", color: saved ? "var(--warn)" : "var(--fg-3)", fontFamily: "var(--mono)", fontSize: 12, cursor: "pointer", padding: 0 }}>
              {saved ? "★ 저장됨" : "☆ 저장"}
            </button>
          </div>
          <div className="post-tags">
            {post.tags.map((t) => {
              const meta = window.TAGS_META[t] || {};
              return (
                <span key={t} className="tag">
                  <span className="swatch" style={{ background: meta.color || "#7c8290" }}></span>
                  {t}
                </span>
              );
            })}
          </div>
        </div>
      </header>

      <div className="summary-box">
        <div className="label">한국어 자동 요약 <span className="ai-tag">AI</span></div>
        <div className="body">{post.summary}</div>
      </div>

      <div style={{ marginBottom: 22, border: "1px solid var(--line)", borderRadius: 4, overflow: "hidden", background: "var(--bg-2)" }}>
        <div style={{ width: "100%", height: 240, display: "grid", placeItems: "center" }}>
          <div style={{ width: 480, height: 220 }}>
            {Thumb && React.cloneElement(Thumb, { style: { width: "100%", height: "100%" }, preserveAspectRatio: "xMidYMid meet" })}
          </div>
        </div>
        <div style={{ padding: "8px 14px", borderTop: "1px solid var(--line)", fontFamily: "var(--mono)", fontSize: 10.5, color: "var(--fg-4)", display: "flex", justifyContent: "space-between" }}>
          <span>FIG 1. 게시물 시각 자료 (자동 추출)</span>
          <span>SOURCE: {source.name}</span>
        </div>
      </div>

      <article className="detail-body">
        <p style={{ fontSize: 16, color: "var(--fg)", borderLeft: "2px solid var(--primary)", paddingLeft: 14 }}>
          {post.summary}
        </p>

        <h2>배경 (Context)</h2>
        <p>
          본 글은 <strong>{source.name}</strong>이 공개한 기술 노트를 요약·재구성한 내용입니다. 원문 전체는
          {" "}<a className="original-link" href={post.url} target="_blank" rel="noopener noreferrer" style={{ color: "var(--primary)" }}>{post.url}</a>{" "}
          에서 확인할 수 있습니다.
        </p>
        <p>
          최근 1년간 모바일·콘솔·PC 모든 플랫폼에서 GPU 활용도가 상한에 가까워지면서, 단순한 셰이더 최적화보다는 파이프라인 단위의 재설계가 더 큰 ROI를 보이는 사례가 늘고 있습니다. 이번 사례 역시 비슷한 흐름에 있습니다.
        </p>

        <h2>핵심 변경점</h2>
        <ul>
          <li>대상 플랫폼별 측정값과 회귀 테스트 데이터를 모두 동봉</li>
          <li>기존 구현 대비 메모리 대역폭과 GPU 시간을 모두 측정</li>
          <li>롤백 가능한 feature flag로 런타임 토글 지원</li>
          <li>아트 파이프라인 변경 없이 엔지니어링 단에서만 처리 가능</li>
        </ul>

        <h2>측정 결과</h2>
        <table>
          <thead>
            <tr><th>플랫폼</th><th>BEFORE</th><th>AFTER</th><th>Δ</th></tr>
          </thead>
          <tbody>
            <tr><td>iPhone 15 Pro</td><td>14.2 ms</td><td>9.6 ms</td><td style={{ color: "var(--accent)" }}>−32%</td></tr>
            <tr><td>Galaxy S24 Ultra</td><td>16.8 ms</td><td>11.4 ms</td><td style={{ color: "var(--accent)" }}>−32%</td></tr>
            <tr><td>iPad Pro M2</td><td>8.1 ms</td><td>6.7 ms</td><td style={{ color: "var(--accent)" }}>−17%</td></tr>
            <tr><td>Pixel 7 (mid-tier)</td><td>22.4 ms</td><td>19.8 ms</td><td style={{ color: "var(--warn)" }}>−12%</td></tr>
          </tbody>
        </table>

        <h2>구현 노트</h2>
        <p>
          관련 셰이더 변경의 핵심 부분은 다음과 같습니다. <code>vkCmdPipelineBarrier2</code> 기반의 fine-grained sync로 전환하면서 GPU bubble이 줄어들었습니다.
        </p>
        <pre>{`// pseudo-code
VkDependencyInfo dep = {};
dep.imageMemoryBarrierCount = 1;
dep.pImageMemoryBarriers = &imgBarrier;
imgBarrier.srcStageMask = VK_PIPELINE_STAGE_2_COMPUTE_SHADER_BIT;
imgBarrier.dstStageMask = VK_PIPELINE_STAGE_2_FRAGMENT_SHADER_BIT;
vkCmdPipelineBarrier2(cmd, &dep);`}</pre>

        <h2>한계와 후속 작업</h2>
        <p>
          저자는 동일한 기법이 <code>Adreno 6xx</code> 이하 GPU에서는 메모리 압박이 커서 효과가 감소한다고 명시합니다. 후속 패치에서 device tier 별 자동 전환 로직을 도입할 예정이라고 밝힙니다.
        </p>

        <blockquote>
          본 요약은 자동 생성된 한국어 번역으로, 정확한 인용은 반드시 원문을 참조해 주세요.
        </blockquote>
      </article>

      <section className="comments-section">
        <div className="comments-h">
          <h3>댓글 <span className="count">({comments.length})</span></h3>
          <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--fg-3)" }}>
            <a style={{ marginRight: 12, cursor: "pointer" }}>점수순</a>
            <a style={{ cursor: "pointer", color: "var(--fg)" }}>최신순</a>
          </div>
        </div>

        {comments.map((c) => (
          <div key={c.id} className="comment">
            <div className="upvote-col">
              <div className="arrow"></div>
              <div className="points">{c.points}</div>
            </div>
            <div>
              <div className="meta-row">
                <span className="by">@{c.by}</span>
                <span className="dot">·</span>
                <span>{window.timeAgo(c.at)}</span>
                <span className="dot">·</span>
                <a style={{ cursor: "pointer" }}>답글</a>
              </div>
              <div className="body">{c.body}</div>
              {c.replies && c.replies.length > 0 && (
                <div className="replies">
                  {c.replies.map((r) => (
                    <div key={r.id} className="reply">
                      <div className="upvote-col">
                        <div className="arrow"></div>
                        <div className="points">{r.points}</div>
                      </div>
                      <div>
                        <div className="meta-row">
                          <span className="by">@{r.by}</span>
                          <span className="dot">·</span>
                          <span>{window.timeAgo(r.at)}</span>
                        </div>
                        <div className="body">{r.body}</div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>
        ))}

        <div className="comment-compose">
          <textarea placeholder="이 글에 대한 의견을 남기세요. 마크다운 지원."></textarea>
          <div className="row">
            <span className="hint">Cmd/Ctrl + Enter로 전송 · 마크다운 지원</span>
            <button>댓글 작성</button>
          </div>
        </div>
      </section>
    </div>
  );
};