import React, { useState, useMemo } from 'react';
import { 
  ShoppingCart, Trash2, Plus, Minus, X, Search, Heart, Star, Send, 
  Instagram, Facebook, Twitter, Phone, Mail, MapPin, Zap
} from 'lucide-react';

const PRODUCTS = [
  { id: 1, name: "Premium Headphones", price: 2500000, category: "Elektronik", stock: 12, rating: 4.8, image: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=800&q=80", desc: "Suara studio, ANC, baterai 40 jam." },
  { id: 2, name: "RGB Keyboard", price: 1200000, category: "Elektronik", stock: 5, rating: 4.9, image: "https://images.unsplash.com/photo-1511467687858-23d96c32e4ae?w=800&q=80", desc: "Mechanical switch premium." },
  { id: 3, name: "Leather Backpack", price: 850000, category: "Fashion", stock: 20, rating: 4.7, image: "https://images.unsplash.com/photo-1548036328-c9fa89d128fa?w=800&q=80", desc: "Kulit asli, desain minimalis." },
  { id: 4, name: "Smartwatch X", price: 3400000, category: "Elektronik", stock: 8, rating: 4.6, image: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=800&q=80", desc: "Layar AMOLED, tahan air." }
];

const App = () => {
  const [cart, setCart] = useState([]);
  const [wishlist, setWishlist] = useState([]);
  const [activeTab, setActiveTab] = useState('home');
  const [search, setSearch] = useState("");
  const [selected, setSelected] = useState(null);
  const [isCartOpen, setIsCartOpen] = useState(false);

  const formatIDR = (n) => new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 0 }).format(n);
  
  const filtered = useMemo(() => PRODUCTS.filter(p => p.name.toLowerCase().includes(search.toLowerCase())), [search]);
  const cartTotal = cart.reduce((a, b) => a + (b.price * b.qty), 0);
  const cartCount = cart.reduce((a, b) => a + b.qty, 0);

  const toggleCart = (p) => {
    setCart(prev => {
      const exists = prev.find(i => i.id === p.id);
      return exists ? prev.map(i => i.id === p.id ? {...i, qty: i.qty + 1} : i) : [...prev, {...p, qty: 1}];
    });
  };

  const handleWA = () => {
    const msg = encodeURIComponent(`Halo AlfiahStore, saya pesan:\n${cart.map(i => `- ${i.name} (${i.qty}x)`).join('\n')}\nTotal: ${formatIDR(cartTotal)}`);
    window.open(`https://wa.me/6588494861?text=${msg}`);
  };

  const Card = ({ p }) => (
    <div className="bg-white rounded-3xl border border-gray-100 overflow-hidden group shadow-sm hover:shadow-xl transition-all">
      <div className="h-48 relative overflow-hidden">
        <img src={p.image} className="w-full h-full object-cover group-hover:scale-110 transition-transform" onClick={() => setSelected(p)} />
        <button onClick={() => setWishlist(w => w.includes(p.id) ? w.filter(id => id !== p.id) : [...w, p.id])} className={`absolute top-3 right-3 p-2 rounded-xl backdrop-blur-md ${wishlist.includes(p.id) ? 'bg-red-500 text-white' : 'bg-white/80 text-gray-400'}`}><Heart size={16} fill={wishlist.includes(p.id) ? "white" : "none"} /></button>
      </div>
      <div className="p-5">
        <h3 className="font-bold text-sm truncate">{p.name}</h3>
        <p className="text-indigo-600 font-black mb-4">{formatIDR(p.price)}</p>
        <button onClick={() => toggleCart(p)} className="w-full bg-slate-900 text-white py-3 rounded-xl font-bold text-xs flex items-center justify-center gap-2 hover:bg-indigo-600 transition-all"><Plus size={16}/> Keranjang</button>
      </div>
    </div>
  );

  return (
    <div className="min-h-screen bg-gray-50 text-slate-900 flex flex-col">
      {/* Navbar */}
      <nav className="sticky top-0 z-40 bg-white/80 backdrop-blur-md border-b border-gray-100 px-4 h-16 flex items-center justify-between">
        <h1 className="text-xl font-black text-indigo-600 cursor-pointer" onClick={() => setActiveTab('home')}>AlfiahStore</h1>
        <div className="flex items-center gap-4">
          <div className="hidden md:flex bg-gray-100 rounded-xl px-3 py-1.5 items-center gap-2">
            <Search size={16} className="text-gray-400"/>
            <input placeholder="Cari..." className="bg-transparent text-sm outline-none" onChange={e => setSearch(e.target.value)} />
          </div>
          <button onClick={() => setActiveTab('wishlist')} className="relative p-2"><Heart size={20} fill={wishlist.length ? "red" : "none"} /></button>
          <button onClick={() => setIsCartOpen(true)} className="relative p-2 bg-indigo-50 text-indigo-600 rounded-xl">
            <ShoppingCart size={20}/>
            {cartCount > 0 && <span className="absolute -top-1 -right-1 bg-red-500 text-white text-[10px] w-4 h-4 flex items-center justify-center rounded-full font-bold">{cartCount}</span>}
          </button>
        </div>
      </nav>

      <main className="flex-grow max-w-6xl mx-auto p-4 w-full">
        {activeTab === 'home' ? (
          <>
            <section className="mb-10 bg-indigo-900 rounded-[2rem] p-8 md:p-16 text-white relative overflow-hidden">
              <div className="relative z-10 max-w-md">
                <span className="bg-white/20 px-3 py-1 rounded-full text-xs font-bold mb-4 inline-block">Flash Sale!</span>
                <h2 className="text-4xl font-black mb-4">Gaya Hidup <span className="text-indigo-400">Premium.</span></h2>
                <p className="text-indigo-100 text-sm mb-6">Kurasi produk terbaik untuk melengkapi hari-hari Anda.</p>
                <button className="bg-white text-indigo-900 px-6 py-3 rounded-xl font-bold text-sm">Lihat Koleksi</button>
              </div>
              <div className="absolute -right-10 -bottom-10 w-64 h-64 bg-indigo-500/20 rounded-full blur-3xl"></div>
            </section>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
              {filtered.map(p => <Card key={p.id} p={p} />)}
            </div>
          </>
        ) : (
          <div className="py-10 text-center">
            <h2 className="text-2xl font-bold mb-6">Wishlist Saya</h2>
            {wishlist.length === 0 ? <p className="text-gray-400">Kosong.</p> : (
              <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
                {PRODUCTS.filter(p => wishlist.includes(p.id)).map(p => <Card key={p.id} p={p} />)}
              </div>
            )}
          </div>
        )}
      </main>

      {/* Footer */}
      <footer className="bg-white border-t border-gray-100 p-10 text-center">
        <p className="text-xs font-bold text-gray-400 uppercase tracking-widest">© 2024 AlfiahStore. Semua Hak Dilindungi.</p>
      </footer>

      {/* Cart Sidebar */}
      {isCartOpen && (
        <div className="fixed inset-0 z-50 flex justify-end">
          <div className="absolute inset-0 bg-black/20" onClick={() => setIsCartOpen(false)} />
          <div className="relative w-80 bg-white h-full shadow-xl p-6 flex flex-col">
            <div className="flex justify-between items-center mb-6">
              <h2 className="font-black text-xl">Keranjang</h2>
              <button onClick={() => setIsCartOpen(false)}><X/></button>
            </div>
            <div className="flex-1 overflow-y-auto space-y-4">
              {cart.map(i => (
                <div key={i.id} className="flex gap-3 items-center">
                  <img src={i.image} className="w-12 h-12 rounded-lg object-cover" />
                  <div className="flex-1">
                    <h4 className="text-xs font-bold truncate">{i.name}</h4>
                    <p className="text-indigo-600 text-xs font-black">{formatIDR(i.price)}</p>
                  </div>
                  <div className="flex items-center gap-2">
                    <button onClick={() => toggleCart(i)} className="p-1 bg-gray-100 rounded"><Plus size={12}/></button>
                    <span className="text-xs font-bold">{i.qty}</span>
                  </div>
                </div>
              ))}
            </div>
            <div className="pt-6 border-t mt-auto">
              <div className="flex justify-between font-bold mb-4"><span>Total:</span><span>{formatIDR(cartTotal)}</span></div>
              <button onClick={handleWA} className="w-full bg-green-600 text-white py-3 rounded-xl font-bold text-xs flex items-center justify-center gap-2"><Send size={16}/> Checkout WhatsApp</button>
            </div>
          </div>
        </div>
      )}

      {/* Modal Detail */}
      {selected && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40 backdrop-blur-sm">
          <div className="bg-white rounded-[2rem] max-w-2xl w-full overflow-hidden flex flex-col md:flex-row relative">
            <button onClick={() => setSelected(null)} className="absolute top-4 right-4 z-10 p-2 bg-white/80 rounded-full"><X size={18}/></button>
            <img src={selected.image} className="md:w-1/2 h-64 md:h-auto object-cover" />
            <div className="p-8 md:w-1/2">
              <h3 className="text-2xl font-black mb-2">{selected.name}</h3>
              <p className="text-gray-500 text-sm mb-6">{selected.desc}</p>
              <div className="text-2xl font-black text-indigo-600 mb-6">{formatIDR(selected.price)}</div>
              <button onClick={() => {toggleCart(selected); setSelected(null);}} className="w-full bg-slate-900 text-white py-4 rounded-xl font-bold">Tambah ke Keranjang</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default App;