"use client"

import { AdminNav } from "@/components/admin-nav"
import { ThemeToggle } from "@/components/theme-toggle"
import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Combobox } from "@/components/ui/combobox"
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Skeleton } from "@/components/ui/skeleton"
import { Textarea } from "@/components/ui/textarea"
import { useToast } from "@/components/ui/use-toast"
import { useAuth } from "@/context/auth-context"
import { fetchWithAuth } from "@/lib/api"
import { zodResolver } from "@hookform/resolvers/zod"
import { format } from "date-fns"
import { ArrowLeft, BookOpen, CalendarIcon, ImageIcon, Loader2, Save, X } from "lucide-react"
import { useRouter } from "next/navigation"
import { useEffect, useState, use } from "react"
import { useFieldArray, useForm } from "react-hook-form"
import * as z from "zod"
import { Plus } from "lucide-react"

interface Publisher {
  publisherId: number
  name: string
  address: string
}

interface BookDetail {
  bookId: number
  title: string
  isbn: string
  price: number
  stock: number
  publishDate: string
  publisherId: number
  publisherName: string
  description: string
  coverImage: string
  author: string[]
}

const formSchema = z.object({
  title: z.string().min(1, "标题不能为空"),
  isbn: z.string().min(1, "ISBN不能为空"),
  price: z.coerce.number().min(0, "价格不能为负数"),
  stock: z.coerce.number().min(0, "库存不能为负数").int("库存必须是整数"),
  publishDate: z.date(),
  publisherId: z.coerce.number(),
  description: z.string().optional(),
  coverImage: z.string().optional(),
  authors: z
    .array(
      z.object({
        name: z.string().min(1, "作者名不能为空"),
      }),
    )
    .min(1, "至少需要一位作者"),
})

export default function EditBookPage({ params }: { params: Promise<{ id: string }> | { id: string } }) {
  // 使用 React.use() 解包 params
  const resolvedParams = "then" in params ? use(params) : params
  const bookId = resolvedParams.id

  const { user } = useAuth()
  const router = useRouter()
  const { toast } = useToast()
  const [publishers, setPublishers] = useState<Publisher[]>([])
  const [book, setBook] = useState<BookDetail | null>(null)
  const [loading, setLoading] = useState(true)
  const [submitting, setSubmitting] = useState(false)
  const [coverPreview, setCoverPreview] = useState<string | null>(null)

  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      title: "",
      isbn: "",
      price: 0,
      stock: 0,
      publishDate: new Date(),
      publisherId: 0,
      description: "",
      coverImage: "",
      authors: [{ name: "" }],
    },
  })

  const { fields, append, remove } = useFieldArray({
    control: form.control,
    name: "authors",
  })

  // 监听封面图片URL变化，更新预览
  const coverImageValue = form.watch("coverImage")
  useEffect(() => {
    if (coverImageValue) {
      setCoverPreview(coverImageValue)
    }
  }, [coverImageValue])

  useEffect(() => {
    // 检查用户是否登录且是管理员
    if (!user) {
      toast({
        title: "请先登录",
        description: "您需要登录后才能访问管理页面",
        variant: "destructive",
      })
      router.push("/login")
      return
    }

    if (!user.isAdmin) {
      toast({
        title: "权限不足",
        description: "您没有管理员权限",
        variant: "destructive",
      })
      router.push("/")
      return
    }

    // 获取出版社列表
    const fetchPublishers = async () => {
      try {
        const response = await fetchWithAuth("publisher/all")
        const result = await response.json()

        if (result.code === 0) {
          setPublishers(result.data)
        } else {
          toast({
            variant: "destructive",
            title: "获取出版社失败",
            description: result.msg || "无法获取出版社信息",
          })
        }
      } catch (error) {
        toast({
          variant: "destructive",
          title: "获取出版社失败",
          description: "服务器连接错误，请稍后再试",
        })
      }
    }

    // 获取图书详情
    const fetchBookDetail = async () => {
      try {
        const response = await fetchWithAuth(`book/${bookId}`)
        const result = await response.json()

        if (result.code === 0) {
          setBook(result.data)
          setCoverPreview(result.data.coverImage)

          // 设置表单默认值
          form.reset({
            title: result.data.title,
            isbn: result.data.isbn,
            price: result.data.price,
            stock: result.data.stock,
            publishDate: new Date(result.data.publishDate),
            publisherId: result.data.publisherId,
            description: result.data.description || "",
            coverImage: result.data.coverImage || "",
            authors: result.data.author.map((name: string) => ({ name })),
          })
        } else {
          toast({
            variant: "destructive",
            title: "获取图书失败",
            description: result.msg || "无法获取图书信息",
          })
          router.push("/admin/books")
        }
      } catch (error) {
        toast({
          variant: "destructive",
          title: "获取图书失败",
          description: "服务器连接错误，请稍后再试",
        })
        router.push("/admin/books")
      } finally {
        setLoading(false)
      }
    }

    Promise.all([fetchPublishers(), fetchBookDetail()])
  }, [user, router, toast, bookId, form])

  const onSubmit = async (values: z.infer<typeof formSchema>) => {
    if (!book) return

    setSubmitting(true)
    try {
      const bookData = {
        ...values,
        authors: values.authors.map((author) => author.name),
      }

      const response = await fetchWithAuth(`book/admin/update/${book.bookId}`, {
        method: "PUT",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(bookData),
      })

      const result = await response.json()

      if (result.code === 0) {
        toast({
          title: "更新成功",
          description: "图书信息已成功更新",
        })
        router.push("/admin/books")
      } else {
        toast({
          variant: "destructive",
          title: "更新失败",
          description: result.msg || "无法更新图书信息",
        })
      }
    } catch (error) {
      toast({
        variant: "destructive",
        title: "更新失败",
        description: "服务器连接错误，请稍后再试",
      })
    } finally {
      setSubmitting(false)
    }
  }

  if (!user || !user.isAdmin) {
    return null
  }

  return (
    <div className="flex min-h-screen flex-col">
      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center justify-between">
          <div className="flex items-center gap-2 font-semibold">
            <BookOpen className="h-6 w-6" />
            <span>图书管理系统 - 管理后台</span>
          </div>
          <div className="flex items-center gap-4">
            <ThemeToggle />
            <Button variant="ghost" onClick={() => router.push("/")}>
              返回前台
            </Button>
          </div>
        </div>
      </header>
      <div className="flex flex-1">
        <AdminNav />
        <main className="flex-1 p-6">
          <div className="space-y-6">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-2">
                <Button variant="outline" size="icon" onClick={() => router.push("/admin/books")}>
                  <ArrowLeft className="h-4 w-4" />
                </Button>
                <h1 className="text-3xl font-bold">编辑图书</h1>
              </div>
              {!loading && book && (
                <div className="flex items-center gap-2">
                  <span className="text-sm text-muted-foreground">图书ID: {book.bookId}</span>
                </div>
              )}
            </div>

            {loading ? (
              <div className="space-y-6">
                <Card>
                  <CardHeader>
                    <Skeleton className="h-8 w-1/3" />
                    <Skeleton className="h-4 w-1/2" />
                  </CardHeader>
                  <CardContent className="space-y-6">
                    <div className="grid gap-6 md:grid-cols-2">
                      {Array.from({ length: 6 }).map((_, i) => (
                        <div key={i} className="space-y-2">
                          <Skeleton className="h-4 w-20" />
                          <Skeleton className="h-10 w-full" />
                        </div>
                      ))}
                    </div>
                    <div className="space-y-2">
                      <Skeleton className="h-4 w-20" />
                      <Skeleton className="h-32 w-full" />
                    </div>
                  </CardContent>
                </Card>
              </div>
            ) : (
              <Form {...form}>
                <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
                  <div className="grid gap-6 md:grid-cols-2">
                    <Card className="md:col-span-1">
                      <CardHeader>
                        <CardTitle>基本信息</CardTitle>
                        <CardDescription>编辑图书的基本信息</CardDescription>
                      </CardHeader>
                      <CardContent className="space-y-4">
                        <FormField
                          control={form.control}
                          name="title"
                          render={({ field }) => (
                            <FormItem>
                              <FormLabel>标题</FormLabel>
                              <FormControl>
                                <Input placeholder="输入图书标题" {...field} />
                              </FormControl>
                              <FormMessage />
                            </FormItem>
                          )}
                        />

                        <FormField
                          control={form.control}
                          name="isbn"
                          render={({ field }) => (
                            <FormItem>
                              <FormLabel>ISBN</FormLabel>
                              <FormControl>
                                <Input placeholder="输入ISBN" {...field} />
                              </FormControl>
                              <FormMessage />
                            </FormItem>
                          )}
                        />

                        <div className="grid grid-cols-2 gap-4">
                          <FormField
                            control={form.control}
                            name="price"
                            render={({ field }) => (
                              <FormItem>
                                <FormLabel>价格</FormLabel>
                                <FormControl>
                                  <Input type="number" step="0.01" placeholder="输入价格" {...field} />
                                </FormControl>
                                <FormMessage />
                              </FormItem>
                            )}
                          />

                          <FormField
                            control={form.control}
                            name="stock"
                            render={({ field }) => (
                              <FormItem>
                                <FormLabel>库存</FormLabel>
                                <FormControl>
                                  <Input type="number" placeholder="输入库存" {...field} />
                                </FormControl>
                                <FormMessage />
                              </FormItem>
                            )}
                          />
                        </div>

                        <FormField
                          control={form.control}
                          name="publishDate"
                          render={({ field }) => (
                            <FormItem className="flex flex-col">
                              <FormLabel>出版日期</FormLabel>
                              <Popover>
                                <PopoverTrigger asChild>
                                  <FormControl>
                                    <Button variant={"outline"} className="w-full pl-3 text-left font-normal">
                                      {field.value ? format(field.value, "yyyy-MM-dd") : <span>选择日期</span>}
                                      <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
                                    </Button>
                                  </FormControl>
                                </PopoverTrigger>
                                <PopoverContent className="w-auto p-0" align="start">
                                  <Calendar
                                    mode="single"
                                    selected={field.value}
                                    onSelect={field.onChange}
                                    initialFocus
                                  />
                                </PopoverContent>
                              </Popover>
                              <FormMessage />
                            </FormItem>
                          )}
                        />

                        <FormField
                          control={form.control}
                          name="publisherId"
                          render={({ field }) => (
                            <FormItem className="flex flex-col">
                              <FormLabel>出版社</FormLabel>
                              <Combobox
                                items={publishers.map((publisher) => ({
                                  label: publisher.name,
                                  value: publisher.publisherId.toString(),
                                }))}
                                value={field.value.toString()}
                                onChange={(value) => field.onChange(Number.parseInt(value))}
                                placeholder="选择出版社"
                              />
                              <FormMessage />
                            </FormItem>
                          )}
                        />
                      </CardContent>
                    </Card>

                    <Card className="md:col-span-1">
                      <CardHeader>
                        <CardTitle>封面与描述</CardTitle>
                        <CardDescription>编辑图书的封面和描述信息</CardDescription>
                      </CardHeader>
                      <CardContent className="space-y-4">
                        <FormField
                          control={form.control}
                          name="coverImage"
                          render={({ field }) => (
                            <FormItem>
                              <FormLabel>封面图片URL</FormLabel>
                              <FormControl>
                                <Input placeholder="输入封面图片URL" {...field} />
                              </FormControl>
                              <FormDescription>输入图书封面的URL地址</FormDescription>
                              <FormMessage />
                            </FormItem>
                          )}
                        />

                        <div className="mt-4">
                          <p className="text-sm font-medium mb-2">封面预览</p>
                          <div className="border rounded-md p-4 flex justify-center bg-muted/30">
                            {coverPreview ? (
                              <img
                                src={coverPreview || "/placeholder.svg"}
                                alt="封面预览"
                                className="max-h-[200px] object-contain rounded-md"
                                onError={() => setCoverPreview(null)}
                              />
                            ) : (
                              <div className="flex flex-col items-center justify-center h-[200px] w-full text-muted-foreground">
                                <ImageIcon className="h-12 w-12 mb-2" />
                                <p className="text-sm">无封面图片</p>
                              </div>
                            )}
                          </div>
                        </div>

                        <FormField
                          control={form.control}
                          name="description"
                          render={({ field }) => (
                            <FormItem>
                              <FormLabel>描述</FormLabel>
                              <FormControl>
                                <Textarea placeholder="输入图书描述" className="min-h-[120px]" {...field} />
                              </FormControl>
                              <FormMessage />
                            </FormItem>
                          )}
                        />
                      </CardContent>
                    </Card>
                  </div>

                  <Card>
                    <CardHeader>
                      <CardTitle>作者信息</CardTitle>
                      <CardDescription>编辑图书的作者信息</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-4">
                        {fields.map((field, index) => (
                          <div key={field.id} className="flex items-center gap-2">
                            <FormField
                              control={form.control}
                              name={`authors.${index}.name`}
                              render={({ field }) => (
                                <FormItem className="flex-1">
                                  <FormLabel className={index !== 0 ? "sr-only" : ""}>
                                    {index === 0 ? "作者" : `作者 ${index + 1}`}
                                  </FormLabel>
                                  <FormControl>
                                    <Input placeholder="作者姓名" {...field} />
                                  </FormControl>
                                  <FormMessage />
                                </FormItem>
                              )}
                            />
                            {index > 0 && (
                              <Button
                                type="button"
                                variant="destructive"
                                size="icon"
                                className="mt-7"
                                onClick={() => remove(index)}
                              >
                                <X className="h-4 w-4" />
                              </Button>
                            )}
                          </div>
                        ))}
                        <Button
                          type="button"
                          variant="outline"
                          size="sm"
                          className="mt-2"
                          onClick={() => append({ name: "" })}
                        >
                          <Plus className="h-4 w-4 mr-2" />
                          添加作者
                        </Button>
                      </div>
                    </CardContent>
                    <CardFooter className="flex justify-between border-t px-6 py-4">
                      <Button variant="outline" type="button" onClick={() => router.push("/admin/books")}>
                        取消
                      </Button>
                      <Button type="submit" disabled={submitting}>
                        {submitting ? (
                          <>
                            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                            保存中...
                          </>
                        ) : (
                          <>
                            <Save className="mr-2 h-4 w-4" />
                            保存修改
                          </>
                        )}
                      </Button>
                    </CardFooter>
                  </Card>
                </form>
              </Form>
            )}
          </div>
        </main>
      </div>
    </div>
  )
}