import React, { useState, useEffect } from 'react';
import { Heart, X, Trash2 } from 'lucide-react';
import BookCard from '../components/BookCard';

const FavoritesView = ({ onRecommend, onViewDetails, onBack }) => {
    const [favorites, setFavorites] = useState([]);

    useEffect(() => {
        const saved = JSON.parse(localStorage.getItem('bookFavorites') || '[]');
        setFavorites(saved);
    }, []);

    const removeFavorite = (title) => {
        const updated = favorites.filter(book => book.title !== title);
        setFavorites(updated);
        localStorage.setItem('bookFavorites', JSON.stringify(updated));
    };

    const clearAllFavorites = () => {
        if (window.confirm('Are you sure you want to clear all favorites?')) {
            setFavorites([]);
            localStorage.setItem('bookFavorites', JSON.stringify([]));
        }
    };

    return (
        <div className="favorites-view animate-in">
            {/* Header */}
            <section className="bg-gradient-to-r from-[#0369a1] to-[#0891b2] py-16 px-4 text-white">
                <div className="container mx-auto max-w-7xl">
                    <button
                        onClick={onBack}
                        className="mb-6 flex items-center gap-2 px-4 py-2 bg-white/20 rounded-lg hover:bg-white/30 transition-all"
                    >
                        ← Back to Home
                    </button>
                    <div className="flex items-center justify-between">
                        <div>
                            <h1 className="text-5xl font-bold mb-2 flex items-center gap-3">
                                <Heart size={40} className="fill-red-500 text-red-500" />
                                Your Favorites
                            </h1>
                            <p className="text-xl text-white/90">
                                {favorites.length} book{favorites.length !== 1 ? 's' : ''} saved
                            </p>
                        </div>
                        {favorites.length > 0 && (
                            <button
                                onClick={clearAllFavorites}
                                className="flex items-center gap-2 px-6 py-3 bg-red-500 hover:bg-red-600 rounded-xl font-bold transition-all"
                            >
                                <Trash2 size={20} />
                                Clear All
                            </button>
                        )}
                    </div>
                </div>
            </section>

            {/* Content */}
            <section className="py-20 px-4">
                <div className="container mx-auto max-w-7xl">
                    {favorites.length === 0 ? (
                        <div className="text-center py-20 bg-white border border-dashed border-border rounded-3xl">
                            <Heart size={64} className="mx-auto text-text-muted mb-4 opacity-40" />
                            <h3 className="text-2xl font-bold text-text-primary mb-2">No Favorites Yet</h3>
                            <p className="text-text-secondary mb-8 max-w-md mx-auto">
                                Click the heart icon on any book to add it to your favorites and find them all here.
                            </p>
                            <button
                                onClick={onBack}
                                className="px-8 py-3 bg-[#0891b2] text-white rounded-lg font-bold hover:bg-[#0369a1] transition-all"
                            >
                                Explore Books
                            </button>
                        </div>
                    ) : (
                        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6">
                            {favorites.map((book, i) => (
                                <div key={i} className="relative group">
                                    <BookCard
                                        book={book}
                                        onRecommend={onRecommend}
                                        onViewDetails={onViewDetails}
                                    />
                                    <button
                                        onClick={() => removeFavorite(book.title)}
                                        className="absolute -top-3 -right-3 bg-red-500 text-white rounded-full p-2 opacity-0 group-hover:opacity-100 transition-all hover:bg-red-600 shadow-lg"
                                        title="Remove from favorites"
                                    >
                                        <X size={16} />
                                    </button>
                                </div>
                            ))}
                        </div>
                    )}
                </div>
            </section>
        </div>
    );
};

export default FavoritesView;