// Public notice board page
function NoticeBoardPage({ onNav }) {
  const board = window.DZ_NOTICE_BOARD || window.DZ_CONTENT_LIBRARY;
  const [category, setCategory] = React.useState("all");
  const [district, setDistrict] = React.useState("all");
  const [query, setQuery] = React.useState("");
  const [activeId, setActiveId] = React.useState(board.notices[0]?.id || "");
  const districts = React.useMemo(() => {
    const list = Array.from(new Set(board.notices.map(n => n.district).filter(Boolean)));
    return ["all", ...list];
  }, [board]);
  const notices = React.useMemo(() => {
    const q = query.trim().toLowerCase();
    return board.notices.filter(n => {
      if (category !== "all" && n.category !== category) return false;
      if (district !== "all" && n.district !== district) return false;
      if (!q) return true;
      const haystack = [
        n.title,
        n.badge,
        n.issueNo,
        n.summary,
        n.date,
        n.district,
        n.footer,
        ...(n.body || []),
      ].join(" ").toLowerCase();
      return haystack.includes(q);
    });
  }, [board, category, district, query]);
  const active = notices.find(n => n.id === activeId) || notices[0] || board.notices[0];
  const counts = React.useMemo(() => ({
    total: board.notices.length,
    missing: board.notices.filter(n => n.category === "missing").length,
    registry: board.notices.filter(n => n.category === "registry").length,
    retired: board.notices.filter(n => n.category === "retired").length,
    daily: board.notices.filter(n => n.category === "daily").length,
  }), [board]);

  React.useEffect(() => {
    if (!notices.some(n => n.id === activeId)) {
      setActiveId(notices[0]?.id || board.notices[0]?.id || "");
    }
  }, [category, district, query, notices.length]);

  return (
    <div className="page notice-page">
      <section className="notice-hero">
        <div className="app">
          <div className="notice-hero-grid">
            <div>
              <div className="kicker mb-4"><span className="dot">●</span>NOTICE BOARD / {board.meta.issue}</div>
              <h1 className="serif">动物城告示栏</h1>
              <p>{board.meta.deck}</p>
              <div className="notice-hero-actions">
                <button className="btn btn-lg btn-accent" onClick={() => onNav("upload")}>记录一次相遇 →</button>
                <button className="btn btn-lg btn-ghost" onClick={() => onNav("archive")}>查看市民档案</button>
              </div>
            </div>
            <div className="notice-hero-card">
              <span>今日置顶</span>
              <strong>{board.notices[0]?.title}</strong>
              <p>{board.notices[0]?.summary}</p>
              <button type="button" onClick={() => setActiveId(board.notices[0]?.id)}>
                阅读公告 →
              </button>
            </div>
          </div>
        </div>
      </section>

      <section className="notice-stats-band">
        <div className="app notice-stats-grid">
          <div><strong>{counts.total}</strong><span>张公开告示</span></div>
          <div><strong>{counts.missing}</strong><span>寻找/状态确认</span></div>
          <div><strong>{counts.registry}</strong><span>入籍与征名</span></div>
          <div><strong>{counts.daily}</strong><span>日报与街区快讯</span></div>
        </div>
      </section>

      <section className="notice-filter-band">
        <div className="app">
          <div className="notice-tools">
            <label>
              <span>搜索告示</span>
              <input
                value={query}
                onChange={e => setQuery(e.target.value)}
                placeholder="搜索小拐子、莲花山、荣休、市民来信…"
              />
            </label>
            <label>
              <span>街区</span>
              <select value={district} onChange={e => setDistrict(e.target.value)}>
                {districts.map(d => <option key={d} value={d}>{d === "all" ? "全部街区" : d}</option>)}
              </select>
            </label>
            <div className="notice-result-count">
              当前显示 <strong>{notices.length}</strong> 张
            </div>
          </div>
          <div className="notice-filters">
            {board.categories.map(c => (
              <button
                key={c.key}
                type="button"
                className={category === c.key ? "active" : ""}
                onClick={() => setCategory(c.key)}
              >
                {c.label}
                <span>{c.key === "all" ? board.notices.length : board.notices.filter(n => n.category === c.key).length}</span>
              </button>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="app">
          <div className="notice-layout">
            <aside className="notice-list" aria-label="告示列表">
              {notices.length === 0 && (
                <div className="notice-empty">
                  没有找到匹配的告示。换个关键词，或者回到全部街区看看。
                  <button type="button" onClick={() => { setQuery(""); setDistrict("all"); setCategory("all"); }}>
                    清空筛选
                  </button>
                </div>
              )}
              {notices.map(item => (
                <button
                  key={item.id}
                  type="button"
                  className={"notice-list-item" + (active?.id === item.id ? " active" : "")}
                  onClick={() => setActiveId(item.id)}
                >
                  <span>{item.badge}</span>
                  <strong>{item.title}</strong>
                  <small>{item.date} · {item.district}</small>
                  <p>{item.summary}</p>
                </button>
              ))}
            </aside>

            {active && notices.length > 0 && (
              <article className={"notice-paper tone-" + (active.tone || "warm")}>
                <div className="notice-paper-head">
                  <div>
                    <span>{active.issueNo}</span>
                    <h2>{active.title}</h2>
                  </div>
                  <div className="notice-paper-stamp">{active.badge}</div>
                </div>
                <div className="notice-paper-meta">
                  <span>{active.date}</span>
                  <span>{active.district}</span>
                  {active.citizenId && <span>{active.citizenId}</span>}
                </div>
                <div className="notice-paper-body">
                  {active.body.map((p, i) => <p key={i}>{p}</p>)}
                </div>
                <div className="notice-paper-foot">
                  <span>{active.footer}</span>
                  <button className="btn btn-accent" onClick={() => onNav(active.route || "archive")}>
                    {active.ctaLabel || "继续查看"} →
                  </button>
                </div>
              </article>
            )}
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, {
  NoticeBoardPage,
  ContentLibraryPage: NoticeBoardPage,
});