import React, { useState, useEffect } from 'react';
import { Search, Sparkles, Sidebar as Shuffle, Users, BookOpen, Heart, Zap, TrendingUp, Star } from 'lucide-react';
import BookCard from '../components/BookCard';
import SearchHistory from '../components/SearchHistory';

const HomeView = ({ popularBooks, onRecommend, onViewDetails, onViewFavorites }) => {
    const [query, setQuery] = useState('');
    const [results, setResults] = useState([]);
    const [showButtons, setShowButtons] = useState(false);
    const [favCount, setFavCount] = useState(0);
    const [showHistory, setShowHistory] = useState(false);

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

    const handleSearchChange = async (e) => {
        const val = e.target.value;
        setQuery(val);
        if (val.length >= 2) {
            try {
                const resp = await fetch(`/api/search_books?query=${encodeURIComponent(val)}`);
                const data = await resp.json();
                setResults(data);
            } catch (err) {
                console.error(err);
            }
        } else {
            setResults([]);
            setShowButtons(false);
        }
    };

    const handleSelect = (title) => {
        setQuery(title);
        setResults([]);
        setShowButtons(true);
        setShowHistory(false);
        
        // Add to search history
        const history = JSON.parse(localStorage.getItem('searchHistory') || '[]');
        const book = results.find(b => b.title === title) || { title };
        const filtered = history.filter(h => h.title !== title);
        filtered.unshift(book);
        localStorage.setItem('searchHistory', JSON.stringify(filtered.slice(0, 10))); // Keep last 10
    };

    return (
        <div className="home-view animate-in bg-bg-body min-h-screen">
            {/* Premium Hero Section */}
            <section className="hero-section pt-32 pb-20 px-4 text-center rounded-b-[50px] shadow-2xl relative z-20 overflow-hidden">
                {/* Favorites Button */}
                <button
                    onClick={onViewFavorites}
                    className="absolute top-8 right-8 flex items-center gap-2 px-5 py-2.5 bg-white/20 hover:bg-white/30 text-white rounded-full font-bold backdrop-blur-md transition-all"
                >
                    <Heart size={18} className="fill-red-500 text-red-500" />
                    <span>{favCount}</span>
                </button>
                {/* Decorative Elements */}
                <div className="absolute -top-20 -right-20 w-40 h-40 bg-white/10 rounded-full blur-3xl"></div>
                <div className="absolute -bottom-20 -left-20 w-40 h-40 bg-white/10 rounded-full blur-3xl"></div>
                
                <div className="container mx-auto max-w-4xl relative z-10">
                    <div className="hero-badge cursor-default mb-6 inline-block">
                        <Sparkles size={16} className="text-white inline mr-2" />
                        <span>Smart Book Discovery</span>
                    </div>

                    <h1 className="hero-title text-6xl md:text-8xl font-[900] mb-4 bg-gradient-to-r from-white to-blue-100 bg-clip-text text-transparent drop-shadow-lg">
                        BookMind
                    </h1>
                    <p className="hero-subtitle text-lg md:text-2xl text-white/90 max-w-3xl mx-auto mb-12 font-light leading-relaxed">
                        Your AI-powered literary companion that learns your taste and finds books you'll love
                    </p>

                    {/* Enhanced Search Bar */}
                    <div className="search-container max-w-2xl mx-auto relative z-30 mb-8">
                        <div className="search-input-wrapper bg-white rounded-2xl shadow-2xl flex overflow-hidden border-2 border-white/20 hover:border-white/40 transition-all focus-within:ring-4 focus-within:ring-white/30">
                            <Search size={20} className="text-gray-400 ml-6 my-auto flex-shrink-0" />
                            <input
                                type="text"
                                className="flex-1 py-4 px-4 text-text-primary focus:outline-none text-[1rem] bg-transparent"
                                placeholder="Enter a book title or author..."
                                value={query}
                                onChange={handleSearchChange}
                                onKeyDown={(e) => e.key === 'Enter' && setShowButtons(true)}
                            />
                            <button
                                className="search-btn-accent px-8 hover:opacity-90 transition-opacity"
                                onClick={() => setShowButtons(true)}
                            >
                                <Sparkles size={20} />
                            </button>
                        </div>

                        {/* Search Results Dropdown */}
                        {results.length > 0 && (
                            <div className="absolute top-full left-0 w-full mt-3 bg-white border-2 border-border rounded-2xl shadow-2xl z-50 overflow-hidden text-left max-h-96 overflow-y-auto">
                                {results.map((book, i) => (
                                    <button
                                        key={i}
                                        className="w-full flex items-center gap-4 p-4 hover:bg-bg-hover transition-all border-b border-border/50 last:border-0 group"
                                        onClick={() => handleSelect(book.title)}
                                    >
                                        <img src={book.image_url} alt={book.title} className="w-12 h-16 object-cover rounded-lg shadow-md group-hover:scale-105 transition-transform" />
                                        <div className="flex-1 text-left">
                                            <div className="font-bold text-text-primary text-sm leading-tight">{book.title}</div>
                                            <div className="text-xs text-text-secondary mt-1">{book.author}</div>
                                        </div>
                                    </button>
                                ))}
                            </div>
                        )}

                        {/* Search History */}
                        {showHistory && (
                            <SearchHistory
                                onSelectBook={handleSelect}
                                onClose={() => setShowHistory(false)}
                            />
                        )}

                        {/* Recommendation Buttons */}
                        {showButtons && (
                            <div className="recommend-buttons mt-8 flex flex-wrap justify-center gap-4 animate-slide-up">
                                <button
                                    onClick={() => onRecommend(query, 'hybrid')}
                                    className="bg-gradient-to-r from-[#06b6d4] to-[#0891b2] text-white px-7 py-3 rounded-xl font-bold text-base shadow-lg hover:-translate-y-1 transition-all flex items-center gap-2 hover:shadow-xl"
                                >
                                    <Shuffle size={18} /> Hybrid
                                </button>
                                <button
                                    onClick={() => onRecommend(query, 'collaborative')}
                                    className="bg-gradient-to-r from-[#0369a1] to-[#0284c7] text-white px-7 py-3 rounded-xl font-bold text-base shadow-lg hover:-translate-y-1 transition-all flex items-center gap-2 hover:shadow-xl"
                                >
                                    <Users size={18} /> Collaborative
                                </button>
                                <button
                                    onClick={() => onRecommend(query, 'content')}
                                    className="bg-gradient-to-r from-[#0891b2] to-[#06d6a0] text-white px-7 py-3 rounded-xl font-bold text-base shadow-lg hover:-translate-y-1 transition-all flex items-center gap-2 hover:shadow-xl"
                                >
                                    <BookOpen size={18} /> Content-Based
                                </button>
                            </div>
                        )}
                    </div>
                </div>
            </section>

            {/* Features Section - Enhanced */}
            <section className="py-24 px-4 bg-white relative">
                <div className="container mx-auto max-w-6xl">
                    <div className="text-center mb-16">
                        <h2 className="text-4xl md:text-5xl font-bold text-text-primary mb-4">How BookMind Works</h2>
                        <p className="text-lg text-text-secondary max-w-2xl mx-auto">Three powerful recommendation methods working together</p>
                    </div>

                    <div className="grid md:grid-cols-3 gap-8">
                        {/* Collaborative Filtering */}
                        <div className="relative group">
                            <div className="absolute inset-0 bg-gradient-to-r from-[#0369a1] to-[#0284c7] rounded-2xl opacity-0 group-hover:opacity-20 transition-opacity blur-xl"></div>
                            <div className="bg-gradient-to-br from-bg-body to-white p-10 rounded-2xl border-2 border-transparent group-hover:border-[#0284c7] transition-all shadow-lg group-hover:shadow-xl relative">
                                <div className="w-16 h-16 bg-gradient-to-br from-[#0369a1] to-[#0284c7] text-white rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg">
                                    <Users size={32} />
                                </div>
                                <h3 className="text-2xl font-bold mb-4 text-text-primary text-center">Collaborative Filtering</h3>
                                <p className="text-text-secondary text-center leading-relaxed">Analyzes reading patterns from millions of users to find readers with similar tastes and recommend their favorite books</p>
                                <div className="mt-6 text-center">
                                    <span className="inline-block bg-[#0284c7]/10 text-[#0369a1] px-4 py-2 rounded-lg text-sm font-semibold">User-Based Learning</span>
                                </div>
                            </div>
                        </div>

                        {/* Content-Based */}
                        <div className="relative group">
                            <div className="absolute inset-0 bg-gradient-to-r from-[#06d6a0] to-[#06b6d4] rounded-2xl opacity-0 group-hover:opacity-20 transition-opacity blur-xl"></div>
                            <div className="bg-gradient-to-br from-bg-body to-white p-10 rounded-2xl border-2 border-transparent group-hover:border-[#06b6d4] transition-all shadow-lg group-hover:shadow-xl relative">
                                <div className="w-16 h-16 bg-gradient-to-br from-[#06d6a0] to-[#06b6d4] text-white rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg">
                                    <BookOpen size={32} />
                                </div>
                                <h3 className="text-2xl font-bold mb-4 text-text-primary text-center">Content-Based Filtering</h3>
                                <p className="text-text-secondary text-center leading-relaxed">Examines book attributes like genre, author, publisher, and keywords to find similar titles you'll enjoy</p>
                                <div className="mt-6 text-center">
                                    <span className="inline-block bg-[#06b6d4]/10 text-[#06d6a0] px-4 py-2 rounded-lg text-sm font-semibold">Content Analysis</span>
                                </div>
                            </div>
                        </div>

                        {/* Hybrid */}
                        <div className="relative group">
                            <div className="absolute inset-0 bg-gradient-to-r from-[#06b6d4] to-[#0891b2] rounded-2xl opacity-0 group-hover:opacity-20 transition-opacity blur-xl"></div>
                            <div className="bg-gradient-to-br from-bg-body to-white p-10 rounded-2xl border-2 border-transparent group-hover:border-[#0891b2] transition-all shadow-lg group-hover:shadow-xl relative">
                                <div className="w-16 h-16 bg-gradient-to-br from-[#06b6d4] to-[#0891b2] text-white rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg">
                                    <Zap size={32} />
                                </div>
                                <h3 className="text-2xl font-bold mb-4 text-text-primary text-center">Hybrid Model</h3>
                                <p className="text-text-secondary text-center leading-relaxed">Combines both methods to leverage the strengths of user patterns and content analysis for superior recommendations</p>
                                <div className="mt-6 text-center">
                                    <span className="inline-block bg-[#0891b2]/10 text-[#0891b2] px-4 py-2 rounded-lg text-sm font-semibold">Best of Both Worlds</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* Trending Books Section - Enhanced */}
            <section className="py-24 px-4">
                <div className="container mx-auto max-w-7xl">
                    <div className="flex items-center justify-between mb-12">
                        <div>
                            <h2 className="text-4xl md:text-5xl font-bold text-text-primary mb-3">Trending Now</h2>
                            <p className="text-lg text-text-secondary">Discover what readers are loving</p>
                        </div>
                        <div className="hidden md:flex items-center gap-3 bg-white px-6 py-3 rounded-xl border-2 border-border shadow-md">
                            <TrendingUp size={20} className="text-[#0891b2]" />
                            <span className="font-semibold text-text-primary">Popular Picks</span>
                        </div>
                    </div>
                    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6">
                        {popularBooks.map((book, i) => (
                            <BookCard key={i} book={book} onRecommend={onRecommend} onViewDetails={onViewDetails} />
                        ))}
                    </div>
                </div>
            </section>

            {/* CTA Section */}
            <section className="py-20 px-4 bg-gradient-to-r from-[#0369a1] to-[#0891b2] rounded-3xl mx-4 mb-8 shadow-2xl">
                <div className="container mx-auto max-w-4xl text-center">
                    <Star className="w-16 h-16 text-white mx-auto mb-6 opacity-80" />
                    <h3 className="text-3xl md:text-4xl font-bold text-white mb-4">Find Your Next Favorite Book</h3>
                    <p className="text-lg text-white/90 mb-8 max-w-2xl mx-auto">Start your journey with BookMind today. Our intelligent algorithm learns from your preferences to deliver personalized recommendations you'll love.</p>
                    <button 
                        onClick={() => {
                            const searchInput = document.querySelector('.search-input-wrapper input');
                            if (searchInput) searchInput.focus();
                        }}
                        className="bg-white text-[#0369a1] px-10 py-4 rounded-xl font-bold text-lg shadow-xl hover:shadow-2xl hover:scale-105 transition-all"
                    >
                        Start Exploring
                    </button>
                </div>
            </section>
        </div>
    );
};

export default HomeView;