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

const totalChapters = SERIES_V2.reduce((s, x) => s + x.chapterCount, 0);

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

    <div className="cross-head">
      <div>
        <div className="kicker">CYNIX.JP — SERIES INDEX</div>
        <h1>
          <em>3つのシリーズ</em>を、<br />通読する場所。
        </h1>
        <p className="deck">
          単発の記事を、編集部が編んだ筋書きで通して読む。創刊号から続く全シリーズを一覧。各シリーズは、課題発見 → 比較検討 → 実装 → 振り返りの流れで構成しています。途中から読んでも構いませんが、できれば第1章から。
        </p>
      </div>
      <div className="meta">
        <span>SERIES</span>
        <span className="big">{SERIES_V2.length.toString().padStart(2, "0")}</span>
        <span>{totalChapters} CHAPTERS TOTAL</span>
        <span style={{ marginTop: 8 }}>UPDATED 2026/04/25</span>
      </div>
    </div>

    {/* Index strip — quick jump */}
    <div style={{
      display: "grid", gridTemplateColumns: `repeat(${SERIES_V2.length}, 1fr)`,
      gap: 0, border: "1px solid var(--ink)", marginTop: 24, marginBottom: 56,
    }}>
      {SERIES_V2.map((s, i) => (
        <a key={s.slug} href={`#${s.slug}`} style={{
          padding: "20px 24px",
          borderRight: i < SERIES_V2.length - 1 ? "1px solid var(--ink)" : "none",
          textDecoration: "none", color: "var(--ink)",
          display: "block",
        }}>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.15em", color: "var(--vermilion)", fontWeight: 700 }}>
            SERIES {String(i + 1).padStart(2, "0")}
          </div>
          <div style={{ fontFamily: "'Noto Sans JP', serif", fontWeight: 900, fontSize: 18, lineHeight: 1.3, marginTop: 8 }}>{s.title}</div>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, opacity: 0.6, letterSpacing: "0.05em", marginTop: 6 }}>
            {s.chapterCount} CHAPTERS · By {findAuthor(s.author).name_jp}
          </div>
        </a>
      ))}
    </div>

    {/* Each series detailed */}
    {SERIES_V2.map((s, i) => {
      const auth = findAuthor(s.author);
      const completionPct = i === 1 ? 33 : i === 0 ? 60 : 25;
      return (
        <div key={s.slug} id={s.slug} style={{ marginBottom: 64 }}>
          <div className="cross-h2">
            <span className="num">SERIES {String(i + 1).padStart(2, "0")}</span>
            <span className="label">{s.title}</span>
            <span className="right">{s.chapterCount} CHAPTERS · BY {auth.name_en.toUpperCase()}</span>
          </div>

          <div className="series-card">
            <div className="num-block">
              <div className="lab">EPISODES</div>
              <div className="ep">{s.chapterCount}</div>
              <div className="total">CHAPTERS</div>
              <div style={{ marginTop: 12, paddingTop: 12, borderTop: "1px solid var(--ink)", fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: "0.1em", textTransform: "uppercase", opacity: 0.7 }}>
                AUTHOR
              </div>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 6, marginTop: 6 }}>
                <div style={{ width: 24, height: 24, borderRadius: "50%", background: `var(--cream) center/cover url(${auth.avatar})`, border: "1px solid var(--ink)" }}></div>
                <span style={{ fontFamily: "'Noto Sans JP', serif", fontSize: 12, fontWeight: 700 }}>{auth.name_jp}</span>
              </div>
            </div>

            <div>
              <h3>{s.title}</h3>
              <p className="deck">{s.description}</p>

              {/* Progress meter */}
              <div style={{ display: "flex", alignItems: "center", gap: 12, margin: "12px 0 16px" }}>
                <div style={{ flex: 1, height: 6, background: "var(--cream)", border: "1px solid var(--ink)", position: "relative" }}>
                  <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: `${completionPct}%`, background: "var(--vermilion)" }}></div>
                </div>
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--vermilion)", fontWeight: 700 }}>
                  {completionPct}% PUBLISHED
                </div>
              </div>

              <div className="episodes">
                {s.chapters.map((ch) => {
                  const published = ARTICLES.find((a) => a.slug === ch.slug);
                  return (
                    <div key={ch.slug} className="ep-row">
                      <span className="n">CH.{String(ch.chapter).padStart(2, "0")}</span>
                      {published ? (
                        <a href={`article-${published.type || "review"}.html`}>{ch.title}</a>
                      ) : (
                        <span style={{ color: "var(--ink)", opacity: 0.55 }}>{ch.title}</span>
                      )}
                      <span className={`read ${published ? "done" : ""}`}>
                        {published ? "PUBLISHED" : "COMING SOON"}
                      </span>
                    </div>
                  );
                })}
              </div>

              <div style={{ marginTop: 20, paddingTop: 16, borderTop: "1px dashed var(--ink)", display: "flex", gap: 12 }}>
                <a href={`article-${(ARTICLES.find((a) => a.slug === s.chapters[0].slug) || {}).type || "review"}.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 }}>
                  第1章から読む <span style={{ fontFamily: "'JetBrains Mono', monospace" }}>→</span>
                </a>
                <a href={`/authors/${s.author}`}
                   style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "10px 18px", background: "var(--paper)", color: "var(--ink)", textDecoration: "none", fontFamily: "'Noto Sans JP', serif", fontWeight: 900, fontSize: 13, border: "1px solid var(--ink)" }}>
                  著者のアーカイブを見る
                </a>
              </div>
            </div>
          </div>
        </div>
      );
    })}

    {/* Editor's note — closing */}
    <div style={{
      background: "var(--ink)", color: "var(--paper)", padding: "48px 56px",
      margin: "32px -32px 0", display: "grid", gridTemplateColumns: "auto 1fr",
      gap: 32, alignItems: "start",
    }}>
      <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.2em", color: "var(--highlight)", fontWeight: 700, textTransform: "uppercase", borderRight: "1px solid rgba(244,239,227,0.3)", paddingRight: 32 }}>
        EDITOR'S<br />NOTE
      </div>
      <div>
        <p style={{ fontFamily: "'Noto Sans JP', serif", fontSize: 17, lineHeight: 1.85, margin: "0 0 16px", textWrap: "pretty" }}>
          単発の記事は速報になり、シリーズは教科書になる。創刊からまもなく1年、編集部はこの2つのバランスを試行錯誤しています。<br />
          通読してくださる方にこそ、雑誌としてのcynix.jpを最も楽しんでいただけるはずです。
        </p>
        <p style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", opacity: 0.7, margin: 0 }}>
          編集長 三宅 直人 / NAOTO MIYAKE
        </p>
      </div>
    </div>

    <Colophon />
  </div>
);

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