"use client"
import { zodResolver } from "@hookform/resolvers/zod"
import { format } from "date-fns"
import { useRouter } from "next/navigation"
import { Suspense, useCallback, useState } from "react"
import { Controller, useForm } from "react-hook-form"
import { toast } from "sonner"
import { z } from "zod"
import { getPageUser } from "@/actions/user"
import { DeductionDialog } from "@/app/(root)/cust/deduction"
import { DepositDialog } from "@/app/(root)/cust/deposit"
import { UpdateDialog } from "@/app/(root)/cust/update"
import { Auth } from "@/components/auth"
import { DataTable } 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 {
  ScopeBatchReadOfUser,
  ScopeBillReadOfUser,
  ScopeChannelReadOfUser,
  ScopeResourceRead,
  ScopeTradeReadOfUser,
  ScopeUserWrite,
  ScopeUserWriteBalance,
  ScopeUserWriteBalanceDec,
  ScopeUserWriteBalanceInc,
} from "@/lib/scopes"
import type { User } from "@/models/user"
import { AddUserDialog } from "../../cust/create"

// import { ResourcesDialog } from "./resourcesDialog"

interface UserQueryParams {
  account?: string
  name?: string
}

const filterSchema = z.object({
  phone: z.string().optional(),
  name: z.string().optional(),
})

type FormValues = z.infer<typeof filterSchema>

export default function UserQueryPage() {
  const [userList, setUserList] = useState<User[]>([])
  const [loading, setLoading] = useState(false)
  const [depositDialog, setDepositDialog] = useState(false)
  const [deposit, setDeposit] = useState<User | null>(null)
  const [deductionDialog, setDeductionDialog] = useState(false)
  const [deduction, setDeduction] = useState<User | null>(null)
  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false)
  const [currentEditUser, setCurrentEditUser] = useState<User | null>(null)
  const [currentFilters, setCurrentFilters] = useState<UserQueryParams>({})
  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false)

  const router = useRouter()
  const { control, handleSubmit, reset } = useForm<FormValues>({
    resolver: zodResolver(filterSchema),
    defaultValues: {
      phone: "",
      name: "",
    },
  })

  const fetchUsers = useCallback(async (filters: UserQueryParams = {}) => {
    setLoading(true)
    try {
      const res = await getPageUser(filters)
      if (res.success) {
        const data = Array.isArray(res.data) ? res.data : [res.data]
        setUserList(data)
      } else {
        toast.error(res.message || "获取用户失败")
        setUserList([])
      }
    } catch (error) {
      const message = error instanceof Error ? error.message : error
      toast.error(`获取用户失败: ${message}`)
    } finally {
      setLoading(false)
    }
  }, [])

  const onFilter = handleSubmit((data: FormValues) => {
    const params: UserQueryParams = {}
    if (data.phone?.trim()) params.account = data.phone.trim()
    if (data.name?.trim()) params.name = data.name.trim()
    if (Object.keys(params).length === 0) {
      toast.info("请至少输入一个筛选条件")
      return
    }
    setCurrentFilters(params)
    fetchUsers(params)
  })

  const refreshTable = useCallback(() => {
    if (Object.keys(currentFilters).length > 0) {
      fetchUsers(currentFilters)
    }
  }, [fetchUsers, currentFilters])

  const handleReset = () => {
    reset()
    setCurrentFilters({})
    setUserList([])
  }

  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="phone"
            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>
            )}
          />
        </div>

        <FieldGroup className="flex-row justify-start mt-4 gap-2">
          <Button type="submit">筛选</Button>
          <Button type="button" variant="outline" onClick={handleReset}>
            重置
          </Button>
          <Auth scope={ScopeUserWrite}>
            <Button type="button" onClick={() => setIsAddDialogOpen(true)}>
              添加用户
            </Button>
          </Auth>
        </FieldGroup>
      </form>

      <Suspense>
        <DataTable<User>
          data={userList || []}
          status={loading ? "load" : "done"}
          columns={[
            { 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: "source",
              cell: ({ row }) => {
                const sourceMap: Record<number, string> = {
                  0: "官网注册",
                  1: "管理员添加",
                  2: "代理商注册",
                  3: "代理商添加",
                }
                return sourceMap[row.original.source] ?? "未知"
              },
            },
            {
              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: ({ row }) => {
                return (
                  <div className="flex flex-wrap gap-2 w-75">
                    <Auth scope={ScopeUserWriteBalanceInc}>
                      <Button
                        size="sm"
                        onClick={() => {
                          setDeposit(row.original)
                          setDepositDialog(true)
                        }}
                      >
                        充值
                      </Button>
                    </Auth>
                    <Auth scope={ScopeUserWriteBalanceDec}>
                      <Button
                        size="sm"
                        variant="destructive"
                        onClick={() => {
                          setDeduction(row.original)
                          setDeductionDialog(true)
                        }}
                      >
                        扣款
                      </Button>
                    </Auth>
                    <Auth scope={ScopeUserWriteBalance}>
                      <Button
                        size="sm"
                        onClick={() => {
                          setCurrentEditUser(row.original)
                          setIsEditDialogOpen(true)
                        }}
                      >
                        修改
                      </Button>
                    </Auth>
                    <Auth scope={ScopeTradeReadOfUser}>
                      <Button
                        size="sm"
                        onClick={() => {
                          router.push(`/client/trade?userId=${row.original.id}`)
                        }}
                      >
                        交易明细
                      </Button>
                    </Auth>
                    <Auth scope={ScopeBillReadOfUser}>
                      <Button
                        size="sm"
                        onClick={() => {
                          router.push(
                            `/client/billing?userId=${row.original.id}`,
                          )
                        }}
                      >
                        账单详情
                      </Button>
                    </Auth>
                    <Auth scope={ScopeResourceRead}>
                      <Button
                        size="sm"
                        onClick={() => {
                          router.push(
                            `/client/resources?userId=${row.original.id}`,
                          )
                        }}
                      >
                        套餐管理
                      </Button>
                    </Auth>
                    <Auth scope={ScopeBatchReadOfUser}>
                      <Button
                        size="sm"
                        onClick={() => {
                          router.push(`/client/batch?userId=${row.original.id}`)
                        }}
                      >
                        提取记录
                      </Button>
                    </Auth>
                    <Auth scope={ScopeChannelReadOfUser}>
                      <Button
                        size="sm"
                        onClick={() => {
                          router.push(
                            `/client/channel?userId=${row.original.id}`,
                          )
                        }}
                      >
                        IP管理
                      </Button>
                    </Auth>
                  </div>
                )
              },
            },
          ]}
        />
      </Suspense>
      <AddUserDialog
        open={isAddDialogOpen}
        onOpenChange={setIsAddDialogOpen}
        onSuccess={refreshTable}
      />
      <UpdateDialog
        open={isEditDialogOpen}
        onOpenChange={setIsEditDialogOpen}
        currentUser={currentEditUser}
        onSuccess={refreshTable}
      />

      <DepositDialog
        open={depositDialog}
        onOpenChange={setDepositDialog}
        currentUser={deposit}
        onSuccess={refreshTable}
      />

      <DeductionDialog
        open={deductionDialog}
        onOpenChange={setDeductionDialog}
        currentUser={deduction}
        onSuccess={refreshTable}
      />
    </div>
  )
}