import React from 'react';
import { Head, Link } from '@inertiajs/react';
import GuestLayout from '@/Layouts/GuestLayout';
import PostCard from '@/Components/PostCard';
import { Button } from '@/components/ui/button';
import { Search as SearchIcon, Frown } from 'lucide-react';
import useTranslation from '@/hooks/useTranslation'; 

export default function Search({ posts, query }) {
    const { t } = useTranslation();

    const resultsText = t('_found_results', 'Found {total} results for "{query}"')
        .replace('{total}', posts.total)
        .replace('{query}', query);

    return (
        <GuestLayout> 
            <Head title={`${t('_search', 'Search')}: ${query}`} />

            <div className="bg-background min-h-screen pb-20">
                <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8 max-w-[1280px]">
                    
                    <div className="mb-8 border-b border-border pb-6">
                        <h1 className="text-3xl font-extrabold tracking-tight flex items-center gap-3">
                            <SearchIcon className="w-8 h-8 text-primary" />
                            {t('_search_results', 'Search Results')}
                        </h1>
                        <p className="text-muted-foreground mt-2 text-lg">
                            {resultsText}
                        </p>
                    </div>

                    {posts.data.length > 0 ? (
                        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                            {posts.data.map((post) => (
                                <PostCard key={post.id} post={post} />
                            ))}
                        </div>
                    ) : (
                        <div className="text-center py-20 bg-muted/30 border border-dashed border-border flex flex-col items-center rounded-[var(--radius)]">
                            <Frown className="w-12 h-12 text-muted-foreground mb-4" />
                            <h3 className="text-xl font-bold text-muted-foreground">
                                {t('_no_stories_found', 'No stories found.')}
                            </h3>
                            <p className="text-sm text-muted-foreground mt-1">
                                {t('_try_different_keywords', 'Try searching for different keywords.')}
                            </p>
                            <Button asChild className="mt-6">
                                <Link href="/">{t('_back_home', 'Back Home')}</Link>
                            </Button>
                        </div>
                    )}

                    {posts.data.length > 0 && posts.last_page > 1 && (
                        <div className="mt-12 flex flex-wrap justify-center gap-2">
                            {posts.links.map((link, index) => (
                                <Button
                                    key={index}
                                    variant={link.active ? "default" : "outline"}
                                    disabled={!link.url}
                                    asChild={!!link.url}
                                    className="h-10 px-4 min-w-[40px]"
                                >
                                    {link.url ? (
                                        <Link href={link.url} dangerouslySetInnerHTML={{ __html: link.label }} />
                                    ) : (
                                        <span dangerouslySetInnerHTML={{ __html: link.label }} />
                                    )}
                                </Button>
                            ))}
                        </div>
                    )}

                </div>
            </div>
        </GuestLayout>
    );
}