/* お知らせ一覧 + 詳細（slug クエリで切り替え） */

const { useState: useStateN, useEffect: useEffectN } = React;

function NewsPage() {
  const [items, setItems] = useStateN(window.PSPO_NEWS_MOCK || []);
  const [single, setSingle] = useStateN(null);
  const [loading, setLoading] = useStateN(true);

  const slug = new URLSearchParams(window.location.search).get("slug");

  useEffectN(() => {
    if (slug) {
      fetch("/api/news?slug=" + encodeURIComponent(slug))
        .then((r) => r.ok ? r.json() : Promise.reject())
        .then((data) => { setSingle(data); setLoading(false); })
        .catch(() => setLoading(false));
    } else {
      fetch("/api/news")
        .then((r) => r.ok ? r.json() : Promise.reject())
        .then((data) => {
          if (Array.isArray(data) && data.length > 0) setItems(data);
          setLoading(false);
        })
        .catch(() => setLoading(false));
    }
  }, [slug]);

  if (slug) {
    return (
      <>
        <PageHero
          breadcrumb={[
            { label: "お知らせ", href: "/news/" },
            { label: single ? single.title : "詳細" },
          ]}
          title={single ? single.title : "お知らせ"}
          lede={single && single.published_at ? single.published_at.split("T")[0] : ""}
        />
        <section className="section">
          <div className="container container-narrow prose">
            {loading
              ? <p className="u-text-mute">読み込み中...</p>
              : single
                ? <div dangerouslySetInnerHTML={{ __html: mdToHtml(single.body_md) }} />
                : <p>お知らせが見つかりませんでした。</p>}
            <p className="u-mt-8"><a href="/news/" className="btn btn--ghost">← お知らせ一覧へ</a></p>
          </div>
        </section>
      </>
    );
  }

  return (
    <>
      <PageHero
        breadcrumb={[{ label: "お知らせ" }]}
        title="お知らせ"
        lede="P・SPO CHITACOH からの最新情報をお届けします。"
      />
      <section className="section">
        <div className="container container-narrow">
          {loading
            ? <p className="u-text-mute">読み込み中...</p>
            : <NewsList items={items} />}
        </div>
      </section>
    </>
  );
}

/* 簡易 Markdown → HTML（見出し・太字・リンク・改行のみ） */
function mdToHtml(md) {
  if (!md) return "";
  return md
    .replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
    .replace(/^### (.+)$/gm, "<h3>$1</h3>")
    .replace(/^## (.+)$/gm, "<h2>$1</h2>")
    .replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>")
    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>')
    .replace(/\n\n/g, "</p><p>")
    .replace(/\n/g, "<br/>")
    .replace(/^/, "<p>").replace(/$/, "</p>");
}