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

// Mock issue/月号 metadata — cynix.jp ran since 2025-08
const ISSUES = [
  { num: "VOL.09", month: "2026-04", label: "2026年 春・特大号", theme: "夜間に強いVPS、再考", articles: 14, cover: "/story-01.png", current: true },
  { num: "VOL.08", month: "2026-03", label: "2026年 卒業号", theme: ".jpドメイン取得から30日", articles: 12, cover: "/story-03.png" },
  { num: "VOL.07", month: "2026-02", label: "2026年 立春号", theme: "SaaS疲れの処方箋", articles: 11, cover: "/story-05.png" },
  { num: "VOL.06", month: "2026-01", label: "2026年 創新号", theme: "AI画像ツール、絵を仕事にする", articles: 13, cover: "/story-04.png" },
  { num: "VOL.05", month: "2025-12", label: "2025年 年末特大号", theme: "今年契約したツール、解約したツール", articles: 16, cover: "/story-06.png" },
  { num: "VOL.04", month: "2025-11", label: "2025年 立冬号", theme: "Shopify、月商100万円までの距離", articles: 12, cover: "/story-02.png" },
  { num: "VOL.03", month: "2025-10", label: "2025年 中秋号", theme: "予約システム、現場の声", articles: 10, cover: "/story-07.png" },
  { num: "VOL.02", month: "2025-09", label: "2025年 残暑号", theme: "WordPress、ふたたび", articles: 11, cover: "/story-08.png" },
  { num: "VOL.01", month: "2025-08", label: "創刊号", theme: "夏の夜、サイトが落ちる前に", articles: 9, cover: "/story-01.png" },
];

const totalArticles = ISSUES.reduce((s, x) => s + x.articles, 0);
const current = ISSUES[0];

// Year groupings
const byYear = ISSUES.reduce((acc, iss) => {
  const y = iss.month.slice(0, 4);
  (acc[y] ||= []).push(iss);
  return acc;
}, {});
const YEARS = Object.keys(byYear).sort((a, b) => b.localeCompare(a));

// Articles for current issue (mock — top 4 from ARTICLES)
const currentArticles = ARTICLES.slice(0, 4);

const App = () => (
  <div className="cross-shell">
    <SharedMasthead section="MONTHLY · ARCHIVE · ALL ISSUES" />
    <Breadcrumb items={[
      { label: "HOME", href: "cynix-jp.html" },
      { label: "ARCHIVES" },
      { label: "MONTHLY" },
    ]} />

    <div className="cross-head">
      <div>
        <div className="kicker">CYNIX.JP — MONTHLY ISSUES</div>
        <h1>
          創刊から<em>9号</em>。<br />号別アーカイブ。
        </h1>
        <p className="deck">
          cynix.jpは月刊雑誌のリズムで毎月号を出しています。創刊号は2025年8月、その日からほぼ毎月、編集部の見立てを綴じてきました。バックナンバーは無期限で公開、目次・特集テーマ・寄稿者を一覧できる索引としてご利用ください。
        </p>
      </div>
      <div className="meta">
        <span>ISSUES</span>
        <span className="big">{ISSUES.length.toString().padStart(2, "0")}</span>
        <span>{totalArticles} ARTICLES TOTAL</span>
        <span style={{ marginTop: 8 }}>SINCE 2025-08</span>
      </div>
    </div>

    {/* Current issue spotlight */}
    <div className="cross-h2">
      <span className="num">CURRENT ISSUE</span>
      <span className="label">最新号</span>
      <span className="right">{current.num} · {current.month}</span>
    </div>

    <div style={{
      display: "grid", gridTemplateColumns: "240px 1fr 1fr", gap: 0,
      border: "2px solid var(--ink)", marginBottom: 56,
    }}>
      <div style={{
        background: `var(--cream) center/cover url(${current.cover})`,
        position: "relative", minHeight: 320, borderRight: "1px solid var(--ink)",
      }}>
        <div style={{
          position: "absolute", top: 12, left: 12, padding: "6px 10px", background: "var(--vermilion)", color: "var(--paper)",
          fontFamily: "'JetBrains Mono', monospace", fontSize: 10, fontWeight: 700, letterSpacing: "0.15em",
        }}>NEW · {current.num}</div>
        <div style={{
          position: "absolute", bottom: 0, left: 0, right: 0, padding: "16px 14px",
          background: "linear-gradient(transparent, rgba(28,28,28,0.85))", color: "var(--paper)",
          fontFamily: "'Noto Serif JP', serif", fontSize: 14, fontWeight: 700, lineHeight: 1.4,
        }}>{current.label}</div>
      </div>
      <div style={{ padding: "32px 28px", borderRight: "1px solid var(--ink)" }}>
        <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.2em", color: "var(--vermilion)", fontWeight: 700, marginBottom: 12 }}>SPECIAL FEATURE — 特集</div>
        <h2 style={{ fontFamily: "'Noto Sans JP', serif", fontSize: 32, fontWeight: 900, lineHeight: 1.2, margin: "0 0 16px", letterSpacing: "-0.01em" }}>{current.theme}</h2>
        <p style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 14, lineHeight: 1.85, color: "var(--muted)", margin: "0 0 20px" }}>
          ConoHa VPS・Xserver VPS・KAGOYA・さくらVPSを80日連続で測りなおす。深夜帯に強いのはどれか、編集部の最新結論を。
        </p>
        <div style={{ display: "flex", gap: 8, marginBottom: 20 }}>
          {["VPS", "ベンチマーク", "WordPress", "高速化"].map((t) => (
            <span key={t} className="cross-tag">#{t}</span>
          ))}
        </div>
        <a href={`article-${currentArticles[0].type}.html`} style={{
          display: "inline-flex", alignItems: "center", gap: 8, padding: "10px 18px",
          background: "var(--ink)", color: "var(--paper)", textDecoration: "none",
          fontFamily: "'Noto Sans JP', serif", fontWeight: 900, fontSize: 13,
        }}>特集を読む →</a>
      </div>
      <div style={{ padding: "20px 24px" }}>
        <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.2em", color: "var(--vermilion)", fontWeight: 700, marginBottom: 12 }}>TABLE OF CONTENTS — 目次</div>
        <ol style={{ listStyle: "none", padding: 0, margin: 0 }}>
          {currentArticles.map((a, i) => (
            <li key={a.slug} style={{ display: "flex", justifyContent: "space-between", padding: "10px 0", borderBottom: "1px dashed var(--ink)", gap: 12 }}>
              <span style={{ display: "flex", gap: 10 }}>
                <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: "var(--vermilion)", fontWeight: 700, marginTop: 2 }}>{String(i + 1).padStart(2, "0")}</span>
                <a href={`article-${a.type}.html`} style={{ fontFamily: "'Noto Sans JP', serif", fontWeight: 700, fontSize: 13, color: "var(--ink)", textDecoration: "none", lineHeight: 1.4 }}>{a.title}</a>
              </span>
              <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, opacity: 0.5, flexShrink: 0, marginTop: 2 }}>P.{a.pageNum}</span>
            </li>
          ))}
        </ol>
      </div>
    </div>

    {/* Year-grouped issues */}
    {YEARS.map((y) => (
      <div key={y} style={{ marginBottom: 48 }}>
        <div className="cross-h2">
          <span className="num">YEAR {y}</span>
          <span className="label">{y}年</span>
          <span className="right">{byYear[y].length} ISSUES · {byYear[y].reduce((s, x) => s + x.articles, 0)} ARTICLES</span>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))", gap: 16 }}>
          {byYear[y].map((iss) => (
            <a key={iss.num} href="#" className="cross-issue-card" style={{
              display: "flex", flexDirection: "column",
              border: "1px solid var(--ink)", textDecoration: "none", color: "var(--ink)",
              background: iss.current ? "var(--ink)" : "var(--paper)",
              transition: "transform 0.15s",
            }}
            onMouseEnter={(e) => e.currentTarget.style.transform = "translate(-2px, -2px)"}
            onMouseLeave={(e) => e.currentTarget.style.transform = "translate(0, 0)"}>
              <div style={{
                height: 140, background: `var(--cream) center/cover url(${iss.cover})`,
                borderBottom: "1px solid var(--ink)", position: "relative",
              }}>
                <div style={{
                  position: "absolute", top: 8, left: 8, padding: "4px 8px",
                  background: "var(--paper)", border: "1px solid var(--ink)",
                  fontFamily: "'JetBrains Mono', monospace", fontSize: 10, fontWeight: 700, letterSpacing: "0.1em",
                  color: "var(--ink)",
                }}>{iss.num}</div>
              </div>
              <div style={{ padding: "12px 14px", color: iss.current ? "var(--paper)" : "var(--ink)" }}>
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.1em", color: iss.current ? "var(--highlight)" : "var(--vermilion)", fontWeight: 700, marginBottom: 4 }}>
                  {iss.month} · {iss.articles} 本
                </div>
                <div style={{ fontFamily: "'Noto Sans JP', serif", fontSize: 14, fontWeight: 900, lineHeight: 1.35, marginBottom: 4 }}>{iss.label}</div>
                <div style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 12, lineHeight: 1.5, opacity: 0.85 }}>{iss.theme}</div>
              </div>
            </a>
          ))}
        </div>
      </div>
    ))}

    {/* Annual stats — fake but plausible */}
    <div style={{
      marginTop: 64, padding: "40px 48px", border: "2px solid var(--ink)",
      background: "var(--cream)",
    }}>
      <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.2em", color: "var(--vermilion)", fontWeight: 700, marginBottom: 24, textTransform: "uppercase" }}>
        BY THE NUMBERS — 創刊から9号
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 0, borderTop: "1px solid var(--ink)" }}>
        {[
          { num: "108", lab: "ARTICLES", sub: "総記事数" },
          { num: "9", lab: "ISSUES", sub: "発行号数" },
          { num: "12", lab: "WRITERS", sub: "寄稿者" },
          { num: "37", lab: "PRODUCTS", sub: "レビュー対象" },
          { num: "4.2", lab: "MIN AVG", sub: "平均読了時間" },
        ].map((s, i, arr) => (
          <div key={i} style={{
            padding: "20px 16px", borderRight: i < arr.length - 1 ? "1px solid var(--ink)" : "none",
            textAlign: "center",
          }}>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 36, fontWeight: 700, color: "var(--ink)", lineHeight: 1 }}>{s.num}</div>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.15em", color: "var(--vermilion)", fontWeight: 700, marginTop: 8 }}>{s.lab}</div>
            <div style={{ fontFamily: "'Noto Sans JP', serif", fontSize: 11, opacity: 0.7, marginTop: 4 }}>{s.sub}</div>
          </div>
        ))}
      </div>
    </div>

    <Colophon />
  </div>
);

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