import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { KeywordBadge } from '@/components/ui/keyword-badge';
import { router } from '@inertiajs/react';
import { Search } from 'lucide-react';
import { useState } from 'react';
import { route } from 'ziggy-js';

const MemeLibrarySearch = ({ popularKeywords = [] }) => {
    const [searchQuery, setSearchQuery] = useState('');
    const [isSearching, setIsSearching] = useState(false);

    const handleSearch = (e) => {
        e.preventDefault();

        if (!searchQuery.trim()) {
            // If empty search, go to main meme library
            router.visit(route('memes.index'));
            return;
        }

        setIsSearching(true);

        // Navigate to search results page
        router.visit(route('memes.search', { search: searchQuery.trim() }), {
            onFinish: () => setIsSearching(false),
        });
    };

    const handleKeyPress = (e) => {
        if (e.key === 'Enter') {
            handleSearch(e);
        }
    };

    const handleKeywordClick = (keyword) => {
        setSearchQuery(keyword);
        setIsSearching(true);
        router.visit(route('memes.search', { search: keyword }), {
            onFinish: () => setIsSearching(false),
        });
    };

    return (
        <section className="relative">
            <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
                <div className="space-y-6 text-center">
                    {/* Section heading */}
                    <div className="space-y-2">
                        <h2 className="text-foreground text-3xl font-bold tracking-tight sm:text-4xl">Find the perfect meme</h2>
                        <p className="text-muted-foreground mx-auto max-w-2xl text-lg">
                            Search through our database of popular meme templates and find the perfect one for your video
                        </p>
                    </div>

                    {/* Search form */}
                    <form onSubmit={handleSearch} className="mx-auto max-w-xl">
                        <div className="flex gap-2">
                            <div className="relative flex-1">
                                <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
                                <Input
                                    type="text"
                                    placeholder="Search memes... "
                                    value={searchQuery}
                                    onChange={(e) => setSearchQuery(e.target.value)}
                                    onKeyPress={handleKeyPress}
                                    className="h-12 py-3 pr-4 pl-10 text-base"
                                    disabled={isSearching}
                                />
                            </div>
                            <Button type="submit" size="lg" disabled={isSearching} className="h-12 px-6">
                                {isSearching ? 'Searching...' : 'Search'}
                            </Button>
                        </div>
                    </form>

                    {/* Popular Keywords */}
                    {popularKeywords.length > 0 && (
                        <div className="space-y-3">
                            <div className="flex flex-wrap justify-center gap-2">
                                {popularKeywords.map((keyword, index) => (
                                    <KeywordBadge
                                        size="lg"
                                        key={index}
                                        keyword={keyword}
                                        onClick={() => handleKeywordClick(keyword)}
                                        disabled={isSearching}
                                    />
                                ))}
                            </div>
                        </div>
                    )}

                    {/* Browse all link */}
                    <div className="pt-4">
                        <Button variant="outline" onClick={() => router.visit(route('memes.index'))} className="gap-2">
                            or Browse our Meme Library
                        </Button>
                    </div>
                </div>
            </div>
        </section>
    );
};

export default MemeLibrarySearch;