/* MACHIKADO ROOMS — pages */
const DD = window.MACHIKADO;

/* 街角トーンの短い導入コピー（カテゴリカード用） */
const CAT_TAGLINE = {
  sell:   "査定・住み替え・相続。納得して手放すための知恵。",
  buy:    "中古・新築・土地。自分の物差しで住まいを選ぶ。",
  reform: "直す、活かす、変える。家を育てるための工事。",
  invest: "小さな区画から。街とともにつくる資産形成。",
};
const OLIVE_SECTIONS_P = { buy: true, invest: true };

/* ============== TOP ============== */
function TopPage({ go }) {
  const arts = DD.articles;
  const feature = arts.find((a) => a.featured) || arts[0];
  const featSec = sectionOf(feature.cat) || catOf(feature.cat);
  const latest = arts.filter((a) => a.id !== feature.id).slice(0, 6);

  return (
    <main>
      {/* ---------- HERO ---------- */}
      <section className="hero wrap">
        <a className={"hero__media frame " + (feature.image ? "has-img" : "ph")} onClick={() => go({ page: "article", id: feature.id })}>
          {feature.image ? <img className="media-img" src={feature.image} alt="" loading="lazy" /> : null}
          <CornerMarks corners={["tl", "tr", "bl", "br"]} />
          <span className="hero__serial">
            <span className="tag tag--brick">特集</span>
            <span className="n">FEATURE 01</span>
          </span>
          {!feature.image ? <span className="ph__label">PHOTO ─ {feature.img || feature.title}</span> : null}
        </a>
        <div className="hero__body">
          <div className="eyebrow"><span className="mono">{feature.date} ・ {catOf(feature.cat).jp}</span></div>
          <h1 className="hero__title" onClick={() => go({ page: "article", id: feature.id })}>{feature.title}</h1>
          <p className="hero__lead">{feature.dek}</p>
          <a className="readlink" onClick={() => go({ page: "article", id: feature.id })}>この記事を読む <span>→</span></a>
        </div>
      </section>

      {/* ---------- CATEGORY NAV ---------- */}
      <section className="wrap section">
        <div className="sec-head">
          <span className="sec-idx">01</span>
          <h2 className="sec-title">四つの入口<span className="en">CATEGORIES</span></h2>
        </div>
        <div className="cat-grid">
          {DD.sections.map((s, i) => (
            <a key={s.id}
               className={"cat-card frame" + (OLIVE_SECTIONS_P[s.id] ? " frame--olive" : "")}
               onClick={() => go({ page: "category", cat: s.id })}>
              <CornerMarks corners={["tl"]} />
              <span className="cat-card__num">{String(i + 1).padStart(2, "0")}</span>
              <span className="cat-card__en">{s.en.toUpperCase()}</span>
              <h3 className="cat-card__jp">{s.jp}</h3>
              <p className="cat-card__desc">{CAT_TAGLINE[s.id] || s.desc}</p>
              <span className="cat-card__arrow">→</span>
            </a>
          ))}
        </div>
      </section>

      {/* ---------- LATEST ARTICLES ---------- */}
      <section className="wrap section">
        <div className="sec-head">
          <span className="sec-idx">02</span>
          <h2 className="sec-title">最新の記事<span className="en">LATEST</span></h2>
          <a className="sec-more" onClick={() => go({ page: "category", cat: "all" })}>すべて見る →</a>
        </div>
        <div className="article-grid">
          {latest.map((a) => <ArticleCard key={a.id} a={a} go={go} />)}
        </div>
      </section>

      {/* ---------- FEATURE STRIP : 街角採集 ---------- */}
      <section className="wrap section feature">
        <div className="feature__inner frame frame--olive">
          <CornerMarks corners={["tl", "tr", "bl", "br"]} />
          <div className="feature__media ph"><span className="ph__label">PHOTO ─ 街角のスナップ</span></div>
          <div className="feature__body">
            <div className="feature__kicker">連載 ／ SERIES 03</div>
            <h2 className="feature__title">街角採集</h2>
            <p className="feature__text">街を歩いて見つけた、いい「角」の記録。曲がり角の向こうにある暮らしのヒントを、写真とことばで集めていきます。</p>
            <a className="readlink" onClick={() => go({ page: "feature" })}>連載を見る <span>→</span></a>
          </div>
        </div>
      </section>

      {/* ---------- COLUMN LIST : 街角コラム ---------- */}
      <section className="wrap section">
        <div className="sec-head">
          <span className="sec-idx">03</span>
          <h2 className="sec-title">街角コラム<span className="en">COLUMN</span></h2>
          <a className="sec-more" onClick={() => go({ page: "column" })}>すべて見る →</a>
        </div>
        <ul className="column-list">
          {[
            { n: "01", title: "路地のつきあたりに、いい家がある", date: "2026.06.20" },
            { n: "02", title: "窓の高さで、暮らしは変わる", date: "2026.06.13" },
            { n: "03", title: "看板建築の、たのしみかた", date: "2026.06.05" },
          ].map((c) => (
            <li key={c.n}>
              <a className="column-item" onClick={() => go({ page: "column" })}>
                <span className="column-item__n">{c.n}</span>
                <h4 className="column-item__title">{c.title}</h4>
                <span className="column-item__date">{c.date}</span>
                <span className="column-item__arrow">→</span>
              </a>
            </li>
          ))}
        </ul>
      </section>

      {/* ---------- CTA ---------- */}
      <section className="wrap section">
        <div className="cta frame">
          <CornerMarks corners={["tl", "br"]} />
          <div className="cta__copy">
            <h2 className="cta__title">街の話を、ポストに。</h2>
            <p className="cta__text">月に一度、街角で見つけた住まいの話をお届けします。</p>
          </div>
          <form className="cta__form" onSubmit={(e) => { e.preventDefault(); }}>
            <input type="email" placeholder="メールアドレス" aria-label="メールアドレス" />
            <button type="submit">登録する</button>
          </form>
        </div>
      </section>
    </main>
  );
}

/* ============== CATEGORY ============== */
function CategoryPage({ go, cat }) {
  const id = cat || "all";
  const isAll = id === "all";
  const node = isAll ? null : catOf(id);
  const sec = isAll ? null : sectionOf(id);
  const activeLeaf = (node && node.parent) ? node.id : null; // id points at a leaf

  const leavesOf = (s) => (s.children && s.children.length) ? s.children.map((c) => c.id) : [s.id];
  const inSection = (a, s) => leavesOf(s).includes(a.cat);

  // 記事リスト（セクション → サブで絞り込み）
  let list;
  if (isAll) list = DD.articles;
  else {
    list = DD.articles.filter((a) => inSection(a, sec));
    if (activeLeaf) list = list.filter((a) => a.cat === activeLeaf);
  }
  const sectionTotal = isAll ? DD.articles.length : DD.articles.filter((a) => inSection(a, sec)).length;

  // 親カテゴリチップ
  const parentDefs = [{ id: "all", jp: "すべて" }, ...DD.sections.map((s) => ({ id: s.id, jp: s.jp }))];
  const parentCount = (pid) => pid === "all"
    ? DD.articles.length
    : DD.articles.filter((a) => inSection(a, catOf(pid))).length;
  const activeParent = isAll ? "all" : sec.id;

  // サブチップ（子を持つセクションのみ：売る／買う）
  const subDefs = (sec && sec.children && sec.children.length) ? sec.children : null;

  // ヒーロー表示
  const secIdx = isAll ? null : DD.sections.findIndex((s) => s.id === sec.id) + 1;
  const heroEn = isAll ? "ALL" : sec.en.toUpperCase();
  const heroJp = isAll ? "すべての記事" : sec.jp;
  const heroLead = isAll
    ? "売る・買う・リフォーム・投資。目的を横断するすべての記事を、街角の視点とともに新しい順に。"
    : sec.desc;
  const heroBadge = isAll ? "CATEGORY" : "CATEGORY " + String(secIdx).padStart(2, "0");

  return (
    <main>
      <div className="wrap">
        {/* breadcrumb */}
        <nav className="breadcrumb">
          <a onClick={() => go({ page: "top" })}>HOME</a><span className="sep">／</span>
          <a onClick={() => go({ page: "category", cat: "all" })}>CATEGORY</a><span className="sep">／</span>
          {activeLeaf ? (
            <React.Fragment>
              <a onClick={() => go({ page: "category", cat: sec.id })}>{heroEn}</a><span className="sep">／</span>
              <span>{node.jp}</span>
            </React.Fragment>
          ) : <span>{heroEn}</span>}
        </nav>

        {/* category hero */}
        <section className="cat-hero frame">
          <CornerMarks corners={["tl", "br"]} />
          <div className="cat-hero__body">
            <div className="cat-hero__eyebrow">
              <span className="tag tag--brick">{heroBadge}</span>
              <span className="cat-hero__en">{heroEn}</span>
            </div>
            <h1 className="cat-hero__title">{heroJp}</h1>
            <p className="cat-hero__lead">{heroLead}</p>
          </div>
          <div className="cat-hero__count frame">
            <CornerMarks corners={["tl"]} />
            <span className="n">{String(sectionTotal).padStart(2, "0")}</span>
            <span className="l">ARTICLES</span>
          </div>
        </section>

        {/* filter bar */}
        <section className="filterbar">
          <div className="filter-row">
            <span className="filter-row__label">CATEGORY</span>
            <div className="chips">
              {parentDefs.map((p) => (
                <button key={p.id} type="button"
                  className={"chip" + (p.id === activeParent ? " is-active" : "")}
                  onClick={() => go({ page: "category", cat: p.id })}>
                  {p.jp}<span className="c">{String(parentCount(p.id)).padStart(2, "0")}</span>
                </button>
              ))}
            </div>
          </div>
          {subDefs ? (
            <div className="filter-row filter-row__sub">
              <span className="filter-row__label">TYPE</span>
              <div className="chips">
                <button type="button"
                  className={"chip chip--sub" + (!activeLeaf ? " is-active" : "")}
                  onClick={() => go({ page: "category", cat: sec.id })}>
                  すべて<span className="c">{String(sectionTotal).padStart(2, "0")}</span>
                </button>
                {subDefs.map((s) => (
                  <button key={s.id} type="button"
                    className={"chip chip--sub" + (activeLeaf === s.id ? " is-active" : "")}
                    onClick={() => go({ page: "category", cat: s.id })}>
                    {s.jp}<span className="c">{String(DD.articles.filter((a) => a.cat === s.id).length).padStart(2, "0")}</span>
                  </button>
                ))}
              </div>
            </div>
          ) : null}
        </section>

        {/* result head */}
        <div className="result-head">
          <h2 className="result-head__title">記事一覧</h2>
          <span className="result-head__count">{String(list.length).padStart(2, "0")} / {String(sectionTotal).padStart(2, "0")} 件</span>
          <span className="result-head__sort"><span className="sq"></span>新着順</span>
        </div>

        {/* grid / empty */}
        {list.length > 0 ? (
          <div className="article-grid">
            {list.map((a) => <ArticleCard key={a.id} a={a} go={go} rich />)}
          </div>
        ) : (
          <div className="empty frame">
            <CornerMarks corners={["tl", "tr", "bl", "br"]} />
            <span className="empty__mark"><i></i><i></i><i></i><i></i></span>
            <h3 className="empty__title">この条件の記事はまだありません</h3>
            <p className="empty__text">選んだカテゴリの組み合わせに該当する記事が見つかりませんでした。条件をリセットして、ほかの記事も覗いてみてください。</p>
            <button type="button" className="empty__reset" onClick={() => go({ page: "category", cat: "all" })}>フィルタをリセット</button>
          </div>
        )}

        {/* pager（表示のみ） */}
        {list.length > 0 ? (
          <nav className="pager">
            <a className="is-active">01</a>
          </nav>
        ) : null}
      </div>
    </main>
  );
}

/* ============== ARTICLE ============== */
function defaultBody(a) {
  return [
    { t: "p", c: a.dek },
    { t: "p", c: "家にまつわる決断は、たいてい一度きりだ。だからこそ、なんとなくで進めてしまうと、後から取り返しがつきにくい。まずは前提を一度ほどいて、何を大切にしたいのかを言葉にするところから始めたい。" },
    { t: "h", c: "数字と、気持ちを分けて考える" },
    { t: "p", c: "迷いが深いときほど、人は数字と感情を同時に天秤にかけてしまう。価格や条件といった事実をいったん並べ、それから自分の気持ちと向き合う。順番を分けるだけで、見える景色はずいぶん変わってくる。" },
    { t: "quote", c: "急がないこと。それも、立派な戦略のひとつだ。", by: "本文より" },
    { t: "p", c: "情報を集めるほど、かえって決められなくなることもある。大切なのは、すべてを知ることではなく、自分にとっての判断軸を一本持つことだ。その軸さえあれば、選択肢の多さに飲まれずに済む。" },
    { t: "h", c: "その先の暮らしから、逆算する" },
    { t: "p", c: "最後に立ち返るのは、いつも同じ問いだ。その家で、どんな毎日を送りたいのか。条件や相場の話も、結局はそこへたどり着くための道具にすぎない。暮らしの像が鮮明になれば、おのずと答えは絞られていく。" },
  ];
}

function ArticlePage({ go, id }) {
  const a = DD.articles.find((x) => x.id === id) || DD.articles[0];
  const c = catOf(a.cat);
  const sec = sectionOf(a.cat) || c;
  const au = authOf(a.author);
  const isLeaf = !!(DD.catMap[a.cat] && DD.catMap[a.cat].parent);
  const avatarChar = (au.name || "編").trim().charAt(0);
  const [prog, setProg] = React.useState(0);

  React.useEffect(() => {
    window.scrollTo(0, 0);
    const onScroll = () => {
      const doc = document.documentElement;
      const max = (doc.scrollHeight - doc.clientHeight) || 1;
      setProg(Math.min(100, Math.max(0, (window.scrollY / max) * 100)));
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll, { passive: true });
    onScroll();
    return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); };
  }, [id]);

  const bodyHtml = a.bodyHtml || "";
  const leadHtml = a.leadHtml || "";
  const body = a.body && a.body.length ? a.body : defaultBody(a);
  const related = DD.articles.filter((x) => x.id !== a.id && (sectionOf(x.cat) || {}).id === sec.id);
  const fill = DD.articles.filter((x) => x.id !== a.id);
  const rel = (related.length ? related : fill).slice(0, 3);
  const hashtags = ["#" + sec.en, isLeaf ? "#" + c.jp : null, "#不動産", "#MACHIKADO_ROOMS"].filter(Boolean);

  let hN = 0;
  return (
    <main>
      <div className="progress"><div className="progress__fill" style={{ width: prog + "%" }}></div></div>

      <div className="wrap">
        {/* breadcrumb */}
        <nav className="breadcrumb">
          <a onClick={() => go({ page: "top" })}>MACHIKADO ROOMS</a><span className="sep">／</span>
          <a onClick={() => go({ page: "category", cat: sec.id })}>{sec.jp}</a><span className="sep">／</span>
          {isLeaf ? (<React.Fragment><a onClick={() => go({ page: "category", cat: a.cat })}>{sec.en.toUpperCase()}</a><span className="sep">／</span></React.Fragment>) : null}
          <span className="current">{a.title}</span>
        </nav>

        <article className="article">
          {/* header */}
          <header className="article-head">
            <div className="article-head__tags">
              <span className={"tag tag--" + tagToneOf(a.cat)}>{sec.jp}</span>
              <span className="article-head__cat-en">{sec.en.toUpperCase()}{isLeaf ? " ／ " + c.jp : ""}</span>
            </div>
            <h1 className="article-head__title">{a.title}</h1>
            <p className="article-head__lead">{a.dek}</p>

            <div className="byline">
              <span className="byline__avatar">{avatarChar}<span className="cm"></span></span>
              <div className="byline__meta">
                <span className="byline__name">{au.name}<span className="role">{au.role}</span></span>
                <span className="byline__sub">{a.date}{a.read ? " ・ 読了 約" + a.read + "分" : ""}</span>
              </div>
              <div className="byline__share">
                <button type="button" aria-label="共有"><span className="sq"></span></button>
                <button type="button" aria-label="保存"><span className="sq"></span></button>
              </div>
            </div>
          </header>

          {/* hero figure */}
          <figure className="article-figure frame">
            <span className={"article-figure__media frame " + (a.image ? "has-img" : "ph")}>
              {a.image ? <img className="media-img" src={a.image} alt={a.title} /> : null}
              <CornerMarks corners={["tl", "tr", "bl", "br"]} />
              {!a.image ? <span className="ph__label">PHOTO ─ {a.img || a.title}</span> : null}
            </span>
            <figcaption><span className="sq"></span>{a.img || a.title}　撮影：街角採集</figcaption>
          </figure>

          {/* prose */}
          <div className="prose-layout">
            <div className="prose-rail" aria-hidden="true">
              <span className="prose-rail__sq"></span>
              <span className="prose-rail__label">{sec.jp}のはなし</span>
              <span className="prose-rail__line"></span>
            </div>
            {(bodyHtml || leadHtml) ? (
              <div className="prose" dangerouslySetInnerHTML={{ __html: (leadHtml ? '<div class="prose__lead">' + leadHtml + '</div>' : "") + (bodyHtml || "") }} />
            ) : (
              <div className="prose">
                {body.map((blk, i) => {
                  if (blk.t === "h") { hN += 1; return (
                    <h2 key={i}><span className="num">{String(hN).padStart(2, "0")}</span>{blk.c}</h2>
                  ); }
                  if (blk.t === "quote") return (
                    <div key={i} className="pullquote frame">
                      <CornerMarks corners={["tl", "br"]} />
                      <p className="pullquote__text">「{blk.c}」</p>
                      <p className="pullquote__cite">{au.name} ／ {blk.by || "本記事より"}</p>
                    </div>
                  );
                  return <p key={i}>{blk.c}</p>;
                })}
              </div>
            )}
          </div>

          {/* tag row */}
          <div className="tag-row">
            {hashtags.map((h) => <a key={h} className="hashtag">{h}</a>)}
          </div>

          {/* author box */}
          <aside className="author-box frame">
            <CornerMarks corners={["tl"]} />
            <span className="author-box__avatar">{avatarChar}</span>
            <div className="author-box__body">
              <h3 className="author-box__name">{au.name}</h3>
              <p className="author-box__role">MACHIKADO ROOMS 編集部 ／ {au.role}</p>
              <p className="author-box__bio">{au.role}として、住まいと暮らしのあいだにある「決めかた」を、街角の視点で書いています。担当は「{sec.jp}」。</p>
            </div>
          </aside>
        </article>

        {/* related */}
        <section className="related">
          <div className="sec-head">
            <span className="sec-idx">RE</span>
            <h2 className="sec-title">関連する記事<span className="en">RELATED</span></h2>
          </div>
          <div className="article-grid">
            {rel.map((x) => <ArticleCard key={x.id} a={x} go={go} />)}
          </div>
        </section>
      </div>
    </main>
  );
}

Object.assign(window, { TopPage, CategoryPage, ArticlePage });