/* global React, ReactDOM, window */
const { CATEGORIES_EXT, AUTHORS, ARTICLES, TAGS_EXT } = window.cynixDataExt;
const { TAGS_V2 } = window.cynixDataExtV2;
const { SharedMasthead, Breadcrumb, Colophon, findAuthor, findCategory } = window.cynixShared;

// Merge tag sources, dedupe by slug, prefer V2 metadata
const TAG_MAP = new Map();
[...TAGS_EXT, ...TAGS_V2].forEach((t) => {
  TAG_MAP.set(t.slug, { ...(TAG_MAP.get(t.slug) || {}), ...t });
});
const TAGS = Array.from(TAG_MAP.values()).sort((a, b) => (b.count || 0) - (a.count || 0));

// "Featured tag" the page is currently scoped to (mock — would be query param in production)
const FEATURED_TAG = TAGS.find((t) => t.slug === "wordpress-高速化") || TAGS[0];

// Articles tagged with current focus (use loose matching against ARTICLES.tags)
const taggedArticles = ARTICLES.filter((a) => {
  const tags = (a.tags || []).map((x) => String(x).toLowerCase());
  return tags.some((t) => t.includes("wordpress") || t.includes("ConoHa".toLowerCase()) || t.includes("実機") || t.includes("ベンチ"));
});
// Pad to ~10 entries by reusing related ones
const VISIBLE = taggedArticles.length >= 6 ? taggedArticles : ARTICLES.slice(0, 8);

// Group tags by parent category for cluster cloud
const CATS = CATEGORIES_EXT.map((c) => ({
  ...c,
  tags: TAGS.filter((t) => t.parent === c.id),
}));
const ORPHAN_TAGS = TAGS.filter((t) => !t.parent);

const App = () => (
  <div className="cross-shell">
    <SharedMasthead section="TAGS · ARCHIVE · ALL VOLUMES" />
    <Breadcrumb items={[
      { label: "HOME", href: "cynix-jp.html" },
      { label: "ARCHIVES", href: "monthly-archive.html" },
      { label: "TAGS" },
      { label: `#${FEATURED_TAG.label}` },
    ]} />

    <div className="cross-head">
      <div>
        <div className="kicker">CYNIX.JP — TAG ARCHIVE</div>
        <h1>
          #<em>{FEATURED_TAG.label}</em><br />
          に紐づく、{taggedArticles.length || VISIBLE.length}本の記事。
        </h1>
        <p className="deck">
          編集部が「{FEATURED_TAG.label}」のタグで束ねた記事のアーカイブ。創刊号から最新号まで、号をまたいで通読できる索引です。タグは、書き手ではなく <strong>読み手の知りたい順</strong> に並べ直してあります。
        </p>
      </div>
      <div className="meta">
        <span>TAG</span>
        <span className="big">{(FEATURED_TAG.count || VISIBLE.length).toString().padStart(2, "0")}</span>
        <span>ARTICLES</span>
        <span style={{ marginTop: 8 }}>UPDATED 2026/04/25</span>
      </div>
    </div>

    {/* Tag cloud — grouped by category */}
    <div className="cross-h2">
      <span className="num">SECTION 01</span>
      <span className="label">タグクラウド — カテゴリ別</span>
      <span className="right">{TAGS.length} TAGS · 6 CATEGORIES</span>
    </div>

    {CATS.filter((c) => c.tags.length > 0).map((c) => (
      <div key={c.id} style={{ marginBottom: 32 }}>
        <div style={{ display: "flex", alignItems: "baseline", gap: 12, marginBottom: 12 }}>
          <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.15em", color: "var(--vermilion)", fontWeight: 700, textTransform: "uppercase" }}>{c.id.toUpperCase()}</span>
          <span style={{ fontFamily: "'Noto Sans JP', serif", fontSize: 18, fontWeight: 900 }}>{c.title}</span>
          <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, opacity: 0.6, letterSpacing: "0.05em" }}>{c.tags.length} tags</span>
        </div>
        <div className="cross-tag-cloud">
          {c.tags.map((t) => (
            <a key={t.slug} href={`tag-archive.html?slug=${encodeURIComponent(t.slug)}`}
               className={`cross-tag ${t.slug === FEATURED_TAG.slug ? "active" : ""}`}>
              <span>#{t.label}</span>
              <span className="count">{t.count}</span>
            </a>
          ))}
        </div>
      </div>
    ))}

    {ORPHAN_TAGS.length > 0 && (
      <div style={{ marginBottom: 48 }}>
        <div style={{ display: "flex", alignItems: "baseline", gap: 12, marginBottom: 12 }}>
          <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.15em", color: "var(--vermilion)", fontWeight: 700 }}>CROSS-CATEGORY</span>
          <span style={{ fontFamily: "'Noto Sans JP', serif", fontSize: 18, fontWeight: 900 }}>横断タグ</span>
        </div>
        <div className="cross-tag-cloud">
          {ORPHAN_TAGS.map((t) => (
            <a key={t.slug} href={`tag-archive.html?slug=${t.slug}`} className="cross-tag">
              <span>#{t.label}</span>
              <span className="count">{t.count}</span>
            </a>
          ))}
        </div>
      </div>
    )}

    <div className="cross-2col">
      <div>
        <div className="cross-h2">
          <span className="num">SECTION 02</span>
          <span className="label">#{FEATURED_TAG.label} · 記事一覧</span>
          <span className="right">SORT BY DATE ↓</span>
        </div>

        <ol className="cross-list">
          {VISIBLE.map((a, i) => {
            const auth = findAuthor(a.author);
            return (
              <li key={a.slug} className="row">
                <div className="pg">
                  <span className="lab">P.</span>
                  {a.pageNum || String(i + 1).padStart(3, "0")}
                </div>
                <div>
                  <a className="title" href={`article-${a.type}.html`}>{a.title}</a>
                  <div className="deck">{a.deck}</div>
                </div>
                <div>
                  <div className="by">
                    <span className="name">{auth.name_jp}</span>
                    <span style={{ display: "block", fontSize: 9, opacity: 0.7, marginTop: 2 }}>{auth.role_en}</span>
                  </div>
                </div>
                <div className="date">
                  {a.published}<br />
                  <span style={{ color: "var(--vermilion)" }}>{a.readTime}MIN</span>
                </div>
              </li>
            );
          })}
        </ol>

        {/* Adjacent / related tags */}
        <div style={{ marginTop: 48, padding: 24, border: "1px solid var(--ink)", background: "var(--cream)" }}>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.15em", color: "var(--vermilion)", fontWeight: 700, marginBottom: 12 }}>RELATED TAGS — このタグと一緒に読まれる</div>
          <div className="cross-tag-cloud" style={{ margin: 0 }}>
            {TAGS.slice(1, 9).map((t) => (
              <a key={t.slug} href={`tag-archive.html?slug=${t.slug}`} className="cross-tag">
                <span>#{t.label}</span>
                <span className="count">{t.count}</span>
              </a>
            ))}
          </div>
        </div>
      </div>

      {/* Aside: Top tags + tag definition */}
      <aside className="cross-aside">
        <div className="card dark">
          <h6>TAG DEFINITION</h6>
          <div style={{ fontFamily: "'Noto Sans JP', serif", fontSize: 22, fontWeight: 900, lineHeight: 1.3, marginBottom: 8, color: "var(--highlight)" }}>
            #{FEATURED_TAG.label}
          </div>
          <p style={{ fontSize: 12, lineHeight: 1.7, opacity: 0.9, margin: 0 }}>
            WordPressサイトの応答速度・ページ表示時間を改善するための施策、ベンチマーク、運用知見をまとめたタグ。サーバー選定からチューニングまで横断する。
          </p>
        </div>

        <div className="card">
          <h6>TOP TAGS — TOP 10</h6>
          <ul>
            {TAGS.slice(0, 10).map((t, i) => (
              <li key={t.slug}>
                <a href={`tag-archive.html?slug=${t.slug}`} style={{ display: "flex", justifyContent: "space-between" }}>
                  <span><span style={{ color: "var(--vermilion)", fontFamily: "'JetBrains Mono', monospace", fontSize: 10, marginRight: 6 }}>{String(i + 1).padStart(2, "0")}</span>#{t.label}</span>
                  <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, opacity: 0.6 }}>{t.count}</span>
                </a>
              </li>
            ))}
          </ul>
        </div>

        <div className="card">
          <h6>JUMP TO</h6>
          <ul>
            <li><a href="/series-archive.html">→ シリーズ目次</a></li>
            <li><a href="/monthly-archive.html">→ 号別アーカイブ</a></li>
            <li><a href="/search.html">→ 検索</a></li>
            <li><a href="/cynix-jp.html">→ TOPに戻る</a></li>
          </ul>
        </div>
      </aside>
    </div>

    <Colophon />
  </div>
);

ReactDOM.createRoot(document.getElementById("root")).render(<App />);