// 공지사항 게시판
const NoticePage = ({setRoute, onContact}) => {
  const D = window.PAS_DATA;
  const cats = ["전체", "공지", "업데이트", "점검", "이벤트"];
  const [activeCat, setActiveCat] = React.useState("전체");
  const [q, setQ] = React.useState("");
  const [openId, setOpenId] = React.useState(null);

  const filtered = D.notices.filter(n => {
    if (activeCat !== "전체" && n.cat !== activeCat) return false;
    if (q && !n.title.toLowerCase().includes(q.toLowerCase())) return false;
    return true;
  });
  const pinned = filtered.filter(n => n.pinned);
  const rest = filtered.filter(n => !n.pinned);

  const catColor = (cat) => {
    const map = {
      "공지": {bg: "var(--chip-bg)", ink: "var(--chip-ink)"},
      "업데이트": {bg: "color-mix(in oklab, var(--accent) 14%, transparent)", ink: "var(--accent)"},
      "점검": {bg: "color-mix(in oklab, #F59E0B 18%, transparent)", ink: "#B45309"},
      "이벤트": {bg: "color-mix(in oklab, #8B5CF6 16%, transparent)", ink: "#6D28D9"},
    };
    return map[cat] || {bg: "var(--chip-bg)", ink: "var(--chip-ink)"};
  };

  return (
    <main>
      {/* Sub hero */}
      <section className="pas-sub-hero">
        <div className="pas-container">
          <div className="pas-sub-hero-breadcrumb">PAS / Notice</div>
          <h1 className="pas-sub-hero-title">공지사항</h1>
          <p className="pas-sub-hero-desc">
            제품 업데이트, 정기 점검, 정책 변경 등 PAS 이용과 관련된 모든 안내를 한 곳에서 확인하세요.
          </p>
        </div>
      </section>

      {/* Board */}
      <section className="pas-section pas-section--tight">
        <div className="pas-container">
          <div className="pas-board-toolbar">
            <div className="pas-board-cats">
              {cats.map(c => (
                <button
                  key={c}
                  className={`pas-board-cat ${activeCat === c ? "is-on" : ""}`}
                  onClick={() => setActiveCat(c)}
                >
                  {c}
                  <span className="pas-board-cat-count">
                    {c === "전체" ? D.notices.length : D.notices.filter(n => n.cat === c).length}
                  </span>
                </button>
              ))}
            </div>
            <div className="pas-board-search">
              <Icon name="search" size={16}/>
              <input
                type="text"
                placeholder="제목으로 검색"
                value={q}
                onChange={e => setQ(e.target.value)}
              />
            </div>
          </div>

          <div className="pas-board">
            <div className="pas-board-head">
              <div>번호</div>
              <div>분류</div>
              <div>제목</div>
              <div>등록일</div>
              <div>조회</div>
            </div>

            {[...pinned, ...rest].map((n) => {
              const c = catColor(n.cat);
              const isOpen = openId === n.no;
              return (
                <React.Fragment key={n.no}>
                  <button
                    className={`pas-board-row ${n.pinned ? "is-pinned" : ""} ${isOpen ? "is-open" : ""}`}
                    onClick={() => setOpenId(isOpen ? null : n.no)}
                  >
                    <div className="pas-board-no">
                      {n.pinned ? <span className="pas-board-pin"><Icon name="pin" size={12}/></span> : n.no}
                    </div>
                    <div>
                      <span className="pas-board-cat-chip" style={{background: c.bg, color: c.ink}}>{n.cat}</span>
                    </div>
                    <div className="pas-board-title">
                      <span>{n.title}</span>
                      {n.pinned && <span className="pas-board-new">NEW</span>}
                    </div>
                    <div className="pas-board-date mono">{n.date}</div>
                    <div className="pas-board-views mono">{n.views.toLocaleString()}</div>
                  </button>
                  {isOpen && (
                    <div className="pas-board-body">
                      <div className="pas-board-body-meta">
                        <span className="pas-board-cat-chip" style={{background: c.bg, color: c.ink}}>{n.cat}</span>
                        <span className="mono muted">{n.date}</span>
                        <span className="mono muted">조회 {n.views.toLocaleString()}</span>
                      </div>
                      <h3 style={{fontSize: 22, marginBottom: 16}}>{n.title}</h3>
                      <p style={{color: "var(--ink-soft)", lineHeight: 1.7, marginBottom: 16}}>
                        자세한 내용은 본 사이트 운영팀으로 문의 주시기 바랍니다. 본 공지사항은
                        대리점 네트워크를 통해서도 동일한 내용으로 안내드리고 있습니다.
                      </p>
                      <div style={{display: "flex", gap: 10, flexWrap: "wrap", marginTop: 20}}>
                        <button className="pas-btn pas-btn-sm" onClick={onContact}>문의하기 <Icon name="arrow" size={12}/></button>
                        <button className="pas-btn pas-btn-ghost pas-btn-sm" onClick={() => setOpenId(null)}>닫기</button>
                      </div>
                    </div>
                  )}
                </React.Fragment>
              );
            })}

            {filtered.length === 0 && (
              <div className="pas-board-empty">
                <Icon name="inbox" size={28}/>
                <div>검색 결과가 없습니다</div>
              </div>
            )}
          </div>

          <div className="pas-board-footer">
            <div className="mono muted">{filtered.length}건</div>
            <div className="pas-board-pager">
              <button className="pas-board-pager-btn" disabled><Icon name="chevron-left" size={14}/></button>
              <button className="pas-board-pager-btn is-on">1</button>
              <button className="pas-board-pager-btn">2</button>
              <button className="pas-board-pager-btn">3</button>
              <button className="pas-board-pager-btn"><Icon name="chevron-right" size={14}/></button>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
};

window.NoticePage = NoticePage;