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 { issueCoupon } from "@/actions/coupon"
import { getPageUser } from "@/actions/user"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Field, FieldError, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import type { Coupon } from "@/models/coupon"
import type { User } from "@/models/user"

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 function IssueCoupon(props: { coupon: Coupon; onSuccess?: () => void }) {
  const [open, setOpen] = useState(false)
  const [userList, setUserList] = useState<User[]>([])
  const [loading, setLoading] = useState(false)
  const [currentFilters, setCurrentFilters] = useState<UserQueryParams>({})
  const { control, handleSubmit, reset } = useForm<FormValues>({
    resolver: zodResolver(filterSchema),
    defaultValues: {
      phone: "",
      name: "",
    },
  })

  const fetchUsers = useCallback(async (filters: UserQueryParams = {}) => {
    setLoading(true)
    try {
      setOpen(true)
      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 handleReset = useCallback(() => {
    reset()
    setCurrentFilters({})
    setUserList([])
  }, [reset])

  const handleIssueCoupon = useCallback(
    async (users: User[], coupon: Coupon) => {
      console.log(coupon, "couponcouponcoupon")

      const targetUser = users[0]

      if (!targetUser || !targetUser.id) {
        toast.error("用户信息无效")
        return
      }

      if (!coupon || !coupon.id) {
        toast.error("优惠券信息无效")
        return
      }
      if (coupon.status !== 1) {
        toast.error("优惠券不可用，请检查优惠券状态")
        return
      }
      try {
        const result = await issueCoupon({
          coupon_id: coupon.id,
          user_id: targetUser.id,
        })
        console.log({
          coupon_id: coupon.id,
          user_id: targetUser.id,
        })

        console.log(result, "resultresultresultresultresult")
        if (result.success) {
          toast.success(
            `成功发放优惠券给用户 ${targetUser.phone || targetUser.username}`,
          )
          setOpen(false)
          handleReset()
          props.onSuccess?.()
        } else {
          toast.error("发放失败，请稍后重试")
        }
      } catch (error) {
        const message = error instanceof Error ? error.message : "发放失败"
        toast.error(`发放优惠券失败: ${message}`)
      }
    },
    [props.onSuccess, handleReset],
  )

  return (
    <Dialog
      open={open}
      onOpenChange={newOpen => {
        setOpen(newOpen)
        if (!newOpen) {
          handleReset()
        }
      }}
    >
      <DialogTrigger asChild>
        <Button size="sm" variant="secondary">
          发放
        </Button>
      </DialogTrigger>

      <DialogContent
        className="max-h-[85vh] overflow-y-auto"
        style={{ width: "auto", minWidth: "800px", maxWidth: "90vw" }}
      >
        <DialogHeader>
          <DialogTitle>发放优惠券</DialogTitle>
        </DialogHeader>
        <form onSubmit={onFilter} className="bg-card rounded-lg">
          <div className="flex items-end gap-4">
            <Controller
              name="phone"
              control={control}
              render={({ field, fieldState }) => (
                <Field data-invalid={fieldState.invalid} className="w-40 flex">
                  <FieldLabel>手机号</FieldLabel>
                  <Input {...field} placeholder="请输入手机号" />
                  <FieldError>{fieldState.error?.message}</FieldError>
                </Field>
              )}
            />
            <Button type="button" variant="outline" onClick={handleReset}>
              重置
            </Button>
            <Button type="submit">搜索</Button>
          </div>
        </form>
        <Suspense fallback={<div className="py-8 text-center">加载中...</div>}>
          {loading ? (
            <div className="py-8 text-center">加载中...</div>
          ) : userList.length === 0 ? (
            <div className="py-8 text-center text-gray-500">暂无用户数据</div>
          ) : (
            <div className="space-y-4 max-h-[60vh] overflow-y-auto pr-1">
              {userList.map(user => (
                <div
                  key={user.id}
                  className="border rounded-lg overflow-hidden hover:shadow-md transition-shadow"
                >
                  <div className="bg-gray-50 px-4 py-3 border-b flex items-center justify-between flex-wrap gap-2">
                    <div className="flex items-center gap-3">
                      <span className="font-medium text-base">
                        {user.phone || "未绑定手机"}
                      </span>
                      <div className="flex gap-2">
                        <Badge
                          variant={user.id_type === 1 ? "default" : "secondary"}
                          className={
                            user.id_type === 1
                              ? "bg-green-100 text-green-700 hover:bg-green-100"
                              : "bg-gray-100 text-gray-600 hover:bg-gray-100"
                          }
                        >
                          {user.id_type === 1 ? "✓ 已认证" : "○ 未认证"}
                        </Badge>
                        <Badge
                          variant={
                            user.status === 1 ? "default" : "destructive"
                          }
                          className={
                            user.status === 1
                              ? "bg-green-100 text-green-700 hover:bg-green-100"
                              : "bg-red-100 text-red-700 hover:bg-red-100"
                          }
                        >
                          {user.status === 1 ? "正常" : "禁用"}
                        </Badge>
                      </div>
                    </div>
                    <div className="flex items-center gap-2">
                      <span className="text-sm text-gray-500">
                        余额:
                        <span
                          className={`ml-1 font-semibold ${
                            Number(user.balance) > 0
                              ? "text-green-600"
                              : "text-orange-600"
                          }`}
                        >
                          ¥{(Number(user.balance) || 0).toFixed(2)}
                        </span>
                      </span>
                    </div>
                  </div>
                  <div className="p-4">
                    <div className="grid grid-cols-3 gap-4">
                      <div className="space-y-2">
                        <div className="text-sm">
                          <span className="text-gray-500 w-20 inline-block">
                            姓名：
                          </span>
                          <span className="text-gray-900">
                            {user.name || ""}
                          </span>
                        </div>
                        <div className="text-sm">
                          <span className="text-gray-500 w-20 inline-block">
                            账号：
                          </span>
                          <span className="text-gray-900">
                            {user.username || ""}
                          </span>
                        </div>
                        <div className="text-sm">
                          <span className="text-gray-500 w-20 inline-block">
                            客户经理：
                          </span>
                          <span className="text-gray-900">
                            {user.admin?.name || ""}
                          </span>
                        </div>
                      </div>
                      <div className="space-y-2">
                        <div className="text-sm">
                          <span className="text-gray-500 w-20 inline-block">
                            客户来源：
                          </span>
                          <span className="text-gray-900">
                            {(() => {
                              const sourceMap: Record<number, string> = {
                                0: "官网注册",
                                1: "管理员添加",
                                2: "代理商注册",
                                3: "代理商添加",
                              }
                              return sourceMap[user.source] ?? "官网注册"
                            })()}
                          </span>
                        </div>
                        <div className="text-sm">
                          <span className="text-gray-500 w-20 inline-block">
                            联系方式：
                          </span>
                          <span className="text-gray-900">
                            {user.contact_wechat || ""}
                          </span>
                        </div>
                        <div className="text-sm">
                          <span className="text-gray-500 w-20 inline-block">
                            创建时间：
                          </span>
                          <span className="text-gray-900">
                            {user.created_at
                              ? format(new Date(user.created_at), "yyyy-MM-dd")
                              : ""}
                          </span>
                        </div>
                      </div>

                      <div className="space-y-2">
                        <div className="text-sm">
                          <span className="text-gray-500 w-20 inline-block">
                            最后登录：
                          </span>
                          <span className="text-gray-900">
                            {user.last_login
                              ? format(
                                  new Date(user.last_login),
                                  "yyyy-MM-dd HH:mm",
                                )
                              : "-"}
                          </span>
                        </div>
                        <div className="text-sm">
                          <span className="text-gray-500 w-20 inline-block">
                            登录IP：
                          </span>
                          <span className="text-gray-900">
                            {user.last_login_ip || "-"}
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </Suspense>
        <DialogFooter>
          <DialogClose asChild>
            <Button variant="ghost" onClick={handleReset}>
              取消
            </Button>
          </DialogClose>
          <Button
            type="button"
            onClick={() => handleIssueCoupon(userList, props.coupon)}
            disabled={!userList || userList.length === 0}
          >
            发放优惠券
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}