// Notices / 공지사항 page

const NOTICE_CATS = [
  { key: "all", label: "전체" },
  { key: "service", label: "서비스" },
  { key: "update", label: "업데이트" },
  { key: "event", label: "이벤트" },
  { key: "maintenance", label: "점검" },
];

const CAT_LABELS = {
  service: "서비스",
  update: "업데이트",
  event: "이벤트",
  maintenance: "점검",
};

const NOTICES = [
  {
    id: 142, cat: "event", pinned: true,
    title: "[5월 한정] 첫 예약 시 50% 할인 쿠폰 지급",
    preview: "신규 가입 후 첫 택배 예약 시 즉시 사용 가능한 50% 할인 쿠폰을 드려요. 5월 31일까지 신청해주세요.",
    date: "2026.05.18",
  },
  {
    id: 141, cat: "update", pinned: true,
    title: "솔브잇 v2.4 업데이트 안내 — 받는 분 카카오톡 알림 개선",
    preview: "받는 분에게 발송되는 카카오톡 알림톡에 도착 예상 시간과 기사님 정보가 함께 표시됩니다.",
    date: "2026.05.15",
  },
  {
    id: 140, cat: "service",
    title: "GS Postbox, CU 편의점택배 통합 조회 정식 지원",
    preview: "이제 편의점 택배도 솔브잇에서 한 번에 조회하실 수 있어요. 송장번호만 입력하면 자동으로 인식됩니다.",
    date: "2026.05.10",
  },
  {
    id: 139, cat: "maintenance",
    title: "[5/22 새벽 02:00 ~ 04:00] 정기 서비스 점검 안내",
    preview: "서비스 안정성 향상을 위한 정기 점검이 진행됩니다. 해당 시간 동안 일부 기능 이용이 제한될 수 있어요.",
    date: "2026.05.09",
  },
  {
    id: 138, cat: "event",
    title: "친구 초대 이벤트 — 초대 시 3,000원 즉시 적립",
    preview: "친구를 솔브잇에 초대하면 두 분 모두 3,000원 적립금을 드립니다. 적립금은 다음 예약부터 바로 사용 가능.",
    date: "2026.05.02",
  },
  {
    id: 137, cat: "update",
    title: "마이페이지 디자인 개편 안내",
    preview: "예약 내역, 결제 내역, 주소록을 한 화면에서 빠르게 확인할 수 있도록 마이페이지를 새단장했어요.",
    date: "2026.04.28",
  },
  {
    id: 136, cat: "service",
    title: "분실·파손 보상 한도 상향 안내 (최대 50만원)",
    preview: "박스 크기에 따라 자동 적용되는 분실·파손 보상 한도를 기존 30만원에서 최대 50만원으로 상향합니다.",
    date: "2026.04.20",
  },
  {
    id: 135, cat: "service",
    title: "[안내] 어버이날 연휴 기간 배송 지연 안내",
    preview: "5월 5일~7일 연휴 기간 동안 일부 지역에서 배송이 1~2일 지연될 수 있습니다. 양해 부탁드립니다.",
    date: "2026.04.18",
  },
  {
    id: 134, cat: "maintenance",
    title: "결제 시스템 일시 점검 안내 (4/15 04:00 ~ 04:30)",
    preview: "결제 시스템 안정화 작업이 진행됩니다. 점검 시간 동안 신규 예약 결제가 제한될 수 있어요.",
    date: "2026.04.12",
  },
  {
    id: 133, cat: "update",
    title: "iOS·Android 앱 v1.8 출시 — 다크 모드 지원",
    preview: "사용자 요청이 많았던 다크 모드를 정식 지원합니다. 시스템 설정에 따라 자동 전환되며, 수동 설정도 가능해요.",
    date: "2026.04.05",
  },
];

const FEATURED = NOTICES.find(n => n.pinned) || NOTICES[0];

const Notices = ({ navigate }) => {
  const [cat, setCat] = React.useState("all");
  const [query, setQuery] = React.useState("");
  const [page, setPage] = React.useState(1);
  const perPage = 8;

  const filtered = NOTICES.filter(n => {
    if (cat !== "all" && n.cat !== cat) return false;
    if (query.trim()) {
      const q = query.toLowerCase();
      return n.title.toLowerCase().includes(q) || n.preview.toLowerCase().includes(q);
    }
    return true;
  });

  // Featured comes first, then non-featured rest
  const nonFeatured = filtered.filter(n => !(n.id === FEATURED.id && cat === "all" && !query));
  const totalPages = Math.max(1, Math.ceil(nonFeatured.length / perPage));
  const visible = nonFeatured.slice((page - 1) * perPage, page * perPage);
  const showFeatured = cat === "all" && !query.trim();

  return (
    <main>
      <div className="page-head">
        <div className="container-narrow">
          <h1>공지사항</h1>
          <p>솔브잇의 서비스 변경, 이벤트, 점검 소식을 가장 빠르게 확인하세요.</p>
        </div>
      </div>

      <section style={{ paddingBottom: 96 }}>
        <div className="container">
          <div className="notice-toolbar">
            <div className="notice-cats">
              {NOTICE_CATS.map(c => (
                <button key={c.key}
                  className={`notice-cat ${cat === c.key ? "active" : ""}`}
                  onClick={() => { setCat(c.key); setPage(1); }}>
                  {c.label}
                </button>
              ))}
            </div>
            <div className="notice-search-mini">
              <Icon name="search" size={14}/>
              <input
                type="text"
                placeholder="공지 검색"
                value={query}
                onChange={e => { setQuery(e.target.value); setPage(1); }}
              />
            </div>
          </div>

          {showFeatured && (
            <div className="notice-featured">
              <div>
                <div className="notice-featured-tag">
                  <Icon name="sparkle" size={12}/> 주목할 만한 소식
                </div>
              </div>
              <div>
                <div className="notice-featured-label">{CAT_LABELS[FEATURED.cat]} · {FEATURED.date}</div>
                <h3>{FEATURED.title}</h3>
                <p>{FEATURED.preview}</p>
              </div>
              <button className="btn btn-primary">
                자세히 보기 <Icon name="arrow-right" size={14}/>
              </button>
            </div>
          )}

          {visible.length === 0 ? (
            <div style={{
              padding: 64, textAlign: "center", color: "var(--muted)",
              border: "1px solid var(--line)", borderRadius: "var(--radius-lg)", background: "var(--card)"
            }}>
              <div style={{ marginBottom: 12, color: "var(--muted-2)" }}>
                <Icon name="search" size={32} stroke={1.4}/>
              </div>
              {query
                ? <span>"{query}"에 해당하는 공지사항이 없어요.</span>
                : <span>해당 카테고리에 등록된 공지가 없어요.</span>}
            </div>
          ) : (
            <div className="notice-list">
              {visible.map((n, i) => (
                <div key={n.id} className={`notice-row ${n.pinned && cat !== "all" ? "pinned" : ""}`}>
                  <div className="notice-num">No. {String(n.id).padStart(3, "0")}</div>
                  <span className={`notice-tag ${n.cat}`}>{CAT_LABELS[n.cat]}</span>
                  <div className="notice-title-cell">
                    <div className="title">
                      {n.pinned && cat !== "all" && <span className="pin">📌 고정</span>}
                      {n.title}
                    </div>
                    <div className="preview">{n.preview}</div>
                  </div>
                  <div className="notice-date">{n.date}</div>
                </div>
              ))}
            </div>
          )}

          {totalPages > 1 && (
            <div className="pagination">
              <button onClick={() => setPage(Math.max(1, page - 1))} disabled={page === 1}>‹</button>
              {Array.from({ length: totalPages }, (_, i) => i + 1).map(p => (
                <button key={p}
                  className={page === p ? "active" : ""}
                  onClick={() => setPage(p)}>
                  {p}
                </button>
              ))}
              <button onClick={() => setPage(Math.min(totalPages, page + 1))} disabled={page === totalPages}>›</button>
            </div>
          )}

          <div className="callout" style={{ marginTop: 48 }}>
            <div className="ic"><Icon name="bell" size={22}/></div>
            <div className="body">
              <h4>새 공지를 가장 먼저 받아보세요</h4>
              <p>중요한 서비스 변경 사항은 이메일과 앱 알림으로도 안내해드려요. 설정에서 켤 수 있어요.</p>
            </div>
            <button className="btn btn-outline">알림 설정 열기</button>
          </div>
        </div>
      </section>
    </main>
  );
};

window.Notices = Notices;