"use client"

import { MainNav } from "@/components/main-nav"
import { SearchBar } from "@/components/search-bar"
import { ThemeToggle } from "@/components/theme-toggle"
import { ShoppingCart } from "@/components/shopping-cart"
import { UserNav } from "@/components/user-nav"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import { useToast } from "@/components/ui/use-toast"
import { useCart } from "@/context/cart-context"
import {
  BookOpen,
  Calendar,
  DollarSign,
  MinusCircle,
  PlusCircle,
  ShoppingCartIcon as CartIcon,
  Heart,
} from "lucide-react"
import { useEffect, useState, use } from "react"
import { fetchWithAuth } from "@/lib/api"
import { motion } from "framer-motion"
import { notify } from "@/lib/event-bus"
import { Badge } from "@/components/ui/badge"

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

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

  const [book, setBook] = useState<BookDetail | null>(null)
  const [loading, setLoading] = useState(true)
  const [quantity, setQuantity] = useState(1)
  const [isFavorite, setIsFavorite] = useState(false)
  const { toast } = useToast()
  const { addToCart } = useCart()

  useEffect(() => {
    const fetchBook = async () => {
      try {
        const response = await fetchWithAuth(`book/${bookId}`)
        const result = await response.json()

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

    fetchBook()
  }, [bookId, toast])

  const handleAddToCart = () => {
    if (book) {
      addToCart({
        id: book.bookId,
        title: book.title,
        price: book.price,
        quantity,
        coverImage: book.coverImage || "/placeholder.svg?height=100&width=80",
      })

      notify({
        title: "已添加到购物车",
        message: `${book.title} x ${quantity}`,
        type: "success",
        duration: 3000,
      })
    }
  }

  const increaseQuantity = () => {
    if (book && quantity < book.stock) {
      setQuantity(quantity + 1)
    }
  }

  const decreaseQuantity = () => {
    if (quantity > 1) {
      setQuantity(quantity - 1)
    }
  }

  const toggleFavorite = () => {
    setIsFavorite(!isFavorite)

    notify({
      title: isFavorite ? "已移除收藏" : "已添加收藏",
      message: book?.title || "",
      type: "info",
      duration: 2000,
    })
  }

  if (loading) {
    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">
            <MainNav />
            <div className="flex items-center gap-4">
              <SearchBar />
              <ShoppingCart />
              <ThemeToggle />
              <UserNav />
            </div>
          </div>
        </header>
        <main className="flex-1 container py-8">
          <div className="grid gap-8 md:grid-cols-2">
            <div className="flex justify-center">
              <div className="aspect-[3/4] w-full max-w-[350px] rounded-lg loading-shimmer" />
            </div>
            <div className="space-y-6">
              <div className="h-8 w-3/4 loading-shimmer rounded" />
              <div className="h-4 w-1/2 loading-shimmer rounded" />
              <Separator />
              <div className="space-y-4">
                <div className="h-6 w-1/4 loading-shimmer rounded" />
                <div className="h-4 w-1/3 loading-shimmer rounded" />
                <div className="h-4 w-1/2 loading-shimmer rounded" />
              </div>
              <Separator />
              <div className="h-10 w-full loading-shimmer rounded" />
            </div>
          </div>
          <div className="mt-12">
            <div className="h-6 w-1/4 loading-shimmer rounded mb-4" />
            <div className="h-40 w-full loading-shimmer rounded" />
          </div>
        </main>
      </div>
    )
  }

  if (!book) {
    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">
            <MainNav />
            <div className="flex items-center gap-4">
              <SearchBar />
              <ShoppingCart />
              <ThemeToggle />
              <UserNav />
            </div>
          </div>
        </header>
        <main className="flex-1 container py-8">
          <div className="flex flex-col justify-center items-center h-[60vh]">
            <BookOpen className="h-16 w-16 text-muted-foreground mb-4" />
            <h2 className="text-2xl font-semibold">图书不存在</h2>
            <p className="text-muted-foreground mt-2">该图书可能已被删除或移动</p>
            <Button className="mt-6" asChild>
              <a href="/books">浏览所有图书</a>
            </Button>
          </div>
        </main>
      </div>
    )
  }

  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">
          <MainNav />
          <div className="flex items-center gap-4">
            <SearchBar />
            <ShoppingCart />
            <ThemeToggle />
            <UserNav />
          </div>
        </div>
      </header>
      <main className="flex-1">
        <div className="container py-8">
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.5 }}
            className="grid gap-8 md:grid-cols-2"
          >
            <motion.div
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.5, delay: 0.2 }}
              className="flex justify-center"
            >
              <img
                src={book.coverImage || "/placeholder.svg?height=500&width=350"}
                alt={book.title}
                className="rounded-lg object-cover max-h-[500px] w-auto book-detail-image"
              />
            </motion.div>
            <motion.div
              initial={{ opacity: 0, x: 20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.5, delay: 0.2 }}
              className="space-y-6"
            >
              <div>
                <div className="flex justify-between items-start">
                  <h1 className="text-3xl font-bold">{book.title}</h1>
                  <Button
                    variant="ghost"
                    size="icon"
                    onClick={toggleFavorite}
                    className={isFavorite ? "text-red-500" : "text-muted-foreground"}
                  >
                    <Heart className={`h-5 w-5 ${isFavorite ? "fill-current" : ""}`} />
                  </Button>
                </div>
                <div className="mt-2 flex items-center">
                  <p className="text-muted-foreground">作者: {book.author.join(", ")}</p>
                </div>
              </div>
              <Separator />
              <div className="space-y-4">
                <div className="flex items-center gap-2">
                  <DollarSign className="h-5 w-5 text-primary" />
                  <span className="text-2xl font-bold price-tag">¥{book.price.toFixed(2)}</span>
                </div>
                <div className="flex items-center gap-2">
                  <BookOpen className="h-5 w-5 text-muted-foreground" />
                  <span>ISBN: {book.isbn}</span>
                </div>
                <div className="flex items-center gap-2">
                  <Calendar className="h-5 w-5 text-muted-foreground" />
                  <span>出版日期: {new Date(book.publishDate).toLocaleDateString()}</span>
                </div>
                <div className="flex items-center gap-2">
                  <span>出版社: </span>
                  <Badge variant="outline">{book.publisherName}</Badge>
                </div>
                <div>
                  <span
                    className={book.stock > 0 ? "text-green-600 dark:text-green-400" : "text-red-600 dark:text-red-400"}
                  >
                    {book.stock > 0 ? `库存: ${book.stock}` : "缺货"}
                  </span>
                </div>
              </div>
              <Separator />
              <div className="space-y-4">
                <div className="flex items-center">
                  <Button
                    variant="outline"
                    size="icon"
                    onClick={decreaseQuantity}
                    disabled={quantity <= 1}
                    className="rounded-full h-10 w-10"
                  >
                    <MinusCircle className="h-4 w-4" />
                  </Button>
                  <span className="w-12 text-center font-medium text-lg">{quantity}</span>
                  <Button
                    variant="outline"
                    size="icon"
                    onClick={increaseQuantity}
                    disabled={book.stock <= quantity}
                    className="rounded-full h-10 w-10"
                  >
                    <PlusCircle className="h-4 w-4" />
                  </Button>
                </div>
                <Button
                  className="w-full h-12 text-base btn-hover-effect"
                  onClick={handleAddToCart}
                  disabled={book.stock <= 0}
                >
                  <CartIcon className="mr-2 h-5 w-5" />
                  添加到购物车
                </Button>
              </div>
            </motion.div>
          </motion.div>
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.4 }}
            className="mt-12"
          >
            <h2 className="text-2xl font-bold mb-4">图书简介</h2>
            <Card className="overflow-hidden">
              <CardContent className="p-6">
                <p className="leading-7">{book.description || "暂无简介"}</p>
              </CardContent>
            </Card>
          </motion.div>
        </div>
      </main>
      <footer className="border-t py-6 md:py-0">
        <div className="container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
          <p className="text-center text-sm leading-loose text-muted-foreground md:text-left">
            &copy; {new Date().getFullYear()} 图书管理系统. 保留所有权利.
          </p>
        </div>
      </footer>
    </div>
  )
}