import { api } from '@/lib/api'
import { usePaged } from '@/lib/usePaged'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Card, CardContent } from '@/components/ui/card'
import { Pager } from '@/components/Pager'

export default function Comments() {
  const { page, setPage, data, totalPages, reload } = usePaged<any>(api.comments)

  async function del(id: number) {
    await api.deleteComment(id)
    reload()
  }

  return (
    <div>
      <h1 className="text-2xl font-bold mb-6">评论管理</h1>
      <Card>
        <CardContent className="pt-6">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>ID</TableHead>
                <TableHead>帖子ID</TableHead>
                <TableHead>作者</TableHead>
                <TableHead>内容</TableHead>
                <TableHead>状态</TableHead>
                <TableHead className="text-right">操作</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {data?.list?.map((c) => (
                <TableRow key={c.id}>
                  <TableCell>{c.id}</TableCell>
                  <TableCell>{c.post_id}</TableCell>
                  <TableCell className="whitespace-nowrap">{c.author_name}</TableCell>
                  <TableCell className="max-w-sm truncate">{c.content}</TableCell>
                  <TableCell>
                    {c.status === 'deleted' ? <Badge variant="destructive">已删除</Badge> : <Badge variant="success">正常</Badge>}
                  </TableCell>
                  <TableCell className="text-right">
                    {c.status !== 'deleted' && (
                      <Button variant="destructive" size="sm" onClick={() => del(c.id)}>
                        删除
                      </Button>
                    )}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
          <Pager page={page} totalPages={totalPages} total={data?.total ?? 0} onChange={setPage} />
        </CardContent>
      </Card>
    </div>
  )
}