import type { CurrentUser, SiteSettings } from '../../env';
import { AdminLayout } from './layout';

export function AdminPostsPage(props: {
  settings: SiteSettings;
  currentUser: CurrentUser;
  csrfToken: string;
  posts: Array<{ id: string; title: string; content: string; display_name: string; visibility: string; status: string; is_top: number; is_ad: number; created_at: number }>;
}) {
  return (
    <AdminLayout title="内容管理" settings={props.settings} currentUser={props.currentUser} csrfToken={props.csrfToken} active="/admin/posts">
      <section class="admin-panel">
        <div class="bulk-actions">
          <select data-bulk-action>
            <option value="trash">移入回收站</option>
            <option value="publish">发布</option>
            <option value="topOn">置顶</option>
            <option value="topOff">取消置顶</option>
            <option value="adOn">标记广告</option>
            <option value="adOff">取消广告</option>
            <option value="delete">彻底删除</option>
          </select>
          <button data-admin-action="bulk-posts">应用</button>
        </div>
        <table class="admin-table">
          <thead><tr><th><input type="checkbox" data-check-all /></th><th>内容</th><th>作者</th><th>可见性</th><th>状态</th><th>标记</th></tr></thead>
          <tbody>
            {props.posts.map((post) => (
              <tr>
                <td><input type="checkbox" value={post.id} data-post-check /></td>
                <td><a href={`/p/${post.id}`}>{post.title || post.content.slice(0, 42) || post.id}</a></td>
                <td>{post.display_name}</td>
                <td>{post.visibility}</td>
                <td>{post.status}</td>
                <td>{post.is_top ? '置顶 ' : ''}{post.is_ad ? '广告' : ''}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </section>
    </AdminLayout>
  );
}
