import React, { useState, useEffect, useRef, useMemo } from 'react';
import { 
  ShoppingCart, Search, Plus, Minus, Trash2, X, Send, 
  Store, Settings, Package, Save, Edit3, Upload, Camera, 
  Loader2, Globe, AlertTriangle, CheckCircle2, Image as ImageIcon,
  Palette, Lock, Key, ChevronLeft, BarChart3, TrendingUp, MousePointerClick, 
  Tag, ShoppingBag, History, RefreshCw, Zap, Eye, ChevronRight, Info
} from 'lucide-react';

// Firebase Imports
import { initializeApp } from 'firebase/app';
import { getAuth, signInWithCustomToken, signInAnonymously, onAuthStateChanged } from 'firebase/auth';
import { 
  getFirestore, doc, setDoc, getDoc, collection, 
  onSnapshot, addDoc, updateDoc, deleteDoc, query, increment, serverTimestamp 
} from 'firebase/firestore';

// --- INITIALIZE FIREBASE SAFELY ---
const appId = typeof __app_id !== 'undefined' ? __app_id : 'katalog-ultra-pro-v5';
let db, auth;

try {
  // Safe parsing untuk mencegah ReferenceError jika environment belum siap
  const firebaseConfigString = typeof __firebase_config !== 'undefined' ? __firebase_config : '{}';
  const firebaseConfig = JSON.parse(firebaseConfigString);
  
  if (firebaseConfig.apiKey) {
    const app = initializeApp(firebaseConfig);
    auth = getAuth(app);
    db = getFirestore(app);
  }
} catch (e) {
  console.error("Firebase Initialization Error:", e);
}

const THEMES = {
  whatsapp: { name: 'Emerald', color: 'bg-emerald-600', text: 'text-emerald-600', border: 'border-emerald-600', light: 'bg-emerald-50', ring: 'ring-emerald-500', shadow: 'shadow-emerald-100' },
  professional: { name: 'Ocean', color: 'bg-blue-600', text: 'text-blue-600', border: 'border-blue-600', light: 'bg-blue-50', ring: 'ring-blue-500', shadow: 'shadow-blue-100' },
  fashion: { name: 'Rose', color: 'bg-rose-500', text: 'text-rose-500', border: 'border-rose-500', light: 'bg-rose-50', ring: 'ring-rose-500', shadow: 'shadow-rose-100' },
  luxury: { name: 'Amber', color: 'bg-amber-600', text: 'text-amber-600', border: 'border-amber-600', light: 'bg-amber-50', ring: 'ring-amber-500', shadow: 'shadow-amber-100' },
  modern: { name: 'Dark', color: 'bg-zinc-900', text: 'text-zinc-900', border: 'border-zinc-900', light: 'bg-zinc-100', ring: 'ring-zinc-900', shadow: 'shadow-zinc-200' }
};

const CATEGORIES = ["Semua", "Pakaian", "Makanan & Minuman", "Elektronik", "Aksesoris", "Kecantikan", "Lainnya"];

export default function App() {
  const [user, setUser] = useState(null);
  const [view, setView] = useState('catalog'); 
  const [adminSubView, setAdminSubView] = useState('dashboard');
  const [loading, setLoading] = useState(true);
  const [notification, setNotification] = useState(null);
  
  // Modals & States
  const [isAdminAuth, setIsAdminAuth] = useState(false);
  const [showAuthModal, setShowAuthModal] = useState(false);
  const [inputPassword, setInputPassword] = useState("");
  const [selectedProduct, setSelectedProduct] = useState(null); 
  const [itemToDelete, setItemToDelete] = useState(null);
  const [activeCategory, setActiveCategory] = useState("Semua");

  const [storeConfig, setStoreConfig] = useState({
    name: "Toko Bisnis Online",
    phone: "6281234567890",
    currency: "Rp",
    theme: "whatsapp",
    logo: "",
    adminPassword: "1234"
  });

  const [stats, setStats] = useState({ checkoutCount: 0, totalRevenue: 0 });
  const [products, setProducts] = useState([]);
  const [orders, setOrders] = useState([]);
  const [cart, setCart] = useState([]);
  const [searchQuery, setSearchQuery] = useState("");
  const [tempGallery, setTempGallery] = useState([]);

  const fileInputRef = useRef(null);
  const logoInputRef = useRef(null);

  const activeTheme = useMemo(() => THEMES[storeConfig?.theme] || THEMES.whatsapp, [storeConfig?.theme]);

  const showToast = (msg, type = 'success') => {
    setNotification({ msg, type });
    setTimeout(() => setNotification(null), 3000);
  };

  // 1. Auth Setup
  useEffect(() => {
    const initAuth = async () => {
      if (!auth) return;
      try {
        if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
          await signInWithCustomToken(auth, __initial_auth_token);
        } else {
          await signInAnonymously(auth);
        }
      } catch (err) { console.error("Auth Fail:", err); }
    };
    initAuth();
    const unsub = onAuthStateChanged(auth, u => setUser(u));
    return () => unsub();
  }, []);

  // 2. Data Synchronization
  useEffect(() => {
    if (!user || !db) return;

    // Config Sync
    const configRef = doc(db, 'artifacts', appId, 'public', 'data', 'settings', 'config');
    const unsubConfig = onSnapshot(configRef, (ds) => {
      if (ds.exists()) {
        setStoreConfig(prev => ({ ...prev, ...ds.data() }));
      } else {
        // Init config if missing
        setDoc(configRef, storeConfig, { merge: true });
      }
    });

    // Stats Sync
    const statsRef = doc(db, 'artifacts', appId, 'public', 'data', 'analytics', 'stats');
    const unsubStats = onSnapshot(statsRef, (ds) => {
      if (ds.exists()) setStats(ds.data());
    });

    // Products Sync
    const productsRef = collection(db, 'artifacts', appId, 'public', 'data', 'products');
    const unsubProducts = onSnapshot(productsRef, (sn) => {
      setProducts(sn.docs.map(d => ({ id: d.id, ...d.data() })));
    });

    // Orders Sync
    const ordersRef = collection(db, 'artifacts', appId, 'public', 'data', 'orders');
    const unsubOrders = onSnapshot(ordersRef, (sn) => {
      const items = sn.docs.map(d => ({ id: d.id, ...d.data() }));
      // Create a new array and sort to avoid state mutation
      setOrders([...items].sort((a, b) => (Number(b.createdAt?.seconds) || 0) - (Number(a.createdAt?.seconds) || 0)));
      setLoading(false);
    }, () => setLoading(false));

    return () => { unsubConfig(); unsubStats(); unsubProducts(); unsubOrders(); };
  }, [user]);

  // --- SAFE ANALYTICS ---
  // The fix for the blank screen is here: we use a Memoized array that copies products
  // before sorting, preventing React from crashing due to in-place mutation.
  const topProducts = useMemo(() => {
    if (!products.length) return [];
    return [...products]
      .sort((a, b) => (Number(b.salesCount) || 0) - (Number(a.salesCount) || 0))
      .slice(0, 10);
  }, [products]);

  const monthChartData = useMemo(() => {
    if (!orders.length) return [];
    const months = {};
    orders.forEach(o => {
      if (!o.createdAt?.seconds) return; // Prevent latency crash
      const d = new Date(o.createdAt.seconds * 1000);
      const key = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;
      months[key] = (months[key] || 0) + (Number(o.totalAmount) || 0);
    });
    return Object.entries(months).sort((a, b) => a[0].localeCompare(b[0])).slice(-6);
  }, [orders]);

  // --- HANDLERS ---
  const handleCheckout = async () => {
    if (!cart.length || !user || !db) return;
    const cartTotal = cart.reduce((s, i) => s + (Number(i.price || 0) * i.quantity), 0);
    try {
      showToast("Memproses Pesanan...", "info");
      
      // Save Order
      await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'orders'), {
        items: cart.map(i => ({ name: i.name, quantity: i.quantity, price: Number(i.price) })),
        totalAmount: cartTotal,
        createdAt: serverTimestamp()
      });
      
      // Update Analytics
      const statsRef = doc(db, 'artifacts', appId, 'public', 'data', 'analytics', 'stats');
      await setDoc(statsRef, { checkoutCount: increment(1), totalRevenue: increment(cartTotal) }, { merge: true });
      
      // Update Sales Count per Product
      for (const item of cart) {
        await setDoc(doc(db, 'artifacts', appId, 'public', 'data', 'products', item.id), { salesCount: increment(item.quantity) }, { merge: true });
      }

      // Open WhatsApp
      let msg = `*ORDER BARU - ${storeConfig.name.toUpperCase()}*\n\n`;
      cart.forEach((i, idx) => msg += `${idx + 1}. *${i.name}* (${i.quantity}x)\n`);
      msg += `\n*TOTAL: ${storeConfig.currency} ${cartTotal.toLocaleString('id-ID')}*`;
      window.open(`https://wa.me/${storeConfig.phone}?text=${encodeURIComponent(msg)}`, '_blank');
      
      setCart([]); setView('catalog');
    } catch (e) { showToast("Gagal Checkout", "error"); }
  };

  const processDelete = async () => {
    if (!user || !db || !itemToDelete) return;
    if (inputPassword !== storeConfig.adminPassword) return showToast("Sandi Salah", "error");
    try {
      const { type, data } = itemToDelete;
      setItemToDelete(null); setInputPassword("");
      
      if (type === 'order') {
        const statsRef = doc(db, 'artifacts', appId, 'public', 'data', 'analytics', 'stats');
        await setDoc(statsRef, { totalRevenue: increment(-Number(data.totalAmount || 0)), checkoutCount: increment(-1) }, { merge: true });
        await deleteDoc(doc(db, 'artifacts', appId, 'public', 'data', 'orders', data.id));
        showToast("Transaksi Dihapus");
      } else {
        await deleteDoc(doc(db, 'artifacts', appId, 'public', 'data', 'products', data.id));
        showToast("Produk Dihapus");
      }
    } catch (e) { showToast("Gagal Hapus", "error"); }
  };

  const handleUpdateConfig = async (newConfig) => {
    if (!user || !db) return;
    try {
      const configRef = doc(db, 'artifacts', appId, 'public', 'data', 'settings', 'config');
      await setDoc(configRef, newConfig, { merge: true });
      showToast("Tersimpan");
    } catch (e) { showToast("Gagal Simpan", "error"); }
  };

  const processImage = (file) => {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = (e) => {
        const img = new Image();
        img.onload = () => {
          const canvas = document.createElement('canvas');
          const MAX_W = 800;
          const scale = Math.min(1, MAX_W / img.width);
          canvas.width = img.width * scale;
          canvas.height = img.height * scale;
          const ctx = canvas.getContext('2d');
          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
          resolve(canvas.toDataURL('image/jpeg', 0.6));
        };
        img.onerror = reject;
        img.src = e.target.result;
      };
      reader.onerror = reject;
      reader.readAsDataURL(file);
    });
  };

  const handleLogoUpload = async (e) => {
    const file = e.target.files?.[0];
    if (!file) return;
    showToast("Mengunggah Logo...", "info");
    try {
      const base64 = await processImage(file);
      const newConfig = { ...storeConfig, logo: base64 };
      setStoreConfig(newConfig);
      await handleUpdateConfig(newConfig);
      showToast("Logo Toko Diperbarui");
    } catch (err) { showToast("Gagal Unggah", "error"); }
  };

  const handleMultipleFiles = async (e) => {
    const files = Array.from(e.target.files);
    if (!files.length) return;
    showToast("Memproses Foto...", "info");
    try {
      const processed = [];
      for (const file of files) {
        const base64 = await processImage(file);
        processed.push(base64);
      }
      setTempGallery(prev => [...prev, ...processed].slice(0, 3));
    } catch (err) { showToast("Gagal Foto", "error"); }
  };

  if (loading) return (
    <div className="min-h-screen flex flex-col items-center justify-center bg-white space-y-4">
      <Loader2 className="animate-spin text-slate-300" size={48} />
      <p className="text-slate-400 font-bold text-[10px] tracking-widest uppercase">Syncing Cloud...</p>
    </div>
  );

  return (
    <div className="min-h-screen bg-[#FDFDFD] text-slate-900 font-sans pb-24 transition-all overflow-x-hidden">
      
      {/* GLOBAL TOAST */}
      {notification && (
        <div className={`fixed top-4 left-1/2 -translate-x-1/2 z-[600] px-6 py-3 rounded-2xl shadow-2xl flex items-center gap-2 animate-in slide-in-from-top duration-300 ${notification.type === 'error' ? 'bg-red-600 text-white' : 'bg-slate-900 text-white'}`}>
          <span className="text-[11px] font-bold uppercase tracking-widest">{notification.msg}</span>
        </div>
      )}

      {/* HEADER PREMIUM */}
      <nav className="sticky top-0 z-50 bg-white/70 backdrop-blur-xl border-b border-slate-100 px-4 h-16 flex items-center justify-between shadow-sm">
        <div className="flex items-center gap-3">
          {storeConfig?.logo ? (
            <img src={storeConfig.logo} className="w-10 h-10 rounded-xl object-cover border shadow-sm" alt="logo" />
          ) : (
            <div className={`w-10 h-10 rounded-xl ${activeTheme.color} flex items-center justify-center text-white shadow-sm`}>
              <Store size={20} />
            </div>
          )}
          <span className="font-black tracking-tighter text-slate-800 uppercase">{storeConfig?.name || "Premium Store"}</span>
        </div>
        <div className="flex items-center gap-1 sm:gap-2">
          <button onClick={() => setView('cart')} className="relative p-3 text-slate-500 hover:bg-slate-100 rounded-xl transition-all active:scale-90">
            <ShoppingCart size={22} />
            {cart.length > 0 && <span className={`absolute top-1 right-1 ${activeTheme.color} text-white text-[9px] w-5 h-5 flex items-center justify-center rounded-full font-black border-2 border-white`}>{cart.length}</span>}
          </button>
          <button onClick={() => isAdminAuth ? setView('admin') : setShowAuthModal(true)} className="p-3 text-slate-400 hover:bg-slate-100 rounded-xl transition-all active:scale-90">
            <Settings size={22} />
          </button>
        </div>
      </nav>

      <main className="max-w-4xl mx-auto">
        {/* --- CATALOG VIEW --- */}
        {view === 'catalog' && (
          <div className="animate-in fade-in duration-500 p-4">
            {/* Search */}
            <div className="relative mb-6">
              <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-300" size={18} />
              <input type="text" placeholder="Cari produk impian..." className="w-full pl-11 pr-4 py-4 rounded-2xl bg-white border-none shadow-sm outline-none focus:ring-2 focus:ring-slate-100 transition-all font-medium text-sm" value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} />
            </div>

            {/* Horizontal Categories */}
            <div className="flex gap-2 overflow-x-auto no-scrollbar mb-8 pb-1 px-1">
              {CATEGORIES.map(c => (
                <button key={c} onClick={() => setActiveCategory(c)} className={`px-5 py-2.5 rounded-full text-[10px] font-black uppercase tracking-widest whitespace-nowrap transition-all ${activeCategory === c ? `${activeTheme.color} text-white shadow-lg` : 'bg-white text-slate-400 border border-slate-100'}`}>{c}</button>
              ))}
            </div>
            
            {/* Product Grid */}
            <div className="grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-6">
              {products
                .filter(p => (activeCategory === "Semua" || p.category === activeCategory))
                .filter(p => (p.name || "").toLowerCase().includes(searchQuery.toLowerCase()))
                .map(p => {
                  const discount = p.originalPrice > p.price ? Math.round(((p.originalPrice - p.price) / p.originalPrice) * 100) : 0;
                  return (
                    <div key={p.id} onClick={() => setSelectedProduct(p)} className="bg-white rounded-[2rem] overflow-hidden border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all cursor-pointer group flex flex-col">
                      <div className="aspect-[4/5] bg-slate-50 relative overflow-hidden">
                        {p.image ? <img src={p.image} className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-1000" alt={p.name} /> : <div className="w-full h-full flex items-center justify-center text-slate-200"><ImageIcon size={40} /></div>}
                        <div className="absolute top-3 left-3 flex flex-col gap-2">
                          {p.isFlashSale && <div className="bg-red-600 text-white px-2 py-1 rounded-lg text-[8px] font-black uppercase flex items-center gap-1 shadow-lg animate-pulse"><Zap size={10} fill="currentColor"/> Sale</div>}
                          {discount > 0 && <div className="bg-indigo-600 text-white px-2 py-1 rounded-lg text-[8px] font-black uppercase shadow-lg">-{discount}%</div>}
                        </div>
                        <div className="absolute bottom-3 left-3 right-3 bg-white/80 backdrop-blur-md p-3 rounded-2xl border border-white/50 shadow-sm">
                           <p className="text-[8px] font-black uppercase tracking-tighter text-slate-400 truncate">{p.category || "General"}</p>
                           <p className="font-bold text-xs text-slate-900 mt-0.5">Rp {Number(p.price || 0).toLocaleString()}</p>
                        </div>
                      </div>
                      <div className="p-4 flex flex-col flex-grow text-center sm:text-left">
                        <h3 className="font-bold text-[11px] text-slate-800 line-clamp-2 h-8 leading-tight mb-2">{p.name}</h3>
                        <div className="mt-auto flex items-center justify-between">
                           <span className={`text-[9px] font-black uppercase tracking-widest ${Number(p.stock) > 0 ? 'text-slate-400' : 'text-red-500'}`}>{Number(p.stock) > 0 ? `Stok ${p.stock}` : "Habis"}</span>
                           <ChevronRight size={14} className="text-slate-300 transition-all" />
                        </div>
                      </div>
                    </div>
                  );
                })}
            </div>
            
            {products.length === 0 && (
              <div className="text-center py-24 opacity-20 flex flex-col items-center">
                <ShoppingBag size={80} strokeWidth={1} />
                <p className="mt-4 font-black uppercase text-xs tracking-widest">Katalog Kosong</p>
              </div>
            )}
          </div>
        )}

        {/* --- PRODUCT DETAIL MODAL --- */}
        {selectedProduct && (
          <div className="fixed inset-0 z-[100] bg-slate-900/90 backdrop-blur-md flex items-end sm:items-center justify-center animate-in fade-in">
            <div className="bg-white w-full max-w-2xl h-[92vh] sm:h-auto sm:max-h-[90vh] sm:rounded-[3rem] rounded-t-[3rem] overflow-hidden shadow-2xl flex flex-col animate-in slide-in-from-bottom duration-500 relative">
              <button onClick={() => setSelectedProduct(null)} className="absolute top-6 left-6 z-50 p-3 bg-white/90 backdrop-blur-md rounded-2xl shadow-xl hover:bg-white transition-all"><ChevronLeft size={24}/></button>
              
              <div className="flex-grow overflow-y-auto custom-scrollbar">
                <div className="relative h-[45vh] sm:h-96 bg-slate-50 flex items-center justify-center overflow-x-auto snap-x snap-mandatory no-scrollbar border-b">
                  {(selectedProduct?.gallery?.length > 0 ? selectedProduct.gallery : [selectedProduct.image || ""]).map((img, i) => (
                    <img key={i} src={img} className="min-w-full h-full object-cover snap-center" alt="gallery" onError={(e) => e.target.src="https://via.placeholder.com/800"} />
                  ))}
                  {selectedProduct?.gallery?.length > 1 && (
                    <div className="absolute bottom-6 flex gap-1.5 px-3 py-1.5 bg-black/10 backdrop-blur-md rounded-full">
                       {selectedProduct.gallery.map((_, i) => <div key={i} className="w-1.5 h-1.5 rounded-full bg-white/50"></div>)}
                    </div>
                  )}
                </div>

                <div className="p-8 pb-32 text-center sm:text-left">
                  <div className="flex justify-between items-start mb-6">
                    <div>
                      <span className={`text-[10px] font-black uppercase tracking-[0.2em] ${activeTheme.text}`}>{selectedProduct?.category || "Umum"}</span>
                      <h2 className="text-3xl font-black tracking-tighter text-slate-900 leading-tight mt-1">{selectedProduct?.name}</h2>
                    </div>
                    {selectedProduct?.isFlashSale && <div className="bg-red-50 text-red-600 p-3 rounded-2xl animate-pulse"><Zap fill="currentColor"/></div>}
                  </div>

                  <div className="flex items-baseline justify-center sm:justify-start gap-4 mb-10">
                    <p className="text-4xl font-black text-slate-900">Rp {Number(selectedProduct?.price || 0).toLocaleString()}</p>
                    {Number(selectedProduct?.originalPrice) > Number(selectedProduct?.price) && (
                      <p className="text-lg text-slate-300 line-through font-bold">Rp {Number(selectedProduct.originalPrice).toLocaleString()}</p>
                    )}
                  </div>

                  <div className="space-y-8">
                    <div className="p-8 bg-slate-50 rounded-[2.5rem] border border-slate-100 text-left">
                      <h4 className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4 flex items-center gap-2"><Info size={14}/> Deskripsi</h4>
                      <p className="text-sm text-slate-600 leading-relaxed whitespace-pre-wrap font-medium">{selectedProduct?.description || "Kualitas premium untuk Anda."}</p>
                    </div>
                    <div className="grid grid-cols-2 gap-4">
                       <div className="p-4 rounded-3xl border border-slate-100 bg-white text-center shadow-sm">
                          <p className="text-[9px] font-black text-slate-400 uppercase mb-1">Stok Unit</p>
                          <p className="font-black text-slate-800 text-lg">{selectedProduct?.stock || 0}</p>
                       </div>
                       <div className="p-4 rounded-3xl border border-slate-100 bg-white text-center shadow-sm">
                          <p className="text-[9px] font-black text-slate-400 uppercase mb-1">Total Laris</p>
                          <p className="font-black text-slate-800 text-lg">{selectedProduct?.salesCount || 0}+</p>
                       </div>
                    </div>
                  </div>
                </div>
              </div>

              {/* Sticky Add to Cart */}
              <div className="absolute bottom-0 left-0 right-0 p-6 bg-white/80 backdrop-blur-2xl border-t border-slate-100 flex gap-4">
                <button 
                  disabled={Number(selectedProduct?.stock) <= 0}
                  onClick={() => {
                    const ex = cart.find(i => i.id === selectedProduct.id);
                    if (ex && ex.quantity >= Number(selectedProduct.stock)) return showToast("Stok Habis!", "error");
                    setCart(prev => ex ? prev.map(i => i.id === selectedProduct.id ? {...i, quantity: i.quantity + 1} : i) : [...prev, {...selectedProduct, quantity: 1}]);
                    setSelectedProduct(null); showToast("Berhasil Ditambah!");
                  }}
                  className={`w-full py-5 ${activeTheme.color} text-white rounded-[2rem] font-black text-xs uppercase tracking-[0.2em] shadow-2xl ${activeTheme.shadow} hover:scale-[1.02] active:scale-95 transition-all flex items-center justify-center gap-3`}
                >
                  <ShoppingBag size={20} strokeWidth={3} /> {Number(selectedProduct?.stock) > 0 ? "MASUKKAN KERANJANG" : "STOK HABIS"}
                </button>
              </div>
            </div>
          </div>
        )}

        {/* --- CART VIEW --- */}
        {view === 'cart' && (
          <div className="p-4 animate-in fade-in max-w-2xl mx-auto">
            <div className="flex items-center gap-4 mb-8">
              <button onClick={() => setView('catalog')} className="p-3 bg-white rounded-2xl shadow-sm"><ChevronLeft size={22}/></button>
              <h2 className="text-2xl font-black tracking-tighter">Shopping Bag</h2>
            </div>
            {cart.length === 0 ? (
              <div className="py-20 text-center opacity-10 flex flex-col items-center">
                <ShoppingBag size={100} strokeWidth={1}/>
                <p className="mt-4 font-black uppercase text-xs tracking-widest">Kosong</p>
              </div>
            ) : (
              <div className="space-y-4 pb-48">
                {cart.map(item => (
                  <div key={item.id} className="bg-white p-5 rounded-[2rem] flex items-center gap-5 shadow-sm border border-slate-50 animate-in slide-in-from-right">
                    <img src={item.image} className="w-20 h-20 rounded-2xl object-cover bg-slate-50 shadow-inner" alt="c" />
                    <div className="flex-grow">
                      <h4 className="font-bold text-sm text-slate-800 line-clamp-1">{item.name}</h4>
                      <p className={`font-black text-xs ${activeTheme.text} mt-1`}>Rp {Number(item.price || 0).toLocaleString()}</p>
                      <div className="flex items-center gap-4 mt-4">
                        <div className="flex items-center gap-5 bg-slate-50 px-3 py-1.5 rounded-2xl border border-slate-100">
                          <button onClick={() => setCart(p => p.map(i => i.id === item.id ? {...i, quantity: Math.max(1, i.quantity - 1)} : i))}><Minus size={14}/></button>
                          <span className="text-xs font-black w-4 text-center">{item.quantity}</span>
                          <button onClick={() => setCart(p => p.map(i => i.id === item.id ? {...i, quantity: i.quantity + 1} : i))}><Plus size={14}/></button>
                        </div>
                        <button onClick={() => setCart(p => p.filter(i => i.id !== item.id))} className="text-red-300 hover:text-red-600 transition-colors p-2"><Trash2 size={18}/></button>
                      </div>
                    </div>
                  </div>
                ))}
                <div className="fixed bottom-6 left-4 right-4 max-w-md mx-auto bg-white p-8 rounded-[2.5rem] shadow-[0_20px_50px_rgba(0,0,0,0.1)] border border-slate-50 animate-in slide-in-from-bottom">
                  <div className="flex justify-between items-center mb-6">
                    <span className="text-[10px] font-black uppercase text-slate-400 tracking-widest">Total Bayar</span>
                    <span className={`text-3xl font-black tracking-tighter ${activeTheme.text}`}>Rp {cart.reduce((s,i)=>s+(i.price*i.quantity),0).toLocaleString()}</span>
                  </div>
                  <button onClick={handleCheckout} className={`w-full py-6 ${activeTheme.color} text-white rounded-[2rem] font-black text-xs uppercase tracking-widest shadow-2xl ${activeTheme.shadow} hover:brightness-110 active:scale-95 transition-all`}>
                    CHECKOUT WHATSAPP
                  </button>
                </div>
              </div>
            )}
          </div>
        )}

        {/* --- ADMIN HUB --- */}
        {view === 'admin' && (
          <div className="p-4 space-y-8 animate-in fade-in max-w-4xl mx-auto">
            <div className="flex items-center justify-between">
              <h2 className="text-2xl font-black tracking-tighter italic uppercase">Admin Hub</h2>
              <button onClick={() => setView('catalog')} className="text-[10px] font-black uppercase bg-white px-4 py-2 rounded-xl shadow-sm border border-slate-100 transition-all hover:bg-slate-50">Catalog</button>
            </div>
            <div className="flex bg-white p-1.5 rounded-2xl shadow-sm border border-slate-100 overflow-x-auto no-scrollbar">
               {[
                 {id: 'dashboard', icon: BarChart3},
                 {id: 'orders', icon: History},
                 {id: 'inventory', icon: Package},
                 {id: 'settings', icon: Settings}
               ].map(m => (
                 <button key={m.id} onClick={() => setAdminSubView(m.id)} className={`flex items-center gap-2 px-6 py-2.5 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all ${adminSubView === m.id ? `${activeTheme.light} ${activeTheme.text}` : 'text-slate-400 hover:text-slate-600'}`}>
                   <m.icon size={14}/> {m.id}
                 </button>
               ))}
            </div>

            {/* DASHBOARD */}
            {adminSubView === 'dashboard' && (
              <div className="space-y-8 animate-in fade-in text-center">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                   <div className="bg-white p-10 rounded-[3rem] shadow-sm border">
                      <p className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-3">Total Omzet Cloud</p>
                      <p className={`text-5xl font-black ${activeTheme.text}`}>Rp {Number(stats?.totalRevenue || 0).toLocaleString()}</p>
                   </div>
                   <div className="bg-white p-10 rounded-[3rem] shadow-sm border flex flex-col items-center justify-center">
                      <div className={`p-4 rounded-3xl ${activeTheme.light} inline-block mb-3`}><MousePointerClick className={activeTheme.text} size={32}/></div>
                      <p className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">Konversi Checkout</p>
                      <p className="text-4xl font-black text-slate-900">{stats?.checkoutCount || 0}</p>
                   </div>
                </div>

                <div className="bg-white p-10 rounded-[3rem] shadow-sm border">
                   <h3 className="font-black text-xs uppercase tracking-widest mb-10 flex items-center gap-3"><BarChart3 size={18}/> Grafik Bulanan</h3>
                   <div className="h-48 flex items-end gap-3 sm:gap-6 border-b border-slate-50 pb-2 overflow-x-auto no-scrollbar">
                     {monthChartData.length === 0 ? <p className="w-full text-center text-slate-300 font-bold pb-20">Belum Ada Data</p> : monthChartData.map(([m, a]) => (
                        <div key={m} className="flex-1 flex flex-col items-center group min-w-[50px]">
                           <div className={`w-full ${activeTheme.color} rounded-t-xl transition-all duration-1000 min-h-[4px]`} style={{height: `${(a / (Math.max(...monthChartData.map(d=>d[1])) || 1)) * 100}%`}}></div>
                           <span className="text-[8px] font-black mt-3 text-slate-400 tracking-tighter">{m}</span>
                        </div>
                     ))}
                   </div>
                </div>

                <div className="bg-white p-10 rounded-[3rem] shadow-sm border">
                   <h3 className="font-black text-xs uppercase tracking-widest mb-6 flex items-center gap-3"><TrendingUp size={18}/> Top 10 Best Sellers</h3>
                   <div className="space-y-3">
                     {topProducts.map((p, i) => (
                       <div key={p.id} className="flex items-center justify-between p-4 bg-slate-50 rounded-2xl">
                          <div className="flex items-center gap-4">
                            <span className="text-xs font-black text-slate-300">#{i+1}</span>
                            <img src={p.image} className="w-10 h-10 rounded-xl object-cover shadow-sm bg-white" alt="t" />
                            <span className="font-bold text-xs truncate max-w-[120px]">{p.name}</span>
                          </div>
                          <span className={`px-4 py-1.5 rounded-full text-[9px] font-black ${activeTheme.light} ${activeTheme.text} tracking-widest`}>{p.salesCount || 0} PCS</span>
                       </div>
                     ))}
                   </div>
                </div>
              </div>
            )}

            {/* ORDERS */}
            {adminSubView === 'orders' && (
              <div className="bg-white rounded-[3rem] shadow-sm border overflow-hidden animate-in fade-in">
                <div className="p-8 border-b flex justify-between items-center bg-slate-50/50 backdrop-blur-sm">
                  <h3 className="font-black text-xs uppercase tracking-widest">History Pesanan</h3>
                  <p className="text-[10px] text-slate-400 font-bold uppercase italic">Data Tersinkronisasi</p>
                </div>
                <div className="overflow-x-auto">
                  <table className="w-full text-left">
                    <thead className="bg-slate-50 text-[9px] font-black text-slate-300 uppercase tracking-widest">
                      <tr><th className="px-8 py-6">Date</th><th className="px-8 py-6">Amount</th><th className="px-8 py-6 text-right">Delete</th></tr>
                    </thead>
                    <tbody className="divide-y">
                      {orders.map(o => (
                        <tr key={o.id} className="text-sm group hover:bg-slate-50">
                          <td className="px-8 py-6 text-[10px] font-bold text-slate-400">
                            {o.createdAt?.seconds ? new Date(o.createdAt.seconds * 1000).toLocaleDateString('id-ID', {day:'2-digit', month:'short'}) : '...'}
                          </td>
                          <td className={`px-8 py-6 font-black ${activeTheme.text}`}>Rp {Number(o.totalAmount || 0).toLocaleString()}</td>
                          <td className="px-8 py-6 text-right">
                            <button onClick={() => setItemToDelete({ type: 'order', data: o })} className="p-3 text-red-300 hover:text-red-600 bg-white border rounded-2xl shadow-sm transition-all"><Trash2 size={18}/></button>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                  {!orders.length && <div className="text-center py-20 text-slate-300 font-black uppercase tracking-widest opacity-20">Belum Ada Transaksi</div>}
                </div>
              </div>
            )}

            {/* INVENTORY */}
            {adminSubView === 'inventory' && (
              <div className="space-y-6 animate-in fade-in">
                <button onClick={() => { setItemToDelete({type:'edit', data:null}); setTempGallery([]); }} className={`w-full py-4 ${activeTheme.color} text-white rounded-2xl font-black text-[10px] uppercase tracking-widest shadow-xl active:scale-95 transition-all`}>+ PRODUK BARU</button>
                <div className="grid gap-4">
                  {products.map(p => (
                    <div key={p.id} className="bg-white p-5 rounded-[2.5rem] border flex items-center gap-5 group hover:shadow-md transition-all">
                      <img src={p.image} className="w-16 h-16 rounded-[1.5rem] object-cover bg-slate-50" alt="t" />
                      <div className="flex-grow">
                        <p className="font-black text-sm text-slate-800">{p.name}</p>
                        <p className="text-[10px] text-slate-400 font-bold uppercase tracking-widest mt-1">Stok: {p.stock} | Terjual: {p.salesCount || 0}</p>
                      </div>
                      <div className="flex gap-2">
                        <button onClick={() => { setItemToDelete({type:'edit', data:p}); setTempGallery(p.gallery || [p.image]); }} className="p-3 text-blue-500 bg-blue-50 rounded-2xl hover:scale-110 transition-all"><Edit3 size={18}/></button>
                        <button onClick={() => setItemToDelete({ type: 'product', data: p })} className="p-3 text-red-500 bg-red-50 rounded-2xl hover:scale-110 transition-all"><Trash2 size={18}/></button>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {/* SETTINGS */}
            {adminSubView === 'settings' && (
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8 animate-in fade-in">
                <section className="bg-white p-10 rounded-[3rem] shadow-sm border space-y-8">
                  <h3 className="font-black text-[10px] uppercase text-slate-400 tracking-widest flex items-center gap-2"><Lock size={16}/> Identity Setup</h3>
                  <div className="space-y-6">
                    <div className="space-y-2">
                      <label className="text-[9px] font-black uppercase text-slate-400 ml-4">Nama Toko Online</label>
                      <input className="w-full p-4 rounded-2xl bg-slate-50 font-bold border-2 border-transparent focus:border-slate-200 outline-none transition-all text-sm" value={storeConfig?.name || ""} onChange={(e) => setStoreConfig(prev => ({...prev, name: e.target.value}))} onBlur={() => handleUpdateConfig({name: storeConfig.name})} />
                    </div>
                    <div className="space-y-2">
                      <label className="text-[9px] font-black uppercase text-slate-400 ml-4">WhatsApp (62...)</label>
                      <input className="w-full p-4 rounded-2xl bg-slate-50 font-bold border-2 border-transparent focus:border-slate-200 outline-none transition-all text-sm" value={storeConfig?.phone || ""} onChange={(e) => setStoreConfig(prev => ({...prev, phone: e.target.value}))} onBlur={() => handleUpdateConfig({phone: storeConfig.phone})} />
                    </div>
                    <div className="space-y-2 pt-4 border-t">
                      <label className="text-[9px] font-black uppercase text-slate-400 ml-4">Sandi Admin</label>
                      <input type="password" placeholder="Passcode" className="w-full p-4 rounded-2xl bg-slate-50 font-bold border-2 border-transparent focus:border-slate-200 outline-none transition-all text-sm" value={storeConfig?.adminPassword || ""} onChange={(e) => setStoreConfig(prev => ({...prev, adminPassword: e.target.value}))} onBlur={() => handleUpdateConfig({adminPassword: storeConfig.adminPassword})} />
                    </div>
                  </div>
                </section>
                <section className="bg-white p-10 rounded-[3rem] shadow-sm border text-center flex flex-col items-center">
                  <h3 className="font-black text-[10px] uppercase text-slate-400 tracking-widest mb-10 self-start flex items-center gap-2"><Palette size={16}/> Store Branding</h3>
                  <div onClick={()=>logoInputRef.current.click()} className="w-32 h-32 bg-slate-50 rounded-[2.5rem] border-4 border-dashed border-slate-200 flex flex-col items-center justify-center cursor-pointer overflow-hidden group relative transition-all hover:border-slate-400">
                    {storeConfig?.logo ? <img src={storeConfig.logo} className="w-full h-full object-cover" alt="l"/> : <div className="text-center"><Camera className="text-slate-300 mx-auto" size={32}/><p className="text-[8px] font-black text-slate-300 uppercase mt-2">Logo</p></div>}
                    <input type="file" ref={logoInputRef} className="hidden" accept="image/*" onChange={handleLogoUpload} />
                    <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 flex items-center justify-center text-white text-[8px] font-bold uppercase transition-opacity">Ganti Image</div>
                  </div>
                  <div className="grid grid-cols-5 gap-3 mt-12 w-full px-2">
                    {Object.keys(THEMES).map(t => <button key={t} onClick={()=>{ const c={...storeConfig, theme:t}; setStoreConfig(c); handleUpdateConfig({theme: t}); }} className={`h-10 rounded-xl ${THEMES[t].color} ${storeConfig.theme === t ? 'ring-4 ring-offset-4 ring-slate-100 scale-110 shadow-lg' : 'opacity-40 hover:opacity-100'} transition-all`} title={THEMES[t].name} />)}
                  </div>
                </section>
              </div>
            )}
          </div>
        )}
      </main>

      {/* --- AUTH MODAL --- */}
      {showAuthModal && (
        <div className="fixed inset-0 z-[200] bg-slate-900/60 backdrop-blur-md flex items-center justify-center p-6 animate-in fade-in">
          <div className="bg-white w-full max-w-sm rounded-[3.5rem] p-12 shadow-2xl animate-in zoom-in-95 text-center">
            <div className={`w-20 h-20 rounded-[2.5rem] ${activeTheme.light} flex items-center justify-center mx-auto mb-8`}><Lock className={activeTheme.text} size={32} strokeWidth={3} /></div>
            <h3 className="text-3xl font-black mb-3 text-slate-900 tracking-tighter uppercase">Admin Login</h3>
            <form onSubmit={(e) => { e.preventDefault(); if(inputPassword === storeConfig?.adminPassword) { setIsAdminAuth(true); setShowAuthModal(false); setView('admin'); setInputPassword(""); } else { showToast("Sandi Salah", "error"); setInputPassword(""); } }} className="space-y-6 mt-8">
              <input autoFocus type="password" placeholder="Passcode..." className="w-full p-6 bg-slate-50 rounded-2xl font-bold outline-none text-center tracking-[0.5em] focus:ring-4 focus:ring-slate-100 transition-all border-none shadow-inner" value={inputPassword} onChange={(e) => setInputPassword(e.target.value)} />
              <div className="flex gap-4">
                <button type="button" onClick={() => setShowAuthModal(false)} className="flex-1 py-5 bg-slate-100 text-slate-500 rounded-3xl font-black text-[10px] uppercase tracking-widest">Batal</button>
                <button type="submit" className={`flex-[2] py-5 ${activeTheme.color} text-white rounded-3xl font-black text-[10px] uppercase tracking-widest shadow-xl`}>Masuk</button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* --- DYNAMIC MODAL (EDIT & DELETE) --- */}
      {itemToDelete && (
        <div className="fixed inset-0 z-[300] bg-slate-900/60 backdrop-blur-md flex items-center justify-center p-6 animate-in fade-in">
           {itemToDelete.type === 'edit' ? (
             <div className="bg-white w-full max-w-xl rounded-[4rem] overflow-hidden shadow-2xl animate-in slide-in-from-bottom duration-500 flex flex-col max-h-[88vh]">
                <div className={`p-10 border-b flex justify-between items-center ${activeTheme.light}`}>
                  <h3 className={`font-black text-2xl tracking-tighter ${activeTheme.text}`}>{itemToDelete.data ? 'PERBARUI' : 'TAMBAH'} PRODUK</h3>
                  <button onClick={()=>setItemToDelete(null)} className="p-4 bg-white/50 rounded-full hover:bg-white transition-all"><X size={24}/></button>
                </div>
                <form 
                  onSubmit={async (e) => {
                    e.preventDefault();
                    const fd = new FormData(e.target);
                    const data = {
                      name: fd.get('name') || "Produk",
                      price: Number(fd.get('price')) || 0,
                      originalPrice: Number(fd.get('originalPrice')) || 0,
                      stock: Number(fd.get('stock')) || 0,
                      category: fd.get('category') || CATEGORIES[1],
                      isFlashSale: fd.get('isFlashSale') === 'true',
                      description: fd.get('description') || "",
                      gallery: tempGallery.length > 0 ? tempGallery : [itemToDelete.data?.image || ""],
                      image: tempGallery[0] || itemToDelete.data?.image || "",
                      updatedAt: serverTimestamp()
                    };
                    try {
                      if(itemToDelete.data?.id) await setDoc(doc(db, 'artifacts', appId, 'public', 'data', 'products', itemToDelete.data.id), data, {merge: true});
                      else await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'products'), {...data, salesCount: 0});
                      setItemToDelete(null); setTempGallery([]); showToast("Tersimpan!");
                    } catch(err) { showToast("Gagal Simpan", "error"); }
                  }} 
                  className="p-10 space-y-6 overflow-y-auto custom-scrollbar"
                >
                  <div className="space-y-4">
                     <label className="text-[10px] font-black text-slate-400 ml-4 uppercase tracking-widest">Galeri Foto (Up to 3 Images)</label>
                     <div className="grid grid-cols-4 gap-4">
                        {tempGallery.map((img, i) => (
                          <div key={i} className="aspect-square rounded-[1.5rem] overflow-hidden relative border bg-white shadow-sm">
                             <img src={img} className="w-full h-full object-cover"/>
                             <button type="button" onClick={()=>setTempGallery(p => p.filter((_, idx)=>idx!==i))} className="absolute top-1 right-1 bg-red-500 text-white p-1 rounded-lg shadow-lg hover:scale-110 transition-transform"><X size={10}/></button>
                          </div>
                        ))}
                        {tempGallery.length < 3 && <div onClick={()=>fileInputRef.current?.click()} className="aspect-square border-4 border-dashed border-slate-100 rounded-[1.5rem] flex items-center justify-center text-slate-200 cursor-pointer hover:bg-slate-50 transition-all"><Plus size={32}/></div>}
                     </div>
                     <input type="file" ref={fileInputRef} className="hidden" multiple accept="image/*" onChange={handleMultipleFiles} />
                  </div>
                  <div className="space-y-5">
                    <input name="name" defaultValue={itemToDelete.data?.name} required placeholder="Nama Produk" className="w-full p-5 bg-slate-50 rounded-2xl font-bold outline-none border-none" />
                    <div className="grid grid-cols-2 gap-4">
                      <input name="price" type="number" defaultValue={itemToDelete.data?.price} required placeholder="Harga Jual" className="w-full p-5 bg-slate-50 rounded-2xl font-bold outline-none border-none" />
                      <input name="originalPrice" type="number" defaultValue={itemToDelete.data?.originalPrice} placeholder="Harga Asli" className="w-full p-5 bg-slate-50 rounded-2xl font-bold outline-none border-none" />
                    </div>
                    <div className="grid grid-cols-2 gap-4">
                      <input name="stock" type="number" defaultValue={itemToDelete.data?.stock} required placeholder="Stok" className="w-full p-5 bg-slate-50 rounded-2xl font-bold outline-none border-none" />
                      <select name="category" defaultValue={itemToDelete.data?.category || CATEGORIES[1]} className="w-full p-5 bg-slate-50 rounded-2xl font-bold outline-none border-none appearance-none cursor-pointer">
                        {CATEGORIES.filter(c=>c!=="Semua").map(c => <option key={c} value={c}>{c}</option>)}
                      </select>
                    </div>
                    <select name="isFlashSale" defaultValue={itemToDelete.data?.isFlashSale ? 'true' : 'false'} className="w-full p-5 bg-slate-50 rounded-2xl font-black uppercase text-[10px] tracking-widest border-none outline-none cursor-pointer">
                      <option value="false">Off Flash Sale</option><option value="true">On Flash Sale</option>
                    </select>
                    <textarea name="description" defaultValue={itemToDelete.data?.description} rows="4" placeholder="Keterangan lengkap produk..." className="w-full p-6 bg-slate-50 rounded-3xl font-bold outline-none border-none"></textarea>
                  </div>
                  <button type="submit" className={`w-full py-6 ${activeTheme.color} text-white rounded-[2.5rem] font-black text-[11px] uppercase tracking-[0.3em] shadow-2xl active:scale-95 transition-all`}>SIMPAN KE CLOUD</button>
                </form>
             </div>
           ) : (
             <div className="bg-white w-full max-w-sm rounded-[3.5rem] p-12 shadow-2xl text-center animate-in zoom-in-95 duration-200">
                <div className="w-24 h-24 rounded-[2.5rem] bg-red-50 flex items-center justify-center mx-auto mb-8 shadow-inner"><Trash2 size={40} className="text-red-500" /></div>
                <h3 className="text-3xl font-black mb-3 text-slate-900 tracking-tighter">Hapus Permanen?</h3>
                <p className="text-slate-400 text-[11px] mb-10 leading-relaxed font-bold uppercase tracking-widest italic">"Masukkan sandi untuk konfirmasi penghapusan cloud."</p>
                <form onSubmit={(e)=>{e.preventDefault(); processDelete();}} className="space-y-6">
                   <input autoFocus type="password" placeholder="Passcode..." className="w-full p-6 bg-slate-50 rounded-2xl font-bold outline-none text-center tracking-[0.5em] focus:ring-4 focus:ring-slate-100 transition-all border-none shadow-inner" value={inputPassword} onChange={(e)=>setInputPassword(e.target.value)} />
                   <div className="flex gap-4">
                     <button type="button" onClick={() => { setItemToDelete(null); setInputPassword(""); }} className="flex-1 py-5 bg-slate-100 text-slate-500 rounded-3xl font-black text-[10px] uppercase tracking-widest transition-all">Batal</button>
                     <button type="submit" className="flex-[2] py-5 bg-red-500 text-white rounded-3xl font-black text-[10px] uppercase tracking-widest shadow-2xl shadow-red-100">Ya, Hapus</button>
                   </div>
                </form>
            </div>
           )}
        </div>
      )}

      {/* CSS UTILITIES */}
      <style>{`
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        .custom-scrollbar::-webkit-scrollbar { width: 5px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #E2E8F0; border-radius: 10px; }
      `}</style>
    </div>
  );
}