import React from 'react';
import { Head, Link, router } from '@inertiajs/react';
import UserLayout from '@/Layouts/UserLayout';
import ProductCard from '@/Components/ProductCard';
import { PackageSearch, LayoutGrid, ArrowDownWideNarrow, ArrowUpWideNarrow, Clock } from 'lucide-react';
import { Button } from '@/Components/ui/button';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/Components/ui/select";
import { useTranslation } from '@/hooks/useTranslation';

export default function Category({ category, products, currentSort }) {
    const { t } = useTranslation();
    
    const handleSortChange = (value) => {
        router.get(route('category.show', category.slug), { sort: value }, { 
            preserveState: true, 
            preserveScroll: true 
        });
    };

    return (
        <UserLayout>
            <Head title={`${category.name} ${t('Products')}`} />

            <div className="mb-8">
                <div className="flex items-center gap-2 text-sm text-muted-foreground mb-4">
                    <Link href="/" className="hover:text-primary transition-colors">{t('Home')}</Link>
                    <span>/</span>
                    {category.parent && (
                        <>
                            <Link href={route('category.show', category.parent.slug)} className="hover:text-primary transition-colors">
                                {category.parent.name}
                            </Link>
                            <span>/</span>
                        </>
                    )}
                    <span className="text-foreground font-medium">{category.name}</span>
                </div>

                <div className="flex flex-col md:flex-row md:items-end justify-between gap-4 border-b border-border/50 pb-6">
                    <div className="flex items-center gap-4">
                        <div className="w-16 h-16 rounded-2xl bg-primary/10 border border-primary/20 flex items-center justify-center shrink-0 overflow-hidden p-2">
                            {category.image_path ? (
                                <img src={`/storage/${category.image_path}`} alt={category.name} className="w-full h-full object-contain" />
                            ) : (
                                <LayoutGrid className="w-8 h-8 text-primary" />
                            )}
                        </div>
                        <div>
                            <h1 className="text-3xl font-black tracking-tight text-foreground">{category.name}</h1>
                            <p className="text-muted-foreground text-sm mt-1">
                                {products.total} {products.total === 1 ? t('product') : t('products')} {t('available')}
                            </p>
                        </div>
                    </div>

                    <div className="flex items-center gap-3 bg-card p-2 border rounded-xl shadow-sm w-full md:w-auto">
                        <span className="text-sm font-bold text-muted-foreground ml-2 shrink-0">{t('Sort by:')}</span>
                        <Select value={currentSort} onValueChange={handleSortChange}>
                            <SelectTrigger className="w-[180px] bg-background border-none shadow-none font-medium">
                                <SelectValue placeholder={t('Sort order')} />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectItem value="latest">
                                    <div className="flex items-center gap-2"><Clock className="w-4 h-4 text-blue-500" /> {t('Newest Arrivals')}</div>
                                </SelectItem>
                                <SelectItem value="price_low">
                                    <div className="flex items-center gap-2"><ArrowUpWideNarrow className="w-4 h-4 text-green-500" /> {t('Price: Low to High')}</div>
                                </SelectItem>
                                <SelectItem value="price_high">
                                    <div className="flex items-center gap-2"><ArrowDownWideNarrow className="w-4 h-4 text-red-500" /> {t('Price: High to Low')}</div>
                                </SelectItem>
                            </SelectContent>
                        </Select>
                    </div>
                </div>
            </div>

            {products.data.length === 0 ? (
                <div className="text-center py-24 bg-card border border-dashed rounded-3xl text-muted-foreground shadow-sm">
                    <PackageSearch className="w-16 h-16 mx-auto opacity-20 mb-4" />
                    <h3 className="font-bold text-xl mb-2 text-foreground">{t('No products found')}</h3>
                    <p className="max-w-sm mx-auto text-sm mb-6">
                        {t('There are currently no products listed under ":name". Check back later!', { name: category.name })}
                    </p>
                    <Button asChild variant="outline" className="rounded-full shadow-sm">
                        <Link href="/">{t('Back to Home')}</Link>
                    </Button>
                </div>
            ) : (
                <>
                    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 md:gap-6">
                        {products.data.map(product => (
                            <ProductCard key={product.id} product={product} />
                        ))}
                    </div>

                    {products.links && products.links.length > 3 && (
                        <div className="flex justify-center items-center mt-12">
                            <div className="flex gap-1 overflow-x-auto no-scrollbar pb-2">
                                {products.links.map((link, i) => (
                                    <Link
                                        key={i} 
                                        href={link.url || '#'}
                                        className={`px-4 py-2 border rounded-lg text-sm font-bold transition-colors ${
                                            link.active 
                                                ? 'bg-primary text-primary-foreground border-primary shadow-md' 
                                                : 'bg-background hover:bg-muted text-foreground'
                                        } ${!link.url && 'opacity-50 cursor-not-allowed'}`}
                                        dangerouslySetInnerHTML={{ __html: link.label }}
                                    />
                                ))}
                            </div>
                        </div>
                    )}
                </>
            )}
        </UserLayout>
    );
}