import React, { useState, useEffect } from 'react';
import './Admin.css';

function AdminPage() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    // TODO: 替换成你后端真正的接口
    fetch('/apostlist')
      .then(res => res.json())
      .then(data => setPosts(data))
      .catch(console.error);
  }, []);

  const handleAction = (id, action) => {
    // action: 'approve' | 'ban' | ...
    fetch(`/api/posts/${id}/${action}`, { method: 'POST' })
      .then(res => {
        if (res.ok) {
          // 简单地把该条移除或根据返回值更新状态
          setPosts(ps => ps.filter(p => p.id !== id));
        }
      })
      .catch(console.error);
  };

  return (
    <div className="admin-container">
      <h1 className="admin-title">小红书 · 管理员审核</h1>
      <table className="admin-table">
        <thead>
          <tr>
            <th>标题</th>
            <th>发布时间</th>
            <th>内容摘要</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          {posts.map(p => {
            const brief =
              p.content.length > 80
                ? p.content.slice(0, 80) + '...'
                : p.content;
            return (
              <tr key={p.id}>
                <td>{p.title}</td>
                <td>{new Date(p.createdAt).toLocaleString()}</td>
                <td>{brief}</td>
                <td className={`status ${p.status}`}>{p.status}</td>
                <td>
                  <button
                    className="btn btn-approve"
                    onClick={() => handleAction(p.id, 'approve')}
                  >
                    审核
                  </button>
                  <button
                    className="btn btn-ban"
                    onClick={() => handleAction(p.id, 'ban')}
                  >
                    封禁
                  </button>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

export default AdminPage;