(() => {
  window.MamoruApp = window.MamoruApp || {};

  const { C, NS, ARTICLES, PRODUCTS, PRODUCT_KINDS, CATEGORIES, Wrap, SectionHeader, ProductCard, TextList, useIsMobile, getGuideVisual } = window.MamoruApp;

  function pickFirst(items = [], fallback = "") {
    return Array.isArray(items) && items.length ? items[0] : fallback;
  }

  function hasItems(items = []) {
    return Array.isArray(items) && items.length > 0;
  }

  function buildReadTime(article) {
    const parts = [
      article.title,
      article.description,
      article.targetReader,
      article.searchIntent,
      ...(article.sections?.takeaways || []),
      ...(article.sections?.concerns || []),
      article.sections?.conclusion || "",
      ...(article.sections?.criteria || []),
      ...(article.sections?.suitedFor || []),
      ...(article.sections?.scenesFor || []),
      ...(article.sections?.howToUse || []),
      ...(article.sections?.notSuitedFor || []),
      ...(article.sections?.comparisonPoints || []),
      ...(article.sections?.sceneThinking || []),
      ...(article.sections?.categoryThinking || []),
      ...(article.sections?.cautions || []),
      ...((article.faq || []).flatMap((item) => [item.q, item.a])),
    ]
      .filter(Boolean)
      .join("");

    const estimatedMinutes = Math.max(2, Math.round(parts.length / 420));
    return `${estimatedMinutes}分で読めます`;
  }

  window.MamoruApp.GuideArticlePage = function GuideArticlePage({ slug = "how-to-choose-safety-goods", setPage }) {
    const mobile = useIsMobile();
    const article = ARTICLES.find((item) => item.slug === slug) || ARTICLES[0];
    const visual = getGuideVisual(article);
    const relatedProducts = PRODUCTS.filter((product) => article.relatedProducts.includes(product.id));
    const relatedKinds = PRODUCT_KINDS.filter((kind) => relatedProducts.some((product) => product.kind === kind.key));
    const relatedCategories = CATEGORIES.filter((category) => article.relatedCategories.includes(category.key));
    const readTime = buildReadTime(article);
    const topNeed = pickFirst(article.sections.concerns, "夜道や帰宅時の不安を、落ち着いて整理したい");
    const topSuit = pickFirst(article.sections.suitedFor, article.targetReader);
    const topCompare = pickFirst(article.sections.comparisonPoints, "比較の軸を知る");

    const sectionLinks = [
      { id: "article-conclusion", label: "まず結論" },
      { id: "article-quick-fit", label: "向いている人" },
      { id: "article-comparison", label: "比較ポイント" },
      { id: "article-faq", label: "FAQ" },
    ];

    const infoCards = [
      { label: "こんな不安向け", value: topNeed },
      { label: "まず見る比較軸", value: topCompare },
      { label: "読む目安", value: readTime },
    ];

    const relatedArticles = ARTICLES.filter((candidate) => candidate.slug !== article.slug)
      .map((candidate) => {
        let score = 0;
        if (candidate.relatedScenes.some((scene) => article.relatedScenes.includes(scene))) score += 2;
        if (candidate.relatedCategories.some((category) => article.relatedCategories.includes(category))) score += 2;
        if (candidate.relatedProducts.some((productId) => article.relatedProducts.includes(productId))) score += 1;
        if (candidate.category === article.category) score += 1;
        return { article: candidate, score };
      })
      .filter((item) => item.score > 0)
      .sort((a, b) => b.score - a.score)
      .slice(0, 3)
      .map((item) => item.article);

    const Label = ({ children }) => <span className="editorial-label">{children}</span>;

    const ArticleBlock = ({ title, children, accent = false }) => (
      <section className={`editorial-block${accent ? " editorial-block--soft" : ""}`}>
        <h2 className="editorial-block__title" style={{ marginBottom: 12 }}>{title}</h2>
        {children}
      </section>
    );

    const BlockWithId = ({ id, title, children, accent = false }) => (
      <section id={id} className={`editorial-block${accent ? " editorial-block--soft" : ""}`}>
        <h2 className="editorial-block__title" style={{ marginBottom: 12 }}>{title}</h2>
        {children}
      </section>
    );

    return (
      <div className="page-shell">
      <Wrap className="page-wrap">
        <div className="page-back-links" style={{ marginBottom: mobile ? 22 : 28 }}>
          <button onClick={() => setPage("guides")} className="page-back-link">
            ← ガイド一覧へ
          </button>
          <button onClick={() => setPage("home")} className="page-back-link">
            トップへ
          </button>
        </div>

        <section className="editorial-hero" style={mobile ? { gridTemplateColumns: "1fr", gap: 22, marginBottom: 30 } : {}}>
          <div className="editorial-hero__media">
            <img
              src={visual.src}
              alt={visual.alt}
              loading="lazy"
            />
            <a className="editorial-hero__credit" href={visual.creditUrl} target="_blank" rel="noreferrer" onClick={(e) => e.stopPropagation()}>
              {visual.creditLabel}
            </a>
          </div>
          <div>
            <SectionHeader
              eyebrow="Guide Article"
              title={article.title}
              body={article.description}
              maxWidth={650}
              style={{ marginBottom: 16 }}
              action={
                <button onClick={() => setPage(article.cta.page)} style={{ fontSize: 13, fontFamily: NS, color: C.accent, borderBottom: `1px solid ${C.accentSub}`, paddingBottom: 1 }}>
                  {article.cta.label} →
                </button>
              }
            />
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 14 }}>
              <Label>{article.category}</Label>
              <Label>更新日 {article.updatedAt}</Label>
              <Label>{article.searchIntent}</Label>
              <Label>{readTime}</Label>
            </div>
            <p style={{ fontSize: 13, fontFamily: NS, color: C.muted, lineHeight: 1.85, maxWidth: 560 }}>
              対象読者: {article.targetReader}
            </p>
            <div className="guide-hero-facts">
              {infoCards.map((card) => (
                <div key={card.label} className="guide-hero-fact">
                  <div className="guide-hero-fact__label">{card.label}</div>
                  <div className="guide-hero-fact__value">{card.value}</div>
                </div>
              ))}
            </div>
          </div>
        </section>

        <main className="editorial-stack">
          <section className="guide-quick-answer">
            <div className="guide-quick-answer__eyebrow">3秒でわかる結論</div>
            <p className="guide-quick-answer__text">{article.sections.conclusion}</p>
            <div className="guide-toc">
              {sectionLinks.map((link) => (
                <a key={link.id} href={`#${link.id}`} className="guide-toc__chip">
                  {link.label}
                </a>
              ))}
            </div>
          </section>

          <ArticleBlock title="この記事でわかること" accent>
            <TextList items={article.sections.takeaways} />
          </ArticleBlock>

          <ArticleBlock title="この記事が向く悩み">
            <TextList items={article.sections.concerns} />
          </ArticleBlock>

          <BlockWithId id="article-conclusion" title="まず結論">
            <p style={{ fontSize: 14, fontFamily: NS, color: C.text, lineHeight: 1.9 }}>{article.sections.conclusion}</p>
          </BlockWithId>

          <section className="guide-summary-grid" id="article-quick-fit">
            <div className="guide-summary-card">
              <div className="guide-summary-card__label">向いている人</div>
              <div className="guide-summary-card__value">{topSuit}</div>
              <p className="guide-summary-card__note">まずここに当てはまるなら、この記事の内容はかなり使いやすいです。</p>
            </div>
            <div className="guide-summary-card">
              <div className="guide-summary-card__label">向いている場面</div>
              <div className="guide-summary-card__value">{pickFirst(article.sections.scenesFor, "夜道や帰宅時")}</div>
              <p className="guide-summary-card__note">不安が出やすい場面を先に決めると、商品比較も迷いにくくなります。</p>
            </div>
            <div className="guide-summary-card">
              <div className="guide-summary-card__label">最初の比較軸</div>
              <div className="guide-summary-card__value">{topCompare}</div>
              <p className="guide-summary-card__note">全部を一気に見るより、最初の軸をひとつ決めるほうが読みやすいです。</p>
            </div>
          </section>

          <ArticleBlock title="選び方の基準">
            <TextList items={article.sections.criteria} />
          </ArticleBlock>

          <ArticleBlock title="どんな人に向いているか">
            <TextList items={article.sections.suitedFor} />
          </ArticleBlock>

          <ArticleBlock title="どんな場面に向いているか">
            <TextList items={article.sections.scenesFor} />
          </ArticleBlock>

          <ArticleBlock title="まずどう使うか">
            <div className="guide-steps">
              {article.sections.howToUse.map((step, index) => (
                <div key={step} className="guide-step-card">
                  <div className="guide-step-card__index">STEP {index + 1}</div>
                  <div className="guide-step-card__text">{step}</div>
                </div>
              ))}
            </div>
          </ArticleBlock>

          <ArticleBlock title="使い方">
            <TextList items={article.sections.howToUse} />
          </ArticleBlock>

          <ArticleBlock title="向いていない人">
            <TextList items={article.sections.notSuitedFor} />
          </ArticleBlock>

          <BlockWithId id="article-comparison" title="比較ポイント">
            <TextList items={article.sections.comparisonPoints} />
          </BlockWithId>

          <ArticleBlock title="夜道での考え方">
            <TextList items={article.sections.sceneThinking} />
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 16 }}>
              {relatedKinds.map((kind) => (
                <button key={kind.key} onClick={() => setPage(`kind:${kind.key}`)} className="editorial-chip-button">
                  {kind.label}
                </button>
              ))}
            </div>
          </ArticleBlock>

          <ArticleBlock title="機能別の考え方">
            <TextList items={article.sections.categoryThinking} />
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 16 }}>
              {relatedCategories.map((category) => (
                <button key={category.key} onClick={() => setPage(`category:${category.key}`)} className="editorial-chip-button">
                  {category.key} / {category.label}
                </button>
              ))}
            </div>
          </ArticleBlock>

          <ArticleBlock title="おすすめ商品導線">
            <div className="catalog-grid catalog-grid--compact" style={{ gap: 14 }}>
              {relatedProducts.map((product) => (
                <ProductCard
                  key={product.id}
                  product={product}
                  categoryLabel={CATEGORIES.find((category) => category.key === product.cat)?.label || ""}
                  setPage={setPage}
                  detailLabel="詳しく見る →"
                />
              ))}
            </div>
          </ArticleBlock>

          <ArticleBlock title="注意点">
            <TextList items={article.sections.cautions} />
          </ArticleBlock>

          <BlockWithId id="article-faq" title="FAQ">
            <div style={{ display: "grid", gap: 14 }}>
              {article.faq.map((item) => (
                <div key={item.q} style={{ borderBottom: `1px solid ${C.border}`, paddingBottom: 14 }}>
                  <h3 style={{ fontSize: 14, fontFamily: NS, color: C.navy, lineHeight: 1.6, marginBottom: 6 }}>Q. {item.q}</h3>
                  <p style={{ fontSize: 13, fontFamily: NS, color: C.muted, lineHeight: 1.85 }}>A. {item.a}</p>
                </div>
              ))}
            </div>
          </BlockWithId>

          {hasItems(relatedArticles) && (
            <ArticleBlock title="次に読みたい関連記事" accent>
              <div className="guide-related-grid">
                {relatedArticles.map((related) => (
                  <button key={related.slug} className="guide-related-guide" onClick={() => setPage(`guide:${related.slug}`)}>
                    <div className="guide-related-guide__eyebrow">{related.category}</div>
                    <div className="guide-related-guide__title">{related.title}</div>
                    <p className="guide-related-guide__text">{related.description}</p>
                    <div className="guide-related-guide__link">関連記事を読む →</div>
                  </button>
                ))}
              </div>
            </ArticleBlock>
          )}

          <ArticleBlock title="関連記事 / 関連ページCTA" accent>
            <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
              <button onClick={() => setPage("products")} style={{ fontSize: 13, fontFamily: NS, color: C.white, background: C.accent, borderRadius: 40, padding: "10px 18px" }}>
                商品一覧で比べる
              </button>
              <button onClick={() => setPage("guides")} style={{ fontSize: 13, fontFamily: NS, color: C.navy, background: C.white, border: `1px solid ${C.border}`, borderRadius: 40, padding: "10px 18px" }}>
                ガイド一覧へ
              </button>
            </div>
          </ArticleBlock>
        </main>
      </Wrap>
      </div>
    );
  };
})();