admin/src/app/(root)/user/page.tsx

"use client"
import { zodResolver } from "@hookform/resolvers/zod"
import { format } from "date-fns"
import { Suspense, useCallback, useState } from "react"
import { Controller, useForm } from "react-hook-form"
import { z } from "zod"
import { bindAdmin, getPageUsers } from "@/actions/user"
import { DataTable, useDataTable } from "@/components/data-table"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
  Field,
  FieldError,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { useFetch } from "@/hooks/data"
import type { User } from "@/models/user"

type FilterValues = {
  account?: string
  name?: string
  identified?: boolean
  enabled?: boolean
  assigned?: boolean
}

const filterSchema = z.object({
  account: z.string().optional(),
  name: z.string().optional(),
  identified: z.string().optional(),
  enabled: z.string().optional(),
  assigned: z.string().optional(),
})

type FormValues = z.infer<typeof filterSchema>

export default function UserPage() {
  const [filters, setFilters] = useState<FilterValues>({})

  const { control, handleSubmit, reset } = useForm<FormValues>({
    resolver: zodResolver(filterSchema),
    defaultValues: {
      account: "",
      name: "",
      identified: "all",
      enabled: "all",
      assigned: "all",
    },
  })

  const fetchUsers = useCallback(
    (page: number, size: number) => getPageUsers({ page, size, ...filters }),
    [filters],
  )

  const table = useDataTable<User>(fetchUsers)
  const bind = useFetch(table, (id: number) => bindAdmin({ id }), {
    done: "用户已认领",
    fail: "用户认领失败",
  })

  const onFilter = handleSubmit(data => {
    const result: FilterValues = {}

    if (data.account) result.account = data.account
    if (data.name) result.name = data.name
    if (data.identified && data.identified !== "all")
      result.identified = data.identified === "1"
    if (data.enabled && data.enabled !== "all")
      result.enabled = data.enabled === "1"
    if (data.assigned && data.assigned !== "all")
      result.assigned = data.assigned === "has"

    setFilters(result)
    table.pagination.onPageChange(1)
  })

  return (
    <div className="space-y-3">
      <form onSubmit={onFilter} className="bg-white p-4">
        <div className="flex flex-wrap items-end gap-4">
          <Controller
            name="account"
            control={control}
            render={({ field, fieldState }) => (
              <Field
                data-invalid={fieldState.invalid}
                className="w-40 flex-none"
              >
                <FieldLabel>账号</FieldLabel>
                <Input {...field} placeholder="请输入账号" />
                <FieldError>{fieldState.error?.message}</FieldError>
              </Field>
            )}
          />

          <Controller
            name="name"
            control={control}
            render={({ field, fieldState }) => (
              <Field
                data-invalid={fieldState.invalid}
                className="w-40 flex-none"
              >
                <FieldLabel>用户名-手机号-邮箱</FieldLabel>
                <Input {...field} placeholder="请输入用户名-手机号-邮箱" />
                <FieldError>{fieldState.error?.message}</FieldError>
              </Field>
            )}
          />

          <Controller
            name="identified"
            control={control}
            render={({ field, fieldState }) => (
              <Field data-invalid={fieldState.invalid} className="w-24">
                <FieldLabel>实名状态</FieldLabel>
                <Select value={field.value} onValueChange={field.onChange}>
                  <SelectTrigger>
                    <SelectValue placeholder="全部" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">全部</SelectItem>
                    <SelectItem value="1">已认证</SelectItem>
                    <SelectItem value="0">未认证</SelectItem>
                  </SelectContent>
                </Select>
                <FieldError>{fieldState.error?.message}</FieldError>
              </Field>
            )}
          />

          <Controller
            name="enabled"
            control={control}
            render={({ field, fieldState }) => (
              <Field data-invalid={fieldState.invalid} className="w-24">
                <FieldLabel>账号状态</FieldLabel>
                <Select value={field.value} onValueChange={field.onChange}>
                  <SelectTrigger>
                    <SelectValue placeholder="全部" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">全部</SelectItem>
                    <SelectItem value="1">正常</SelectItem>
                    <SelectItem value="0">禁用</SelectItem>
                  </SelectContent>
                </Select>
                <FieldError>{fieldState.error?.message}</FieldError>
              </Field>
            )}
          />

          <Controller
            name="assigned"
            control={control}
            render={({ field, fieldState }) => (
              <Field data-invalid={fieldState.invalid} className="w-24">
                <FieldLabel>认领状态</FieldLabel>
                <Select value={field.value} onValueChange={field.onChange}>
                  <SelectTrigger>
                    <SelectValue placeholder="全部" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">全部</SelectItem>
                    <SelectItem value="has">已认领</SelectItem>
                    <SelectItem value="none">未认领</SelectItem>
                  </SelectContent>
                </Select>
                <FieldError>{fieldState.error?.message}</FieldError>
              </Field>
            )}
          />
        </div>

        <FieldGroup className="flex-row justify-start mt-4 gap-2">
          <Button type="submit">筛选</Button>
          <Button
            type="button"
            variant="outline"
            onClick={() => {
              reset({
                account: "",
                name: "",
                identified: "all",
                enabled: "all",
                assigned: "all",
              })
              setFilters({})
              table.pagination.onPageChange(1)
            }}
          >
            重置
          </Button>
        </FieldGroup>
      </form>

      <Suspense>
        <DataTable<User>
          {...table}
          columns={[
            { header: "ID", accessorKey: "id" },
            { header: "账号", accessorKey: "username" },
            { header: "手机", accessorKey: "phone" },
            { header: "邮箱", accessorKey: "email" },
            { header: "姓名", accessorKey: "name" },
            {
              header: "余额",
              accessorKey: "balance",
              cell: ({ row }) => {
                const balance = Number(row.original.balance) || 0
                return (
                  <span
                    className={
                      balance > 0 ? "text-green-500" : "text-orange-500"
                    }
                  >
                    ￥{balance.toFixed(2)}
                  </span>
                )
              },
            },
            {
              header: "实名状态",
              accessorKey: "id_type",
              cell: ({ row }) => (
                <Badge
                  variant={row.original.id_type === 1 ? "default" : "secondary"}
                  className={
                    row.original.id_type === 1
                      ? "bg-green-100 text-green-800"
                      : "bg-gray-100 text-gray-800"
                  }
                >
                  {row.original.id_type === 1 ? "已认证" : "未认证"}
                </Badge>
              ),
            },
            {
              header: "身份证号",
              accessorKey: "id_no",
              cell: ({ row }) => {
                const idNo = row.original.id_no
                return idNo ? `${idNo.slice(0, 6)}****${idNo.slice(-4)}` : "-"
              },
            },
            {
              header: "账号状态",
              accessorKey: "status",
              cell: ({ row }) => (row.original.status === 1 ? "正常" : "禁用"),
            },
            { header: "联系方式", accessorKey: "contact_wechat" },
            {
              header: "客户经理",
              cell: ({ row }) => row.original.admin?.name || "-",
            },
            {
              header: "最后登录时间",
              accessorKey: "last_login",
              cell: ({ row }) =>
                row.original.last_login
                  ? format(
                      new Date(row.original.last_login),
                      "yyyy-MM-dd HH:mm",
                    )
                  : "-",
            },
            {
              header: "最后登录IP",
              accessorKey: "last_login_ip",
              cell: ({ row }) => row.original.last_login_ip || "-",
            },
            {
              header: "创建时间",
              accessorKey: "created_at",
              cell: ({ row }) =>
                format(new Date(row.original.created_at), "yyyy-MM-dd HH:mm"),
            },
            {
              id: "action",
              meta: { pin: "right" },
              header: "操作",
              cell: ctx => (
                <Button
                  size="sm"
                  onClick={() => bind(ctx.row.original.id)}
                  disabled={!!ctx.row.original.admin_id}
                >
                  {ctx.row.original.admin_id ? "已认领" : "认领"}
                </Button>
              ),
            },
          ]}
        />
      </Suspense>
    </div>
  )
}