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

export default function Members() {
  const { page, setPage, data, totalPages } = usePaged<any>(api.memberships)
  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>到期</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {data?.list?.map((m) => (
                <TableRow key={m.id}>
                  <TableCell>{m.id}</TableCell>
                  <TableCell>{m.user_id}</TableCell>
                  <TableCell>
                    {m.status === 'active' ? <Badge variant="success">生效中</Badge> : <Badge variant="muted">{m.status}</Badge>}
                  </TableCell>
                  <TableCell>{m.plan_type || '—'}</TableCell>
                  <TableCell>¥{m.price}</TableCell>
                  <TableCell>{m.end_date ? String(m.end_date).slice(0, 10) : '—'}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
          <Pager page={page} totalPages={totalPages} total={data?.total ?? 0} onChange={setPage} />
        </CardContent>
      </Card>
    </div>
  )
}