"use client";

import { useState, useMemo } from 'react';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import Input from '@/components/form/Input';
import ButtonExpandHover from '@/components/button/ButtonExpandHover';
import { useRouter } from 'next/navigation';
import { ChevronLeft, ChevronRight, Filter, Search, SlidersHorizontal } from 'lucide-react';

// Dummy data for books
const allBooks = [
  { id: '1', name: 'The Art of Programming', price: '$29.99', imageSrc: '/book-programming.jpg', imageAlt: 'Book cover for The Art of Programming', category: 'technology' },
  { id: '2', name: 'Science Fiction Masterpiece', price: '$19.99', imageSrc: '/book-scifi.jpg', imageAlt: 'Book cover for Science Fiction Masterpiece', category: 'fiction' },
  { id: '3', name: 'A Culinary Journey', price: '$24.99', imageSrc: '/book-cooking.jpg', imageAlt: 'Book cover for A Culinary Journey', category: 'cooking' },
  { id: '4', name: 'History of the World', price: '$35.00', imageSrc: '/book-history.jpg', imageAlt: 'Book cover for History of the World', category: 'history' },
  { id: '5', name: 'Developing Modern Web Apps', price: '$39.99', imageSrc: '/book-webdev.jpg', imageAlt: 'Book cover for Developing Modern Web Apps', category: 'technology' },
  { id: '6', name: 'Fantasy Realms Saga', price: '$22.50', imageSrc: '/book-fantasy.jpg', imageAlt: 'Book cover for Fantasy Realms Saga', category: 'fiction' },
  { id: '7', name: 'Gourmet Baking Guide', price: '$28.00', imageSrc: '/book-baking.jpg', imageAlt: 'Book cover for Gourmet Baking Guide', category: 'cooking' },
  { id: '8', name: 'Ancient Civilizations', price: '$32.00', imageSrc: '/book-ancient.jpg', imageAlt: 'Book cover for Ancient Civilizations', category: 'history' },
  { id: '9', name: 'The Digital Frontier', price: '$31.99', imageSrc: '/book-digital.jpg', imageAlt: 'Book cover for The Digital Frontier', category: 'technology' },
  { id: '10', name: 'Mythical Beasts', price: '$18.75', imageSrc: '/book-myth.jpg', imageAlt: 'Book cover for Mythical Beasts', category: 'fiction' }
];

const ITEMS_PER_PAGE = 6;

export default function BookCollectionPage({ params }: { params: { category: string } }) {
  const router = useRouter();
  const { category } = params;
  const [searchTerm, setSearchTerm] = useState('');
  const [sortOrder, setSortOrder] = useState<'asc' | 'desc' | 'none'>('none');
  const [currentPage, setCurrentPage] = useState(1);

  const navItems = [
    { name: "Home", id: "/" },
    { name: "About", id: "#about" },
    { name: "Features", id: "#features" },
    { name: "Pricing", id: "#pricing" },
    { name: "Books", id: "/collections/all" }
  ];

  const filteredAndSortedBooks = useMemo(() => {
    let books = allBooks;

    // Category filtering
    if (category !== 'all') {
      books = books.filter(book => book.category === category);
    }

    // Search term filtering
    if (searchTerm) {
      books = books.filter(book =>
        book.name.toLowerCase().includes(searchTerm.toLowerCase())
      );
    }

    // Sorting
    if (sortOrder === 'asc') {
      books = [...books].sort((a, b) => a.name.localeCompare(b.name));
    } else if (sortOrder === 'desc') {
      books = [...books].sort((a, b) => b.name.localeCompare(a.name));
    }

    return books;
  }, [category, searchTerm, sortOrder]);

  const totalPages = Math.ceil(filteredAndSortedBooks.length / ITEMS_PER_PAGE);
  const paginatedBooks = useMemo(() => {
    const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
    const endIndex = startIndex + ITEMS_PER_PAGE;
    return filteredAndSortedBooks.slice(startIndex, endIndex);
  }, [filteredAndSortedBooks, currentPage]);

  const handleCategoryChange = (newCategory: string) => {
    router.push(`/collections/${newCategory}`);
    setCurrentPage(1); // Reset page on category change
  };

  const handlePageChange = (page: number) => {
    if (page >= 1 && page <= totalPages) {
      setCurrentPage(page);
    }
  };

  const uniqueCategories = useMemo(() => {
    const categories = new Set(allBooks.map(book => book.category));
    return ['all', ...Array.from(categories)];
  }, []);

  return (
    <main className="min-h-screen bg-background text-foreground">
      <NavbarStyleFullscreen
        navItems={navItems}
        brandName="BookShelf"
        logoSrc="/placeholder-logo.svg"
        logoAlt="BookShelf Logo"
        button={{ text: "Sign Up", href: "#" }}
      />

      <div className="container mx-auto p-8">
        <h1 className="text-4xl font-bold text-center mb-8 capitalize">
          {category === 'all' ? 'All Books' : `${category} Books`}
        </h1>

        <div className="flex flex-wrap items-center justify-between gap-4 mb-8">
          {/* Category Filter */}
          <div className="flex items-center gap-2">
            <Filter className="w-5 h-5" />
            <label htmlFor="category-filter" className="sr-only">Filter by Category</label>
            <select
              id="category-filter"
              value={category}
              onChange={(e) => handleCategoryChange(e.target.value)}
              className="px-4 py-2 rounded-lg border border-border bg-card text-foreground focus:ring-2 focus:ring-primary-cta focus:outline-none"
            >
              {uniqueCategories.map(cat => (
                <option key={cat} value={cat} className="capitalize">
                  {cat === 'all' ? 'All Categories' : cat}
                </option>
              ))}
            </select>
          </div>

          {/* Search Input */}
          <div className="relative flex-grow max-w-sm">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-foreground/60" />
            <Input
              value={searchTerm}
              onChange={setSearchTerm}
              placeholder="Search books..."
              className="w-full pl-10 pr-4 py-2 rounded-lg border border-border bg-card text-foreground focus:ring-2 focus:ring-primary-cta focus:outline-none"
              ariaLabel="Search books"
            />
          </div>

          {/* Sort Order */}
          <div className="flex items-center gap-2">
            <SlidersHorizontal className="w-5 h-5" />
            <label htmlFor="sort-order" className="sr-only">Sort Order</label>
            <select
              id="sort-order"
              value={sortOrder}
              onChange={(e) => setSortOrder(e.target.value as 'asc' | 'desc' | 'none')}
              className="px-4 py-2 rounded-lg border border-border bg-card text-foreground focus:ring-2 focus:ring-primary-cta focus:outline-none"
            >
              <option value="none">Sort By</option>
              <option value="asc">Name (A-Z)</option>
              <option value="desc">Name (Z-A)</option>
            </select>
          </div>
        </div>

        {paginatedBooks.length > 0 ? (
          <ProductCardThree
            animationType="slide-up"
            gridVariant="three-columns-all-equal-width"
            title="" // No title for the section itself, as the page title handles it
            description=""
            products={paginatedBooks.map(book => ({
              id: book.id,
              name: book.name,
              price: book.price,
              imageSrc: book.imageSrc,
              imageAlt: book.imageAlt
              // Add other necessary product props, e.g., onFavorite, onProductClick
            }))}
            className="mb-8"
          />
        ) : (
          <div className="text-center text-foreground/80 text-xl py-16">
            No books found for this category or search term.
          </div>
        )}

        {/* Pagination */}
        {totalPages > 1 && (
          <div className="flex justify-center items-center gap-4 mt-8">
            <ButtonExpandHover
              text=""
              onClick={() => handlePageChange(currentPage - 1)}
              disabled={currentPage === 1}
              ariaLabel="Previous page"
              className="w-10 h-10 p-0 flex items-center justify-center bg-secondary-cta hover:bg-secondary-cta/80 disabled:opacity-50 disabled:cursor-not-allowed"
              textClassName="sr-only"
            >
              <ChevronLeft className="w-5 h-5" />
            </ButtonExpandHover>
            {Array.from({ length: totalPages }, (_, i) => i + 1).map(page => (
              <button
                key={page}
                onClick={() => handlePageChange(page)}
                className={`w-10 h-10 rounded-lg flex items-center justify-center text-lg font-medium 
                            ${currentPage === page 
                               ? 'bg-primary-cta text-primary-cta-foreground' 
                               : 'bg-card text-foreground hover:bg-card/80'
                            }`}
              >
                {page}
              </button>
            ))}
            <ButtonExpandHover
              text=""
              onClick={() => handlePageChange(currentPage + 1)}
              disabled={currentPage === totalPages}
              ariaLabel="Next page"
              className="w-10 h-10 p-0 flex items-center justify-center bg-secondary-cta hover:bg-secondary-cta/80 disabled:opacity-50 disabled:cursor-not-allowed"
              textClassName="sr-only"
            >
              <ChevronRight className="w-5 h-5" />
            </ButtonExpandHover>
          </div>
        )}
      </div>
    </main>
  );
}