"use client"
import { zodResolver } from "@hookform/resolvers/zod"
import { format } from "date-fns"
import Link from "next/link"
import { useRouter, useSearchParams } from "next/navigation"
import { Suspense, useState } from "react"
import { Controller, useForm } from "react-hook-form"
import { z } from "zod"
import { getChannel } from "@/actions/channel"
import { DataTable, useDataTable } from "@/components/data-table"
import { Page } from "@/components/page"
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 type { Channel } from "@/models/channel"

type FilterValues = {
  batch_no?: string
  user_phone?: string
  resource_no?: string
  proxy_host?: string
  proxy_port?: number
  node_ip?: string
  expired_at_start?: Date
  expired_at_end?: Date
}

const filterSchema = z
  .object({
    batch_no: z.string().optional(),
    user_phone: z.string().optional(),
    resource_no: z.string().optional(),
    proxy_host: z.string().optional(),
    proxy_port: z.string().optional(),
    node_ip: z.string().optional(),
    expired_at_start: z.string().optional(),
    expired_at_end: z.string().optional(),
  })
  .superRefine((data, ctx) => {
    if (data.expired_at_start && data.expired_at_end) {
      const start = new Date(data.expired_at_start)
      const end = new Date(data.expired_at_end)

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

type FilterSchema = z.infer<typeof filterSchema>

const ispMap: Record<number, string> = {
  1: "电信",
  2: "联通",
  3: "移动",
}

export default function ChannelPage() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const userId = searchParams.get("userId")
  const userPhone = searchParams.get("phone")
  const [filters, setFilters] = useState<FilterValues>({})
  const { control, handleSubmit, reset } = useForm<FilterSchema>({
    resolver: zodResolver(filterSchema),
    defaultValues: {
      batch_no: "",
      user_phone: "",
      resource_no: "",
      proxy_port: "",
      proxy_host: "",
      node_ip: "",
      expired_at_start: "",
      expired_at_end: "",
    },
  })

  const table = useDataTable<Channel>((page, size) =>
    getChannel({ page, size, user_id: Number(userId), ...filters }),
  )

  const onFilter = handleSubmit(data => {
    const result: FilterValues = {}
    if (data.batch_no?.trim()) result.batch_no = data.batch_no.trim()
    if (data.user_phone?.trim()) result.user_phone = data.user_phone.trim()
    if (data.resource_no?.trim()) result.resource_no = data.resource_no.trim()
    if (data.proxy_host?.trim()) result.proxy_host = data.proxy_host.trim()
    if (data.proxy_port?.trim())
      result.proxy_port = Number(data.proxy_port.trim())
    if (data.node_ip?.trim()) result.node_ip = data.node_ip.trim()
    if (data.expired_at_start)
      result.expired_at_start = new Date(data.expired_at_start)
    if (data.expired_at_end)
      result.expired_at_end = new Date(data.expired_at_end)
    setFilters(result)
    table.pagination.onPageChange(1)
  })

  return (
    <Page>
      <div>
        <Button
          onClick={() => {
            router.back()
          }}
          className="gap-2"
        >
          返回上一级
        </Button>
        <span className="ml-2 text-gray-600">用户会员号: {userPhone}</span>
      </div>
      <form onSubmit={onFilter} className="bg-card p-4 rounded-lg">
        <div className="flex flex-wrap items-end gap-4">
          <Controller
            name="batch_no"
            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="resource_no"
            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="proxy_host"
            control={control}
            render={({ field, fieldState }) => (
              <Field
                data-invalid={fieldState.invalid}
                className="w-40 flex-none"
              >
                <FieldLabel>代理IP</FieldLabel>
                <Input {...field} placeholder="请输入代理IP" />
                <FieldError>{fieldState.error?.message}</FieldError>
              </Field>
            )}
          />
          <Controller
            name="proxy_port"
            control={control}
            render={({ field, fieldState }) => (
              <Field
                data-invalid={fieldState.invalid}
                className="w-32 flex-none"
              >
                <FieldLabel>代理端口</FieldLabel>
                <Input {...field} placeholder="请输入代理端口" />
                <FieldError>{fieldState.error?.message}</FieldError>
              </Field>
            )}
          />
          <Controller
            name="node_ip"
            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="expired_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="expired_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()
              setFilters({})
              table.pagination.onPageChange(1)
            }}
          >
            重置
          </Button>
        </FieldGroup>
      </form>

      <Suspense>
        <DataTable<Channel>
          {...table}
          columns={[
            {
              header: "会员号",
              accessorFn: row => row.user?.phone || "",
            },
            {
              header: "套餐号",
              accessorKey: "resource.resource_no",
              cell: ({ row }) => {
                const resource_no = row.original.resource?.resource_no
                const type = row.original.resource?.type
                return (
                  <Link
                    href={`./resources?resource_no=${resource_no}&type=${type}`}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-blue-600"
                  >
                    {resource_no}
                  </Link>
                )
              },
            },
            { header: "批次号", accessorKey: "batch_no" },
            {
              header: "节点",
              accessorFn: row => row.ip || row.edge_ref || row.edge_id,
            },

            {
              header: "自动配置",
              cell: ({ row }) => {
                const prov = row.original.filter_prov
                const city = row.original.filter_city
                const isp = row.original.filter_isp
                const parts = []
                if (prov && prov !== "all") parts.push(prov)
                if (city && city !== "all") parts.push(city)
                if (isp && isp !== "all") {
                  parts.push(ispMap[Number(isp)] || isp)
                }
                return (
                  <div className="text-sm">
                    {parts.length > 0 ? parts.join(" / ") : "不限"}
                  </div>
                )
              },
            },
            {
              header: "网关地址",
              accessorKey: "host",
              cell: ({ row }) => {
                return (
                  <span>
                    {row.original.host}:{row.original.port}
                  </span>
                )
              },
            },
            {
              header: "认证方式",
              cell: ({ row }) => {
                const channel = row.original
                const hasWhitelist =
                  channel.whitelists && channel.whitelists.trim() !== ""
                const hasAuth = channel.username && channel.password
                return (
                  <div className="flex flex-col gap-1 min-w-0">
                    {hasWhitelist ? (
                      <div className="flex flex-col">
                        <span>白名单</span>
                        <div className="flex flex-wrap gap-1 max-w-50">
                          {channel.whitelists.split(",").map(ip => (
                            <Badge key={ip.trim()} variant="secondary">
                              {ip.trim()}
                            </Badge>
                          ))}
                        </div>
                      </div>
                    ) : hasAuth ? (
                      <div className="flex flex-col">
                        <span>账号密码</span>
                        <Badge variant="secondary">
                          {channel.username}:{channel.password}
                        </Badge>
                      </div>
                    ) : (
                      <span className="text-sm text-gray-400">无认证</span>
                    )}
                  </div>
                )
              },
            },
            {
              header: "过期时间",
              accessorKey: "expired_at",
              cell: ({ row }) =>
                format(
                  new Date(row.original.expired_at),
                  "yyyy-MM-dd HH:mm:ss",
                ),
            },
          ]}
        />
      </Suspense>
    </Page>
  )
}