"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 { toast } from "sonner"
import { z } from "zod"
import { createCust, getPageCusts, updateCust } from "@/actions/cust"
import { DataTable, useDataTable } from "@/components/data-table"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
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 type { Cust } from "@/models/cust"

type FilterValues = {
  phone?: string
  name?: string
  identified?: boolean
  enabled?: boolean
  created_at_start?: Date
  created_at_end?: Date
}

const filterSchema = z
  .object({
    phone: z.string().optional(),
    name: z.string().optional(),
    identified: z.string().optional(),
    enabled: z.string().optional(),
    created_at_start: z.string().optional(),
    created_at_end: z.string().optional(),
  })
  .superRefine((data, ctx) => {
    if (data.created_at_start && data.created_at_end) {
      const start = new Date(data.created_at_start)
      const end = new Date(data.created_at_end)

      if (end < start) {
        ctx.addIssue({
          code: z.ZodIssueCode.custom,
          message: "结束时间不能早于开始时间",
          path: ["created_at_end"],
        })
      }
    }
  })

const addUserSchema = z.object({
  username: z.string().min(1, "账号不能为空"),
  password: z.string().min(6, "密码至少6位"),
  phone: z.string().regex(/^1[3-9]\d{9}$/, "请输入正确的手机号格式"),
  email: z.string().email("请输入正确的邮箱格式").optional().or(z.literal("")),
  name: z.string().optional(),
  contact_wechat: z.string().optional(),
})

type AddUserFormValues = z.infer<typeof addUserSchema>

type FormValues = z.infer<typeof filterSchema>

export default function UserPage() {
  const [filters, setFilters] = useState<FilterValues>({})
  const [editingRowId, setEditingRowId] = useState<number | null>(null)
  const [editPhone, setEditPhone] = useState("")
  const [editEmail, setEditEmail] = useState("")
  const [isSaving, setIsSaving] = useState(false)
  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false)
  const [isAdding, setIsAdding] = useState(false)

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

  // 添加用户表单
  const {
    control: addControl,
    handleSubmit: handleAddSubmit,
    reset: resetAddForm,
    formState: { errors: addErrors },
  } = useForm<AddUserFormValues>({
    resolver: zodResolver(addUserSchema),
    defaultValues: {
      username: "",
      password: "",
      phone: "",
      email: "",
      name: "",
      contact_wechat: "",
    },
  })

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

  const table = useDataTable<Cust>(fetchUsers)

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

    if (data.phone) result.phone = data.phone
    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"

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

  const refreshTable = useCallback(() => {
    table.pagination.onPageChange(table.pagination.page)
  }, [table.pagination])

  // 开始编辑行
  const startEdit = (row: Cust) => {
    setEditingRowId(row.id)
    setEditPhone(row.phone || "")
    setEditEmail(row.email || "")
  }

  // 取消编辑
  const cancelEdit = () => {
    setEditingRowId(null)
    setEditPhone("")
    setEditEmail("")
  }

  // 保存编辑
  const saveEdit = async (row: Cust) => {
    const phoneRegex = /^1[3-9]\d{9}$/
    if (editPhone && !phoneRegex.test(editPhone)) {
      toast.error("请输入正确的手机号格式")
      return
    }

    const emailRegex = /^[^\s@]+@([^\s@]+\.)+[^\s@]+$/
    if (editEmail && !emailRegex.test(editEmail)) {
      toast.error("请输入正确的邮箱格式")
      return
    }

    setIsSaving(true)
    try {
      const result = await updateCust({
        id: row.id,
        phone: editPhone,
        email: editEmail,
      })
      if (result.success) {
        toast.success("更新成功")
        table.pagination.onPageChange(table.pagination.page)
        cancelEdit()
      } else {
        toast.error(result.message || "更新失败")
      }
    } catch (error) {
      toast.error("更新失败，请稍后重试")
      console.error(error)
    } finally {
      setIsSaving(false)
    }
  }

  const onAddUser = handleAddSubmit(async data => {
    const payload = {
      username: data.username,
      password: data.password,
      phone: data.phone || "",
      email: data.email || "",
      name: data.name || "",
      contact_wechat: data.contact_wechat || "",
    }

    setIsAdding(true)
    try {
      const result = await createCust(payload)
      if (result?.success) {
        toast.success("添加用户成功")
        setIsAddDialogOpen(false)
        resetAddForm()
        refreshTable()
      } else {
        toast.error(result?.message || "添加失败")
      }
    } catch (error) {
      toast.error("添加失败，请稍后重试")
      console.error(error)
    } finally {
      setIsAdding(false)
    }
  })

  // 打开添加对话框时重置表单
  const openAddDialog = () => {
    resetAddForm()
    setIsAddDialogOpen(true)
  }

  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>
            )}
          />

          <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="created_at_start"
            control={control}
            render={({ field, fieldState }) => (
              <Field
                data-invalid={fieldState.invalid}
                className="w-40 flex-none"
              >
                <FieldLabel>开始时间</FieldLabel>
                <Input type="date" {...field} />
                <FieldError>{fieldState.error?.message}</FieldError>
              </Field>
            )}
          />

          <Controller
            name="created_at_end"
            control={control}
            render={({ field, fieldState }) => (
              <Field
                data-invalid={fieldState.invalid}
                className="w-40 flex-none"
              >
                <FieldLabel>结束时间</FieldLabel>
                <Input type="date" {...field} />
                <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({
                phone: "",
                name: "",
                identified: "all",
                enabled: "all",
                created_at_start: "",
              })
              setFilters({})
              table.pagination.onPageChange(1)
            }}
          >
            重置
          </Button>
          <Button type="button" onClick={openAddDialog}>
            添加用户
          </Button>
        </FieldGroup>
      </form>

      <Suspense>
        <DataTable<Cust>
          {...table}
          columns={[
            { header: "ID", accessorKey: "id" },
            { header: "账号", accessorKey: "username" },
            { header: "密码", accessorKey: "admin.password" },
            {
              header: "手机",
              accessorKey: "phone",
              cell: ({ row }) => {
                const isEditing = editingRowId === row.original.id
                if (isEditing) {
                  return (
                    <Input
                      value={editPhone}
                      onChange={e => setEditPhone(e.target.value)}
                      placeholder="手机号"
                      className="w-32"
                    />
                  )
                }
                return row.original.phone || "-"
              },
            },
            {
              header: "邮箱",
              accessorKey: "email",
              cell: ({ row }) => {
                const isEditing = editingRowId === row.original.id
                if (isEditing) {
                  return (
                    <Input
                      value={editEmail}
                      onChange={e => setEditEmail(e.target.value)}
                      placeholder="邮箱"
                      className="w-40"
                    />
                  )
                }
                return row.original.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: "客户来源", accessorKey: "" },
            { header: "客户经理", accessorKey: "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"),
            },
            {
              header: "操作",
              cell: ({ row }) => {
                const isEditing = editingRowId === row.original.id
                if (isEditing) {
                  return (
                    <div className="flex gap-2">
                      <Button
                        size="sm"
                        onClick={() => saveEdit(row.original)}
                        disabled={isSaving}
                      >
                        保存
                      </Button>
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={cancelEdit}
                        disabled={isSaving}
                      >
                        取消
                      </Button>
                    </div>
                  )
                }
                return (
                  <Button size="sm" onClick={() => startEdit(row.original)}>
                    修改
                  </Button>
                )
              },
            },
          ]}
        />
      </Suspense>
      {/* 添加用户对话框 */}
      <Dialog open={isAddDialogOpen} onOpenChange={setIsAddDialogOpen}>
        <DialogContent className="sm:max-w-[500px]">
          <DialogHeader>
            <DialogTitle>添加用户</DialogTitle>
          </DialogHeader>
          <form onSubmit={onAddUser} className="space-y-4">
            <Controller
              name="username"
              control={addControl}
              render={({ field, fieldState }) => (
                <Field data-invalid={fieldState.invalid}>
                  <FieldLabel>账号 *</FieldLabel>
                  <Input
                    {...field}
                    placeholder="请输入账号"
                    autoComplete="off"
                  />
                  <FieldError>{fieldState.error?.message}</FieldError>
                </Field>
              )}
            />
            <Controller
              name="password"
              control={addControl}
              render={({ field, fieldState }) => (
                <Field data-invalid={fieldState.invalid}>
                  <FieldLabel>密码 *</FieldLabel>
                  <Input
                    {...field}
                    type="password"
                    placeholder="请输入密码（至少6位）"
                    autoComplete="off"
                  />
                  <FieldError>{fieldState.error?.message}</FieldError>
                </Field>
              )}
            />
            <Controller
              name="phone"
              control={addControl}
              render={({ field, fieldState }) => (
                <Field data-invalid={fieldState.invalid}>
                  <FieldLabel>手机号 *</FieldLabel>
                  <Input {...field} placeholder="请输入手机号" />
                  <FieldError>{fieldState.error?.message}</FieldError>
                </Field>
              )}
            />
            <Controller
              name="name"
              control={addControl}
              render={({ field, fieldState }) => (
                <Field data-invalid={fieldState.invalid}>
                  <FieldLabel>姓名</FieldLabel>
                  <Input {...field} placeholder="请输入姓名" />
                  <FieldError>{fieldState.error?.message}</FieldError>
                </Field>
              )}
            />
            <Controller
              name="email"
              control={addControl}
              render={({ field, fieldState }) => (
                <Field data-invalid={fieldState.invalid}>
                  <FieldLabel>邮箱</FieldLabel>
                  <Input {...field} placeholder="请输入邮箱" />
                  <FieldError>{fieldState.error?.message}</FieldError>
                </Field>
              )}
            />
            <Controller
              name="contact_wechat"
              control={addControl}
              render={({ field, fieldState }) => (
                <Field data-invalid={fieldState.invalid}>
                  <FieldLabel>微信/联系方式</FieldLabel>
                  <Input {...field} placeholder="请输入微信或联系方式" />
                  <FieldError>{fieldState.error?.message}</FieldError>
                </Field>
              )}
            />
            <FieldGroup className="flex-row justify-end gap-2 pt-2">
              <Button
                type="button"
                variant="outline"
                onClick={() => setIsAddDialogOpen(false)}
              >
                取消
              </Button>
              <Button type="submit" disabled={isAdding}>
                {isAdding ? "添加中..." : "确定添加"}
              </Button>
            </FieldGroup>
          </form>
        </DialogContent>
      </Dialog>
    </div>
  )
}