// Shared board (자료실) component for PRISM site
const { useState } = React;

function Board({ activeMenu, breadcrumb, title, subtitle, posts, emptyLabel }) {
  const [openPost, setOpenPost] = useState(null);

  return (
    <>
      <Header active={activeMenu} />
      <Breadcrumb items={breadcrumb} />
      <PageTitle title={title} subtitle={subtitle} />

      <div className="prism-container board-page">
        {openPost ? (
          <div className="board-detail">
            <div className="board-detail-head">
              <div className="meta-top">
                <span className="board-chip">{openPost.cat}</span>
              </div>
              <h1>{openPost.title}</h1>
              <div className="meta-bottom">
                <span><i className="far fa-calendar"></i> {openPost.date}</span>
                <span><i className="far fa-eye"></i> 조회 {openPost.views.toLocaleString()}</span>
                <span><i className="far fa-building"></i> 산업경영환경연구원</span>
              </div>
            </div>
            <div className="board-detail-body">{openPost.body}</div>
            {openPost.file && (
              <div className="board-detail-attach">
                <i className="fas fa-paperclip" style={{ color: '#94a3b8' }}></i>
                <a href="#"><i className="far fa-file-pdf"></i> {openPost.file}</a>
              </div>
            )}
            <div className="board-detail-foot">
              <button className="prism-btn prism-btn-outline" onClick={() => setOpenPost(null)}><i className="fas fa-list"></i> 목록으로</button>
            </div>
          </div>
        ) : (
          <>
            <div className="board-toolbar">
              <div className="board-count">총 <strong>{posts.length}</strong>건</div>
              <div className="board-search">
                <input type="text" placeholder="검색어를 입력하세요" />
                <button><i className="fas fa-search"></i> 검색</button>
              </div>
            </div>

            {posts.length === 0 ? (
              <div className="board-empty">
                <i className="far fa-folder-open"></i>
                <p>{emptyLabel || '등록된 게시물이 없습니다.'}</p>
              </div>
            ) : (
              <table className="board-table">
                <thead>
                  <tr>
                    <th className="col-num">번호</th>
                    <th style={{ width: 110 }}>구분</th>
                    <th>제목</th>
                    <th className="col-date">등록일</th>
                    <th className="col-file">첨부</th>
                    <th className="col-views">조회</th>
                  </tr>
                </thead>
                <tbody>
                  {posts.map((n, i) => (
                    <tr key={i} onClick={() => setOpenPost(n)}>
                      <td className="col-num">{n.no}</td>
                      <td><span className="board-chip">{n.cat}</span></td>
                      <td className="board-title-cell">
                        {n.title}
                        {n.isNew && <span className="new-badge">N</span>}
                      </td>
                      <td className="col-date">{n.date}</td>
                      <td className="col-file">{n.file && <i className="far fa-file-pdf" style={{ color: 'var(--prism-danger)' }}></i>}</td>
                      <td className="col-views">{n.views.toLocaleString()}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}

            {posts.length > 0 && (
              <div className="pagination"><button className="active">1</button></div>
            )}
          </>
        )}
      </div>
      <Footer />
    </>
  );
}

Object.assign(window, { Board });