const { useState, useEffect } = React;

window.Shop = ({ onSelect }) => {
    const [products, setProducts] = useState([]);
    const [categories, setCategories] = useState([]);
    const [filter, setFilter] = useState('Wszystkie');
    const [loading, setLoading] = useState(true);
    const sb = window.supabaseClient;

    useEffect(() => {
        const fetchData = async () => {
            const { data: p } = await sb.from('products').select('*').eq('is_available', true).order('created_at', { ascending: false });
            const { data: c } = await sb.from('categories').select('name').order('name');
            setProducts(p || []);
            setCategories(c || []);
            setLoading(false);
        };
        fetchData();
    }, []);

    const filtered = filter === 'Wszystkie' ? products : products.filter(p => p.category === filter);

    if (loading) return <div className="py-20 text-center font-black uppercase tracking-widest opacity-20">Wczytywanie...</div>;

    return (
        <div className="animate-in fade-in duration-700">
            <div className="flex flex-wrap gap-2 mb-10">
                <button onClick={() => setFilter('Wszystkie')} className={`px-6 py-2.5 rounded-full font-bold text-[10px] uppercase tracking-widest transition-all ${filter === 'Wszystkie' ? 'bg-purple-600 text-white shadow-lg' : 'bg-white text-gray-400 border border-gray-100'}`}>Wszystkie</button>
                {categories.map(c => (
                    <button key={c.name} onClick={() => setFilter(c.name)} className={`px-6 py-2.5 rounded-full font-bold text-[10px] uppercase tracking-widest transition-all ${filter === c.name ? 'bg-purple-600 text-white shadow-lg' : 'bg-white text-gray-400 border border-gray-100'}`}>{c.name}</button>
                ))}
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
                {filtered.map(p => (
                    <div key={p.id} className="bg-white rounded-[2.5rem] p-4 border border-gray-100 hover:shadow-2xl transition-all group">
                        <div onClick={() => onSelect(p)} className="cursor-pointer aspect-square bg-gray-50 rounded-[2rem] overflow-hidden mb-4">
                            <img src={p.image_url} className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" />
                        </div>
                        <h3 className="font-bold text-lg px-2 truncate text-gray-900">{p.name}</h3>
                        <div className="flex justify-between items-center mt-4 px-2">
                            <span className="text-2xl font-black text-gray-900">{p.price} zł</span>
                            <button onClick={() => onSelect(p)} className="bg-purple-600 text-white w-12 h-12 rounded-2xl flex items-center justify-center hover:bg-black transition-all">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
                            </button>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
};