"use client"

import { useEffect, useState } from "react"
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 { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { useSearchParams } from "next/navigation"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { useToast } from "@/components/ui/use-toast"
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"
import Link from "next/link"
import { ShoppingCartIcon, BookOpen, Search, Filter, BookOpenCheck, TrendingUp } from "lucide-react"
import { useCart } from "@/context/cart-context"
import { fetchWithAuth } from "@/lib/api"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { motion } from "framer-motion"
import { Badge } from "@/components/ui/badge"
import { notify } from "@/lib/event-bus"

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

interface BooksResponse {
  pageNum: number
  pageSize: number
  total: number
  data: Book[]
}

export default function BooksPage() {
  const [books, setBooks] = useState<BooksResponse | null>(null)
  const [loading, setLoading] = useState(true)
  const [currentPage, setCurrentPage] = useState(1)
  const { toast } = useToast()
  const { addToCart } = useCart()
  const searchParams = useSearchParams()
  const searchQuery = searchParams?.get("search") || ""
  const [activeTab, setActiveTab] = useState("all")
  const [sortBy, setSortBy] = useState<string>("default")

  useEffect(() => {
    const fetchBooks = async () => {
      setLoading(true)
      try {
        let url = `book/all?pageNum=${currentPage}&pageSize=8`

        // 如果有搜索查询，使用搜索接口
        if (searchQuery) {
          url = `book/search/title?title=${encodeURIComponent(searchQuery)}&pageNum=${currentPage}&pageSize=8`
        } else if (activeTab === "new") {
          // 获取最新图书（按出版日期排序）
          url = `book/all?pageNum=${currentPage}&pageSize=8&sort=publishDate`
        } else if (activeTab === "popular") {
          // 这里假设后端有一个接口可以获取热门图书
          url = `book/popular?pageNum=${currentPage}&pageSize=8`
        }

        const response = await fetchWithAuth(url)
        const result = await response.json()

        if (result.code === 0) {
          // 根据排序选项处理数据
          const sortedData = [...result.data.data]
          if (sortBy === "priceAsc") {
            sortedData.sort((a, b) => a.price - b.price)
          } else if (sortBy === "priceDesc") {
            sortedData.sort((a, b) => b.price - a.price)
          } else if (sortBy === "dateDesc") {
            sortedData.sort((a, b) => new Date(b.publishDate).getTime() - new Date(a.publishDate).getTime())
          }

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

    fetchBooks()
  }, [currentPage, toast, searchQuery, activeTab, sortBy])

  const handlePageChange = (page: number) => {
    setCurrentPage(page)
    window.scrollTo({ top: 0, behavior: "smooth" })
  }

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

    // 使用事件总线通知
    notify({
      title: "已添加到购物车",
      message: book.title,
      type: "success",
      duration: 3000,
    })
  }

  const handleTabChange = (value: string) => {
    setActiveTab(value)
    setCurrentPage(1) // 重置页码
  }

  const handleSortChange = (value: string) => {
    setSortBy(value)
  }

  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, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className="flex flex-col space-y-6"
          >
            <div className="flex flex-col space-y-2">
              <div className="flex items-center justify-between">
                <h1 className="text-3xl font-bold tracking-tight">
                  {searchQuery ? (
                    <div className="flex items-center">
                      <Search className="mr-2 h-5 w-5 text-primary" />
                      <span>搜索结果: </span>
                      <Badge variant="outline" className="ml-2 text-base font-normal">
                        {searchQuery}
                      </Badge>
                    </div>
                  ) : (
                    "图书列表"
                  )}
                </h1>
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button variant="outline" size="sm" className="gap-1.5">
                      <Filter className="h-4 w-4" />
                      排序
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end" className="w-48">
                    <DropdownMenuGroup>
                      <DropdownMenuItem
                        onClick={() => handleSortChange("default")}
                        className="flex items-center cursor-pointer"
                      >
                        <span className={sortBy === "default" ? "font-medium text-primary" : ""}>默认排序</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem
                        onClick={() => handleSortChange("priceAsc")}
                        className="flex items-center cursor-pointer"
                      >
                        <span className={sortBy === "priceAsc" ? "font-medium text-primary" : ""}>价格从低到高</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem
                        onClick={() => handleSortChange("priceDesc")}
                        className="flex items-center cursor-pointer"
                      >
                        <span className={sortBy === "priceDesc" ? "font-medium text-primary" : ""}>价格从高到低</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem
                        onClick={() => handleSortChange("dateDesc")}
                        className="flex items-center cursor-pointer"
                      >
                        <span className={sortBy === "dateDesc" ? "font-medium text-primary" : ""}>最新出版</span>
                      </DropdownMenuItem>
                    </DropdownMenuGroup>
                  </DropdownMenuContent>
                </DropdownMenu>
              </div>
              {searchQuery ? (
                <p className="text-muted-foreground">找到 {books?.total || 0} 条结果</p>
              ) : (
                <p className="text-muted-foreground">浏览我们的图书收藏，按不同类别查看</p>
              )}
            </div>

            {!searchQuery && (
              <Tabs defaultValue="all" value={activeTab} onValueChange={handleTabChange} className="w-full">
                <TabsList className="w-full justify-start">
                  <TabsTrigger value="all" className="gap-1.5">
                    <BookOpen className="h-4 w-4" />
                    全部图书
                  </TabsTrigger>
                  <TabsTrigger value="new" className="gap-1.5">
                    <BookOpenCheck className="h-4 w-4" />
                    最新上架
                  </TabsTrigger>
                  <TabsTrigger value="popular" className="gap-1.5">
                    <TrendingUp className="h-4 w-4" />
                    热门图书
                  </TabsTrigger>
                </TabsList>
                <TabsContent value="all" className="pt-6">
                  {renderBookList()}
                </TabsContent>
                <TabsContent value="new" className="pt-6">
                  {renderBookList()}
                </TabsContent>
                <TabsContent value="popular" className="pt-6">
                  {renderBookList()}
                </TabsContent>
              </Tabs>
            )}

            {searchQuery && renderBookList()}
          </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>
  )

  function renderBookList() {
    if (loading) {
      return (
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 py-6">
          {Array.from({ length: 8 }).map((_, index) => (
            <Card key={index} className="overflow-hidden loading-shimmer">
              <div className="aspect-[3/4] bg-muted/30" />
              <CardContent className="p-4">
                <div className="h-4 bg-muted/30 rounded mb-2" />
                <div className="h-4 bg-muted/30 rounded w-2/3" />
              </CardContent>
              <CardContent className="p-4 pt-0 flex justify-between">
                <div className="h-4 bg-muted/30 rounded w-1/4" />
                <div className="h-8 bg-muted/30 rounded w-1/3" />
              </CardContent>
            </Card>
          ))}
        </div>
      )
    }

    if (!books || books.data.length === 0) {
      return (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 0.5 }}
          className="flex flex-col items-center justify-center py-12"
        >
          <BookOpen className="h-16 w-16 text-muted-foreground mb-4" />
          <h2 className="text-xl font-semibold">{searchQuery ? "未找到相关图书" : "暂无图书"}</h2>
          <p className="text-muted-foreground mt-2">{searchQuery ? "请尝试其他搜索词" : "请稍后再来查看"}</p>
          {searchQuery && (
            <Button className="mt-6" variant="outline" asChild>
              <Link href="/books">
                <Search className="mr-2 h-4 w-4" />
                浏览所有图书
              </Link>
            </Button>
          )}
        </motion.div>
      )
    }

    return (
      <div className="space-y-6 py-6">
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
          {books.data.map((book, index) => (
            <motion.div
              key={book.bookId}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: index * 0.05 }}
            >
              <Card className="overflow-hidden book-card flex flex-col h-full">
                <Link href={`/books/${book.bookId}`}>
                  <div className="aspect-[3/4] relative overflow-hidden book-cover">
                    <img
                      src={book.coverImage || "/placeholder.svg?height=400&width=300"}
                      alt={book.title}
                      className="object-cover w-full h-full"
                    />
                  </div>
                </Link>
                <CardContent className="p-4 flex-grow book-info">
                  <Link href={`/books/${book.bookId}`}>
                    <h3 className="font-semibold hover:underline line-clamp-2 transition-colors hover:text-primary">
                      {book.title}
                    </h3>
                  </Link>
                  <p className="text-sm text-muted-foreground mt-1">{book.author.join(", ")}</p>
                </CardContent>
                <CardContent className="p-4 pt-0 flex justify-between items-center">
                  <div className="price-tag">¥{book.price.toFixed(2)}</div>
                  <Button
                    size="sm"
                    onClick={() => handleAddToCart(book)}
                    disabled={book.stock <= 0}
                    className="btn-hover-effect"
                  >
                    <ShoppingCartIcon className="h-4 w-4 mr-2" />
                    {book.stock > 0 ? "加入购物车" : "缺货"}
                  </Button>
                </CardContent>
              </Card>
            </motion.div>
          ))}
        </div>

        {books.total > books.pageSize && (
          <Pagination className="mt-8">
            <PaginationContent>
              <PaginationItem>
                <PaginationPrevious
                  href="#"
                  onClick={(e) => {
                    e.preventDefault()
                    if (currentPage > 1) handlePageChange(currentPage - 1)
                  }}
                  className={currentPage === 1 ? "pointer-events-none opacity-50" : ""}
                />
              </PaginationItem>

              {Array.from({ length: Math.min(5, Math.ceil(books.total / books.pageSize)) }).map((_, index) => {
                let pageNumber = currentPage - 2 + index
                if (pageNumber < 1) pageNumber = index + 1
                if (pageNumber > Math.ceil(books.total / books.pageSize))
                  pageNumber = Math.ceil(books.total / books.pageSize) - (4 - index)

                return (
                  <PaginationItem key={index}>
                    <PaginationLink
                      href="#"
                      onClick={(e) => {
                        e.preventDefault()
                        handlePageChange(pageNumber)
                      }}
                      isActive={currentPage === pageNumber}
                    >
                      {pageNumber}
                    </PaginationLink>
                  </PaginationItem>
                )
              })}

              <PaginationItem>
                <PaginationNext
                  href="#"
                  onClick={(e) => {
                    e.preventDefault()
                    if (currentPage < Math.ceil(books.total / books.pageSize)) {
                      handlePageChange(currentPage + 1)
                    }
                  }}
                  className={
                    currentPage >= Math.ceil(books.total / books.pageSize) ? "pointer-events-none opacity-50" : ""
                  }
                />
              </PaginationItem>
            </PaginationContent>
          </Pagination>
        )}
      </div>
    )
  }
}