/* Admin — content list screens (수업지원자료 / 확장수업) */

function ContentListScreen({ typeFilter, title, sub, go }) {
  const [q, setQ] = React.useState('');
  const [status, setStatus] = React.useState('전체');
  const [rows, setRows] = React.useState(null);

  const reload = React.useCallback(() => {
    fetchContents({ type: typeFilter }).then(setRows);
  }, [typeFilter]);
  React.useEffect(() => { reload(); }, [reload]);

  const filtered = (rows || [])
    .filter((c) => (status === '전체' ? true : (status === '공개중' ? c.status === 'published' : c.status === 'draft')))
    .filter((c) => c.title.includes(q));

  return (
    <div>
      <div className="admin-topbar">
        <div><h1>{title}</h1><p>{sub}</p></div>
        <button className="btn btn-primary" onClick={() => go('upload')}><Ico d={ICONS.plus} size={16}/> 새 콘텐츠 등록</button>
      </div>

      <div className="admin-panel">
        <div className="admin-panel-head">
          <h3>콘텐츠 목록 ({filtered.length})</h3>
          <div className="admin-toolbar">
            <input className="admin-input" placeholder="제목 검색" value={q} onChange={(e) => setQ(e.target.value)} />
            <select className="admin-select" value={status} onChange={(e) => setStatus(e.target.value)}>
              <option>전체</option><option>공개중</option><option>임시저장</option>
            </select>
          </div>
        </div>
        {rows === null
          ? <p style={{ color: 'var(--muted)', fontSize: 14 }}>불러오는 중…</p>
          : <ContentTable rows={filtered} onDelete={async (id) => { await deleteContent(id); reload(); }} onEdit={(id) => go('downloads', id)} />}
      </div>
    </div>
  );
}

Object.assign(window, { ContentListScreen });