import { Head, Link, router, usePage } from "@inertiajs/react"; import MainLayout from "@/layouts/main-layout"; import { ReactNode, useState, useEffect } from "react"; import { Search, X, Bookmark, BookOpen, CheckCircle2, Clock, Plus, Filter as FilterIcon } from "lucide-react"; import WishlistCard, { type WishlistBook, type ReadingStatus } from "@/components/wishlist-book"; import { AnimatePresence, motion } from "framer-motion"; export default function Wishlist() { const { books: initialBooks } = usePage<{ books: WishlistBook[] }>().props; const [books, setBooks] = useState(initialBooks); const [filter, setFilter] = useState('all'); const [search, setSearch] = useState(''); // Update books ketika props dari backend berubah useEffect(() => { setBooks(initialBooks); }, [initialBooks]); // Debounce Search untuk efisiensi server useEffect(() => { const timeout = setTimeout(() => { router.get('/collection/wishlist', { search, status: filter === 'all' ? '' : filter, }, { preserveState: true, replace: true, only: ['books'] }) }, 500) return () => clearTimeout(timeout) }, [search, filter]) const filterOptions = [ { name: "Semua", value: "all" }, { name: "Belum Dibaca", value: "unread" }, { name: "Sedang Dibaca", value: "reading" }, { name: "Selesai", value: "finished" }, ] const handleStatusChange = (id: string, newStatus: ReadingStatus) => { router.patch(`/collection/wishlist/${encodeURIComponent(id)}`, { status: newStatus, }, { preserveScroll: true, onSuccess: () => { setBooks(prev => prev.map(book => book.id === id ? { ...book, status: newStatus } : book)); } }); } const handleRemove = (id: string) => { router.delete(`/collection/wishlist/${encodeURIComponent(String(id))}`, { preserveScroll: true, }) } const stats = { unread: books.filter(b => b.status === 'unread').length, reading: books.filter(b => b.status === 'reading').length, finished: books.filter(b => b.status === 'finished').length, } const filteredBooks = books .filter(b => filter === 'all' || b.status === filter) .filter(b => search === '' || b.title.toLowerCase().includes(search.toLowerCase())) return ( <>

{/* ── Header Section ── */}

Koleksi Pribadi

Perpustakaan Kamu.

Kelola progres membaca dan simpan buku favoritmu dalam satu tempat yang rapi.

{/* Stat Cards - Improved Visuals */}

{[ { label: 'Belum Baca', count: stats.unread, icon: BookOpen, color: 'bg-bukuku-primary' }, { label: 'Sedang Baca', count: stats.reading, icon: Clock, color: 'bg-amber-500' }, { label: 'Selesai', count: stats.finished, icon: CheckCircle2, color: 'bg-emerald-500' } ].map((item, i) => (

{item.count}

{item.label}

))}

{/* ── Toolbar: Search & Filter ── */} {/* Search Bar - Modern Style */}

setSearch(e.target.value)} placeholder="Cari di perpustakaanmu..." className="w-full bg-bukuku-bg text-bukuku-dark border-none rounded-2xl py-3 pl-12 pr-4 text-sm font-medium focus:ring-2 focus:ring-bukuku-primary/20 transition-all outline-none" />

{/* Filter Pills */}

{filterOptions.map((f) => ( ))}

{/* ── Content Grid ── */} {filteredBooks.length > 0 ? ( {filteredBooks.map((book, idx) => ( ))} ) : ( /* Empty State - More Descriptive */

Belum ada buku nih.

Mungkin ini saatnya mencari petualangan baru di koleksi kami.

Jelajahi Koleksi )}

) } Wishlist.layout = (page: ReactNode) => {page};