import React, { useState, useEffect } from 'react';

const products = [
  { id: 1, name: "Martabak Coklat ", price: 10000, img: "https://6a009e0ae3ddafb3f4a07e89.imgix.net/2/martabak%20coklat.jpeg?auto=format&fit=fill&w=256" },
  { id: 2, name: "Martabak Kacang", price: 10000, img: "https://6a009e0ae3ddafb3f4a07e89.imgix.net/4/martabak%20kacang.jpeg?auto=format&fit=fill&w=256" },
  { id: 3, name: "Martabak Keju", price: 10000, img: "https://6a009e0ae3ddafb3f4a07e89.imgix.net/1/martabak%20keju.jfif?auto=format&fit=fill&w=384" },
];

const JAM_BUKA = 16;
const JAM_TUTUP = 22;

export default function App() {
  const [cart, setCart] = useState([]);
  const [isCartOpen, setIsCartOpen] = useState(false);
  const [isOpen, setIsOpen] = useState(true);

  useEffect(() => {
    const checkStatus = () => {
      const now = new Date();
      const jamSekarang = now.getHours();
      setIsOpen(jamSekarang >= JAM_BUKA && jamSekarang < JAM_TUTUP);
    };
    checkStatus();
    const interval = setInterval(checkStatus, 40000);
    return () => clearInterval(interval);
  }, []);

  const addToCart = (product) => {
    if(!isOpen) return;
    setCart((prev) => {
      const exist = prev.find(x => x.id === product.id);
      if (exist) return prev.map(x => x.id === product.id ? {...x, qty: x.qty + 1} : x);
      return [...prev, {...product, qty: 1}];
    });
  };

  const updateQty = (id, delta) => {
    setCart(prev => prev.map(item => 
      item.id === id ? { ...item, qty: Math.max(0, item.qty + delta) } : item
    ).filter(item => item.qty > 0));
  };

  const totalItems = cart.reduce((sum, item) => sum + item.qty, 0);
  const totalHarga = cart.reduce((sum, item) => sum + item.price * item.qty, 0);

  const handleCheckout = () => {
    const phone = "6281220213200"; 
    let msg = "*PESANAN BARU*\n----------\n";
    cart.forEach(item => msg += `• ${item.name} (${item.qty}x)\n`);
    msg += `----------\n*Total: Rp ${totalHarga.toLocaleString('id-ID')}*`;
    window.open(`https://wa.me/${phone}?text=${encodeURIComponent(msg)}`, '_blank');
  };

  return (
    <div className="bg-[#FDFCFB] min-h-screen font-sans max-w-md mx-auto relative shadow-2xl">
      <script src="https://cdn.tailwindcss.com"></script>

      {/* HEADER ESTETIK - CENTERED */}
      <header className="bg-white/80 backdrop-blur-md pt-8 pb-6 px-5 sticky top-0 z-20 border-b border-orange-50">
        <div className="flex flex-col items-center justify-center text-center">
          {/* Ikon Keranjang di Pojok Kanan Atas */}
          <button 
            onClick={() => setIsCartOpen(true)} 
            className="absolute right-5 top-8 p-2 bg-orange-50 rounded-full text-orange-700 active:scale-90 transition-transform"
          >
            <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
            </svg>
            {totalItems > 0 && <span className="absolute -top-1 -right-1 bg-orange-600 text-white text-[10px] w-5 h-5 flex items-center justify-center rounded-full font-bold shadow-md">{totalItems}</span>}
          </button>

          {/* Nama Toko Gaya Serif Estetik */}
          <h1 className="text-3xl font-serif italic tracking-tight text-gray-900 leading-none">
            MARTABAK <span className="text-orange-600">Manis</span> ARNESA
          </h1>
          
          {/* Status Toko dengan Garis Dekoratif */}
          <div className="flex items-center gap-3 mt-3 w-full justify-center">
            <div className="h-[1px] w-8 bg-gray-200"></div>
            <div className="flex items-center gap-1.5">
               <span className={`w-1.5 h-1.5 rounded-full ${isOpen ? 'bg-green-500 animate-pulse' : 'bg-red-400'}`}></span>
               <p className={`text-[9px] font-black uppercase tracking-[0.2em] ${isOpen ? 'text-gray-500' : 'text-red-400'}`}>
                {isOpen ? 'Open Order' : 'Closed'}
              </p>
            </div>
            <div className="h-[1px] w-8 bg-gray-200"></div>
          </div>
          <p className="text-[9px] text-gray-400 mt-1 font-medium tracking-wider">EST. 2026 • PREMIUM MARTABAK</p>
        </div>
      </header>

      {!isOpen && (
        <div className="mx-6 mt-6 p-4 bg-red-50 border border-red-100 rounded-2xl text-center">
          <p className="text-red-800 text-[10px] font-bold uppercase tracking-widest leading-relaxed">
            Gallery is currently closed.<br/>Re-opening at {JAM_BUKA}:00 AM
          </p>
        </div>
      )}

      {/* KATALOG */}
      <main className="p-6 grid grid-cols-2 gap-x-4 gap-y-8 pb-32">
        {products.map((product) => (
          <div key={product.id} className={`flex flex-col transition-all duration-500 ${!isOpen ? 'opacity-60' : 'opacity-100'}`}>
            <div className="relative group rounded-[2rem] overflow-hidden aspect-[4/5] shadow-sm">
              <img src={product.img} className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" alt="" />
              {isOpen && (
                <button 
                  onClick={() => addToCart(product)}
                  className="absolute bottom-3 right-3 bg-white/90 backdrop-blur-sm text-gray-900 p-3 rounded-2xl shadow-lg active:scale-90 transition-all"
                >
                  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                  </svg>
                </button>
              )}
            </div>
            <div className="mt-4 px-1">
              <h3 className="text-sm font-bold text-gray-800 leading-snug">{product.name}</h3>
              <p className="text-orange-600 font-medium text-xs mt-1">IDR {product.price.toLocaleString('id-ID')}</p>
            </div>
          </div>
        ))}
      </main>

      {/* MODAL KERANJANG */}
      {isCartOpen && (
        <div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex flex-col justify-end">
          <div className="bg-white rounded-t-[3rem] h-[80vh] flex flex-col overflow-hidden animate-slide-up">
            <div className="p-8 flex justify-between items-center border-b border-grend-50">
              <button onClick={() => setIsCartOpen(false)} className="p-2 bg-gray-100 rounded-full text-gray-500">
                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                </svg>
              </button>
              <h2 className="text-lg font-serif italic text-gray-800">Your Selection</h2>
              <div className="w-9"></div>
            </div>

            <div className="flex-grow overflow-y-auto p-8 space-y-6">
              {cart.length === 0 ? (
                <div className="text-center py-20">
                  <p className="font-serif italic text-gray-400">Empty gallery...</p>
                </div>
              ) : (
                cart.map(item => (
                  <div key={item.id} className="flex gap-5 items-center">
                    <img src={item.img} className="w-20 h-20 rounded-[1.5rem] object-cover shadow-sm" alt="" />
                    <div className="flex-grow">
                      <h4 className="text-sm font-bold text-gray-800">{item.name}</h4>
                      <p className="text-orange-600 text-xs mt-1 font-medium">IDR {(item.price * item.qty).toLocaleString('id-ID')}</p>
                      <div className="flex items-center gap-4 mt-3">
                        <button onClick={() => updateQty(item.id, -1)} className="text-gray-400 hover:text-gray-900 text-lg font-bold">-</button>
                        <span className="text-xs font-black text-gray-800">{item.qty}</span>
                        <button onClick={() => updateQty(item.id, 1)} className="text-gray-900 text-lg font-bold">+</button>
                      </div>
                    </div>
                  </div>
                ))
              )}
            </div>

            <div className="p-8 bg-gray-50/50 pb-12">
              <div className="flex justify-between items-end mb-6 px-2">
                <span className="text-[10px] font-black uppercase tracking-widest text-gray-400 text-center">Subtotal</span>
                <span className="text-2xl font-serif text-gray-900 italic">IDR {totalHarga.toLocaleString('id-ID')}</span>
              </div>
              <button 
                onClick={handleCheckout}
                disabled={cart.length === 0 || !isOpen}
                className={`w-full py-5 rounded-[2rem] font-bold text-xs uppercase tracking-widest shadow-xl transition-all active:scale-95 ${cart.length === 0 || !isOpen ? 'bg-gray-200 text-gray-400' : 'bg-gray-900 text-white shadow-gray-200'}`}
              >
                {isOpen ? 'Send Inquiry via WhatsApp' : 'Gallery Closed'}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* FLOATING BUTTON */}
      {!isCartOpen && totalItems > 0 && (
        <div className="fixed bottom-8 left-0 right-0 px-8 z-8">
          <button onClick={() => setIsCartOpen(true)} className="w-full bg-gray-500/95 backdrop-blur-md text-white py-5 rounded-[2rem] shadow-2xl flex justify-between items-center px-10 active:scale-95 transition-all">
            <span className="text-[10px] font-black uppercase tracking-[0.2em]">View Order ({totalItems})</span>
            <span className="text-sm font-serif italic text-orange-400">IDR {totalHarga.toLocaleString('id-ID')}</span>
          </button>
        </div>
      )}

      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;1,500&display=swap');
        .font-serif { font-family: 'Playfair Display', serif; }
        @keyframes slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
        .animate-slide-up { animation: slide-up 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
      `}</style>
    </div>
  );
}