/* global React, window */
const { SharedMasthead, Breadcrumb, Colophon } = window.cynixShared;
const { RANKINGS } = window.cynixCommunityData;
const { AUTHORS, ARTICLES } = window.cynixDataExt;
const { useState } = React;

const findAuth = (id) => AUTHORS.find(a => a.slug === id) || AUTHORS[0];
const findArt = (slug) => ARTICLES.find(a => a.slug === slug);
const fmt = (n) => n.toLocaleString("ja-JP");

const ChangeBadge = ({ ch }) => {
  const isUp = ch.startsWith("↑") || ch.startsWith("+");
  const isDown = ch.startsWith("-");
  const isZero = ch === "0";
  return <div className={"change" + (isUp ? " up" : isDown ? " down" : isZero ? " zero" : "")}>{ch}</div>;
};

const App = () => {
  const [tab, setTab] = useState("articles");
  const tabs = [
    { id: "articles", label: "ARTICLES", sub: "記事" },
    { id: "services", label: "SERVICES", sub: "サービス" },
    { id: "tags", label: "TAGS", sub: "タグ" },
  ];

  return (
    <>
      <SharedMasthead section="POPULAR" />
      <main className="mod-shell">
        <Breadcrumb items={[{ label: "TOP", href: "index.html" }, { label: "ランキング" }]} />

        <section style={{ borderTop: "4px double var(--ink)", borderBottom: "4px double var(--ink)", padding: "48px 0 56px", margin: "16px 0 48px", textAlign: "center" }}>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.3em", color: "var(--vermilion)", marginBottom: 14 }}>MONTHLY RANKINGS — 2026.04</div>
          <h1 style={{ fontFamily: "'Crimson Pro', serif", fontSize: 80, fontWeight: 500, lineHeight: 0.95, margin: 0, letterSpacing: "-0.03em" }}>人気ランキング</h1>
          <div style={{ fontFamily: "'Crimson Pro', serif", fontSize: 22, fontStyle: "italic", marginTop: 6, opacity: 0.7 }}>Most Read This Month</div>
          <p style={{ maxWidth: 640, margin: "20px auto 0", fontSize: 14, lineHeight: 1.85, opacity: 0.85 }}>
            読了率・滞在時間・回遊率を加味した編集部独自指標で算出。<br />毎月初旬に集計、最終更新は <b style={{ color: "var(--vermilion)" }}>2026-04-15 09:00</b>。
          </p>
        </section>

        {/* Snapshot */}
        <div className="mod-stats" style={{ marginBottom: 32 }}>
          <div><div className="num">{fmt(RANKINGS.articles.reduce((s, a) => s + a.views, 0))}</div><div className="lab">TOP10 合計PV</div><div className="sub">月間</div></div>
          <div><div className="num">3</div><div className="lab">↑ NEW IN</div><div className="sub">新規ランクイン</div></div>
          <div><div className="num">{RANKINGS.tags.length}</div><div className="lab">活発タグ</div><div className="sub">記事数3本以上</div></div>
          <div><div className="num">62<span className="unit">%</span></div><div className="lab">読了率平均</div><div className="sub">業界平均35%</div></div>
        </div>

        {/* Tab switcher */}
        <div style={{ display: "flex", borderBottom: "2px solid var(--ink)", marginBottom: 20 }}>
          {tabs.map(t => (
            <button key={t.id} onClick={() => setTab(t.id)} style={{
              padding: "14px 28px",
              border: "none",
              background: tab === t.id ? "var(--ink)" : "transparent",
              color: tab === t.id ? "var(--paper)" : "var(--ink)",
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: 12, letterSpacing: "0.2em",
              cursor: "pointer",
              borderRight: "1px solid var(--ink)",
              textAlign: "left",
            }}>
              {t.label}
              <small style={{ display: "block", fontSize: 9, opacity: 0.7, marginTop: 2 }}>{t.sub}</small>
            </button>
          ))}
          <div style={{ marginLeft: "auto", padding: "14px 20px", fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.15em", opacity: 0.6 }}>SORTED BY: COMPOSITE INDEX</div>
        </div>

        {/* Articles ranking */}
        {tab === "articles" && (
          <div className="mod-rank-list">
            {RANKINGS.articles.map(r => {
              const a = findArt(r.slug);
              const auth = findAuth(r.author);
              return (
                <div className="mod-rank-row" key={r.slug}>
                  <div className={"pos" + (r.rank <= 3 ? " top" : "")}>{String(r.rank).padStart(2, "0")}</div>
                  <div>
                    <a href={`/server/vps/vps-best/?slug=${r.slug}`} style={{ color: "var(--ink)" }}>
                      <div className="title">{r.title}</div>
                    </a>
                    <div className="meta">
                      <span style={{ color: "var(--vermilion)" }}>{auth.name_jp}</span> · {a?.deck || "—"} · <span style={{ opacity: 0.7 }}>{(a?.tags || []).slice(0, 2).join(" / ")}</span>
                    </div>
                  </div>
                  <div className="views">{fmt(r.views)}<small>VIEWS</small></div>
                  <ChangeBadge ch={r.change} />
                </div>
              );
            })}
          </div>
        )}

        {/* Services ranking */}
        {tab === "services" && (
          <div className="mod-rank-list">
            {RANKINGS.services.map(r => (
              <div className="mod-rank-row" key={r.rank}>
                <div className={"pos" + (r.rank <= 3 ? " top" : "")}>{String(r.rank).padStart(2, "0")}</div>
                <div>
                  <div className="title">{r.name}</div>
                  <div className="meta">
                    <span style={{ background: "var(--ink)", color: "var(--paper)", padding: "1px 8px" }}>{r.category}</span>
                    {r.note && <span style={{ marginLeft: 12, opacity: 0.85, textTransform: "none", fontStyle: "italic" }}>— {r.note}</span>}
                  </div>
                </div>
                <div className="views"><small>記事内 言及度</small></div>
                <ChangeBadge ch={r.change} />
              </div>
            ))}
          </div>
        )}

        {/* Tags ranking */}
        {tab === "tags" && (
          <div className="mod-rank-list">
            {RANKINGS.tags.map(r => (
              <div className="mod-rank-row" key={r.slug}>
                <div className={"pos" + (r.rank <= 3 ? " top" : "")}>{String(r.rank).padStart(2, "0")}</div>
                <div>
                  <a href={`tag-archive.html?slug=${r.slug}`} style={{ color: "var(--ink)" }}>
                    <div className="title">#{r.label}</div>
                  </a>
                  <div className="meta">関連記事 {r.articles} 本 — タグアーカイブを見る →</div>
                </div>
                <div className="views">{r.articles}<small>ARTICLES</small></div>
                <div className="change zero">─</div>
              </div>
            ))}
          </div>
        )}

        {/* Methodology note */}
        <div style={{ background: "var(--cream)", border: "2px solid var(--ink)", padding: "24px 32px", marginTop: 40, fontSize: 13, lineHeight: 1.85 }}>
          <b style={{ display: "block", marginBottom: 8, fontFamily: "'JetBrains Mono', monospace", letterSpacing: "0.15em", color: "var(--vermilion)" }}>RANKING METHODOLOGY — 算出指標</b>
          ランキングは<b>PV</b>(40%)、<b>読了率</b>(25%)、<b>平均滞在時間</b>(20%)、<b>回遊率</b>(15%) の加重スコアで決定しています。<br />
          編集部評価点は含めていません。「読まれた = 良い記事」とは限らないため、毎号 <a href="/editorial-team.html" style={{ color: "var(--vermilion)", borderBottom: "1px solid currentColor" }}>編集会議</a> で別途「編集部推薦記事」を選定しています。
        </div>

        <Colophon />
      </main>
    </>
  );
};

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