'use client'

import {useStatus} from '@/lib/states'
import {useEffect, useState} from 'react'
import {ExtraResp} from '@/lib/api'
import {listResourceLong} from '@/actions/resource'
import zod from 'zod'
import {useSearchParams} from 'next/navigation'
import {useForm} from 'react-hook-form'
import {zodResolver} from '@hookform/resolvers/zod'
import {Form, FormField} from '@/components/ui/form'
import {Input} from '@/components/ui/input'
import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/components/ui/select'
import {Label} from '@/components/ui/label'
import DatePicker from '@/components/date-picker'
import {Button} from '@/components/ui/button'
import {Box, Eraser, Search, Timer} from 'lucide-react'
import DataTable from '@/components/data-table'
import {format, intlFormatDistance, isAfter} from 'date-fns'

export type LongResourceProps = {}

export default function LongResource(props: LongResourceProps) {
  // ======================
  // 查询
  // ======================

  const [status, setStatus] = useStatus()
  const [data, setData] = useState<ExtraResp<typeof listResourceLong>>({
    page: 1,
    size: 10,
    total: 0,
    list: [],
  })

  const refresh = async (page: number, size: number) => {
    setStatus('load')
    try {
      const type = {
        all: undefined,
        expire: 1,
        quota: 2,
      }[form.getValues('type')]
      const create_after = form.getValues('create_after')
      const create_before = form.getValues('create_before')
      const expire_after = form.getValues('expire_after')
      const expire_before = form.getValues('expire_before')
      const resource_no = form.getValues('resource_no')

      const res = await listResourceLong({
        page, size,
        type,
        create_after,
        create_before,
        expire_after,
        expire_before,
        resource_no,
      })

      if (res.success) {
        setData(res.data)
        setStatus('done')
      }
      else {
        throw new Error('Failed to load short resource')
      }
    }
    catch (e) {
      setStatus('fail')
    }
  }

  useEffect(() => {
    refresh(1, 10).then()
  }, [])

  // ======================
  // 筛选
  // ======================

  const filterSchema = zod.object({
    resource_no: zod.string().optional().default(''),
    type: zod.enum(['expire', 'quota', 'all']).default('all'),
    create_after: zod.date().optional(),
    create_before: zod.date().optional(),
    expire_after: zod.date().optional(),
    expire_before: zod.date().optional(),
  })

  type FilterSchema = zod.infer<typeof filterSchema>

  const params = useSearchParams()
  let paramType = params.get('type')
  if (paramType != 'all' && paramType != 'expire' && paramType != 'quota') {
    paramType = 'all'
  }

  const form = useForm<FilterSchema>({
    resolver: zodResolver(filterSchema),
    defaultValues: {
      resource_no: params.get('resource_no') || '',
      type: paramType as 'expire' | 'quota' | 'all',
      create_after: params.get('create_after') ? new Date(params.get('create_after')!) : undefined,
      create_before: params.get('create_before') ? new Date(params.get('create_before')!) : undefined,
      expire_after: params.get('expire_after') ? new Date(params.get('expire_after')!) : undefined,
      expire_before: params.get('expire_before') ? new Date(params.get('expire_before')!) : undefined,
    },
  })

  const onSubmit = async (value: FilterSchema) => {
    await refresh(1, data.size)
  }

  return (
    <>
      {/* 操作区 */}
      <section className="flex justify-between flex-wrap">
        <div>

        </div>

        <Form form={form} onSubmit={onSubmit} className="flex items-end gap-4 flex-wrap">
          <FormField name="resource_no" label={<span className="text-sm">套餐编号</span>}>
            {({id, field}) => (
              <Input {...field} id={id} className="h-9"/>
            )}
          </FormField>
          <FormField name="type" label={<span className="text-sm">类型</span>}>
            {({field}) => (
              <Select value={field.value} onValueChange={field.onChange}>
                <SelectTrigger className="w-24 h-9">
                  <SelectValue placeholder="选择套餐类型"/>
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">全部</SelectItem>
                  <SelectItem value="expire">包时</SelectItem>
                  <SelectItem value="quota">包量</SelectItem>
                </SelectContent>
              </Select>
            )}
          </FormField>
          <div className="flex flex-col gap-2">
            <Label className="text-sm">开通时间</Label>
            <div className="flex items-center">
              <FormField name="create_after">
                {({field}) => (
                  <DatePicker
                    {...field}
                    className="w-36"
                    placeholder="开始时间"
                    format="yyyy-MM-dd"
                  />
                )}
              </FormField>
              <span className="px-1">-</span>
              <FormField name="create_before">
                {({field}) => (
                  <DatePicker
                    {...field}
                    className="w-36"
                    placeholder="结束时间"
                    format="yyyy-MM-dd"
                  />
                )}
              </FormField>
            </div>
          </div>
          <div className="flex flex-col gap-2">
            <Label className="text-sm">最后使用时间</Label>
            <div className="flex items-center">
              <FormField name="expire_after">
                {({field}) => (
                  <DatePicker
                    {...field}
                    className="w-36"
                    placeholder="开始时间"
                    format="yyyy-MM-dd"
                  />
                )}
              </FormField>
              <span className="px-1">-</span>
              <FormField name="expire_before">
                {({field}) => (
                  <DatePicker
                    {...field}
                    className="w-36"
                    placeholder="结束时间"
                    format="yyyy-MM-dd"
                  />
                )}
              </FormField>
            </div>
          </div>
          <div className="flex gap-4">
            <Button className="h-9">
              <Search/>
              <span>筛选</span>
            </Button>
            <Button
              theme="outline"
              className="h-9"
              onClick={() => form.reset({
                type: 'all',
                resource_no: '',
                create_after: undefined,
                create_before: undefined,
                expire_after: undefined,
                expire_before: undefined,
              })}>
              <Eraser/>
              <span>重置</span>
            </Button>
          </div>
        </Form>
      </section>

      {/* 数据表 */}
      <DataTable
        data={data.list}
        status={status}
        pagination={{
          total: data.total,
          page: data.page,
          size: data.size,
          onPageChange: async (page: number) => {
            await refresh(page, data.size)
          },
          onSizeChange: async (size: number) => {
            await refresh(data.page, size)
          },
        }}
        columns={[
          {
            accessorKey: 'resource_no', header: `套餐编号`,
          },
          {
            accessorKey: 'type', header: `类型`, cell: ({row}) => (
              <div className="flex gap-2 items-center">
                {row.original.long.type === 1 && (
                  <div className="flex gap-2 items-center bg-green-50 w-fit px-2 py-1 rounded-md">
                    <Timer size={20}/>
                    <span>包时</span>
                  </div>
                )}
                {row.original.long.type === 2 && (
                  <div className="flex gap-2 items-center bg-blue-50 w-fit px-2 py-1 rounded-md">
                    <Box size={20}/>
                    <span>包量</span>
                  </div>
                )}
              </div>
            ),
          },
          {
            accessorKey: 'live', header: `IP 时效`, cell: ({row}) => (
              <span>
                {row.original.long.live}
                {' '}
                小时
              </span>
            ),
          },
          {
            accessorKey: 'expire', header: `使用情况`, cell: ({row}) => (
              <div className="flex gap-1">
                {row.original.long.type === 1 ? (
                  <div className="flex gap-1">
                    {isAfter(row.original.long.expire_at, new Date())
                      ? <span className="text-green-500">正常</span>
                      : <span className="text-red-500">过期</span>}
                    <span>|</span>
                    <span>
                      今日限额： {row.original.long.last_at
                        && new Date(row.original.long.last_at).toDateString() === new Date().toDateString()
                        ? row.original.long.daily
                        : 0}/{row.original.long.quota}
                    </span>
                    <span>|</span>
                    <span>
                      {intlFormatDistance(row.original.long.expire_at, new Date())}
                      {' '}
                      到期
                    </span>
                  </div>
                ) : row.original.long.type === 2 ? (
                  <div className="flex gap-1">
                    {row.original.long.used < row.original.long.quota
                      ? <span className="text-green-500">正常</span>
                      : <span className="text-red-500">已用完</span>}
                    <span>|</span>
                    <span>
                      用量统计：
                      {row.original.long.used}
                      {' '}
                      /
                      {row.original.long.quota}
                    </span>
                  </div>
                ) : (
                  <span>-</span>
                )}
              </div>
            ),
          },
          {
            accessorKey: 'last_at',
            header: '最近使用时间',
            cell: ({row}) => {
              const lastAt = row.original.long.last_at
              if (!lastAt) {
                return '暂未使用'
              }
              return format(lastAt, 'yyyy-MM-dd HH:mm')
            },
          },
          {
            accessorKey: 'created_at', header: '开通时间', cell: ({row}) => (
              format(row.getValue('created_at'), 'yyyy-MM-dd HH:mm')
            ),
          },
          {
            accessorKey: 'action', header: `操作`, cell: item => (
              <div className="flex gap-2">
                -
              </div>
            ),
          },
        ]}
      />
    </>
  )
}
