const { useState } = React;

window.Cart = ({ cart, onRemove, onUpdateQty }) => {
    const [step, setStep] = useState('cart'); // steps: 'cart', 'shipping'
    const [address, setAddress] = useState({ street: '', city: '', zip: '', phone: '' });
    
    const itemsTotal = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
    const shippingCost = 16.00;
    const finalTotal = itemsTotal + shippingCost;

    if (cart.length === 0) return (
        <div className="max-w-4xl mx-auto py-20 text-center">
            <div className="text-8xl mb-6">🛒</div>
            <h2 className="text-3xl font-black uppercase opacity-20">Koszyk jest pusty</h2>
        </div>
    );

    return (
        <div className="max-w-4xl mx-auto py-12 animate-in fade-in duration-500">
            <h2 className="text-5xl font-[900] tracking-tighter mb-12 uppercase italic">
                {step === 'cart' ? 'Twój Koszyk' : 'Dane do wysyłki'}
            </h2>

            {step === 'cart' ? (
                /* KROK 1: LISTA PRODUKTÓW */
                <div className="space-y-6">
                    {cart.map((item, idx) => (
                        <div key={idx} className="bg-white p-6 rounded-[2.5rem] border border-gray-50 shadow-sm flex items-center gap-6">
                            <img src={item.current_image || item.image_url} className="w-24 h-24 rounded-3xl object-cover" />
                            <div className="flex-1">
                                <h4 className="text-xl font-black text-gray-900 leading-tight">{item.name}</h4>
                                <p className="text-[10px] font-black uppercase text-purple-600 mt-1">{item.selected_variant || 'Standard'}</p>
                                <p className="text-xs font-bold text-gray-400">{item.price} zł / szt.</p>
                            </div>
                            <div className="flex items-center gap-4 bg-gray-50 rounded-2xl p-1 px-3">
                                <button onClick={() => onUpdateQty(idx, -1)} className="font-black text-lg p-2 hover:text-purple-600 transition">–</button>
                                <span className="font-black text-sm">{item.quantity}</span>
                                <button onClick={() => onUpdateQty(idx, 1)} className="font-black text-lg p-2 hover:text-purple-600 transition">+</button>
                            </div>
                            <div className="text-xl font-black min-w-[100px] text-right">{(item.price * item.quantity).toFixed(2)} zł</div>
                            <button onClick={() => onRemove(idx)} className="text-red-500 font-black px-4">✕</button>
                        </div>
                    ))}

                    <div className="mt-12 p-10 bg-[#0F1115] text-white rounded-[3.5rem] flex flex-col md:flex-row justify-between items-center gap-8">
                        <div>
                            <p className="text-purple-400 text-[10px] font-black uppercase tracking-widest mb-1">Produkty</p>
                            <p className="text-4xl font-[900] tracking-tighter">{itemsTotal.toFixed(2)} zł</p>
                        </div>
                        <button onClick={() => setStep('shipping')} className="w-full md:w-auto bg-purple-600 px-12 py-6 rounded-3xl font-black text-xl hover:bg-white hover:text-black transition-all">
                            WYBIERZ DOSTAWĘ
                        </button>
                    </div>
                </div>
            ) : (
                /* KROK 2: ADRES I PODSUMOWANIE */
                <div className="grid md:grid-cols-2 gap-10">
                    <div className="space-y-4 bg-white p-10 rounded-[3rem] border">
                        <h3 className="font-black uppercase text-xs mb-4 text-gray-400">Adres Dostawy</h3>
                        <input placeholder="Imię i Nazwisko" className="w-full p-4 bg-gray-50 rounded-2xl font-bold outline-none border focus:border-purple-600 transition" />
                        <input placeholder="Ulica i numer" className="w-full p-4 bg-gray-50 rounded-2xl font-bold outline-none border focus:border-purple-600 transition" />
                        <div className="grid grid-cols-2 gap-4">
                            <input placeholder="Kod pocztowy" className="w-full p-4 bg-gray-50 rounded-2xl font-bold outline-none border focus:border-purple-600 transition" />
                            <input placeholder="Miasto" className="w-full p-4 bg-gray-50 rounded-2xl font-bold outline-none border focus:border-purple-600 transition" />
                        </div>
                        <input placeholder="Numer telefonu" className="w-full p-4 bg-gray-50 rounded-2xl font-bold outline-none border focus:border-purple-600 transition" />
                    </div>

                    <div className="bg-[#0F1115] text-white p-10 rounded-[3rem] flex flex-col justify-between shadow-2xl">
                        <div className="space-y-4">
                            <div className="flex justify-between border-b border-white/10 pb-4">
                                <span className="opacity-50 uppercase text-[10px] font-black">Produkty:</span>
                                <span className="font-black">{itemsTotal.toFixed(2)} zł</span>
                            </div>
                            <div className="flex justify-between border-b border-white/10 pb-4">
                                <span className="opacity-50 uppercase text-[10px] font-black">Kurier (InPost):</span>
                                <span className="font-black">{shippingCost.toFixed(2)} zł</span>
                            </div>
                            <div className="flex justify-between pt-4">
                                <span className="text-purple-400 uppercase text-[10px] font-black">Łącznie:</span>
                                <span className="text-4xl font-black tracking-tighter">{finalTotal.toFixed(2)} zł</span>
                            </div>
                        </div>
                        <div className="mt-10 space-y-4">
                            <button onClick={() => window.notify("Przekierowanie do płatności...")} className="w-full bg-purple-600 py-6 rounded-2xl font-black text-xl hover:bg-white hover:text-black transition-all">
                                PŁACĘ TERAZ
                            </button>
                            <button onClick={() => setStep('cart')} className="w-full text-[10px] font-black uppercase opacity-30 hover:opacity-100 transition">
                                Wróć do koszyka
                            </button>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
};