import { useState } from 'react'
import { useQuery, useMutation } from '@tanstack/react-query'
import { Plus, Search, Edit, Trash2 } from 'lucide-react'
import { format } from 'date-fns'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { toast } from 'sonner'

import { Button } from '@d8d/shared-ui-components/components/ui/button'
import { Input } from '@d8d/shared-ui-components/components/ui/input'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@d8d/shared-ui-components/components/ui/card'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@d8d/shared-ui-components/components/ui/table'
import { Badge } from '@d8d/shared-ui-components/components/ui/badge'
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@d8d/shared-ui-components/components/ui/dialog'
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@d8d/shared-ui-components/components/ui/form'
import { Switch } from '@d8d/shared-ui-components/components/ui/switch'
import { Textarea } from '@d8d/shared-ui-components/components/ui/textarea'
import { Skeleton } from '@d8d/shared-ui-components/components/ui/skeleton'

import { advertisementTypeClientManager } from '../api/advertisementTypeClient'
import type { AdvertisementType, AdvertisementTypeFormData, AdvertisementTypeQueryParams } from '../types/advertisementType'
import { CreateAdvertisementTypeDto, UpdateAdvertisementTypeDto } from '@d8d/advertisements-module/schemas'

// 表单Schema直接使用后端定义
const createFormSchema = CreateAdvertisementTypeDto
const updateFormSchema = UpdateAdvertisementTypeDto

export const AdvertisementTypeManagement = () => {
  // 状态管理
  const [searchParams, setSearchParams] = useState<AdvertisementTypeQueryParams>({ page: 1, limit: 10, search: '' })
  const [isModalOpen, setIsModalOpen] = useState(false)
  const [editingType, setEditingType] = useState<AdvertisementType | null>(null)
  const [isCreateForm, setIsCreateForm] = useState(true)
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
  const [typeToDelete, setTypeToDelete] = useState<number | null>(null)

  // 表单实例
  const createForm = useForm({
    resolver: zodResolver(createFormSchema),
    defaultValues: {
      name: '',
      code: '',
      remark: '',
      status: 1
    }
  })

  const updateForm = useForm({
    resolver: zodResolver(updateFormSchema),
    defaultValues: {
      name: '',
      code: '',
      remark: '',
      status: 1
    }
  })

  // 数据查询
  const { data, isLoading, refetch } = useQuery({
    queryKey: ['advertisement-types', searchParams],
    queryFn: async () => {
      const client = advertisementTypeClientManager.get()
      const res = await client.index.$get({
        query: {
          page: searchParams.page,
          pageSize: searchParams.limit,
          keyword: searchParams.search
        }
      })
      if (res.status !== 200) throw new Error('获取广告类型列表失败')
      return await res.json()
    }
  })

  // 创建mutation
  const createMutation = useMutation({
    mutationFn: async (data: AdvertisementTypeFormData) => {
      const client = advertisementTypeClientManager.get()
      const res = await client.index.$post({ json: data })
      if (res.status !== 201) throw new Error('创建失败')
      return await res.json()
    },
    onSuccess: () => {
      toast.success('广告类型创建成功')
      setIsModalOpen(false)
      createForm.reset()
      refetch()
    },
    onError: (error) => {
      toast.error(error.message || '创建失败')
    }
  })

  // 更新mutation
  const updateMutation = useMutation({
    mutationFn: async ({ id, data }: { id: number; data: AdvertisementTypeFormData }) => {
      const client = advertisementTypeClientManager.get()
      const res = await client[':id']['$put']({
        param: { id: id },
        json: data
      })
      if (res.status !== 200) throw new Error('更新失败')
      return await res.json()
    },
    onSuccess: () => {
      toast.success('广告类型更新成功')
      setIsModalOpen(false)
      setEditingType(null)
      refetch()
    },
    onError: (error) => {
      toast.error(error.message || '更新失败')
    }
  })

  // 删除mutation
  const deleteMutation = useMutation({
    mutationFn: async (id: number) => {
      const client = advertisementTypeClientManager.get()
      const res = await client[':id']['$delete']({
        param: { id: id }
      })
      if (res.status !== 204) throw new Error('删除失败')
      return await res.json()
    },
    onSuccess: () => {
      toast.success('广告类型删除成功')
      setDeleteDialogOpen(false)
      setTypeToDelete(null)
      refetch()
    },
    onError: (error) => {
      toast.error(error.message || '删除失败')
    }
  })

  // 业务逻辑函数
  const handleSearch = () => {
    setSearchParams(prev => ({ ...prev, page: 1 }))
  }

  const handleCreateType = () => {
    setIsCreateForm(true)
    setEditingType(null)
    createForm.reset({
      name: '',
      code: '',
      remark: '',
      status: 1
    })
    setIsModalOpen(true)
  }

  const handleEditType = (type: AdvertisementType) => {
    setIsCreateForm(false)
    setEditingType(type)
    updateForm.reset({
      name: type.name,
      code: type.code,
      remark: type.remark || '',
      status: type.status
    })
    setIsModalOpen(true)
  }

  const handleDeleteType = (id: number) => {
    setTypeToDelete(id)
    setDeleteDialogOpen(true)
  }

  const confirmDelete = () => {
    if (typeToDelete) {
      deleteMutation.mutate(typeToDelete)
    }
  }

  const handleCreateSubmit = async (data: any) => {
    try {
      createMutation.mutate(data)
    } catch (error) {
      toast.error('创建失败，请重试')
    }
  }

  const handleUpdateSubmit = async (data: any) => {
    if (!editingType) return

    try {
      updateMutation.mutate({ id: editingType.id, data })
    } catch (error) {
      toast.error('更新失败，请重试')
    }
  }

  // 格式化时间
  const formatDate = (date: string | null) => {
    if (!date) return '-'
    return format(new Date(date), 'yyyy-MM-dd HH:mm')
  }

  if (isLoading) {
    return (
      <div className="space-y-4">
        <div className="flex justify-between items-center">
          <div>
            <h1 className="text-2xl font-bold" data-testid="page-title">广告类型管理</h1>
            <p className="text-muted-foreground" data-testid="page-description">管理广告类型配置，用于广告位分类</p>
          </div>
          <Button disabled data-testid="create-type-button">
            <Plus className="mr-2 h-4 w-4" />
            创建类型
          </Button>
        </div>

        <Card>
          <CardHeader>
            <Skeleton className="h-6 w-1/4" />
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              <Skeleton className="h-4 w-full" />
              <Skeleton className="h-4 w-full" />
              <Skeleton className="h-4 w-full" />
            </div>
          </CardContent>
        </Card>
      </div>
    )
  }

  return (
    <div className="space-y-4">
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-2xl font-bold" data-testid="page-title">广告类型管理</h1>
          <p className="text-muted-foreground" data-testid="page-description">管理广告类型配置，用于广告位分类</p>
        </div>
        <Button onClick={handleCreateType} data-testid="create-type-button">
          <Plus className="mr-2 h-4 w-4" />
          创建类型
        </Button>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>广告类型列表</CardTitle>
          <CardDescription>管理所有广告类型配置</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="mb-4">
            <form onSubmit={(e) => { e.preventDefault(); handleSearch() }} className="flex gap-2">
              <div className="relative flex-1 max-w-sm">
                <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
                <Input
                  placeholder="搜索类型名称或调用别名..."
                  value={searchParams.search}
                  onChange={(e) => setSearchParams(prev => ({ ...prev, search: e.target.value }))}
                  className="pl-8"
                  data-testid="search-input"
                />
              </div>
              <Button type="submit" variant="outline" data-testid="search-button">
                搜索
              </Button>
            </form>
          </div>

          <div className="rounded-md border">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>ID</TableHead>
                  <TableHead>类型名称</TableHead>
                  <TableHead>调用别名</TableHead>
                  <TableHead>状态</TableHead>
                  <TableHead>创建时间</TableHead>
                  <TableHead className="text-right">操作</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {data?.data.map((type) => (
                  <TableRow key={type.id} data-testid={`type-row-${type.id}`}>
                    <TableCell className="font-medium">{type.id}</TableCell>
                    <TableCell>{type.name}</TableCell>
                    <TableCell>
                      <code className="text-xs bg-muted px-2 py-1 rounded">{type.code}</code>
                    </TableCell>
                    <TableCell>
                      <Badge variant={type.status === 1 ? 'default' : 'secondary'}>
                        {type.status === 1 ? '启用' : '禁用'}
                      </Badge>
                    </TableCell>
                    <TableCell className="text-sm">
                      {formatDate(type.createdAt)}
                    </TableCell>
                    <TableCell className="text-right">
                      <div className="flex justify-end gap-2">
                        <Button
                          variant="ghost"
                          size="icon"
                          onClick={() => handleEditType(type)}
                          data-testid={`edit-button-${type.id}`}
                        >
                          <Edit className="h-4 w-4" />
                        </Button>
                        <Button
                          variant="ghost"
                          size="icon"
                          onClick={() => handleDeleteType(type.id)}
                          data-testid={`delete-button-${type.id}`}
                        >
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>

          {data?.data.length === 0 && !isLoading && (
            <div className="text-center py-8">
              <p className="text-muted-foreground">暂无广告类型数据</p>
            </div>
          )}

          {/* 分页组件 - 需要从共享UI组件包中导入或自行实现 */}
          {data?.pagination && (
            <div className="mt-4 flex items-center justify-between">
              <div className="text-sm text-muted-foreground">
                共 {data.pagination.total} 条记录
              </div>
              <div className="flex items-center space-x-2">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => setSearchParams(prev => ({ ...prev, page: (prev.page || 1) - 1 }))}
                  disabled={(searchParams.page || 1) <= 1}
                  data-testid="prev-page-button"
                >
                  上一页
                </Button>
                <span className="text-sm" data-testid="current-page-info">
                  第 {searchParams.page} 页
                </span>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => setSearchParams(prev => ({ ...prev, page: (prev.page || 1) + 1 }))}
                  disabled={(searchParams.page || 1) >= Math.ceil(data.pagination.total / (searchParams.limit || 10))}
                  data-testid="next-page-button"
                >
                  下一页
                </Button>
              </div>
            </div>
          )}
        </CardContent>
      </Card>

      {/* 创建/编辑模态框 */}
      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
        <DialogContent className="sm:max-w-[500px] max-h-[90vh] overflow-y-auto" data-testid="type-modal">
          <DialogHeader>
            <DialogTitle data-testid="modal-title">{isCreateForm ? '创建广告类型' : '编辑广告类型'}</DialogTitle>
            <DialogDescription data-testid="modal-description">
              {isCreateForm ? '创建一个新的广告类型配置' : '编辑现有广告类型信息'}
            </DialogDescription>
          </DialogHeader>

          {isCreateForm ? (
            // 创建表单（独立渲染）
            <Form {...createForm}>
              <form onSubmit={createForm.handleSubmit(handleCreateSubmit)} className="space-y-4">
                <FormField
                  control={createForm.control}
                  name="name"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel className="flex items-center">
                        类型名称 <span className="text-red-500 ml-1">*</span>
                      </FormLabel>
                      <FormControl>
                        <Input placeholder="请输入类型名称" {...field} data-testid="create-name-input" />
                      </FormControl>
                      <FormDescription>例如：首页轮播、侧边广告等</FormDescription>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={createForm.control}
                  name="code"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel className="flex items-center">
                        调用别名 <span className="text-red-500 ml-1">*</span>
                      </FormLabel>
                      <FormControl>
                        <Input placeholder="请输入调用别名" {...field} data-testid="create-code-input" />
                      </FormControl>
                      <FormDescription>用于程序调用的唯一标识，建议使用英文小写和下划线</FormDescription>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={createForm.control}
                  name="remark"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>备注</FormLabel>
                      <FormControl>
                        <Textarea
                          placeholder="请输入备注信息（可选）"
                          className="resize-none"
                          {...field}
                          data-testid="create-remark-textarea"
                        />
                      </FormControl>
                      <FormDescription>对广告类型的详细描述</FormDescription>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={createForm.control}
                  name="status"
                  render={({ field }) => (
                    <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
                      <div className="space-y-0.5">
                        <FormLabel className="text-base">启用状态</FormLabel>
                        <FormDescription>
                          禁用后该类型下的广告将无法正常展示
                        </FormDescription>
                      </div>
                      <FormControl>
                        <Switch
                          checked={field.value === 1}
                          onCheckedChange={field.onChange}
                          data-testid="create-status-switch"
                        />
                      </FormControl>
                    </FormItem>
                  )}
                />

                <DialogFooter>
                  <Button type="button" variant="outline" onClick={() => setIsModalOpen(false)}>
                    取消
                  </Button>
                  <Button type="submit" disabled={createMutation.isPending}>
                    {createMutation.isPending ? '创建中...' : '创建'}
                  </Button>
                </DialogFooter>
              </form>
            </Form>
          ) : (
            // 编辑表单（独立渲染）
            <Form {...updateForm}>
              <form onSubmit={updateForm.handleSubmit(handleUpdateSubmit)} className="space-y-4">
                <FormField
                  control={updateForm.control}
                  name="name"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel className="flex items-center">
                        类型名称 <span className="text-red-500 ml-1">*</span>
                      </FormLabel>
                      <FormControl>
                        <Input placeholder="请输入类型名称" {...field} data-testid="edit-name-input" />
                      </FormControl>
                      <FormDescription>例如：首页轮播、侧边广告等</FormDescription>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={updateForm.control}
                  name="code"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel className="flex items-center">
                        调用别名 <span className="text-red-500 ml-1">*</span>
                      </FormLabel>
                      <FormControl>
                        <Input placeholder="请输入调用别名" {...field} data-testid="edit-code-input" />
                      </FormControl>
                      <FormDescription>用于程序调用的唯一标识，建议使用英文小写和下划线</FormDescription>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={updateForm.control}
                  name="remark"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>备注</FormLabel>
                      <FormControl>
                        <Textarea
                          placeholder="请输入备注信息（可选）"
                          className="resize-none"
                          {...field}
                          data-testid="edit-remark-textarea"
                        />
                      </FormControl>
                      <FormDescription>对广告类型的详细描述</FormDescription>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={updateForm.control}
                  name="status"
                  render={({ field }) => (
                    <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
                      <div className="space-y-0.5">
                        <FormLabel className="text-base">启用状态</FormLabel>
                        <FormDescription>
                          禁用后该类型下的广告将无法正常展示
                        </FormDescription>
                      </div>
                      <FormControl>
                        <Switch
                          checked={field.value === 1}
                          onCheckedChange={field.onChange}
                          data-testid="edit-status-switch"
                        />
                      </FormControl>
                    </FormItem>
                  )}
                />

                <DialogFooter>
                  <Button type="button" variant="outline" onClick={() => setIsModalOpen(false)}>
                    取消
                  </Button>
                  <Button type="submit" disabled={updateMutation.isPending}>
                    {updateMutation.isPending ? '更新中...' : '更新'}
                  </Button>
                </DialogFooter>
              </form>
            </Form>
          )}
        </DialogContent>
      </Dialog>

      {/* 删除确认对话框 */}
      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
        <DialogContent data-testid="delete-dialog">
          <DialogHeader>
            <DialogTitle data-testid="delete-dialog-title">确认删除</DialogTitle>
            <DialogDescription data-testid="delete-dialog-description">
              确定要删除这个广告类型吗？此操作无法撤销。
              <br />
              <span className="text-destructive">
                注意：删除后，该类型下的所有广告将失去类型关联。
              </span>
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setDeleteDialogOpen(false)} data-testid="delete-cancel-button">
              取消
            </Button>
            <Button
              variant="destructive"
              onClick={confirmDelete}
              disabled={deleteMutation.isPending}
              data-testid="delete-confirm-button"
            >
              {deleteMutation.isPending ? '删除中...' : '删除'}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}