window.TrendDetail = function TrendDetail({ trend, onBack, onToggleSave, saved }) {
  const { useState } = React;
  const primaryArticle = trend.articles?.[0];
  const [copyState, setCopyState] = useState("");

  const copyText = async (text) => {
    const result = await window.copyToClipboard(text);
    setCopyState(result.ok ? "copied" : "failed");
    setTimeout(() => setCopyState(""), 1500);
  };

  return (
    <div className="detail-wrap trend-detail-wrap">
      <button className="detail-back" onClick={onBack}>← 트렌드 피드로 돌아가기</button>

      <header className="detail-head trend-detail-head">
        <div>
          <div className="trend-detail-topline">
            <span className="score-badge">Score {trend.score}</span>
            <span className="meta-chip">{trend.articleCount} articles</span>
            <span className="meta-chip">{trend.sourceCount} sources</span>
            <span className="meta-chip">{window.timeAgo(trend.latestPublishedAt || trend.latestFetchedAt)}</span>
          </div>
          <h1>{trend.title}</h1>
          {trend.titleOriginal && <div className="orig-title">{trend.titleOriginal}</div>}

          <div className="meta">
            <span>{trend.regionFlag} <strong style={{ color: "var(--fg)" }}>{trend.sources?.map((s) => s.name).join(", ")}</strong></span>
            <span className="dot">·</span>
            <a className="original-link" href={trend.primaryUrl} target="_blank" rel="noopener noreferrer">대표 원문 ↗ {window.urlDomain(trend.primaryUrl)}</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>
            <span className="dot">·</span>
            <button className="save-btn" onClick={() => copyText(`${trend.title}\n${trend.primaryUrl}`)} style={{ background: "transparent", border: "none", color: "var(--fg-3)", fontFamily: "var(--mono)", fontSize: 12, cursor: "pointer", padding: 0 }}>
              {copyState === "copied" ? "복사됨" : copyState === "failed" ? "복사 실패" : "링크 복사"}
            </button>
          </div>

          <div className="post-tags">
            {trend.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>

      <section className="collapse-panel">
        <details open>
          <summary>Trend summary 보기</summary>
          <div className="summary-box inline-open">
            <div className="label">Trend summary <span className="ai-tag">AI</span></div>
            <div className="body">{trend.summary}</div>
          </div>
        </details>
      </section>

      {trend.detailMarkdown ? (
        <article className="detail-body">
          {window.renderSimpleMarkdown(trend.detailMarkdown)}
        </article>
      ) : (
        <>
          <section className="trend-insight-grid">
            <div className="trend-insight-card">
              <h2>What’s new</h2>
              <p>{trend.whatsNew}</p>
            </div>
            <div className="trend-insight-card">
              <h2>Why it matters</h2>
              <p>{trend.whyItMatters}</p>
            </div>
            <div className="trend-insight-card trend-insight-wide">
              <h2>Practical impact</h2>
              <p>{trend.practicalImpact}</p>
            </div>
          </section>

          {trend.keyDetails && trend.keyDetails.length > 0 && (
            <article className="detail-body">
              <h2>핵심 포인트</h2>
              <ul>
                {trend.keyDetails.map((pt, i) => <li key={i}>{pt}</li>)}
              </ul>
              <blockquote>
                이 페이지는 원문 여러 개를 트렌드 단위로 묶어 보여주는 편집형 상세입니다. 정확한 인용은 원문을 직접 확인해 주세요.
              </blockquote>
            </article>
          )}
        </>
      )}

      <section className="related-sources-panel">
        <div className="section-head">
          <h2>Related sources</h2>
          <span>동일 트렌드로 묶인 출처 목록입니다.</span>
        </div>
        <div className="related-sources-list">
          {(trend.relatedSources || []).map((s) => (
            <a key={s.id} className="related-source-item" href={s.url} target="_blank" rel="noopener noreferrer">
              <div className="title">{s.title}</div>
              <div className="meta-row small">
                <span>{s.sourceName}</span>
                <span className="dot">·</span>
                <span>{new Date(s.publishedAt).toLocaleDateString("ko-KR")}</span>
              </div>
            </a>
          ))}
        </div>
      </section>

      {primaryArticle && primaryArticle.keyPoints?.length > 0 && (
        <section className="collapse-panel">
          <details open>
            <summary>대표 글의 세부 key points 보기</summary>
            <ul>
              {primaryArticle.keyPoints.map((pt, i) => <li key={i}>{pt}</li>)}
            </ul>
          </details>
        </section>
      )}
    </div>
  );
};