import { useState } from 'react'
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 { Input } from '@/components/ui/input'
import { Badge } from '@/components/ui/badge'
import { Card, CardContent } from '@/components/ui/card'
import { Pager } from '@/components/Pager'

export default function Users() {
  const [keyword, setKeyword] = useState('')
  const [query, setQuery] = useState('')
  const [type, setType] = useState('')
  const { page, setPage, data, totalPages, reload } = usePaged<any>(api.users, { keyword: query, type })

  async function toggle(u: any) {
    await api.setUserDisabled(u.id, !u.disabled)
    reload()
  }

  return (
    <div>
      <h1 className="text-2xl font-bold mb-6">用户管理</h1>
      <div className="flex gap-2 mb-4">
        <Input
          placeholder="搜索昵称"
          value={keyword}
          onChange={(e) => setKeyword(e.target.value)}
          className="max-w-xs"
          onKeyDown={(e) => e.key === 'Enter' && (setPage(1), setQuery(keyword))}
        />
        <Button onClick={() => (setPage(1), setQuery(keyword))}>搜索</Button>
        <select
          className="h-9 rounded-md border border-input bg-card px-3 text-sm"
          value={type}
          onChange={(e) => (setPage(1), setType(e.target.value))}
        >
          <option value="">全部账号</option>
          <option value="real">真实用户</option>
          <option value="bot">机器人(AI)</option>
        </select>
      </div>
      <Card>
        <CardContent className="pt-6">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>ID</TableHead>
                <TableHead>昵称</TableHead>
                <TableHead>手机号</TableHead>
                <TableHead>宠物档案</TableHead>
                <TableHead>建档</TableHead>
                <TableHead>状态</TableHead>
                <TableHead className="text-right">操作</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {data?.list?.map((u) => (
                <TableRow key={u.id}>
                  <TableCell>{u.id}</TableCell>
                  <TableCell className="font-medium">
                    {u.nickname}
                    {u.is_bot && (
                      <Badge variant="muted" className="ml-2">
                        AI
                      </Badge>
                    )}
                  </TableCell>
                  <TableCell>{u.phone || '—'}</TableCell>
                  <TableCell className="whitespace-nowrap">
                    {u.pet_count > 0 ? `${u.pet_count} 个` : <span className="text-muted-foreground">—</span>}
                  </TableCell>
                  <TableCell>{u.onboarded ? '已建档' : '未建档'}</TableCell>
                  <TableCell>
                    {u.disabled ? <Badge variant="destructive">已禁用</Badge> : <Badge variant="success">正常</Badge>}
                  </TableCell>
                  <TableCell className="text-right">
                    <Button variant="outline" size="sm" onClick={() => toggle(u)}>
                      {u.disabled ? '启用' : '禁用'}
                    </Button>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
          <Pager page={page} totalPages={totalPages} total={data?.total ?? 0} onChange={setPage} />
        </CardContent>
      </Card>
    </div>
  )
}