import React, { useState, createContext, useContext, useEffect } from 'react';
import { 
  ShoppingCart, Home, LayoutDashboard, Package, Trash2, Plus, 
  X, Image as ImageIcon, CheckCircle, Clock, ChevronDown, BarChart3, 
  AlertCircle, Search, Menu, LogOut, User, Settings as SettingsIcon, 
  Calendar as CalendarIcon, ChevronLeft, ChevronRight, Check, 
  Upload, Shield, Briefcase, FileText, Database, Download, UploadCloud, Terminal,
  UserPlus, Award, Gift, Users, Edit3, ClipboardList, Tag, Percent
} from 'lucide-react';

// ============================================================================
// DATA AWAL (PRODUCTION READY - KOSONG UNTUK DATA ASLI)
// ============================================================================
const initialCategories = ['Kebaya', 'Jas', 'Batik', 'Gaun', 'Aksesoris'];
const initialProducts = [];
const initialOrders = [];
const initialMembers = [];
const initialPrizes = [];
const initialPromos = [];

// Akun default tetap dipertahankan agar sistem RBAC berfungsi
const initialUsers = [
  { id: 'U0', username: 'dev', password: 'dev', name: 'Developer System', role: 'developer' },
  { id: 'U1', username: 'owner', password: 'owner123', name: 'Owner Aisya', role: 'owner' },
  { id: 'U2', username: 'manager', password: 'manager123', name: 'Manajer Operasional', role: 'manager' },
  { id: 'U3', username: 'admin', password: 'admin123', name: 'Admin Kasir', role: 'admin' }
];

const initialBrandConfig = {
  appName: 'Aisya Wardrobe',
  slogan: 'Sewa Pakaian Premium & Eksklusif',
  companyBio: 'Aisya Wardrobe adalah penyedia layanan sewa pakaian premium terpercaya. Kami berdedikasi untuk memberikan pengalaman berpakaian terbaik untuk momen spesial Anda dengan koleksi yang selalu terawat, higienis, dan mengikuti tren terkini.',
  logoUrl: '',
  themeColor: 'rose', 
  socialMedia: [
    { type: 'WhatsApp', value: '081234567890', label: 'Hubungi Kami' },
    { type: 'Instagram', value: '@aisyawardrobe', label: 'Follow IG Kami' }
  ],
  companyEmail: 'admin@aisyawardrobe.com'
};

const AppStateContext = createContext();

const formatRupiah = (number) => new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0 }).format(number);

// ============================================================================
// KOMPONEN GLOBAL & CONTEXT
// ============================================================================
const Toast = ({ message, type, onClose }) => {
  useEffect(() => {
    const timer = setTimeout(() => onClose(), 3000);
    return () => clearTimeout(timer);
  }, [onClose]);

  return (
    <div className="fixed top-5 left-1/2 transform -translate-x-1/2 z-[100] w-[90%] md:w-max max-w-md mx-auto animate-fade-in-down">
      <div className={`flex items-center gap-3 px-6 py-3 rounded-xl shadow-lg border ${type === 'success' ? 'bg-green-50 border-green-200 text-green-800' : type === 'error' ? 'bg-red-50 border-red-200 text-red-800' : 'bg-blue-50 border-blue-200 text-blue-800'}`}>
        {type === 'success' ? <CheckCircle className="w-5 h-5 flex-shrink-0 text-green-500" /> : type === 'error' ? <AlertCircle className="w-5 h-5 flex-shrink-0 text-red-500" /> : <Shield className="w-5 h-5 flex-shrink-0 text-blue-500" />}
        <span className="font-medium text-sm leading-tight">{message}</span>
      </div>
    </div>
  );
};

const AppStateProvider = ({ children }) => {
  const [view, setView] = useState('dashboard'); 
  const [products, setProducts] = useState(initialProducts);
  const [categories, setCategories] = useState(initialCategories);
  const [orders, setOrders] = useState(initialOrders);
  const [cart, setCart] = useState([]);
  
  const [users, setUsers] = useState(initialUsers);
  const [loggedInUser, setLoggedInUser] = useState(null);

  const [members, setMembers] = useState(initialMembers);
  const [loggedInMember, setLoggedInMember] = useState(null);
  const [prizes, setPrizes] = useState(initialPrizes);
  const [promos, setPromos] = useState(initialPromos);
  
  const [brandConfig, setBrandConfig] = useState(initialBrandConfig);
  const [approvals, setApprovals] = useState([]);
  const [toast, setToast] = useState(null);
  const [logs, setLogs] = useState([]);

  const showToast = (message, type = 'success') => setToast({ message, type });

  const themeColors = {
    rose: { bg: 'bg-rose-500', hover: 'hover:bg-rose-600', text: 'text-rose-500', border: 'border-rose-500', light: 'bg-rose-50 text-rose-600', shadow: 'shadow-rose-200' },
    blue: { bg: 'bg-blue-500', hover: 'hover:bg-blue-600', text: 'text-blue-500', border: 'border-blue-500', light: 'bg-blue-50 text-blue-600', shadow: 'shadow-blue-200' },
    emerald: { bg: 'bg-emerald-500', hover: 'hover:bg-emerald-600', text: 'text-emerald-500', border: 'border-emerald-500', light: 'bg-emerald-50 text-emerald-600', shadow: 'shadow-emerald-200' },
    purple: { bg: 'bg-purple-500', hover: 'hover:bg-purple-600', text: 'text-purple-500', border: 'border-purple-500', light: 'bg-purple-50 text-purple-600', shadow: 'shadow-purple-200' },
    slate: { bg: 'bg-slate-800', hover: 'hover:bg-slate-900', text: 'text-slate-800', border: 'border-slate-800', light: 'bg-slate-100 text-slate-800', shadow: 'shadow-slate-200' },
  };
  const cTheme = themeColors[brandConfig.themeColor] || themeColors.rose;

  const addLog = (action, detail, user = loggedInUser?.name || 'Sistem Otomatis') => {
    const newLog = { id: `LOG-${Date.now()}-${Math.floor(Math.random()*1000)}`, timestamp: new Date().toLocaleString(), user, action, detail };
    setLogs(prev => [newLog, ...prev]);
  };

  const login = (username, password) => {
    const user = users.find(u => u.username === username && u.password === password);
    if (user) { 
       setLoggedInUser(user); setView('admin'); showToast(`Akses Diberikan: ${user.name}`, 'success'); 
       addLog('Otorisasi', 'Melakukan login ke Admin Panel', user.name); return true; 
    }
    return false;
  };
  const logout = () => { addLog('Otorisasi', 'Melakukan logout dari Admin Panel'); setLoggedInUser(null); setView('dashboard'); showToast('Berhasil keluar.', 'info'); };

  const memberLogin = (username, password) => {
    const member = members.find(m => m.username === username && m.password === password && m.status === 'approved');
    if (member) { setLoggedInMember(member); setView('member_profile'); showToast(`Selamat datang, ${member.name}!`, 'success'); return true; }
    return false;
  };
  const memberLogout = () => { setLoggedInMember(null); setView('dashboard'); showToast('Berhasil keluar dari akun.', 'info'); };

  const submitMemberRegistration = (formData) => {
    const newApproval = { id: `APP-${Date.now()}`, actionType: 'REGISTER_MEMBER', payload: formData, requestedBy: formData.name, requesterRole: 'Calon Member', date: new Date().toLocaleString(), status: 'Menunggu' };
    setApprovals(prev => [newApproval, ...prev]); showToast('Pendaftaran diajukan. Menunggu persetujuan.', 'info');
  };

  const redeemPrize = (prize) => {
    if (!loggedInMember) return;
    if (loggedInMember.points >= prize.points) {
       setMembers(prev => prev.map(m => m.id === loggedInMember.id ? {...m, points: m.points - prize.points} : m));
       setLoggedInMember(prev => ({...prev, points: prev.points - prize.points}));
       showToast(`Berhasil menukarkan poin dengan ${prize.name}!`, 'success');
    } else { showToast('Poin Anda tidak mencukupi.', 'error'); }
  };

  const exportData = () => {
    const data = { products, categories, orders, users, members, brandConfig, logs, promos };
    const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(data));
    const downloadAnchorNode = document.createElement('a');
    downloadAnchorNode.setAttribute("href", dataStr);
    downloadAnchorNode.setAttribute("download", `aisya_backup_${new Date().getTime()}.json`);
    document.body.appendChild(downloadAnchorNode); downloadAnchorNode.click(); downloadAnchorNode.remove();
    showToast('Data berhasil dibackup.', 'success'); addLog('Developer', 'Mengekspor backup data JSON');
  };

  const importData = (jsonData) => {
    try {
       const parsed = JSON.parse(jsonData);
       if(parsed.products) setProducts(parsed.products);
       if(parsed.categories) setCategories(parsed.categories);
       if(parsed.orders) setOrders(parsed.orders);
       if(parsed.users) setUsers(parsed.users);
       if(parsed.members) setMembers(parsed.members);
       if(parsed.brandConfig) setBrandConfig(parsed.brandConfig);
       if(parsed.logs) setLogs(parsed.logs);
       if(parsed.promos) setPromos(parsed.promos);
       showToast('Data berhasil dipulihkan.', 'success'); addLog('Developer', 'Memulihkan (Restore) database');
    } catch(e) { showToast('Format file JSON tidak valid!', 'error'); }
  };

  const requireApproval = (actionType, payload, successMsg, isDestructive = false) => {
    if (!loggedInUser) return false;
    if (loggedInUser.role === 'developer' || loggedInUser.role === 'owner') { executeAction(actionType, payload); showToast(successMsg, 'success'); return true; }
    if (loggedInUser.role === 'manager') {
      if (actionType === 'UPDATE_USER' && payload.userId === loggedInUser.id) { requestApproval(actionType, payload, `Perubahan akun Anda memerlukan izin Owner.`); return false; }
      executeAction(actionType, payload); showToast(successMsg, 'success'); return true;
    }
    requestApproval(actionType, payload, `Memerlukan izin Manager/Owner.`);
    return false;
  };

  const requestApproval = (actionType, payload, msg) => {
    const newApproval = { id: `APP-${Date.now()}`, actionType, payload, requestedBy: loggedInUser.name, requesterRole: loggedInUser.role, date: new Date().toLocaleString(), status: 'Menunggu' };
    setApprovals(prev => [newApproval, ...prev]); showToast(msg, 'info'); addLog('Persetujuan', `Mengajukan izin untuk tindakan: ${actionType}`);
  };

  const executeAction = (actionType, payload) => {
    switch (actionType) {
      case 'ADD_PRODUCT': setProducts(prev => [payload, ...prev]); addLog('Inventaris', `Menambahkan produk baru: ${payload.name}`); break;
      case 'EDIT_PRODUCT': setProducts(prev => prev.map(p => p.id === payload.id ? payload : p)); addLog('Inventaris', `Mengubah rincian produk: ${payload.id}`); break;
      case 'DELETE_PRODUCT': setProducts(prev => prev.filter(p => p.id !== payload.id)); addLog('Inventaris', `Menghapus produk: ${payload.id}`); break;
      case 'UPDATE_PRODUCT_STATUS': setProducts(prev => prev.map(p => p.id === payload.id ? { ...p, status: payload.status } : p)); addLog('Inventaris', `Status produk ${payload.id} menjadi ${payload.status}`); break;
      case 'ADD_CATEGORY': setCategories(prev => [...prev, payload]); addLog('Kategori', `Menambahkan kategori baru: ${payload}`); break;
      case 'DELETE_CATEGORY': setCategories(prev => prev.filter(c => c !== payload)); addLog('Kategori', `Menghapus kategori: ${payload}`); break;
      case 'UPDATE_ORDER': setOrders(prev => prev.map(o => o.id === payload.id ? { ...o, status: payload.status } : o)); addLog('Pesanan', `Status pesanan ${payload.id} menjadi ${payload.status}`); break;
      case 'ADD_PRIZE': setPrizes(prev => [payload, ...prev]); addLog('Hadiah', `Menambahkan hadiah: ${payload.name}`); break;
      case 'DELETE_PRIZE': setPrizes(prev => prev.filter(p => p.id !== payload.id)); addLog('Hadiah', `Menghapus hadiah: ${payload.id}`); break;
      case 'ADD_PROMO': setPromos(prev => [payload, ...prev]); addLog('Promo', `Membuat kode promo baru: ${payload.code}`); break;
      case 'UPDATE_PROMO_STATUS': setPromos(prev => prev.map(p => p.id === payload.id ? { ...p, status: payload.status } : p)); addLog('Promo', `Mengubah status promo ${payload.code} menjadi ${payload.status}`); break;
      case 'DELETE_PROMO': setPromos(prev => prev.filter(p => p.id !== payload.id)); addLog('Promo', `Menghapus kode promo: ${payload.code}`); break;
      case 'UPDATE_USER': 
        setUsers(prev => prev.map(u => u.id === payload.userId ? { ...u, name: payload.name, username: payload.username, password: payload.password, role: payload.role || u.role } : u));
        if(loggedInUser && loggedInUser.id === payload.userId) setLoggedInUser(prev => ({...prev, name: payload.name, username: payload.username, password: payload.password})); 
        addLog('Pengguna', `Mengubah kredensial staf: ${payload.username}`); break;
      case 'REGISTER_MEMBER':
        const year = new Date().getFullYear().toString().slice(-2);
        const seq = String(members.length + 1).padStart(3, '0');
        const newMemberId = `MEM-${year}${seq}`;
        setMembers(prev => [{ ...payload, id: newMemberId, points: 0, status: 'approved' }, ...prev]);
        addLog('Member', `Menyetujui pendaftaran member: ${payload.name} (${newMemberId})`); break;
      default: break;
    }
  };

  const handleApproval = (id, action) => {
    const req = approvals.find(a => a.id === id); if (!req) return;
    if (loggedInUser.role === 'manager' && req.requesterRole === 'manager' && req.actionType === 'UPDATE_USER') return showToast("Hanya Owner yang dapat menyetujui kredensial Manajer.", "error");
    if (action === 'approve') { addLog('Persetujuan', `Menyetujui permintaan [${req.actionType}]`); executeAction(req.actionType, req.payload); setApprovals(prev => prev.filter(a => a.id !== id)); showToast('Disetujui.', 'success'); } 
    else { addLog('Persetujuan', `Menolak permintaan [${req.actionType}]`); setApprovals(prev => prev.filter(a => a.id !== id)); showToast('Ditolak.', 'info'); }
  };

  const getAvailableStock = (productId) => {
    const product = products.find(p => p.id === productId); if (!product || product.status === 'Maintenance') return 0;
    const rentedAmount = orders.filter(o => ['Menunggu Konfirmasi', 'Siap Diambil', 'Sedang Disewa'].includes(o.status)).reduce((total, order) => {
      const itemInOrder = order.items.find(i => i.id === productId); return total + (itemInOrder ? itemInOrder.quantity : 0);
    }, 0);
    return product.totalStock - rentedAmount;
  };

  const updateOrderStatus = (orderId, newStatus) => {
    requireApproval('UPDATE_ORDER', { id: orderId, status: newStatus }, `Status diubah menjadi ${newStatus}.`);
    if (newStatus === 'Selesai' || newStatus === 'Dibatalkan') {
      const order = orders.find(o => o.id === orderId);
      if(order) {
        order.items.forEach(item => executeAction('UPDATE_PRODUCT_STATUS', { id: item.id, status: 'Maintenance' }));
        addLog('Sistem Otomatis', `Memindahkan pakaian di pesanan ${orderId} ke mode Maintenance.`);
      }
    }
  };

  const addToCart = (product) => {
    if (product.status === 'Maintenance') return showToast('Barang sedang dalam masa perawatan.', 'error');
    setCart(prev => {
      const exist = prev.find(item => item.id === product.id);
      if (exist) return prev.map(item => item.id === product.id ? { ...item, quantity: item.quantity + 1 } : item);
      return [...prev, { ...product, quantity: 1 }];
    });
    showToast(`${product.name} ditambahkan.`, 'success');
  };

  const processOrder = (formData, promoData) => {
    const subtotal = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
    const totalBase = subtotal * formData.duration;
    
    const isDiscount = formData.duration > 7;
    const durationDiscount = isDiscount ? (totalBase * 0.1) : 0;
    
    let promoDiscount = 0;
    if(promoData) {
       promoDiscount = promoData.discountType === 'percentage' ? (totalBase * (promoData.discountValue / 100)) : promoData.discountValue;
    }
    
    const totalBiaya = totalBase - durationDiscount - promoDiscount;
    const earnedPoints = loggedInMember ? Math.floor(totalBiaya / 10000) : 0;

    const newOrder = {
      id: `ORD-${2000 + orders.length + 1}`,
      date: new Date().toISOString().split('T')[0],
      customer: { name: formData.name, phone: formData.phone, identity: formData.identity, address: formData.address, ktpUrl: formData.ktpUrl },
      items: cart.map(c => ({ id: c.id, name: c.name, price: c.price, quantity: c.quantity, image: c.image })),
      duration: formData.duration, startDate: formData.startDate, endDate: formData.endDate,
      total: totalBiaya, subtotalBase: totalBase, durationDiscount, promoDiscount, appliedPromoCode: promoData?.code || null,
      status: 'Menunggu Konfirmasi', memberId: loggedInMember ? loggedInMember.id : null, earnedPoints
    };
    
    if (loggedInMember) {
      setMembers(prev => prev.map(m => m.id === loggedInMember.id ? {...m, points: m.points + earnedPoints} : m));
      setLoggedInMember(prev => ({...prev, points: prev.points + earnedPoints}));
    }

    setOrders([newOrder, ...orders]); setCart([]); setView('success');
    addLog('Pelanggan', `Menerima pesanan baru: ${newOrder.id}`);
  };

  const value = {
    view, setView, products, setProducts, categories, setCategories, orders, setOrders, promos, setPromos,
    cart, setCart, addToCart, removeFromCart: (id) => setCart(p => p.filter(i => i.id !== id)), updateCartQuantity: (id, d) => setCart(p => p.map(i => i.id === id && i.quantity + d > 0 ? { ...i, quantity: i.quantity + d } : i)),
    processOrder, getAvailableStock, users, setUsers, loggedInUser, login, logout,
    members, setMembers, loggedInMember, memberLogin, memberLogout, submitMemberRegistration, prizes, setPrizes, redeemPrize,
    brandConfig, setBrandConfig, cTheme, approvals, requireApproval, handleApproval, exportData, importData, showToast, updateOrderStatus, logs, addLog
  };

  return <AppStateContext.Provider value={value}>{toast && <Toast message={toast.message} type={toast.type} onClose={() => setToast(null)} />}{children}</AppStateContext.Provider>;
};

// ============================================================================
// PUBLIC WEBSITE LAYOUT
// ============================================================================
const CustomerLayout = ({ children }) => {
  const { view, setView, cart, brandConfig, cTheme, loggedInUser, loggedInMember } = useContext(AppStateContext);
  const cartCount = cart.reduce((s, i) => s + i.quantity, 0);
  const [showNav, setShowNav] = useState(false);

  return (
    <div className="flex flex-col min-h-screen bg-gray-50 font-sans pb-10 md:pb-0">
      <header className="bg-white/90 backdrop-blur-md shadow-sm sticky top-0 z-40 supports-[padding-top:env(safe-area-inset-top)]:pt-[env(safe-area-inset-top)] border-b border-gray-100">
        <div className="max-w-6xl mx-auto px-4 py-3">
          <div className="flex justify-between items-center h-12">
            <div className="flex-1 md:hidden">
              <button onClick={() => setShowNav(!showNav)} className="p-2 -ml-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"><Menu className="w-6 h-6" /></button>
            </div>
            <div className="flex-1 flex justify-center cursor-pointer" onClick={() => setView('dashboard')}>
              <div className="flex items-center gap-2 md:gap-3">
                {brandConfig.logoUrl ? <img src={brandConfig.logoUrl} alt="Logo" className="h-9 md:h-11 object-contain drop-shadow-sm" /> : <div className={`p-1.5 md:p-2 rounded-xl bg-gradient-to-br from-gray-800 to-gray-900 text-white shadow-md`}><Package className="w-5 h-5 md:w-6 md:h-6" /></div>}
                <span className="text-xl md:text-2xl font-serif font-semibold text-gray-900 tracking-wide hidden sm:block truncate">{brandConfig.appName}</span>
              </div>
            </div>
            <div className="flex-1 flex justify-end items-center gap-1 sm:gap-2">
              <button onClick={() => loggedInMember ? setView('member_profile') : setView('member_auth')} className={`p-2 rounded-full transition-all hover:bg-gray-100 ${loggedInMember ? cTheme.text : 'text-gray-600'}`} title={loggedInMember ? "Profil" : "Login"}>
                {loggedInMember && loggedInMember.photoUrl ? <img src={loggedInMember.photoUrl} alt="Member" className="w-7 h-7 rounded-full object-cover border shadow-sm" /> : <User className="w-6 h-6" />}
              </button>
              <button onClick={() => setView('cart')} className="p-2 rounded-full relative transition-all duration-200 hover:bg-gray-100 text-gray-600">
                <ShoppingCart className="w-6 h-6" />
                {cartCount > 0 && <span className={`absolute top-0 right-0 ${cTheme.bg} text-white text-[10px] rounded-full w-4 h-4 flex items-center justify-center font-bold`}>{cartCount}</span>}
              </button>
              <button onClick={() => setView('admin')} className={`p-2 rounded-full transition-colors hidden sm:block ${loggedInUser ? `${cTheme.text} ${cTheme.light}` : 'text-gray-500 hover:text-gray-800 hover:bg-gray-100'}`} title="Admin Panel">
                <Shield className="w-5 h-5" />
              </button>
            </div>
          </div>
          <div className="hidden md:flex justify-center mt-3 pb-2 overflow-x-auto no-scrollbar">
            <div className="flex bg-gray-100/80 p-1.5 rounded-full shadow-inner gap-1">
              <button onClick={() => setView('dashboard')} className={`px-5 py-2 rounded-full text-sm font-bold transition-all ${view === 'dashboard' ? 'bg-white text-gray-800 shadow-sm' : 'text-gray-500 hover:text-gray-800'}`}>Beranda</button>
              <button onClick={() => setView('catalog')} className={`px-5 py-2 rounded-full text-sm font-bold transition-all ${view === 'catalog' ? 'bg-white text-gray-800 shadow-sm' : 'text-gray-500 hover:text-gray-800'}`}>Katalog Pakaian</button>
            </div>
          </div>
        </div>
      </header>

      {showNav && (
        <div className="md:hidden fixed inset-0 z-50 flex">
          <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={() => setShowNav(false)}></div>
          <div className="relative w-64 bg-white h-full shadow-2xl p-6 flex flex-col supports-[padding-top:env(safe-area-inset-top)]:pt-[calc(24px+env(safe-area-inset-top))]">
            <button onClick={() => setShowNav(false)} className="absolute top-4 right-4 p-2 bg-gray-100 rounded-full"><X className="w-5 h-5"/></button>
            <h3 className="font-bold text-lg mb-6 border-b pb-4">Menu Utama</h3>
            <div className="space-y-4 flex-1">
              <button onClick={() => {setView('dashboard'); setShowNav(false)}} className="flex items-center gap-3 w-full text-left font-medium text-gray-700"><Home className="w-5 h-5"/> Beranda</button>
              <button onClick={() => {setView('catalog'); setShowNav(false)}} className="flex items-center gap-3 w-full text-left font-medium text-gray-700"><Package className="w-5 h-5"/> Katalog</button>
              <button onClick={() => {loggedInMember ? setView('member_profile') : setView('member_auth'); setShowNav(false)}} className="flex items-center gap-3 w-full text-left font-medium text-gray-700"><User className="w-5 h-5"/> {loggedInMember ? 'Profil Member' : 'Login Member'}</button>
            </div>
            <button onClick={() => {setView('admin'); setShowNav(false)}} className={`flex items-center gap-3 w-full text-left font-medium mt-8 pt-8 border-t ${loggedInUser ? cTheme.text : 'text-gray-700 hover:text-gray-900'}`}><Shield className="w-5 h-5"/> Admin Area</button>
          </div>
        </div>
      )}
      <main className="max-w-6xl mx-auto px-4 py-6 md:py-10 w-full overflow-x-hidden flex-grow">{children}</main>

      <footer className="bg-white border-t border-gray-100 mt-auto pt-12 pb-8">
        <div className="max-w-6xl mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-10 mb-10">
            <div>
              <div className="flex items-center gap-3 mb-6 cursor-pointer" onClick={() => setView('dashboard')}>
                {brandConfig.logoUrl ? <img src={brandConfig.logoUrl} alt="Logo" className="h-8 object-contain" /> : <div className={`p-1.5 rounded-lg bg-gray-900 text-white`}><Package className="w-5 h-5" /></div>}
                <span className="text-2xl font-serif font-semibold text-gray-900 tracking-wide">{brandConfig.appName}</span>
              </div>
              <p className="text-sm text-gray-500 leading-relaxed pr-4 font-light">{brandConfig.slogan}</p>
            </div>
            <div>
              <h4 className="font-bold text-gray-800 mb-5 font-serif tracking-wide text-lg">Layanan Kami</h4>
              <ul className="space-y-3 text-sm text-gray-500">
                <li><button onClick={() => setView('catalog')} className="hover:text-gray-900 transition-colors flex items-center gap-2"><ChevronRight className="w-3 h-3"/> Katalog Pakaian</button></li>
                <li><button onClick={() => setView('member_auth')} className="hover:text-gray-900 transition-colors flex items-center gap-2"><ChevronRight className="w-3 h-3"/> Pendaftaran Member</button></li>
                <li><button onClick={() => setView('member_profile')} className="hover:text-gray-900 transition-colors flex items-center gap-2"><ChevronRight className="w-3 h-3"/> Tukar Poin Hadiah</button></li>
              </ul>
            </div>
            <div>
              <h4 className="font-bold text-gray-800 mb-5 font-serif tracking-wide text-lg">Hubungi Kami</h4>
              <ul className="space-y-4 text-sm text-gray-500">
                <li className="flex items-center gap-3"><div className="w-8 h-8 rounded-full bg-gray-50 flex items-center justify-center text-gray-600"><FileText className="w-4 h-4"/></div> {brandConfig.companyEmail}</li>
                {brandConfig.socialMedia.map((soc, idx) => (
                  <li key={`ft-soc-${idx}`} className="flex items-center gap-3">
                    <div className="w-8 h-8 rounded-full bg-gray-50 flex items-center justify-center text-gray-600"><span className="font-bold text-xs uppercase">{soc.type.charAt(0)}</span></div>
                    <span className="font-medium text-gray-700">{soc.type}:</span> {soc.value}
                  </li>
                ))}
              </ul>
            </div>
          </div>
          <div className="border-t border-gray-100 pt-8 flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-gray-400 font-medium">
            <p>&copy; {new Date().getFullYear()} {brandConfig.appName}. Hak Cipta Dilindungi.</p>
            <div className="flex gap-6"><span className="cursor-pointer hover:text-gray-600">Syarat & Ketentuan</span><span className="cursor-pointer hover:text-gray-600">Kebijakan Privasi</span></div>
          </div>
        </div>
      </footer>
    </div>
  );
};

// ============================================================================
// CUSTOMER PAGES
// ============================================================================
const DashboardView = () => {
  const { setView, brandConfig, cTheme } = useContext(AppStateContext);
  return (
    <div className="space-y-8 md:space-y-12 animate-fade-in-down w-full flex-grow">
      <div className={`${cTheme.bg} rounded-[2.5rem] p-8 sm:p-10 md:p-16 text-white shadow-2xl relative overflow-hidden`}>
        <div className="absolute inset-0 bg-gradient-to-r from-black/20 to-transparent pointer-events-none"></div>
        <div className="absolute top-0 right-0 w-72 h-72 bg-white/10 rounded-full blur-3xl -mr-10 -mt-10 pointer-events-none"></div>
        <div className="absolute bottom-0 left-10 w-48 h-48 bg-black/10 rounded-full blur-2xl pointer-events-none"></div>
        <div className="relative z-10 max-w-3xl">
          <h1 className="text-4xl sm:text-5xl md:text-6xl font-serif font-semibold mb-4 md:mb-6 leading-tight tracking-wide drop-shadow-sm">{brandConfig.appName}</h1>
          <p className="text-base sm:text-lg md:text-xl text-white/90 mb-8 md:mb-10 font-light tracking-wide max-w-xl">{brandConfig.slogan}</p>
          <div className="flex flex-col sm:flex-row flex-wrap gap-4 sm:gap-5">
             <button onClick={() => setView('catalog')} className="bg-white text-gray-900 px-8 py-4 rounded-xl font-bold hover:bg-gray-50 transition-all shadow-lg hover:shadow-xl active:scale-95 flex items-center justify-center gap-2">Eksplorasi Katalog <ChevronRight className="w-5 h-5"/></button>
             <button onClick={() => setView('member_auth')} className="bg-white/20 text-white px-8 py-4 rounded-xl font-bold hover:bg-white/30 backdrop-blur-md transition-all border border-white/30 active:scale-95 flex items-center justify-center gap-2"><Award className="w-5 h-5"/> Join Member Eksklusif</button>
          </div>
        </div>
      </div>
      
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
        <div className="bg-white p-6 md:p-8 rounded-3xl shadow-sm border border-gray-100 flex flex-col items-center text-center group hover:shadow-md transition-shadow">
          <div className={`${cTheme.light} p-4 rounded-2xl mb-5 group-hover:scale-110 transition-transform`}><Package className="w-8 h-8"/></div>
          <h3 className="font-bold text-gray-800 mb-2 font-serif text-lg tracking-wide">Kualitas Premium</h3>
          <p className="text-sm text-gray-500 leading-relaxed font-light">Koleksi terawat dan dijamin higienis untuk momen spesial Anda.</p>
        </div>
        <div className="bg-white p-6 md:p-8 rounded-3xl shadow-sm border border-gray-100 flex flex-col items-center text-center group hover:shadow-md transition-shadow">
          <div className={`${cTheme.light} p-4 rounded-2xl mb-5 group-hover:scale-110 transition-transform`}><CheckCircle className="w-8 h-8"/></div>
          <h3 className="font-bold text-gray-800 mb-2 font-serif text-lg tracking-wide">Bayar di Tempat</h3>
          <p className="text-sm text-gray-500 leading-relaxed font-light">Transaksi 100% aman, bayar saat Anda mengambil barang di butik.</p>
        </div>
        <div className="bg-white p-6 md:p-8 rounded-3xl shadow-sm border border-gray-100 flex flex-col items-center text-center group hover:shadow-md transition-shadow">
          <div className={`${cTheme.light} p-4 rounded-2xl mb-5 group-hover:scale-110 transition-transform`}><Award className="w-8 h-8"/></div>
          <h3 className="font-bold text-gray-800 mb-2 font-serif text-lg tracking-wide">Poin Reward</h3>
          <p className="text-sm text-gray-500 leading-relaxed font-light">Sewa dan kumpulkan poin berharga untuk ditukar hadiah menarik.</p>
        </div>
      </div>

      <div className="bg-white p-8 md:p-14 rounded-[2rem] shadow-sm border border-gray-100 flex flex-col md:flex-row gap-8 md:gap-16 items-center relative overflow-hidden">
         <div className="absolute top-0 left-0 w-32 h-32 bg-gray-50 rounded-full blur-3xl -ml-10 -mt-10 pointer-events-none"></div>
         <div className="flex-1 relative z-10 text-center md:text-left">
            <h2 className="text-3xl md:text-4xl font-serif font-bold text-gray-800 mb-6 tracking-wide">Mengenal {brandConfig.appName}</h2>
            <div className="w-16 h-1.5 bg-gray-200 mb-8 rounded-full mx-auto md:mx-0"></div>
            <p className="text-gray-600 leading-relaxed text-sm md:text-base whitespace-pre-line font-light">{brandConfig.companyBio}</p>
         </div>
         <div className="w-full md:w-1/3 flex justify-center relative z-10">
            {brandConfig.logoUrl ? 
               <img src={brandConfig.logoUrl} className="w-full max-h-56 object-contain drop-shadow-md" alt="Logo Perusahaan"/> : 
               <div className={`w-full max-w-[240px] h-56 rounded-3xl bg-gradient-to-br from-gray-50 to-gray-100 border border-gray-200 shadow-inner flex items-center justify-center`}><Package className={`w-24 h-24 text-gray-300`}/></div>
            }
         </div>
      </div>
    </div>
  );
};

const CatalogView = () => {
  const { products, categories, cart, addToCart, getAvailableStock, cTheme } = useContext(AppStateContext);
  const [activeCategory, setActiveCategory] = useState('Semua');
  const [searchQuery, setSearchQuery] = useState('');
  
  const filteredProducts = products.filter(p => 
    p.status !== 'Maintenance' &&
    (activeCategory === 'Semua' || p.category === activeCategory) && 
    (p.name.toLowerCase().includes(searchQuery.toLowerCase()) || p.desc.toLowerCase().includes(searchQuery.toLowerCase()) || p.id.toLowerCase().includes(searchQuery.toLowerCase()))
  );

  return (
    <div className="animate-fade-in-down w-full flex-grow">
      <div className="text-center mb-8 md:mb-12 pt-4">
        <h1 className="text-3xl md:text-4xl font-serif font-bold text-gray-800 mb-4 tracking-wide">Katalog Eksklusif</h1>
        <p className="text-gray-500 font-light text-base md:text-lg">Temukan pilihan pakaian terbaik untuk momen istimewa Anda.</p>
      </div>

      <div className="relative mb-6 md:mb-8 max-w-3xl mx-auto">
        <Search className="absolute left-5 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
        <input type="text" className="w-full pl-14 pr-6 py-4 border border-gray-200 rounded-full bg-white focus:outline-none focus:border-gray-400 focus:ring-4 focus:ring-gray-50 text-[16px] shadow-sm transition-all" placeholder="Cari pakaian, gaun, atau kode ID..." value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} />
      </div>

      <div className="w-full overflow-x-auto pb-4 mb-6 md:mb-10">
        <div className="flex gap-3 md:gap-4 w-max px-2 mx-auto">
          <button onClick={() => setActiveCategory('Semua')} className={`px-6 py-3 rounded-full whitespace-nowrap font-medium transition-all duration-300 active:scale-95 text-sm md:text-base ${activeCategory === 'Semua' ? 'bg-gray-900 text-white shadow-lg' : 'bg-white text-gray-600 border border-gray-200 hover:bg-gray-50 shadow-sm'}`}>Semua Koleksi</button>
          {categories.map(cat => <button key={`cat-${cat}`} onClick={() => setActiveCategory(cat)} className={`px-6 py-3 rounded-full whitespace-nowrap font-medium transition-all duration-300 active:scale-95 text-sm md:text-base ${activeCategory === cat ? `${cTheme.bg} text-white shadow-lg ${cTheme.shadow}` : 'bg-white text-gray-600 border border-gray-200 hover:bg-gray-50 shadow-sm'}`}>{cat}</button>)}
        </div>
      </div>
      
      {filteredProducts.length === 0 ? (
        <div className="text-center py-20 bg-white rounded-3xl border border-dashed border-gray-200">
           <Package className="w-16 h-16 mx-auto mb-4 text-gray-300"/>
           <h3 className="text-xl font-bold text-gray-800 mb-2">Katalog Kosong</h3>
           <p className="text-gray-500">Saat ini belum ada produk yang ditambahkan ke kategori ini.</p>
        </div>
      ) : (
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5 md:gap-6">
          {filteredProducts.map(product => {
            const avail = getAvailableStock(product.id);
            const cartItem = cart.find(i => i.id === product.id);
            const canAdd = avail > (cartItem ? cartItem.quantity : 0);
            return (
              <div key={`prod-${product.id}`} className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-lg transition-all duration-300 flex flex-col group">
                <div className="h-48 sm:h-56 overflow-hidden relative bg-gray-100">
                  <img src={product.image} alt={product.name} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" onError={(e) => { e.target.src = 'https://placehold.co/400?text=No+Image'; }} />
                  <div className="absolute top-3 right-3 bg-white/90 backdrop-blur px-3 py-1 rounded-full text-xs font-bold text-gray-700 shadow-sm">{product.category}</div>
                  {avail === 0 && <div className="absolute inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center"><span className="bg-red-500 text-white px-4 py-2 rounded-lg font-bold shadow-lg">Stok Habis</span></div>}
                </div>
                <div className="p-4 md:p-5 flex flex-col flex-grow">
                  <h3 className="font-bold text-lg text-gray-800 leading-tight mb-1">{product.name}</h3>
                  <span className="text-xs text-gray-500 font-mono bg-gray-50 px-2 py-0.5 rounded w-max mb-3">{product.id}</span>
                  <p className={`${cTheme.text} font-bold text-xl mb-3`}>{formatRupiah(product.price)}<span className="text-sm font-normal text-gray-500"> / hari</span></p>
                  <p className="text-sm text-gray-600 mb-5 line-clamp-2 flex-grow">{product.desc}</p>
                  <div className="mt-auto pt-4 border-t border-gray-100 flex items-center justify-between">
                    <span className="text-sm text-gray-500 font-medium bg-gray-50 px-3 py-1.5 rounded-lg">Sisa: {avail}</span>
                    <button onClick={() => addToCart(product)} disabled={!canAdd} className={`px-4 py-2.5 rounded-xl font-bold transition-all active:scale-95 flex items-center gap-2 ${canAdd ? `${cTheme.bg} text-white shadow-md` : 'bg-gray-100 text-gray-400 cursor-not-allowed'}`}><ShoppingCart className="w-4 h-4" /> Tambah</button>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
};

const CartView = () => {
  const { cart, removeFromCart, updateCartQuantity, setView, getAvailableStock, cTheme } = useContext(AppStateContext);
  const subtotal = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);

  if (cart.length === 0) return (
    <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-8 md:p-12 text-center max-w-2xl mx-auto w-full mt-6 md:mt-10 mx-4">
      <ShoppingCart className="w-16 md:w-20 h-16 md:h-20 text-gray-200 mx-auto mb-4 md:mb-5" />
      <h2 className="text-xl md:text-2xl font-bold text-gray-800 mb-2">Keranjang Kosong</h2>
      <button onClick={() => setView('catalog')} className={`mt-5 md:mt-6 w-full sm:w-auto ${cTheme.bg} text-white px-8 py-3.5 rounded-xl font-bold shadow-md active:scale-95 transition-all`}>Lihat Koleksi</button>
    </div>
  );

  return (
    <div className="max-w-4xl mx-auto animate-fade-in-down w-full">
      <h1 className="text-2xl md:text-3xl font-bold text-gray-800 mb-5 md:mb-6">Keranjang Sewa</h1>
      <div className="flex flex-col lg:flex-row gap-5 md:gap-6">
        <div className="flex-grow space-y-4">
          {cart.map(item => {
            const avail = getAvailableStock(item.id);
            return (
              <div key={`cart-${item.id}`} className="bg-white p-3 md:p-4 rounded-2xl shadow-sm border border-gray-100 flex flex-col sm:flex-row sm:items-center gap-4">
                <img src={item.image} alt={item.name} className="w-full sm:w-24 h-40 sm:h-24 object-cover rounded-xl bg-gray-100" />
                <div className="flex-grow">
                  <h3 className="font-bold text-gray-800 text-base md:text-lg">{item.name}</h3>
                  <p className={`${cTheme.text} font-bold mt-0.5 md:mt-1`}>{formatRupiah(item.price)} <span className="text-xs text-gray-400 font-normal">/ hari</span></p>
                </div>
                <div className="flex items-center justify-between sm:justify-end gap-3 mt-2 sm:mt-0">
                  <div className="flex items-center border border-gray-200 rounded-xl overflow-hidden h-10 md:h-11 bg-gray-50">
                    <button onClick={() => updateCartQuantity(item.id, -1)} className="px-4 h-full hover:bg-gray-200 font-bold transition-colors min-h-[44px]">-</button>
                    <span className="w-8 md:w-10 text-center font-bold text-gray-800">{item.quantity}</span>
                    <button onClick={() => updateCartQuantity(item.id, 1)} disabled={item.quantity >= avail} className="px-4 h-full hover:bg-gray-200 font-bold transition-colors disabled:opacity-30 min-h-[44px]">+</button>
                  </div>
                  <button onClick={() => removeFromCart(item.id)} className="p-2.5 text-red-500 hover:bg-red-50 rounded-xl transition-colors bg-red-50/50 min-h-[44px]"><Trash2 className="w-5 h-5" /></button>
                </div>
              </div>
            );
          })}
        </div>
        <div className="w-full lg:w-80 flex-shrink-0">
          <div className="bg-white p-5 md:p-6 rounded-2xl shadow-sm border border-gray-100 sticky top-24">
            <h3 className="font-bold text-lg text-gray-800 mb-4 pb-4 border-b border-gray-100">Ringkasan</h3>
            <div className="flex justify-between mb-3 text-sm text-gray-600"><span>Total Item</span><span className="font-bold text-gray-800">{cart.reduce((s, i) => s + i.quantity, 0)} Pcs</span></div>
            <div className="flex justify-between mb-5 md:mb-6 text-base text-gray-600"><span>Subtotal / hari</span><span className="font-bold text-gray-800">{formatRupiah(subtotal)}</span></div>
            <button onClick={() => setView('checkout')} className={`w-full ${cTheme.bg} text-white py-3.5 rounded-xl font-bold shadow-md hover:brightness-110 active:scale-95 transition-all`}>Lanjut Checkout</button>
          </div>
        </div>
      </div>
    </div>
  );
};

const CheckoutView = () => {
  const { cart, processOrder, setView, cTheme, loggedInMember, showToast, promos } = useContext(AppStateContext);
  const [formData, setFormData] = useState({ 
    name: loggedInMember?.name || '', identity: loggedInMember?.identity || '', 
    phone: loggedInMember?.phone || '', address: loggedInMember?.address || '', 
    startDate: '', endDate: '', ktpUrl: loggedInMember?.ktpUrl || null 
  });
  
  // Promo State
  const [promoInput, setPromoInput] = useState('');
  const [appliedPromo, setAppliedPromo] = useState(null);

  const getDuration = () => {
    if(!formData.startDate || !formData.endDate) return 1;
    const start = new Date(formData.startDate); const end = new Date(formData.endDate);
    const diffDays = Math.ceil(Math.abs(end - start) / (1000 * 60 * 60 * 24)) + 1; 
    return diffDays > 0 ? diffDays : 1;
  };
  
  const duration = getDuration();
  const subtotalPerDay = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
  const totalBase = subtotalPerDay * duration;
  
  const isDiscount = duration > 7;
  const durationDiscount = isDiscount ? (totalBase * 0.1) : 0;
  
  // Promo Calculation Safety Check
  const isValidPromo = appliedPromo && totalBase >= appliedPromo.minPurchase;
  let promoDiscountAmount = 0;
  if (isValidPromo) {
     promoDiscountAmount = appliedPromo.discountType === 'percentage' ? (totalBase * (appliedPromo.discountValue / 100)) : appliedPromo.discountValue;
  }
  
  const totalBiaya = totalBase - durationDiscount - promoDiscountAmount;
  const potentialPoints = Math.floor(totalBiaya / 10000);

  const handleKtpUpload = (e) => { const file = e.target.files[0]; if (file) { const r = new FileReader(); r.onloadend = () => setFormData(p => ({...p, ktpUrl: r.result})); r.readAsDataURL(file); } };
  
  const handleApplyPromo = () => {
    if (!promoInput.trim()) return;
    const foundPromo = promos.find(p => p.code.toUpperCase() === promoInput.toUpperCase() && p.status === 'Aktif');
    if (!foundPromo) return showToast('Kode voucher tidak ditemukan atau tidak aktif.', 'error');
    if (new Date(foundPromo.validUntil) < new Date()) return showToast('Voucher sudah kadaluarsa.', 'error');
    if (totalBase < foundPromo.minPurchase) return showToast(`Minimal belanja untuk voucher ini adalah ${formatRupiah(foundPromo.minPurchase)}`, 'error');
    
    setAppliedPromo(foundPromo);
    showToast('Voucher berhasil digunakan!', 'success');
  };

  const removePromo = () => { setAppliedPromo(null); setPromoInput(''); };

  const handleSubmit = (e) => { 
    e.preventDefault(); 
    if(new Date(formData.endDate) < new Date(formData.startDate)) { showToast("Tanggal akhir tidak valid!", "error"); return; }
    processOrder({...formData, duration}, isValidPromo ? appliedPromo : null); 
  };

  return (
    <div className="max-w-5xl mx-auto animate-fade-in-down w-full">
      <div className="flex items-center gap-3 md:gap-4 mb-5 md:mb-6">
        <button onClick={() => setView('cart')} className="text-gray-500 hover:bg-gray-100 p-2 rounded-full transition-colors"><ChevronLeft className="w-6 h-6"/></button>
        <h1 className="text-xl md:text-3xl font-bold text-gray-800">Checkout</h1>
      </div>

      {!loggedInMember && (
        <div className="bg-blue-50 border border-blue-200 text-blue-800 p-4 rounded-2xl mb-5 md:mb-6 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 shadow-sm">
          <div className="flex items-center gap-3">
             <Award className="w-6 h-6 flex-shrink-0 text-blue-500"/>
             <div><p className="font-bold text-sm md:text-base">Dapatkan {potentialPoints} Poin Reward!</p><p className="text-xs md:text-sm opacity-90">Login/daftar member untuk kumpulkan poin.</p></div>
          </div>
          <button onClick={() => setView('member_auth')} className="bg-blue-600 text-white w-full sm:w-auto px-5 py-2.5 rounded-xl text-sm font-bold shadow hover:bg-blue-700 transition-colors whitespace-nowrap">Login Member</button>
        </div>
      )}

      <div className="flex flex-col lg:flex-row gap-5 md:gap-6">
        <form onSubmit={handleSubmit} className="flex-grow bg-white p-5 md:p-8 rounded-3xl shadow-sm border border-gray-100 space-y-6 md:space-y-8 w-full">
          <section>
            <h2 className="font-bold text-base md:text-lg text-gray-800 mb-4 border-b border-gray-100 pb-2 flex items-center gap-2"><User className="w-5 h-5 text-gray-400"/> Data Penyewa</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-5">
              <div><label className="block text-sm font-medium text-gray-700 mb-1.5">Nama Sesuai KTP</label><input required type="text" value={formData.name} onChange={e => setFormData({...formData, name: e.target.value})} className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl outline-none focus:bg-white focus:border-gray-400 text-[16px] transition-all" /></div>
              <div><label className="block text-sm font-medium text-gray-700 mb-1.5">NIK KTP</label><input required type="number" value={formData.identity} onChange={e => setFormData({...formData, identity: e.target.value})} className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl outline-none focus:bg-white focus:border-gray-400 text-[16px] transition-all" /></div>
              <div><label className="block text-sm font-medium text-gray-700 mb-1.5">WhatsApp</label><input required type="tel" value={formData.phone} onChange={e => setFormData({...formData, phone: e.target.value})} className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl outline-none focus:bg-white focus:border-gray-400 text-[16px] transition-all" /></div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1.5">Upload KTP</label>
                <label className="flex items-center gap-2 bg-gray-50 border border-gray-200 px-4 py-3 rounded-xl cursor-pointer hover:bg-gray-100 transition-colors text-sm font-medium text-gray-600">
                  <Upload className="w-5 h-5 flex-shrink-0" /> <span className="truncate">{formData.ktpUrl ? 'KTP Terunggah' : 'Pilih File / Kamera'}</span>
                  <input required={!formData.ktpUrl} type="file" accept="image/*" onChange={handleKtpUpload} className="hidden" />
                </label>
              </div>
              <div className="md:col-span-2"><label className="block text-sm font-medium text-gray-700 mb-1.5">Alamat Domisili</label><textarea required rows="2" value={formData.address} onChange={e => setFormData({...formData, address: e.target.value})} className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl outline-none focus:bg-white focus:border-gray-400 text-[16px] transition-all"></textarea></div>
            </div>
          </section>

          <section>
            <h2 className="font-bold text-base md:text-lg text-gray-800 mb-4 border-b border-gray-100 pb-2 flex items-center gap-2"><CalendarIcon className="w-5 h-5 text-gray-400"/> Rencana Penyewaan</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-5">
              <div><label className="block text-sm font-medium text-gray-700 mb-1.5">Tgl Mulai (Ambil)</label><input required type="date" min={new Date().toISOString().split('T')[0]} value={formData.startDate} onChange={e => setFormData({...formData, startDate: e.target.value})} className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl outline-none focus:bg-white focus:border-gray-400 text-[16px] transition-all" /></div>
              <div><label className="block text-sm font-medium text-gray-700 mb-1.5">Tgl Akhir (Kembali)</label><input required type="date" min={formData.startDate || new Date().toISOString().split('T')[0]} value={formData.endDate} onChange={e => setFormData({...formData, endDate: e.target.value})} className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl outline-none focus:bg-white focus:border-gray-400 text-[16px] transition-all" /></div>
            </div>
          </section>
          <button type="submit" className={`w-full ${cTheme.bg} text-white py-4 rounded-xl font-bold text-lg hover:brightness-110 shadow-lg active:scale-95 transition-all`}>Proses Pesanan Sekarang</button>
        </form>

        <div className="w-full lg:w-96 flex-shrink-0 space-y-6">
          <div className="bg-white p-5 md:p-6 rounded-3xl shadow-sm border border-gray-100 sticky top-24 w-full">
            <h3 className="font-bold text-gray-800 mb-4 flex items-center gap-2"><Tag className="w-5 h-5 text-gray-400"/> Punya Voucher Promo?</h3>
            {!isValidPromo ? (
              <div className="flex gap-2">
                <input type="text" placeholder="Masukkan kode..." value={promoInput} onChange={(e) => setPromoInput(e.target.value)} className="w-full px-4 py-2 bg-gray-50 border border-gray-200 rounded-xl outline-none text-[16px] focus:bg-white focus:border-gray-400 uppercase" />
                <button type="button" onClick={handleApplyPromo} className="bg-gray-900 text-white px-4 py-2 rounded-xl font-bold hover:bg-black">Terapkan</button>
              </div>
            ) : (
              <div className="bg-green-50 border border-green-200 p-3 rounded-xl flex justify-between items-center">
                 <div><p className="text-xs text-green-600 font-bold uppercase">Promo Digunakan</p><p className="font-mono font-bold text-green-800">{appliedPromo.code}</p></div>
                 <button type="button" onClick={removePromo} className="text-red-500 hover:bg-red-50 p-1.5 rounded-lg"><X className="w-4 h-4"/></button>
              </div>
            )}
            {appliedPromo && !isValidPromo && <p className="text-xs text-red-500 mt-2">Voucher dilepas karena minimal belanja tidak terpenuhi.</p>}
          </div>

          <div className="bg-gray-900 p-6 md:p-8 rounded-3xl shadow-xl text-white w-full">
            <h3 className="font-bold text-lg md:text-xl mb-5 md:mb-6 border-b border-gray-700 pb-4">Ringkasan Pesanan</h3>
            <div className="space-y-4 mb-6">
              {cart.map(item => (
                <div key={`co-${item.id}`} className="flex gap-3 md:gap-4">
                  <img src={item.image} alt={item.name} className="w-14 h-14 md:w-16 md:h-16 rounded-lg object-cover bg-gray-800 flex-shrink-0" />
                  <div className="flex-1 overflow-hidden">
                    <h4 className="font-bold text-xs md:text-sm leading-tight text-gray-200 mb-1 truncate">{item.name}</h4>
                    <p className="text-[10px] md:text-xs text-gray-400">{item.quantity}x @ {formatRupiah(item.price)}</p>
                  </div>
                </div>
              ))}
            </div>
            <div className="pt-5 border-t border-gray-700 space-y-3">
              <div className="flex justify-between text-xs md:text-sm text-gray-300"><span>Subtotal / Hari</span><span className="font-medium text-white">{formatRupiah(subtotalPerDay)}</span></div>
              <div className="flex justify-between text-xs md:text-sm text-gray-300"><span>Durasi Total</span><span className="font-medium text-white">{duration} Hari</span></div>
              <div className="flex justify-between text-xs md:text-sm text-gray-300"><span>Total Tagihan Awal</span><span className="font-medium text-white">{formatRupiah(totalBase)}</span></div>
              
              {isDiscount && <div className="flex justify-between text-xs md:text-sm text-green-400"><span>Diskon (&gt; 7 Hari)</span><span className="font-medium">-{formatRupiah(durationDiscount)}</span></div>}
              {isValidPromo && <div className="flex justify-between text-xs md:text-sm text-green-400"><span>Promo Voucher</span><span className="font-medium">-{formatRupiah(promoDiscountAmount)}</span></div>}
              
              <div className="flex justify-between items-end pt-5 border-t border-gray-700 mt-2">
                <span className="font-bold text-sm md:text-base text-gray-300">Total Akhir</span>
                <span className={`font-bold text-xl md:text-2xl ${cTheme.text}`}>{formatRupiah(totalBiaya)}</span>
              </div>
              {loggedInMember && <div className="mt-4 p-3 bg-gray-800 rounded-xl border border-gray-700 flex justify-between items-center"><span className="text-xs md:text-sm font-medium text-gray-400">Poin Didapat</span><span className="font-bold text-yellow-400 flex items-center gap-1 text-sm"><Award className="w-4 h-4"/> +{potentialPoints}</span></div>}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

const SuccessView = () => {
  const { setView, cTheme } = useContext(AppStateContext);
  return (
    <div className="bg-white rounded-3xl shadow-xl border border-gray-100 p-6 sm:p-8 md:p-12 text-center max-w-2xl mx-auto mt-6 md:mt-10 animate-fade-in-down relative overflow-hidden mx-4">
      <div className={`absolute top-0 left-0 w-full h-2 ${cTheme.bg}`}></div>
      <div className="w-20 h-20 md:w-24 md:h-24 bg-green-50 rounded-full flex items-center justify-center mx-auto mb-5 md:mb-6"><CheckCircle className="w-10 h-10 md:w-12 md:h-12 text-green-500" /></div>
      <h2 className="text-2xl md:text-3xl font-bold text-gray-800 mb-2 md:mb-3">Berhasil!</h2>
      <p className="text-sm md:text-lg text-gray-600 mb-6 md:mb-8">Pesanan diterima ("Menunggu Konfirmasi").</p>
      <button onClick={() => setView('dashboard')} className="w-full sm:w-auto bg-gray-900 text-white px-8 py-4 rounded-xl font-bold text-base md:text-lg hover:bg-black transition-colors shadow-lg active:scale-95">Kembali Beranda</button>
    </div>
  );
};

const MemberAuthView = () => {
  const { memberLogin, submitMemberRegistration, cTheme, showToast } = useContext(AppStateContext);
  const [tab, setTab] = useState('login');
  
  const [uname, setUname] = useState(''); const [pwd, setPwd] = useState('');
  const [formData, setFormData] = useState({ username: '', password: '', name: '', identity: '', phone: '', birthPlace: '', birthDate: '', gender: 'Perempuan', address: '', email: '', socialMedia: '', photoUrl: null, ktpUrl: null });

  const handleLogin = (e) => { e.preventDefault(); if(!memberLogin(uname, pwd)) showToast('Username salah atau belum disetujui.', 'error'); };
  const handleRegister = (e) => { e.preventDefault(); submitMemberRegistration(formData); setTab('login'); };
  const toBase64 = (file, callback) => { const r = new FileReader(); r.onloadend = () => callback(r.result); r.readAsDataURL(file); };

  return (
    <div className="max-w-xl mx-auto animate-fade-in-down w-full px-4 sm:px-0">
      <div className="bg-white rounded-3xl shadow-lg border border-gray-100 overflow-hidden w-full">
        <div className="flex border-b border-gray-200 w-full overflow-x-auto no-scrollbar">
          <button onClick={() => setTab('login')} className={`flex-1 py-4 font-bold text-center text-sm md:text-base transition-colors min-w-[120px] ${tab === 'login' ? `${cTheme.text} border-b-2 ${cTheme.border}` : 'text-gray-500 hover:bg-gray-50'}`}>Masuk</button>
          <button onClick={() => setTab('register')} className={`flex-1 py-4 font-bold text-center text-sm md:text-base transition-colors min-w-[120px] ${tab === 'register' ? `${cTheme.text} border-b-2 ${cTheme.border}` : 'text-gray-500 hover:bg-gray-50'}`}>Daftar Member</button>
        </div>
        
        <div className="p-6 md:p-8 w-full">
          {tab === 'login' && (
            <form onSubmit={handleLogin} className="space-y-4 md:space-y-5">
              <div className="text-center mb-5 md:mb-6">
                 <div className={`w-14 h-14 md:w-16 md:h-16 ${cTheme.light} rounded-full flex items-center justify-center mx-auto mb-3`}><User className={`w-6 h-6 md:w-8 md:h-8 ${cTheme.text}`}/></div>
                 <h2 className="text-lg md:text-xl font-bold text-gray-800">Selamat Datang</h2>
              </div>
              <div><label className="block text-sm font-medium text-gray-700 mb-1.5">Username</label><input required type="text" value={uname} onChange={e=>setUname(e.target.value)} className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:bg-white focus:ring-2 outline-none transition-all text-[16px]" /></div>
              <div><label className="block text-sm font-medium text-gray-700 mb-1.5">Password</label><input required type="password" value={pwd} onChange={e=>setPwd(e.target.value)} className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:bg-white focus:ring-2 outline-none transition-all text-[16px]" /></div>
              <button type="submit" className={`w-full ${cTheme.bg} text-white py-3.5 rounded-xl font-bold shadow-md active:scale-95 transition-all mt-4 text-[16px]`}>Login Member</button>
            </form>
          )}

          {tab === 'register' && (
            <form onSubmit={handleRegister} className="space-y-4">
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div className="sm:col-span-2 flex flex-col sm:flex-row gap-4">
                  <label className="flex-1 flex flex-col items-center justify-center p-4 border-2 border-dashed border-gray-300 rounded-2xl cursor-pointer hover:bg-gray-50 text-center text-sm font-medium text-gray-600 bg-white min-h-[100px]">
                    <UserPlus className="w-6 h-6 mb-2 text-gray-400" /> <span className="truncate">{formData.photoUrl ? 'Foto OK' : 'Foto Diri'}</span>
                    <input required={!formData.photoUrl} type="file" accept="image/*" className="hidden" onChange={e => {if(e.target.files[0]) toBase64(e.target.files[0], res => setFormData({...formData, photoUrl: res}))}}/>
                  </label>
                  <label className="flex-1 flex flex-col items-center justify-center p-4 border-2 border-dashed border-gray-300 rounded-2xl cursor-pointer hover:bg-gray-50 text-center text-sm font-medium text-gray-600 bg-white min-h-[100px]">
                    <Upload className="w-6 h-6 mb-2 text-gray-400" /> <span className="truncate">{formData.ktpUrl ? 'KTP OK' : 'Foto KTP'}</span>
                    <input required={!formData.ktpUrl} type="file" accept="image/*" className="hidden" onChange={e => {if(e.target.files[0]) toBase64(e.target.files[0], res => setFormData({...formData, ktpUrl: res}))}}/>
                  </label>
                </div>
                <div><label className="block text-xs font-medium text-gray-700 mb-1">Username</label><input required type="text" value={formData.username} onChange={e=>setFormData({...formData, username: e.target.value})} className="w-full px-3 py-2 bg-gray-50 border rounded-lg text-[16px] md:text-sm outline-none focus:border-gray-400" /></div>
                <div><label className="block text-xs font-medium text-gray-700 mb-1">Password</label><input required type="password" value={formData.password} onChange={e=>setFormData({...formData, password: e.target.value})} className="w-full px-3 py-2 bg-gray-50 border rounded-lg text-[16px] md:text-sm outline-none focus:border-gray-400" /></div>
                <div className="sm:col-span-2 border-t pt-4"><label className="block text-xs font-medium text-gray-700 mb-1">Nama Sesuai KTP</label><input required type="text" value={formData.name} onChange={e=>setFormData({...formData, name: e.target.value})} className="w-full px-3 py-2 bg-gray-50 border rounded-lg text-[16px] md:text-sm outline-none focus:border-gray-400" /></div>
                <div><label className="block text-xs font-medium text-gray-700 mb-1">NIK</label><input required type="number" value={formData.identity} onChange={e=>setFormData({...formData, identity: e.target.value})} className="w-full px-3 py-2 bg-gray-50 border rounded-lg text-[16px] md:text-sm outline-none focus:border-gray-400" /></div>
                <div><label className="block text-xs font-medium text-gray-700 mb-1">WhatsApp</label><input required type="tel" value={formData.phone} onChange={e=>setFormData({...formData, phone: e.target.value})} className="w-full px-3 py-2 bg-gray-50 border rounded-lg text-[16px] md:text-sm outline-none focus:border-gray-400" /></div>
                <div className="sm:col-span-2"><label className="block text-xs font-medium text-gray-700 mb-1">Alamat Domisili</label><textarea required rows="2" value={formData.address} onChange={e=>setFormData({...formData, address: e.target.value})} className="w-full px-3 py-2 bg-gray-50 border rounded-lg text-[16px] md:text-sm outline-none focus:border-gray-400"></textarea></div>
              </div>
              <button type="submit" className={`w-full ${cTheme.bg} text-white py-3.5 rounded-xl font-bold shadow-md active:scale-95 transition-all mt-4 text-[16px]`}>Kirim Permohonan</button>
            </form>
          )}
        </div>
      </div>
    </div>
  );
};

const MemberProfileView = () => {
  const { loggedInMember, memberLogout, cTheme, orders, prizes, redeemPrize } = useContext(AppStateContext);
  const [tab, setTab] = useState('profile');
  
  if (!loggedInMember) return null;
  const myOrders = orders.filter(o => o.memberId === loggedInMember.id);

  return (
    <div className="max-w-5xl mx-auto animate-fade-in-down flex flex-col lg:flex-row gap-6 w-full">
      <div className="w-full lg:w-80 flex-shrink-0">
        <div className="bg-white rounded-3xl shadow-sm border border-gray-100 p-6 flex flex-col items-center text-center">
          <div className="relative mb-4">
             {loggedInMember.photoUrl ? <img src={loggedInMember.photoUrl} alt={loggedInMember.name} className="w-24 h-24 md:w-28 md:h-28 rounded-full object-cover border-4 border-gray-100 shadow-md" /> : <div className="w-24 h-24 md:w-28 md:h-28 bg-gray-100 rounded-full flex items-center justify-center border-4 border-white shadow-md"><User className="w-10 h-10 text-gray-400"/></div>}
             <div className={`absolute bottom-0 right-0 ${cTheme.bg} text-white p-2 rounded-full shadow-md border-2 border-white`} title="Verified Member"><CheckCircle className="w-4 h-4"/></div>
          </div>
          <h2 className="text-xl font-bold text-gray-800">{loggedInMember.name}</h2>
          <p className="text-xs md:text-sm font-mono text-gray-500 bg-gray-100 px-3 py-1 rounded-full mt-2 border border-gray-200">ID: {loggedInMember.id}</p>
          <div className="w-full mt-6 bg-yellow-50 border border-yellow-200 rounded-2xl p-4">
            <p className="text-[10px] md:text-xs font-bold text-yellow-700 uppercase tracking-wider mb-1">Poin Reward</p>
            <div className="text-2xl md:text-3xl font-bold text-yellow-600 flex items-center justify-center gap-2"><Award className="w-6 h-6 md:w-8 md:h-8"/> {loggedInMember.points}</div>
          </div>
          <button onClick={memberLogout} className="w-full mt-6 py-3 bg-red-50 text-red-600 font-bold rounded-xl flex items-center justify-center gap-2 hover:bg-red-100 transition-colors border border-red-100"><LogOut className="w-4 h-4"/> Keluar Akun</button>
        </div>
      </div>

      <div className="flex-grow bg-white rounded-3xl shadow-sm border border-gray-100 overflow-hidden w-full">
        <div className="flex border-b border-gray-100 bg-gray-50/50 w-full overflow-x-auto no-scrollbar">
           <button onClick={() => setTab('profile')} className={`flex-1 py-4 font-bold text-xs sm:text-sm transition-colors flex items-center justify-center gap-2 min-w-[100px] ${tab === 'profile' ? `${cTheme.text} border-b-2 ${cTheme.border} bg-white` : 'text-gray-500 hover:bg-gray-100'}`}><User className="w-4 h-4 hidden sm:block"/> Profil</button>
           <button onClick={() => setTab('history')} className={`flex-1 py-4 font-bold text-xs sm:text-sm transition-colors flex items-center justify-center gap-2 min-w-[100px] ${tab === 'history' ? `${cTheme.text} border-b-2 ${cTheme.border} bg-white` : 'text-gray-500 hover:bg-gray-100'}`}><Clock className="w-4 h-4 hidden sm:block"/> Riwayat</button>
           <button onClick={() => setTab('rewards')} className={`flex-1 py-4 font-bold text-xs sm:text-sm transition-colors flex items-center justify-center gap-2 min-w-[100px] ${tab === 'rewards' ? `${cTheme.text} border-b-2 ${cTheme.border} bg-white` : 'text-gray-500 hover:bg-gray-100'}`}><Gift className="w-4 h-4 hidden sm:block"/> Hadiah</button>
        </div>
        
        <div className="p-5 md:p-8 w-full overflow-x-hidden">
          {tab === 'profile' && (
            <div className="space-y-5">
              <h3 className="font-bold text-lg text-gray-800 border-b pb-2">Informasi Pribadi</h3>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-y-4 gap-x-6 text-sm">
                 <div className="break-words"><p className="text-gray-500 mb-1">Email</p><p className="font-bold text-gray-800">{loggedInMember.email}</p></div>
                 <div className="break-words"><p className="text-gray-500 mb-1">WhatsApp</p><p className="font-bold text-gray-800">{loggedInMember.phone}</p></div>
                 <div className="break-words"><p className="text-gray-500 mb-1">NIK</p><p className="font-bold text-gray-800 font-mono">{loggedInMember.identity}</p></div>
                 <div className="break-words sm:col-span-2"><p className="text-gray-500 mb-1">Alamat</p><p className="font-bold text-gray-800 bg-gray-50 p-3 rounded-xl border border-gray-100">{loggedInMember.address}</p></div>
              </div>
            </div>
          )}
          
          {tab === 'history' && (
            <div className="space-y-4">
              <h3 className="font-bold text-lg text-gray-800 mb-4">Riwayat Penyewaan</h3>
              {myOrders.length === 0 ? <div className="text-center py-10 bg-gray-50 rounded-2xl border text-gray-500 text-sm">Belum ada transaksi.</div> : 
                myOrders.map(o => (
                  <div key={`hist-${o.id}`} className="border border-gray-100 p-4 rounded-2xl hover:shadow-sm">
                    <div className="flex flex-col sm:flex-row justify-between sm:items-center mb-3 pb-3 border-b border-gray-50 gap-2">
                       <span className="text-xs font-mono text-gray-500">{o.id} &bull; {o.date}</span>
                       <span className="text-xs font-bold px-2 py-1 rounded bg-gray-100 text-gray-700 w-max">{o.status}</span>
                    </div>
                    {o.items.map(i => <div key={`hi-${i.id}`} className="text-sm font-medium text-gray-800 mb-1 truncate">{i.quantity}x {i.name}</div>)}
                    <div className="flex justify-between items-end mt-4 pt-2">
                       <p className="font-bold text-gray-800 text-base md:text-lg">{formatRupiah(o.total)}</p>
                       <p className="text-xs font-bold text-yellow-600 bg-yellow-50 px-2 py-1 rounded-md border border-yellow-100">+ {o.earnedPoints} Poin</p>
                    </div>
                  </div>
                ))
              }
            </div>
          )}

          {tab === 'rewards' && (
            <div>
              <h3 className="font-bold text-lg text-gray-800 mb-2">Katalog Hadiah</h3>
              {prizes.length === 0 ? <div className="text-center py-10 bg-gray-50 border border-dashed rounded-xl text-gray-500 text-sm mt-4">Katalog hadiah saat ini belum tersedia.</div> :
              <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4 md:gap-5 mt-6">
                {prizes.map(p => {
                  const canRedeem = loggedInMember.points >= p.points;
                  return (
                    <div key={`prz-${p.id}`} className="border border-gray-100 rounded-2xl overflow-hidden hover:shadow-md bg-white flex flex-col">
                      <div className="h-28 md:h-32 bg-gray-100"><img src={p.image} alt={p.name} className="w-full h-full object-cover" /></div>
                      <div className="p-4 flex flex-col flex-grow">
                        <h4 className="font-bold text-gray-800 text-sm leading-tight mb-2">{p.name}</h4>
                        <p className="text-xs text-gray-500 mb-4 flex-grow line-clamp-2">{p.desc}</p>
                        <div className="flex items-center justify-between border-t border-gray-50 pt-3">
                           <span className="font-bold text-yellow-600 flex items-center gap-1 text-sm"><Award className="w-4 h-4"/> {p.points}</span>
                           <button onClick={() => redeemPrize(p)} disabled={!canRedeem} className={`px-4 py-1.5 rounded-lg text-xs font-bold transition-all shadow-sm ${canRedeem ? `${cTheme.bg} text-white` : 'bg-gray-100 text-gray-400 cursor-not-allowed'}`}>Tukar</button>
                        </div>
                      </div>
                    </div>
                  );
                })}
              </div>}
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

// ============================================================================
// ADMIN VIEWS
// ============================================================================
const AdminLogin = () => {
  const { login, setView } = useContext(AppStateContext);
  const [uname, setUname] = useState(''); const [pwd, setPwd] = useState(''); const [err, setErr] = useState('');
  const handleLogin = (e) => { e.preventDefault(); if(!login(uname, pwd)) setErr('Kredensial salah!'); };

  return (
    <div className="min-h-screen bg-gray-900 flex items-center justify-center p-4">
      <div className="bg-white rounded-3xl shadow-2xl p-6 md:p-10 w-full max-w-md animate-fade-in-down mx-auto">
        <div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-6 mx-auto"><Shield className="w-8 h-8 text-gray-800" /></div>
        <h2 className="text-2xl font-bold text-center text-gray-800 mb-2">Login Admin</h2>
        <p className="text-center text-gray-500 mb-8 text-sm">Masuk untuk mengelola sistem aplikasi.</p>
        {err && <div className="bg-red-50 text-red-600 p-3 rounded-lg text-sm font-medium mb-6 text-center border border-red-200">{err}</div>}
        <form onSubmit={handleLogin} className="space-y-4 md:space-y-5">
          <div><label className="block text-sm font-medium text-gray-700 mb-1.5">Username</label><input required type="text" value={uname} onChange={e=>setUname(e.target.value)} className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl outline-none text-[16px] focus:ring-2 focus:bg-white" /></div>
          <div><label className="block text-sm font-medium text-gray-700 mb-1.5">Password</label><input required type="password" value={pwd} onChange={e=>setPwd(e.target.value)} className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl outline-none text-[16px] focus:ring-2 focus:bg-white" /></div>
          <button type="submit" className="w-full bg-gray-900 text-white py-3.5 rounded-xl font-bold hover:bg-black transition-colors mt-2 text-[16px]">Masuk Panel</button>
        </form>
        <div className="mt-6 text-center"><button onClick={() => setView('dashboard')} className="text-sm text-gray-400 hover:text-gray-800 transition-colors">&larr; Kembali ke Web Pelanggan</button></div>
      </div>
    </div>
  );
};

const AdminLayout = () => {
  const { loggedInUser, logout, brandConfig, setView } = useContext(AppStateContext);
  const [activeTab, setActiveTab] = useState('dashboard');
  const [showSidebar, setShowSidebar] = useState(false);

  const menuItems = [
    { id: 'dashboard', label: 'Statistik Kinerja', icon: BarChart3 },
    { id: 'orders', label: 'Pesanan Masuk', icon: Package },
    { id: 'inventory', label: 'Katalog Barang', icon: Briefcase },
    { id: 'calendar', label: 'Jadwal Sewa', icon: CalendarIcon },
    { id: 'customers', label: 'Database Pelanggan', icon: Users },
    { id: 'prizes', label: 'Katalog Hadiah', icon: Gift },
    { id: 'promos', label: 'Kelola Promo & Voucher', icon: Tag },
    { id: 'approvals', label: 'Persetujuan Sistem', icon: CheckCircle },
    { id: 'account', label: 'Setelan Akun', icon: User },
    ...(loggedInUser?.role === 'owner' || loggedInUser?.role === 'developer' ? [
        { id: 'logs', label: 'Log Sistem', icon: ClipboardList },
        { id: 'settings', label: 'Pengaturan Sistem', icon: SettingsIcon }
    ] : []),
    ...(loggedInUser?.role === 'developer' ? [{ id: 'developer', label: 'Developer Console', icon: Terminal }] : [])
  ];

  return (
    <div className="flex h-screen bg-gray-50 overflow-hidden font-sans w-full">
      {showSidebar && <div className="fixed inset-0 bg-black/50 z-40 lg:hidden backdrop-blur-sm" onClick={() => setShowSidebar(false)}></div>}
      <aside className={`fixed lg:static inset-y-0 right-0 z-50 w-64 md:w-72 bg-gray-900 text-white flex flex-col transition-transform duration-300 ${showSidebar ? 'translate-x-0' : 'translate-x-full lg:translate-x-0'} shadow-2xl lg:shadow-none`}>
        <div className="p-5 md:p-6 flex items-center justify-between border-b border-gray-800">
          <div className="overflow-hidden"><h2 className="font-bold text-lg md:text-xl truncate">{brandConfig.appName}</h2><p className="text-[10px] md:text-xs text-gray-400 uppercase tracking-wider mt-1 font-mono">{loggedInUser.role} Panel</p></div>
          <button className="lg:hidden p-2 text-gray-400 hover:bg-gray-800 rounded" onClick={() => setShowSidebar(false)}><X className="w-5 h-5"/></button>
        </div>
        <div className="flex-1 overflow-y-auto py-4 md:py-6 px-3 md:px-4 space-y-1 no-scrollbar">
          {menuItems.map(item => (
            <button key={`menu-${item.id}`} onClick={() => {setActiveTab(item.id); setShowSidebar(false)}} className={`w-full flex items-center gap-3 px-3 md:px-4 py-3 rounded-xl text-sm font-medium transition-colors ${activeTab === item.id ? (item.id === 'developer' ? 'bg-green-600 text-white shadow-lg' : 'bg-rose-500 text-white shadow-lg shadow-rose-500/30') : 'text-gray-400 hover:bg-gray-800 hover:text-white'}`}>
              <item.icon className={`w-5 h-5 flex-shrink-0 ${item.id === 'developer' && activeTab !== 'developer' ? 'text-green-500' : ''}`} /> <span className="truncate">{item.label}</span>
            </button>
          ))}
        </div>
        <div className="p-3 md:p-4 border-t border-gray-800 space-y-2">
          <button onClick={() => { setView('dashboard'); setShowSidebar(false); }} className="w-full flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-medium text-gray-400 hover:bg-gray-800 hover:text-white transition-colors"><Home className="w-5 h-5 flex-shrink-0" /> Web Pelanggan</button>
          <button onClick={logout} className="w-full flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-medium text-red-400 hover:bg-red-500/10 hover:text-red-300 transition-colors"><LogOut className="w-5 h-5 flex-shrink-0" /> Keluar Sistem</button>
        </div>
      </aside>
      <main className="flex-1 flex flex-col h-screen overflow-hidden bg-gray-50 w-full">
        <header className="bg-white border-b border-gray-200 px-4 md:px-6 py-3 md:py-4 flex justify-between items-center supports-[padding-top:env(safe-area-inset-top)]:pt-[calc(16px+env(safe-area-inset-top))]">
           <div className="flex items-center gap-3"><button className="lg:hidden p-2 -ml-2 text-gray-600 bg-gray-100 rounded-lg" onClick={() => setShowSidebar(true)}><Menu className="w-6 h-6"/></button><h1 className="text-lg md:text-xl font-bold text-gray-800 capitalize truncate">{activeTab.replace('-', ' ')}</h1></div>
           <div className="flex items-center gap-3">
             <div className="text-right hidden sm:block"><p className="text-sm font-bold text-gray-800 leading-tight">{loggedInUser.name}</p><p className="text-xs text-gray-500 capitalize">{loggedInUser.role}</p></div>
             <div className="w-9 h-9 md:w-10 md:h-10 bg-gray-100 rounded-full flex items-center justify-center border border-gray-200 flex-shrink-0"><User className="w-5 h-5 text-gray-600"/></div>
           </div>
        </header>
        <div className="flex-1 overflow-y-auto p-4 md:p-6 lg:p-8 w-full overflow-x-hidden">
          {activeTab === 'dashboard' && <AdminStats />}
          {activeTab === 'orders' && <AdminOrderManager />}
          {activeTab === 'inventory' && <AdminInventory />}
          {activeTab === 'calendar' && <AdminCalendar />}
          {activeTab === 'customers' && <AdminCustomers />}
          {activeTab === 'prizes' && <AdminPrizes />}
          {activeTab === 'promos' && <AdminPromo />}
          {activeTab === 'approvals' && <AdminApprovals />}
          {activeTab === 'account' && <AdminAccountSettings />}
          {activeTab === 'logs' && (loggedInUser.role === 'owner' || loggedInUser.role === 'developer') && <AdminLogs />}
          {activeTab === 'settings' && (loggedInUser.role === 'owner' || loggedInUser.role === 'developer') && <AdminSystemSettings />}
          {activeTab === 'developer' && loggedInUser.role === 'developer' && <AdminDeveloperPanel />}
        </div>
      </main>
    </div>
  );
};

// --- ADMIN MODULES ---
const AdminStats = () => {
  const { orders, members } = useContext(AppStateContext);
  const completed = orders.filter(o => o.status === 'Selesai');
  const active = orders.filter(o => ['Menunggu Konfirmasi', 'Siap Diambil', 'Sedang Disewa'].includes(o.status));
  const revenue = completed.reduce((s, o) => s + o.total, 0);

  return (
    <div className="space-y-5 md:space-y-6 animate-fade-in-down w-full">
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
        <div className="bg-white p-5 md:p-6 rounded-2xl md:rounded-3xl border border-gray-100 shadow-sm"><div className="w-10 h-10 md:w-12 md:h-12 bg-green-50 text-green-600 rounded-xl flex items-center justify-center mb-3 md:mb-4"><BarChart3 className="w-5 h-5 md:w-6 md:h-6"/></div><div className="text-xs md:text-sm font-bold text-gray-400 uppercase mb-1">Pendapatan</div><div className="text-xl md:text-2xl font-bold text-gray-800 truncate">{formatRupiah(revenue)}</div></div>
        <div className="bg-white p-5 md:p-6 rounded-2xl md:rounded-3xl border border-gray-100 shadow-sm"><div className="w-10 h-10 md:w-12 md:h-12 bg-blue-50 text-blue-600 rounded-xl flex items-center justify-center mb-3 md:mb-4"><Package className="w-5 h-5 md:w-6 md:h-6"/></div><div className="text-xs md:text-sm font-bold text-gray-400 uppercase mb-1">Pesanan Aktif</div><div className="text-xl md:text-2xl font-bold text-gray-800">{active.length}</div></div>
        <div className="bg-white p-5 md:p-6 rounded-2xl md:rounded-3xl border border-gray-100 shadow-sm"><div className="w-10 h-10 md:w-12 md:h-12 bg-purple-50 text-purple-600 rounded-xl flex items-center justify-center mb-3 md:mb-4"><CheckCircle className="w-5 h-5 md:w-6 md:h-6"/></div><div className="text-xs md:text-sm font-bold text-gray-400 uppercase mb-1">Total Transaksi</div><div className="text-xl md:text-2xl font-bold text-gray-800">{orders.length}</div></div>
        <div className="bg-white p-5 md:p-6 rounded-2xl md:rounded-3xl border border-gray-100 shadow-sm"><div className="w-10 h-10 md:w-12 md:h-12 bg-rose-50 text-rose-600 rounded-xl flex items-center justify-center mb-3 md:mb-4"><Users className="w-5 h-5 md:w-6 md:h-6"/></div><div className="text-xs md:text-sm font-bold text-gray-400 uppercase mb-1">Total Member</div><div className="text-xl md:text-2xl font-bold text-gray-800">{members.filter(m=>m.status === 'approved').length}</div></div>
      </div>
      <div className="bg-white p-5 md:p-8 rounded-2xl md:rounded-3xl border border-gray-100 shadow-sm w-full overflow-hidden">
        <h3 className="font-bold text-base md:text-lg text-gray-800 mb-4 md:mb-6 flex items-center gap-2"><Clock className="w-5 h-5 text-gray-400"/> Aktivitas Terakhir</h3>
        <div className="space-y-3 md:space-y-4">
          {orders.length === 0 ? <div className="text-sm text-gray-500 py-4 text-center">Belum ada aktivitas pesanan tercatat.</div> : orders.slice(0, 5).map(o => (
            <div key={`act-${o.id}`} className="flex flex-col sm:flex-row justify-between sm:items-center p-3 md:p-4 bg-gray-50 rounded-xl md:rounded-2xl gap-3">
              <div className="flex items-center gap-3 md:gap-4 overflow-hidden">
                <div className="w-8 h-8 md:w-10 md:h-10 bg-white rounded-full flex items-center justify-center flex-shrink-0 text-gray-400"><FileText className="w-4 h-4"/></div>
                <div className="overflow-hidden"><p className="font-bold text-sm text-gray-800 truncate">{o.customer.name}</p><p className="text-xs text-gray-500 font-mono mt-0.5">{o.id}</p></div>
              </div>
              <span className="text-[10px] md:text-xs font-bold px-3 py-1.5 rounded-lg bg-white border shadow-sm w-max">{o.status}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

const AdminOrderManager = () => {
  const { orders, updateOrderStatus } = useContext(AppStateContext);
  const [tab, setTab] = useState('aktif');
  const [expandedId, setExpandedId] = useState(null);

  const displayedOrders = tab === 'aktif' ? orders.filter(o => ['Menunggu Konfirmasi', 'Siap Diambil', 'Sedang Disewa'].includes(o.status)) : orders.filter(o => ['Selesai', 'Dibatalkan'].includes(o.status));

  return (
    <div className="animate-fade-in-down w-full">
      <div className="w-full overflow-x-auto mb-5 md:mb-6 pb-2">
        <div className="flex bg-gray-200 p-1 rounded-xl w-max">
          <button onClick={() => setTab('aktif')} className={`px-5 py-2 rounded-lg text-sm font-bold transition-all ${tab === 'aktif' ? 'bg-white text-gray-900 shadow' : 'text-gray-500'}`}>Pesanan Aktif</button>
          <button onClick={() => setTab('riwayat')} className={`px-5 py-2 rounded-lg text-sm font-bold transition-all ${tab === 'riwayat' ? 'bg-white text-gray-900 shadow' : 'text-gray-500'}`}>Riwayat Selesai</button>
        </div>
      </div>

      <div className="space-y-4">
        {displayedOrders.length === 0 ? <div className="text-center py-10 bg-white rounded-2xl border text-gray-500 border-dashed">Belum ada data pesanan.</div> : displayedOrders.map(order => (
          <div key={`mng-${order.id}`} className="bg-white border border-gray-100 rounded-2xl md:rounded-3xl shadow-sm overflow-hidden">
            <div className="p-4 md:p-5 flex flex-col md:flex-row justify-between md:items-center cursor-pointer hover:bg-gray-50 gap-3 md:gap-4" onClick={() => setExpandedId(expandedId === order.id ? null : order.id)}>
              <div className="flex items-center gap-3 md:gap-4 overflow-hidden">
                <div className={`w-10 h-10 md:w-12 md:h-12 rounded-full flex items-center justify-center shrink-0 ${order.memberId ? 'bg-rose-100' : 'bg-gray-100'}`}>
                  {order.memberId ? <Award className="w-5 h-5 md:w-6 md:h-6 text-rose-500"/> : <FileText className="w-5 h-5 md:w-6 md:h-6 text-gray-500"/>}
                </div>
                <div className="overflow-hidden">
                  <h4 className="font-bold text-sm md:text-base text-gray-800 flex items-center gap-2 truncate">{order.customer.name} {order.memberId && <span className="bg-rose-500 text-white text-[10px] px-2 py-0.5 rounded-full">MEMBER</span>}</h4>
                  <p className="text-xs text-gray-500 font-mono mt-0.5">{order.id} &bull; {order.startDate}</p>
                </div>
              </div>
              <div className="flex items-center justify-between md:justify-end gap-4 pl-14 md:pl-0 w-full md:w-auto"><span className="text-xs font-bold px-3 py-1.5 rounded-lg bg-gray-100 border">{order.status}</span><ChevronDown className={`w-5 h-5 text-gray-400 transition-transform ${expandedId === order.id ? 'rotate-180' : ''}`} /></div>
            </div>
            {expandedId === order.id && (
              <div className="p-4 md:p-6 bg-gray-50/50 border-t border-gray-100">
                <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 md:gap-6 mb-5 md:mb-6">
                  <div className="bg-white p-4 rounded-2xl border shadow-sm break-words">
                    <h5 className="text-xs font-bold text-gray-400 uppercase mb-2">Pelanggan</h5>
                    <p className="font-bold text-sm text-gray-800">{order.customer.name}</p>
                    <p className="text-sm text-gray-600">{order.customer.phone}</p>
                    <p className="text-xs text-gray-500 font-mono mt-1">NIK: {order.customer.identity}</p>
                  </div>
                  <div className="bg-white p-4 rounded-2xl border shadow-sm">
                    <h5 className="text-xs font-bold text-gray-400 uppercase mb-2">Waktu Sewa</h5>
                    <p className="text-sm text-gray-600">Mulai: <span className="font-medium text-gray-800">{order.startDate}</span></p>
                    <p className="text-sm text-gray-600">Selesai: <span className="font-medium text-gray-800">{order.endDate}</span></p>
                    <p className="text-xs font-bold text-rose-500 bg-rose-50 inline-block px-2 py-1 rounded-lg mt-2">Durasi: {order.duration} Hari</p>
                  </div>
                  <div className="bg-white p-4 rounded-2xl border shadow-sm sm:col-span-2 md:col-span-1">
                    <h5 className="text-xs font-bold text-gray-400 uppercase mb-2">Tindakan Admin</h5>
                    <select value={order.status} onChange={(e) => updateOrderStatus(order.id, e.target.value)} className="w-full px-3 py-2 border rounded-xl text-[16px] font-medium focus:ring-2 outline-none bg-white"><option value="Menunggu Konfirmasi">Menunggu Konfirmasi</option><option value="Siap Diambil">Siap Diambil</option><option value="Sedang Disewa">Sedang Disewa</option><option value="Selesai">Selesai (Otomatis Maintenance)</option><option value="Dibatalkan">Dibatalkan</option></select>
                  </div>
                </div>
                <div className="bg-gray-800 p-4 rounded-xl text-white flex justify-between items-center"><span className="font-bold text-xs md:text-sm">Total Tagihan</span><span className="font-bold text-base md:text-lg">{formatRupiah(order.total)}</span></div>
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
};

const AdminInventory = () => {
  const { products, categories, requireApproval, getAvailableStock, cTheme } = useContext(AppStateContext);
  
  const [invTab, setInvTab] = useState('katalog'); 
  const [activeCategory, setActiveCategory] = useState('Semua');
  const [searchQuery, setSearchQuery] = useState('');
  const [showAddForm, setShowAddForm] = useState(false);
  const [newCategoryName, setNewCategoryName] = useState('');
  const [expandedId, setExpandedId] = useState(null);
  const [editingId, setEditingId] = useState(null);
  const [editData, setEditData] = useState({ price: '', totalStock: '' });
  
  const [formData, setFormData] = useState({ name: '', price: '', category: categories[0] || '', desc: '', image: null, totalStock: 1 });

  const handleImageUpload = (e) => {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => setFormData(prev => ({ ...prev, image: reader.result }));
      reader.readAsDataURL(file);
    }
  };

  const generateId = (cat) => {
     const prefix = cat ? cat.substring(0,2).toUpperCase() : 'XX';
     const count = products.filter(p => p.id.startsWith(prefix)).length + 1;
     return `${prefix}-${1000 + count}`;
  };

  const handleAddProduct = (e) => {
    e.preventDefault();
    const newProduct = { id: generateId(formData.category), ...formData, price: parseInt(formData.price), totalStock: parseInt(formData.totalStock), status: 'Tersedia' };
    if(requireApproval('ADD_PRODUCT', newProduct, 'Produk berhasil ditambahkan.')) {
       setShowAddForm(false);
       setFormData({ name: '', price: '', category: categories[0] || '', desc: '', image: null, totalStock: 1 });
    }
  };

  const handleAddCategory = (e) => {
    e.preventDefault();
    if (newCategoryName.trim() && !categories.includes(newCategoryName.trim())) {
      requireApproval('ADD_CATEGORY', newCategoryName.trim(), 'Kategori baru berhasil ditambahkan.');
      setNewCategoryName('');
    }
  };

  const handleSaveEdit = (p) => {
    if(editData.price && editData.totalStock) {
       requireApproval('EDIT_PRODUCT', {...p, price: parseInt(editData.price), totalStock: parseInt(editData.totalStock)}, 'Perubahan produk disimpan.');
       setEditingId(null);
    }
  };

  const filteredProducts = products.filter(p => p.status !== 'Maintenance' && (activeCategory === 'Semua' || p.category === activeCategory) && (p.name.toLowerCase().includes(searchQuery.toLowerCase()) || p.id.toLowerCase().includes(searchQuery.toLowerCase())));
  const maintenanceProducts = products.filter(p => p.status === 'Maintenance');

  return (
    <div className="animate-fade-in-down w-full">
      <div className="w-full overflow-x-auto mb-5 md:mb-6 pb-2">
        <div className="flex bg-gray-200 p-1 rounded-xl w-max">
          <button onClick={() => setInvTab('katalog')} className={`px-5 py-2 rounded-lg text-sm font-bold transition-all ${invTab === 'katalog' ? 'bg-white text-gray-900 shadow' : 'text-gray-500'}`}>Katalog Aktif</button>
          <button onClick={() => setInvTab('maintenance')} className={`px-5 py-2 rounded-lg text-sm font-bold transition-all flex items-center gap-2 ${invTab === 'maintenance' ? 'bg-white text-gray-900 shadow' : 'text-gray-500'}`}>Maintenance Barang {maintenanceProducts.length > 0 && <span className="bg-red-500 text-white text-[10px] px-2 py-0.5 rounded-full">{maintenanceProducts.length}</span>}</button>
        </div>
      </div>

      {invTab === 'katalog' && (
        <>
          <div className="bg-white p-5 md:p-6 rounded-2xl md:rounded-3xl border border-gray-100 shadow-sm mb-6">
             <h3 className="font-bold text-gray-800 mb-4 flex items-center gap-2"><Package className="w-5 h-5 text-gray-400"/> Kelola Kategori Pakaian</h3>
             <div className="flex flex-wrap items-center gap-2 mb-5">
                <button onClick={() => setActiveCategory('Semua')} className={`px-5 py-2 rounded-xl text-sm font-bold transition-all ${activeCategory === 'Semua' ? 'bg-gray-900 text-white shadow-sm' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}`}>Semua Filter</button>
                {categories.length === 0 && <span className="text-sm text-gray-400 italic">Belum ada kategori.</span>}
                {categories.map(cat => (
                   <div key={`inv-cat-${cat}`} className={`flex items-center rounded-xl border transition-all ${activeCategory === cat ? `${cTheme.bg} text-white border-transparent shadow-sm` : 'bg-white border-gray-200 text-gray-700'}`}>
                     <button onClick={() => setActiveCategory(cat)} className="px-4 py-2 text-sm font-medium">{cat}</button>
                     <button onClick={() => requireApproval('DELETE_CATEGORY', cat, 'Kategori dihapus.', true)} className={`p-2 rounded-r-xl transition-colors ${activeCategory === cat ? 'hover:brightness-90 text-white' : 'text-gray-400 hover:text-red-500 hover:bg-red-50'}`}><X className="w-4 h-4"/></button>
                   </div>
                ))}
             </div>
             <form onSubmit={handleAddCategory} className="flex gap-2 w-full max-w-sm">
                <input type="text" placeholder="Nama Kategori Baru" value={newCategoryName} onChange={e=>setNewCategoryName(e.target.value)} required className="flex-1 px-4 py-2.5 bg-gray-50 border rounded-xl text-[16px] md:text-sm focus:outline-none focus:border-gray-400" />
                <button type="submit" className="bg-gray-900 text-white px-4 py-2.5 rounded-xl font-bold hover:bg-black transition-colors"><Plus className="w-5 h-5"/></button>
             </form>
          </div>

          <div className="flex flex-col sm:flex-row justify-between sm:items-center gap-4 mb-6">
             <div className="relative flex-1">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
                <input type="text" placeholder="Cari ID/Nama Produk..." value={searchQuery} onChange={e=>setSearchQuery(e.target.value)} className="w-full pl-9 pr-4 py-2.5 bg-white border border-gray-200 rounded-xl text-[16px] md:text-sm focus:outline-none focus:border-gray-400 shadow-sm" />
             </div>
             <button onClick={() => setShowAddForm(!showAddForm)} disabled={categories.length === 0} className={`text-white px-5 py-2.5 rounded-xl font-bold flex items-center justify-center gap-2 hover:brightness-110 shadow-sm ${categories.length === 0 ? 'bg-gray-300 cursor-not-allowed' : cTheme.bg}`}><Plus className="w-4 h-4"/> {showAddForm ? 'Batal Tambah' : 'Tambah Produk'}</button>
          </div>

          {showAddForm && (
            <div className="bg-white p-5 md:p-6 rounded-2xl md:rounded-3xl border border-gray-100 shadow-sm mb-6 animate-fade-in-down">
               <h3 className="font-bold text-gray-800 mb-4">Tambah Produk Baru</h3>
               <form onSubmit={handleAddProduct} className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  <div><label className="block text-xs font-medium text-gray-500 mb-1">Nama Produk</label><input required type="text" value={formData.name} onChange={e=>setFormData({...formData, name: e.target.value})} className="w-full px-3 py-2 bg-gray-50 border rounded-lg text-[16px] md:text-sm outline-none focus:border-gray-400" /></div>
                  <div><label className="block text-xs font-medium text-gray-500 mb-1">Harga Sewa / Hari</label><input required type="number" value={formData.price} onChange={e=>setFormData({...formData, price: e.target.value})} className="w-full px-3 py-2 bg-gray-50 border rounded-lg text-[16px] md:text-sm outline-none focus:border-gray-400" /></div>
                  <div><label className="block text-xs font-medium text-gray-500 mb-1">Kategori</label><select required value={formData.category} onChange={e=>setFormData({...formData, category: e.target.value})} className="w-full px-3 py-2 bg-gray-50 border rounded-lg text-[16px] md:text-sm outline-none focus:border-gray-400">{categories.map(c => <option key={`opt-${c}`} value={c}>{c}</option>)}</select></div>
                  <div><label className="block text-xs font-medium text-gray-500 mb-1">Jumlah Stok Fisik</label><input required type="number" min="1" value={formData.totalStock} onChange={e=>setFormData({...formData, totalStock: e.target.value})} className="w-full px-3 py-2 bg-gray-50 border rounded-lg text-[16px] md:text-sm outline-none focus:border-gray-400" /></div>
                  <div className="sm:col-span-2"><label className="block text-xs font-medium text-gray-500 mb-1">Upload Foto Barang</label><label className="flex items-center justify-center p-4 border-2 border-dashed rounded-lg cursor-pointer hover:bg-gray-50 text-sm text-gray-500 bg-white"><Upload className="w-5 h-5 mr-2 text-gray-400" /> {formData.image ? 'Gambar Dipilih' : 'Klik untuk Upload Gambar'}<input required={!formData.image} type="file" accept="image/*" onChange={handleImageUpload} className="hidden" /></label></div>
                  <div className="sm:col-span-2"><label className="block text-xs font-medium text-gray-500 mb-1">Deskripsi Singkat</label><textarea required rows="2" value={formData.desc} onChange={e=>setFormData({...formData, desc: e.target.value})} className="w-full px-3 py-2 bg-gray-50 border rounded-lg text-[16px] md:text-sm outline-none focus:border-gray-400"></textarea></div>
                  <div className="sm:col-span-2"><button type="submit" className={`w-full py-3 ${cTheme.bg} text-white font-bold rounded-xl mt-2`}>Simpan Produk</button></div>
               </form>
            </div>
          )}

          {filteredProducts.length === 0 ? <div className="text-center py-10 bg-white border border-dashed rounded-2xl text-gray-500">Belum ada barang di katalog.</div> :
          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 md:gap-5">
            {filteredProducts.map(p => {
              const avail = getAvailableStock(p.id);
              const isExpanded = expandedId === p.id;
              const isEditing = editingId === p.id;
              return (
                <div key={`invp-${p.id}`} className="bg-white border border-gray-100 rounded-2xl md:rounded-3xl shadow-sm overflow-hidden flex flex-col hover:shadow-md transition-shadow">
                   <div className="p-4 flex gap-4 cursor-pointer" onClick={() => {setExpandedId(isExpanded ? null : p.id); setEditingId(null);}}>
                      <img src={p.image} alt={p.name} className="w-16 h-16 rounded-xl object-cover border" />
                      <div className="flex-1 overflow-hidden">
                         <h4 className="font-bold text-sm leading-tight mb-1 truncate">{p.name}</h4>
                         <p className="text-xs font-mono text-gray-400">{p.id} &bull; {p.category}</p>
                         <div className="flex justify-between items-center mt-2">
                            <p className="text-sm font-bold text-gray-800">{formatRupiah(p.price)}</p>
                            <span className={`text-[10px] font-bold px-2 py-1 rounded-md ${avail>0?'bg-green-100 text-green-700':'bg-red-100 text-red-700'}`}>Tersedia: {avail}/{p.totalStock}</span>
                         </div>
                      </div>
                   </div>
                   {isExpanded && (
                     <div className="p-4 bg-gray-50 border-t border-gray-100 flex-1 flex flex-col">
                        <p className="text-xs text-gray-600 mb-4 flex-grow">{p.desc}</p>
                        {isEditing ? (
                          <div className="space-y-3 mb-4 bg-white p-3 rounded-xl border border-gray-200">
                             <div><label className="text-xs font-medium text-gray-500">Ubah Harga</label><input type="number" value={editData.price} onChange={e=>setEditData({...editData, price: e.target.value})} className="w-full mt-1 px-3 py-1.5 border rounded-lg text-[16px] md:text-sm" /></div>
                             <div><label className="text-xs font-medium text-gray-500">Ubah Total Stok</label><input type="number" value={editData.totalStock} onChange={e=>setEditData({...editData, totalStock: e.target.value})} className="w-full mt-1 px-3 py-1.5 border rounded-lg text-[16px] md:text-sm" /></div>
                             <div className="flex gap-2 pt-2">
                               <button onClick={() => setEditingId(null)} className="flex-1 py-2 bg-gray-100 text-gray-600 rounded-lg text-xs font-bold">Batal</button>
                               <button onClick={() => handleSaveEdit(p)} className={`flex-1 py-2 ${cTheme.bg} text-white rounded-lg text-xs font-bold`}>Simpan</button>
                             </div>
                          </div>
                        ) : (
                          <div className="flex flex-wrap sm:flex-nowrap gap-2 mt-auto">
                            <button onClick={() => requireApproval('UPDATE_PRODUCT_STATUS', {id: p.id, status: 'Maintenance'}, 'Barang dipindah ke Maintenance.')} className="w-full sm:flex-1 py-2 bg-yellow-50 text-yellow-600 rounded-xl text-xs font-bold flex items-center justify-center gap-1 hover:bg-yellow-100"><Edit3 className="w-4 h-4"/> Perbaikan</button>
                            <button onClick={() => requireApproval('DELETE_PRODUCT', {id: p.id}, 'Produk dihapus.', true)} className="flex-1 py-2 bg-red-50 text-red-500 rounded-xl text-xs font-bold flex items-center justify-center gap-1 hover:bg-red-100"><Trash2 className="w-4 h-4"/> Hapus</button>
                            <button onClick={(e) => { e.stopPropagation(); setEditingId(p.id); setEditData({price: p.price, totalStock: p.totalStock}); }} className="flex-1 py-2 bg-gray-200 text-gray-800 rounded-xl text-xs font-bold flex items-center justify-center gap-1 hover:bg-gray-300"><Edit3 className="w-4 h-4"/> Edit</button>
                          </div>
                        )}
                     </div>
                   )}
                </div>
              );
            })}
          </div>}
        </>
      )}

      {invTab === 'maintenance' && (
        <div className="bg-white p-5 md:p-8 rounded-2xl md:rounded-3xl border border-gray-100 shadow-sm">
           <h3 className="font-bold text-gray-800 mb-2 flex items-center gap-2"><SettingsIcon className="w-5 h-5 text-yellow-500"/> Barang Dalam Perawatan (Maintenance)</h3>
           <p className="text-sm text-gray-500 mb-6">Barang di daftar ini disembunyikan dari katalog pelanggan.</p>
           
           {maintenanceProducts.length === 0 ? (
             <div className="text-center py-10 bg-gray-50 border border-dashed rounded-xl text-gray-500">Semua barang dalam kondisi baik.</div>
           ) : (
             <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
               {maintenanceProducts.map(p => (
                 <div key={`maint-${p.id}`} className="border border-gray-100 rounded-2xl p-4 flex flex-col hover:shadow-sm">
                    <img src={p.image} className="w-full h-32 object-cover rounded-xl mb-3 bg-gray-100" alt="Item"/>
                    <h4 className="font-bold text-sm text-gray-800">{p.name}</h4>
                    <p className="text-xs font-mono text-gray-500 mb-3">{p.id}</p>
                    <button onClick={() => requireApproval('UPDATE_PRODUCT_STATUS', {id: p.id, status: 'Tersedia'}, 'Barang kembali tersedia.')} className="mt-auto w-full py-2 bg-green-50 text-green-600 rounded-lg text-sm font-bold hover:bg-green-100 flex items-center justify-center gap-1"><CheckCircle className="w-4 h-4"/> Selesai Dirawat</button>
                 </div>
               ))}
             </div>
           )}
        </div>
      )}
    </div>
  );
};

const AdminPromo = () => {
  const { promos, requireApproval, cTheme } = useContext(AppStateContext);
  const [formData, setFormData] = useState({ code: '', discountType: 'percentage', discountValue: '', minPurchase: '', validUntil: '' });

  const handleAdd = (e) => {
    e.preventDefault();
    requireApproval('ADD_PROMO', { 
      id: `PRM-${Date.now()}`, 
      code: formData.code.toUpperCase(), 
      discountType: formData.discountType, 
      discountValue: parseInt(formData.discountValue), 
      minPurchase: parseInt(formData.minPurchase), 
      validUntil: formData.validUntil,
      status: 'Aktif'
    }, 'Voucher promo berhasil dibuat.');
    setFormData({ code: '', discountType: 'percentage', discountValue: '', minPurchase: '', validUntil: '' });
  };

  return (
    <div className="animate-fade-in-down w-full space-y-6">
      <div className="bg-white p-5 md:p-6 rounded-3xl border border-gray-100 shadow-sm">
         <h2 className="text-lg font-bold mb-4 flex items-center gap-2"><Tag className="w-5 h-5 text-rose-500"/> Buat Voucher & Promo Baru</h2>
         <form onSubmit={handleAdd} className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
            <div><label className="block text-xs font-medium text-gray-500 mb-1">Kode Promo (Misal: LEBARAN)</label><input required type="text" value={formData.code} onChange={e=>setFormData({...formData, code: e.target.value})} className="w-full px-3 py-2 bg-gray-50 border rounded-lg text-[16px] md:text-sm outline-none focus:border-gray-400 uppercase" /></div>
            <div><label className="block text-xs font-medium text-gray-500 mb-1">Jenis Diskon</label><select value={formData.discountType} onChange={e=>setFormData({...formData, discountType: e.target.value})} className="w-full px-3 py-2 bg-gray-50 border rounded-lg text-[16px] md:text-sm outline-none focus:border-gray-400"><option value="percentage">Persentase (%)</option><option value="fixed">Nominal Tetap (Rp)</option></select></div>
            <div><label className="block text-xs font-medium text-gray-500 mb-1">Nilai Diskon</label><input required type="number" min="1" value={formData.discountValue} onChange={e=>setFormData({...formData, discountValue: e.target.value})} className="w-full px-3 py-2 bg-gray-50 border rounded-lg text-[16px] md:text-sm outline-none focus:border-gray-400" /></div>
            <div><label className="block text-xs font-medium text-gray-500 mb-1">Minimal Belanja (Rp)</label><input required type="number" min="0" value={formData.minPurchase} onChange={e=>setFormData({...formData, minPurchase: e.target.value})} className="w-full px-3 py-2 bg-gray-50 border rounded-lg text-[16px] md:text-sm outline-none focus:border-gray-400" /></div>
            <div><label className="block text-xs font-medium text-gray-500 mb-1">Berlaku Sampai Tanggal</label><input required type="date" min={new Date().toISOString().split('T')[0]} value={formData.validUntil} onChange={e=>setFormData({...formData, validUntil: e.target.value})} className="w-full px-3 py-2 bg-gray-50 border rounded-lg text-[16px] md:text-sm outline-none focus:border-gray-400" /></div>
            <div className="sm:col-span-2 md:col-span-1 flex items-end"><button type="submit" className={`w-full py-2 ${cTheme.bg} text-white font-bold rounded-lg`}>Simpan Promo</button></div>
         </form>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
        {promos.length === 0 ? <div className="col-span-full text-center py-10 bg-white border border-dashed rounded-2xl text-gray-500">Belum ada promo yang dibuat.</div> :
        promos.map(p => (
           <div key={`prm-${p.id}`} className="bg-white border border-gray-100 rounded-2xl shadow-sm p-5 relative">
              <div className="flex justify-between items-start mb-3">
                 <h4 className="font-bold text-lg text-gray-800 tracking-wide font-mono uppercase">{p.code}</h4>
                 <button onClick={() => requireApproval('DELETE_PROMO', {id: p.id}, 'Promo dihapus.', true)} className="text-red-400 hover:text-red-600"><Trash2 className="w-4 h-4"/></button>
              </div>
              <p className="text-sm font-bold text-rose-600 mb-2 flex items-center gap-1"><Percent className="w-4 h-4"/> Diskon {p.discountType === 'percentage' ? `${p.discountValue}%` : formatRupiah(p.discountValue)}</p>
              <div className="text-xs text-gray-500 space-y-1 mb-4">
                 <p>Min. Belanja: <span className="font-medium text-gray-700">{formatRupiah(p.minPurchase)}</span></p>
                 <p>Kadaluarsa: <span className="font-medium text-gray-700">{p.validUntil}</span></p>
              </div>
              <button onClick={() => requireApproval('UPDATE_PROMO_STATUS', {id: p.id, status: p.status === 'Aktif' ? 'Nonaktif' : 'Aktif'}, `Status diubah.`)} className={`w-full py-2 rounded-lg text-xs font-bold transition-colors ${p.status === 'Aktif' ? 'bg-green-50 text-green-600 hover:bg-green-100' : 'bg-gray-100 text-gray-500 hover:bg-gray-200'}`}>
                 Status: {p.status} (Klik untuk ubah)
              </button>
           </div>
        ))}
      </div>
    </div>
  );
};

const AdminCalendar = () => {
  const { orders } = useContext(AppStateContext);
  const [search, setSearch] = useState('');
  const [currentMonth, setCurrentMonth] = useState(new Date().getMonth());
  const [currentYear, setCurrentYear] = useState(new Date().getFullYear());
  const [selectedDate, setSelectedDate] = useState(null);

  const filteredOrders = orders.filter(order => {
    if (!search) return true;
    const s = search.toLowerCase();
    return order.items.some(item => item.name.toLowerCase().includes(s) || item.id.toLowerCase().includes(s));
  });

  const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
  const firstDay = new Date(currentYear, currentMonth, 1).getDay();

  const nextMonth = () => { if (currentMonth === 11) { setCurrentMonth(0); setCurrentYear(currentYear + 1); } else setCurrentMonth(currentMonth + 1); };
  const prevMonth = () => { if (currentMonth === 0) { setCurrentMonth(11); setCurrentYear(currentYear - 1); } else setCurrentMonth(currentMonth - 1); };
  const monthNames = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"];

  const getOrdersForDate = (day) => {
    const dateStr = `${currentYear}-${String(currentMonth + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
    const targetDate = new Date(dateStr);
    return filteredOrders.filter(o => {
       const start = new Date(o.startDate);
       const end = new Date(o.endDate || o.startDate);
       if(!o.endDate) end.setDate(end.getDate() + (o.duration - 1));
       return targetDate >= start && targetDate <= end && ['Menunggu Konfirmasi', 'Siap Diambil', 'Sedang Disewa'].includes(o.status);
    });
  };

  return (
    <div className="space-y-6 animate-fade-in-down w-full">
      <div className="bg-white p-5 md:p-6 rounded-3xl border border-gray-100 shadow-sm flex flex-col sm:flex-row justify-between sm:items-center gap-4">
         <div>
            <h2 className="font-bold text-lg md:text-xl text-gray-800 flex items-center gap-2"><CalendarIcon className="w-5 h-5 text-rose-500"/> Jadwal Sewa (Event)</h2>
            <p className="text-sm text-gray-500 mt-1">Pantau jadwal keluar-masuk pakaian.</p>
         </div>
         <div className="relative w-full sm:w-64">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
            <input type="text" placeholder="Cari ID/Nama Pakaian..." value={search} onChange={e=>setSearch(e.target.value)} className="w-full pl-9 pr-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl text-[16px] md:text-sm focus:outline-none focus:border-rose-500" />
         </div>
      </div>

      <div className="bg-white rounded-3xl border border-gray-100 shadow-sm overflow-hidden p-5 md:p-6">
         <div className="flex justify-between items-center mb-6">
            <button onClick={prevMonth} className="p-2 bg-gray-50 hover:bg-gray-100 rounded-xl transition-colors"><ChevronLeft className="w-5 h-5 text-gray-600"/></button>
            <h3 className="font-bold text-lg text-gray-800">{monthNames[currentMonth]} {currentYear}</h3>
            <button onClick={nextMonth} className="p-2 bg-gray-50 hover:bg-gray-100 rounded-xl transition-colors"><ChevronRight className="w-5 h-5 text-gray-600"/></button>
         </div>

         <div className="grid grid-cols-7 gap-2 md:gap-4 text-center mb-4">
            {['Min', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab'].map(d => <div key={`dow-${d}`} className="text-[10px] md:text-xs font-bold text-gray-400 uppercase">{d}</div>)}
         </div>
         <div className="grid grid-cols-7 gap-2 md:gap-4">
            {Array.from({ length: firstDay }).map((_, i) => <div key={`empty-pad-${i}`} className="p-2 md:p-4 rounded-xl bg-gray-50/50 border border-dashed border-gray-100"></div>)}
            {Array.from({ length: daysInMonth }).map((_, i) => {
               const day = i + 1;
               const dayOrders = getOrdersForDate(day);
               const hasOrders = dayOrders.length > 0;
               return (
                 <div key={`day-cell-${day}`} onClick={() => hasOrders && setSelectedDate({ day, month: currentMonth, year: currentYear, orders: dayOrders })} className={`p-2 md:p-4 rounded-xl border flex flex-col items-center justify-center min-h-[60px] md:min-h-[80px] transition-all ${hasOrders ? 'bg-rose-50 border-rose-200 cursor-pointer hover:bg-rose-100 shadow-sm' : 'bg-white border-gray-100 text-gray-400'}`}>
                    <span className={`text-sm md:text-base font-bold ${hasOrders ? 'text-rose-700' : ''}`}>{day}</span>
                    {hasOrders && <span className="mt-1 text-[10px] md:text-xs font-medium bg-rose-500 text-white px-2 py-0.5 rounded-full">{dayOrders.length} Sewa</span>}
                 </div>
               );
            })}
         </div>
      </div>

      {selectedDate && (
        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm" onClick={() => setSelectedDate(null)}>
          <div className="bg-white rounded-3xl shadow-xl w-full max-w-lg overflow-hidden animate-fade-in-down" onClick={e=>e.stopPropagation()}>
            <div className="p-5 md:p-6 border-b border-gray-100 flex justify-between items-center">
               <h3 className="font-bold text-lg text-gray-800">Jadwal: {selectedDate.day} {monthNames[selectedDate.month]} {selectedDate.year}</h3>
               <button onClick={() => setSelectedDate(null)} className="p-2 bg-gray-50 hover:bg-gray-100 rounded-full text-gray-500"><X className="w-5 h-5"/></button>
            </div>
            <div className="p-5 md:p-6 max-h-[60vh] overflow-y-auto space-y-4">
               {selectedDate.orders.map(o => (
                 <div key={`modal-ord-${o.id}`} className="bg-gray-50 p-4 rounded-2xl border border-gray-100">
                    <div className="flex flex-col sm:flex-row justify-between sm:items-center mb-3 pb-3 border-b border-gray-200 gap-2">
                       <div><p className="font-bold text-sm text-gray-800">{o.customer.name}</p><p className="text-xs text-gray-500 font-mono">{o.id}</p></div>
                       <span className="text-[10px] font-bold px-2 py-1 bg-white border border-gray-200 rounded-md text-gray-600 w-max">{o.status}</span>
                    </div>
                    <ul className="space-y-2">
                       {o.items.map(item => (
                         <li key={`modal-item-${item.id}`} className="flex items-center gap-3 text-sm">
                            <img src={item.image} alt={item.name} className="w-8 h-8 rounded border object-cover"/>
                            <div><p className="font-medium text-gray-800 leading-tight">{item.quantity}x {item.name}</p><p className="text-[10px] text-gray-500 font-mono">{item.id}</p></div>
                         </li>
                       ))}
                    </ul>
                 </div>
               ))}
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

const AdminCustomers = () => {
  const { members, orders, approvals, handleApproval, loggedInUser, cTheme } = useContext(AppStateContext);
  const [tab, setTab] = useState('member');
  
  const approvedMembers = members.filter(m => m.status === 'approved');
  const nonMembers = orders.filter(o => !o.memberId).reduce((acc, order) => {
     const existing = acc.find(c => c.identity === order.customer.identity);
     if (existing) {
        existing.totalSpent += order.total;
        existing.orderCount += 1;
     } else {
        acc.push({ ...order.customer, totalSpent: order.total, orderCount: 1 });
     }
     return acc;
  }, []);
  const memberApps = approvals.filter(a => a.actionType === 'REGISTER_MEMBER');

  return (
    <div className="bg-white rounded-3xl border border-gray-100 shadow-sm overflow-hidden animate-fade-in-down w-full">
      <div className="flex border-b border-gray-100 bg-gray-50 w-full overflow-x-auto no-scrollbar">
         <button onClick={() => setTab('member')} className={`px-4 sm:px-6 py-4 font-bold text-sm transition-colors whitespace-nowrap ${tab === 'member' ? `${cTheme.text} border-b-2 ${cTheme.border} bg-white` : 'text-gray-500 hover:bg-gray-100'}`}>Member Aktif ({approvedMembers.length})</button>
         <button onClick={() => setTab('nonmember')} className={`px-4 sm:px-6 py-4 font-bold text-sm transition-colors whitespace-nowrap ${tab === 'nonmember' ? `${cTheme.text} border-b-2 ${cTheme.border} bg-white` : 'text-gray-500 hover:bg-gray-100'}`}>Non Member ({nonMembers.length})</button>
         <button onClick={() => setTab('approval')} className={`px-4 sm:px-6 py-4 font-bold text-sm transition-colors whitespace-nowrap flex items-center gap-2 ${tab === 'approval' ? `${cTheme.text} border-b-2 ${cTheme.border} bg-white` : 'text-gray-500 hover:bg-gray-100'}`}>Persetujuan {memberApps.length > 0 && <span className="bg-red-500 text-white text-[10px] px-2 py-0.5 rounded-full">{memberApps.length}</span>}</button>
      </div>

      <div className="w-full overflow-x-auto">
        {tab === 'member' && (
          <table className="w-full text-left border-collapse text-sm min-w-[600px]">
            <thead><tr className="bg-white text-gray-400 font-bold border-b text-xs uppercase"><th className="p-4">Profil</th><th className="p-4">Kontak</th><th className="p-4">Demografi</th><th className="p-4 text-right">Poin</th></tr></thead>
            <tbody className="divide-y divide-gray-100">
              {approvedMembers.length === 0 ? <tr><td colSpan="4" className="text-center py-10 text-gray-500">Belum ada member.</td></tr> : approvedMembers.map(m => (
                <tr key={`apprmem-${m.id}`} className="hover:bg-gray-50/50">
                  <td className="p-4">
                    <div className="flex items-center gap-3">
                       {m.photoUrl ? <img src={m.photoUrl} alt="Pic" className="w-10 h-10 rounded-full object-cover border"/> : <div className="w-10 h-10 rounded-full bg-gray-100 border flex items-center justify-center"><User className="w-5 h-5 text-gray-400"/></div>}
                       <div><p className="font-bold text-gray-800">{m.name}</p><p className="text-xs font-mono text-gray-500">{m.id}</p></div>
                    </div>
                  </td>
                  <td className="p-4"><p>{m.phone}</p><p className="text-xs text-gray-500">{m.email}</p></td>
                  <td className="p-4"><p>{m.gender}</p><p className="text-xs text-gray-500">{m.birthPlace}, {m.birthDate}</p></td>
                  <td className="p-4 text-right"><span className="font-bold text-yellow-600 bg-yellow-50 px-3 py-1.5 rounded-xl border border-yellow-100 flex items-center justify-end gap-1 w-max ml-auto"><Award className="w-4 h-4"/> {m.points}</span></td>
                </tr>
              ))}
            </tbody>
          </table>
        )}

        {tab === 'nonmember' && (
          <table className="w-full text-left border-collapse text-sm min-w-[600px]">
            <thead><tr className="bg-white text-gray-400 font-bold border-b text-xs uppercase"><th className="p-4">Nama Pelanggan</th><th className="p-4">KTP / NIK</th><th className="p-4">Kontak</th><th className="p-4 text-right">Riwayat Order</th></tr></thead>
            <tbody className="divide-y divide-gray-100">
              {nonMembers.length === 0 ? <tr><td colSpan="4" className="text-center py-10 text-gray-500">Tidak ada data.</td></tr> : nonMembers.map((nm, idx) => (
                <tr key={`nm-${idx}`} className="hover:bg-gray-50/50">
                  <td className="p-4 font-bold text-gray-800">{nm.name}</td>
                  <td className="p-4 font-mono text-gray-600">{nm.identity}</td>
                  <td className="p-4">{nm.phone}</td>
                  <td className="p-4 text-right"><p className="font-bold text-gray-800">{nm.orderCount}x Transaksi</p><p className="text-xs text-gray-500">{formatRupiah(nm.totalSpent)}</p></td>
                </tr>
              ))}
            </tbody>
          </table>
        )}

        {tab === 'approval' && (
          <div className="p-4 md:p-6 space-y-4">
            {memberApps.length === 0 ? <div className="text-center py-10 text-gray-500 border border-dashed rounded-xl">Tidak ada pendaftaran baru.</div> : memberApps.map(app => (
              <div key={`apprm-${app.id}`} className="bg-gray-50 p-4 rounded-xl border border-gray-100 flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                 <div className="flex items-center gap-4">
                    {app.payload.photoUrl ? <img src={app.payload.photoUrl} className="w-12 h-12 rounded-full object-cover border" alt="foto"/> : <div className="w-12 h-12 rounded-full bg-white border flex items-center justify-center"><User className="w-6 h-6 text-gray-300"/></div>}
                    <div>
                      <p className="font-bold text-gray-800">{app.requestedBy}</p>
                      <p className="text-xs text-gray-500 font-mono">{app.payload.identity} &bull; {app.payload.phone}</p>
                    </div>
                 </div>
                 <div className="flex gap-2 w-full md:w-auto">
                   <button onClick={() => handleApproval(app.id, 'reject')} className="flex-1 px-4 py-2 bg-white text-red-500 border border-gray-200 rounded-lg text-sm font-bold hover:bg-gray-50">Tolak</button>
                   <button onClick={() => handleApproval(app.id, 'approve')} className={`flex-1 px-4 py-2 ${cTheme.bg} text-white rounded-lg text-sm font-bold hover:brightness-110`}>Terima Member</button>
                 </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
};

const AdminPrizes = () => {
  const { prizes, requireApproval, cTheme } = useContext(AppStateContext);
  const [formData, setFormData] = useState({ name: '', points: '', desc: '', image: null });
  
  const handleImageUpload = (e) => {
    const file = e.target.files[0];
    if (file) { const reader = new FileReader(); reader.onloadend = () => setFormData(p => ({ ...p, image: reader.result })); reader.readAsDataURL(file); }
  };

  const handleAdd = (e) => {
    e.preventDefault();
    if(requireApproval('ADD_PRIZE', { id: `PRZ-${Date.now()}`, name: formData.name, points: parseInt(formData.points), desc: formData.desc, image: formData.image || 'https://placehold.co/200?text=Prize' }, 'Hadiah ditambahkan.')) {
      setFormData({ name: '', points: '', desc: '', image: null });
    }
  };

  return (
    <div className="animate-fade-in-down w-full space-y-6">
      <div className="bg-white p-5 md:p-6 rounded-3xl border border-gray-100 shadow-sm">
         <h2 className="text-lg font-bold mb-4 flex items-center gap-2"><Gift className="w-5 h-5 text-rose-500"/> Tambah Hadiah Baru</h2>
         <form onSubmit={handleAdd} className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div><label className="block text-xs font-medium text-gray-500 mb-1">Nama Hadiah</label><input required type="text" value={formData.name} onChange={e=>setFormData({...formData, name: e.target.value})} className="w-full px-3 py-2 bg-gray-50 border rounded-lg text-[16px] md:text-sm outline-none focus:border-gray-400" /></div>
            <div><label className="block text-xs font-medium text-gray-500 mb-1">Harga (Poin)</label><input required type="number" min="1" value={formData.points} onChange={e=>setFormData({...formData, points: e.target.value})} className="w-full px-3 py-2 bg-gray-50 border rounded-lg text-[16px] md:text-sm outline-none focus:border-gray-400" /></div>
            <div className="sm:col-span-2"><label className="block text-xs font-medium text-gray-500 mb-1">Deskripsi Singkat</label><textarea required rows="2" value={formData.desc} onChange={e=>setFormData({...formData, desc: e.target.value})} className="w-full px-3 py-2 bg-gray-50 border rounded-lg text-[16px] md:text-sm outline-none focus:border-gray-400"></textarea></div>
            <div className="sm:col-span-2"><label className="flex items-center justify-center p-3 border-2 border-dashed rounded-lg cursor-pointer hover:bg-gray-50 text-sm text-gray-500 bg-white"><Upload className="w-4 h-4 mr-2" /> {formData.image ? 'Gambar Siap' : 'Upload Gambar Hadiah'}<input type="file" accept="image/*" onChange={handleImageUpload} className="hidden" /></label></div>
            <button type="submit" className={`sm:col-span-2 py-3 ${cTheme.bg} text-white font-bold rounded-xl mt-2`}>Simpan Ke Katalog</button>
         </form>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
        {prizes.length === 0 ? <div className="col-span-full text-center py-10 bg-white border border-dashed rounded-2xl text-gray-500">Katalog hadiah poin kosong.</div> :
        prizes.map(p => (
           <div key={`mngprz-${p.id}`} className="bg-white border border-gray-100 rounded-2xl shadow-sm overflow-hidden flex flex-col">
              <div className="h-32 bg-gray-100 relative">
                 <img src={p.image} className="w-full h-full object-cover" alt="prize"/>
                 <button onClick={() => requireApproval('DELETE_PRIZE', {id: p.id}, 'Hadiah dihapus.', true)} className="absolute top-2 right-2 p-1.5 bg-red-500 text-white rounded-lg hover:bg-red-600"><Trash2 className="w-4 h-4"/></button>
              </div>
              <div className="p-4 flex flex-col flex-grow">
                 <h4 className="font-bold text-sm text-gray-800 mb-1">{p.name}</h4>
                 <p className="text-xs text-gray-500 mb-3 flex-grow">{p.desc}</p>
                 <span className="font-bold text-yellow-600 flex items-center gap-1 text-sm bg-yellow-50 w-max px-2 py-1 rounded-lg border border-yellow-100"><Award className="w-4 h-4"/> {p.points} Poin</span>
              </div>
           </div>
        ))}
      </div>
    </div>
  );
};

const AdminApprovals = () => {
  const { approvals, handleApproval, loggedInUser } = useContext(AppStateContext);
  const sysApps = approvals.filter(a => a.actionType !== 'REGISTER_MEMBER');
  if (sysApps.length === 0) return <div className="text-center py-12 text-gray-500 bg-white rounded-2xl border border-dashed border-gray-200">Tidak ada antrean sistem.</div>;

  return (
    <div className="space-y-4 w-full animate-fade-in-down">
      <h2 className="text-lg font-bold mb-4 flex items-center gap-2"><CheckCircle className="w-5 h-5 text-gray-500"/> Persetujuan Sistem ({sysApps.length})</h2>
      {sysApps.map(app => {
        const canApprove = loggedInUser.role === 'owner' || loggedInUser.role === 'developer' || (loggedInUser.role === 'manager' && !(app.requesterRole === 'manager' && app.actionType === 'UPDATE_USER'));
        return (
          <div key={`sysapp-${app.id}`} className="bg-white p-4 md:p-5 rounded-2xl border shadow-sm flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
            <div className="overflow-hidden w-full md:w-auto">
              <div className="flex flex-wrap items-center gap-2 mb-2"><span className="bg-yellow-100 text-yellow-800 text-xs font-bold px-2 py-1 rounded border">Menunggu Izin</span><span className="text-[10px] text-gray-400 font-mono">{app.id}</span></div>
              <p className="font-bold text-gray-800 text-base md:text-lg truncate">{app.actionType.replace('_', ' ')}</p>
              <p className="text-xs md:text-sm text-gray-600 truncate">Oleh: <span className="font-bold">{app.requestedBy}</span> <span className="bg-gray-100 px-1 rounded text-[10px] ml-1">{app.requesterRole}</span></p>
            </div>
            {canApprove ? (
              <div className="flex gap-2 w-full md:w-auto mt-2 md:mt-0 justify-center">
                <button onClick={() => handleApproval(app.id, 'reject')} className="flex-1 md:flex-none px-4 py-2 bg-red-50 text-red-600 rounded-lg text-sm font-bold">Tolak</button>
                <button onClick={() => handleApproval(app.id, 'approve')} className="flex-1 md:flex-none px-4 py-2 bg-gray-900 text-white rounded-lg text-sm font-bold">Setujui</button>
              </div>
            ) : (<div className="w-full md:w-auto text-center px-4 py-2 bg-gray-50 border rounded-lg text-xs font-medium text-gray-500">Menunggu Owner</div>)}
          </div>
        );
      })}
    </div>
  );
};

const AdminAccountSettings = () => {
  const { loggedInUser, requireApproval } = useContext(AppStateContext);
  const [formData, setFormData] = useState({ name: loggedInUser.name, username: loggedInUser.username, password: loggedInUser.password });
  
  const handleSubmit = (e) => {
    e.preventDefault();
    requireApproval('UPDATE_USER', { userId: loggedInUser.id, name: formData.name, username: formData.username, password: formData.password }, 'Profil diupdate.', true);
  };

  return (
    <div className="max-w-xl bg-white p-6 md:p-8 rounded-3xl border shadow-sm w-full mx-auto animate-fade-in-down">
      <div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-6"><User className="w-8 h-8 text-gray-600"/></div>
      <h2 className="text-xl font-bold mb-6">Setelan Akun Pribadi</h2>
      <form onSubmit={handleSubmit} className="space-y-4">
        <div><label className="block text-sm font-medium mb-1">Nama Tampilan</label><input required type="text" value={formData.name} onChange={e=>setFormData({...formData, name: e.target.value})} className="w-full px-4 py-3 bg-gray-50 border rounded-xl text-[16px] md:text-sm outline-none focus:bg-white" /></div>
        <div><label className="block text-sm font-medium mb-1">Username Login</label><input required type="text" value={formData.username} onChange={e=>setFormData({...formData, username: e.target.value})} className="w-full px-4 py-3 bg-gray-50 border rounded-xl text-[16px] md:text-sm outline-none focus:bg-white" /></div>
        <div><label className="block text-sm font-medium mb-1">Password Baru</label><input required type="text" value={formData.password} onChange={e=>setFormData({...formData, password: e.target.value})} className="w-full px-4 py-3 bg-gray-50 border rounded-xl text-[16px] md:text-sm outline-none focus:bg-white" /></div>
        <button type="submit" className="w-full py-3.5 bg-gray-900 text-white rounded-xl font-bold hover:bg-black mt-4 shadow-md text-[16px]">Ajukan Perubahan</button>
      </form>
    </div>
  );
};

const AdminLogs = () => {
  const { logs } = useContext(AppStateContext);
  return (
    <div className="bg-white rounded-3xl border border-gray-100 shadow-sm overflow-hidden animate-fade-in-down w-full">
      <div className="p-6 border-b border-gray-100">
         <h2 className="text-lg font-bold flex items-center gap-2"><ClipboardList className="w-5 h-5"/> Log Sistem & Aktivitas</h2>
         <p className="text-sm text-gray-500">Memantau riwayat perubahan data dan status (Eksklusif untuk Owner & Developer).</p>
      </div>
      <div className="overflow-x-auto w-full">
         <table className="w-full text-left border-collapse text-sm min-w-[700px]">
            <thead><tr className="bg-gray-50 text-gray-500 font-bold border-b"><th className="p-4">Waktu Kejadian</th><th className="p-4">Pengguna</th><th className="p-4">Kategori Menu</th><th className="p-4">Detail Aktivitas</th></tr></thead>
            <tbody className="divide-y divide-gray-100">
               {logs.length === 0 ? <tr><td colSpan="4" className="text-center py-12 text-gray-500 font-medium">Belum ada riwayat aktivitas tercatat.</td></tr> :
                logs.map(log => (
                   <tr key={log.id} className="hover:bg-gray-50/50">
                      <td className="p-4 text-xs font-mono text-gray-500">{log.timestamp}</td>
                      <td className="p-4 font-bold text-gray-800">{log.user}</td>
                      <td className="p-4"><span className="bg-gray-100 border border-gray-200 px-2.5 py-1 rounded-lg text-xs font-bold text-gray-600 shadow-sm">{log.action}</span></td>
                      <td className="p-4 text-gray-700">{log.detail}</td>
                   </tr>
                ))
               }
            </tbody>
         </table>
      </div>
    </div>
  );
};

const AdminSystemSettings = () => {
  const { brandConfig, setBrandConfig, users, requireApproval, showToast, loggedInUser, addLog } = useContext(AppStateContext);
  const [bConfig, setBConfig] = useState(brandConfig);

  const handleSaveBrand = (e) => { 
     e.preventDefault(); 
     setBrandConfig(bConfig); 
     showToast('Konfigurasi Toko Disimpan.', 'success'); 
     addLog('Pengaturan', 'Menyimpan perubahan konfigurasi dan profil perusahaan toko.');
  };
  const addSocial = () => setBConfig({...bConfig, socialMedia: [...bConfig.socialMedia, {type: 'Instagram', value: '', label: ''}]});
  const updateSocial = (index, field, val) => { const newS = [...bConfig.socialMedia]; newS[index][field] = val; setBConfig({...bConfig, socialMedia: newS}); };
  const removeSocial = (index) => setBConfig({...bConfig, socialMedia: bConfig.socialMedia.filter((_, i) => i !== index)});

  return (
    <div className="space-y-6 md:space-y-8 w-full animate-fade-in-down">
      <div className="bg-white p-5 md:p-8 rounded-2xl md:rounded-3xl border shadow-sm w-full">
         <h2 className="text-lg md:text-xl font-bold mb-4 md:mb-6 flex items-center gap-2 border-b pb-4"><SettingsIcon className="w-5 h-5 text-gray-400"/> Identitas Toko (Whitelabel)</h2>
         <form onSubmit={handleSaveBrand} className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
            <div><label className="block text-sm font-medium mb-1.5">Nama Aplikasi / Toko</label><input type="text" value={bConfig.appName} onChange={e=>setBConfig({...bConfig, appName: e.target.value})} className="w-full px-4 py-2.5 bg-gray-50 border rounded-xl outline-none text-[16px] md:text-sm" /></div>
            <div><label className="block text-sm font-medium mb-1.5">Warna Tema Utama</label><select value={bConfig.themeColor} onChange={e=>setBConfig({...bConfig, themeColor: e.target.value})} className="w-full px-4 py-2.5 bg-gray-50 border rounded-xl outline-none text-[16px] md:text-sm"><option value="rose">Rose (Default)</option><option value="blue">Ocean Blue</option><option value="emerald">Emerald Green</option><option value="purple">Royal Purple</option><option value="slate">Dark Slate</option></select></div>
            <div className="md:col-span-2"><label className="block text-sm font-medium mb-1.5">Slogan Singkat</label><input type="text" value={bConfig.slogan} onChange={e=>setBConfig({...bConfig, slogan: e.target.value})} className="w-full px-4 py-2.5 bg-gray-50 border rounded-xl outline-none text-[16px] md:text-sm" /></div>
            <div className="md:col-span-2"><label className="block text-sm font-medium mb-1.5">Profil / Biodata Perusahaan</label><textarea rows="4" value={bConfig.companyBio} onChange={e=>setBConfig({...bConfig, companyBio: e.target.value})} className="w-full px-4 py-3 bg-gray-50 border rounded-xl outline-none text-[16px] md:text-sm leading-relaxed" /></div>
            <div className="md:col-span-2"><label className="block text-sm font-medium mb-1.5">Email Bisnis</label><input type="email" value={bConfig.companyEmail} onChange={e=>setBConfig({...bConfig, companyEmail: e.target.value})} className="w-full px-4 py-2.5 bg-gray-50 border rounded-xl outline-none text-[16px] md:text-sm" /></div>
            
            <div className="md:col-span-2 bg-gray-50 p-4 rounded-xl border mt-2">
              <div className="flex justify-between items-center mb-4"><label className="block text-sm font-bold">Tautan Media Sosial</label><button type="button" onClick={addSocial} className="text-xs bg-gray-900 text-white px-3 py-1.5 rounded-lg font-bold shadow-sm">+ Tambah Akun</button></div>
              <div className="space-y-3">
                {bConfig.socialMedia.map((soc, i) => (
                  <div key={`soc-${i}`} className="flex flex-col sm:flex-row gap-2 items-start sm:items-center">
                    <select value={soc.type} onChange={e=>updateSocial(i, 'type', e.target.value)} className="w-full sm:w-32 px-3 py-2 bg-white border rounded-lg text-[16px] md:text-sm outline-none shadow-sm"><option>WhatsApp</option><option>Instagram</option><option>TikTok</option><option>Website</option></select>
                    <input type="text" placeholder="Username / No HP / Link" value={soc.value} onChange={e=>updateSocial(i, 'value', e.target.value)} className="w-full flex-1 px-3 py-2 bg-white border rounded-lg text-[16px] md:text-sm outline-none shadow-sm" />
                    <button type="button" onClick={() => removeSocial(i)} className="w-full sm:w-auto p-2 bg-red-50 text-red-500 rounded-lg hover:bg-red-100 flex justify-center border border-red-100"><Trash2 className="w-4 h-4"/></button>
                  </div>
                ))}
              </div>
            </div>
            <div className="md:col-span-2 flex justify-end mt-4"><button type="submit" className="w-full md:w-auto bg-gray-900 text-white px-8 py-3.5 rounded-xl font-bold shadow-lg active:scale-95 text-[16px]">Simpan Konfigurasi</button></div>
         </form>
      </div>

      <div className="bg-white p-5 md:p-8 rounded-2xl md:rounded-3xl border shadow-sm w-full overflow-hidden">
         <h2 className="text-lg md:text-xl font-bold mb-4 md:mb-6 flex items-center gap-2 border-b pb-4"><Users className="w-5 h-5 text-gray-400"/> Manajemen Otoritas (Staf)</h2>
         <div className="w-full overflow-x-auto">
           <table className="w-full text-left min-w-[600px]">
             <thead><tr className="text-xs font-bold text-gray-400 uppercase border-b"><th className="pb-3">Staf</th><th className="pb-3">Username</th><th className="pb-3 text-right">Tingkat Akses (Role)</th></tr></thead>
             <tbody className="divide-y divide-gray-100">
               {users.filter(u => u.role !== 'developer').map(u => (
                 <tr key={`usr-${u.id}`}>
                   <td className="py-4 font-bold text-gray-800">{u.name} {u.id === loggedInUser.id && <span className="text-[10px] bg-gray-100 px-2 py-0.5 rounded text-gray-500 ml-2">Anda</span>}</td>
                   <td className="py-4 text-sm font-mono text-gray-500">{u.username}</td>
                   <td className="py-4 text-right">
                      <select value={u.role} disabled={u.id === loggedInUser.id} onChange={(e) => { requireApproval('UPDATE_USER', {...u, role: e.target.value}, 'Otoritas diubah.', true); showToast(`Simulasi email konfirmasi dikirim ke ${bConfig.companyEmail}`, 'info'); }} className="px-3 py-1.5 border rounded-lg text-sm font-medium bg-gray-50 outline-none disabled:opacity-50 shadow-sm cursor-pointer focus:ring-2">
                        <option value="admin">Admin Kasir</option><option value="manager">Manager</option><option value="owner">Owner</option>
                      </select>
                   </td>
                 </tr>
               ))}
             </tbody>
           </table>
         </div>
      </div>
    </div>
  );
};

const AdminDeveloperPanel = () => {
  const { users, setUsers, exportData, importData, showToast, addLog } = useContext(AppStateContext);
  const handleFileUpload = (e) => { const file = e.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = (event) => { importData(event.target.result); e.target.value = null; }; reader.readAsText(file); };
  const handleRoleChange = (userId, newRole) => { 
      setUsers(prev => prev.map(u => u.id === userId ? { ...u, role: newRole } : u)); 
      showToast(`Otoritas pengguna di-override oleh Developer.`, 'success'); 
      addLog('Developer Override', `Mengubah paksa otoritas akun (${userId}) menjadi ${newRole}`);
  };

  return (
    <div className="space-y-6 md:space-y-8 animate-fade-in-down w-full">
      <div className="bg-gray-900 p-6 md:p-8 rounded-2xl md:rounded-3xl border border-gray-800 shadow-2xl text-white relative overflow-hidden">
         <div className="absolute top-0 right-0 p-5 md:p-10 opacity-10 pointer-events-none"><Terminal className="w-48 h-48 md:w-64 md:h-64" /></div>
         <h2 className="text-xl md:text-2xl font-bold mb-2 flex items-center gap-3"><Terminal className="w-6 h-6 md:w-8 md:h-8 text-green-400"/> Developer Console</h2>
         <p className="text-gray-400 mb-6 md:mb-8 text-sm md:text-base max-w-2xl">Akses Root/God Mode. Menimpa data langsung tanpa persetujuan.</p>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 relative z-10">
            <div className="bg-gray-800 p-5 rounded-xl border border-gray-700">
               <h3 className="text-sm md:text-lg font-bold mb-4 flex items-center gap-2"><Database className="w-4 h-4 md:w-5 md:h-5 text-blue-400"/> Manajemen Data</h3>
               <div className="space-y-3">
                  <button onClick={exportData} className="w-full flex justify-between items-center px-4 py-3 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors"><span className="font-medium text-xs md:text-sm">Backup (JSON)</span><Download className="w-4 h-4 md:w-5 md:h-5 text-blue-300"/></button>
                  <label className="w-full flex justify-between items-center px-4 py-3 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors cursor-pointer"><span className="font-medium text-xs md:text-sm">Restore (Private)</span><UploadCloud className="w-4 h-4 md:w-5 md:h-5 text-purple-300"/><input type="file" accept=".json" className="hidden" onChange={handleFileUpload} /></label>
               </div>
            </div>
            <div className="bg-gray-800 p-5 rounded-xl border border-gray-700">
               <h3 className="text-sm md:text-lg font-bold mb-4 flex items-center gap-2"><UploadCloud className="w-4 h-4 md:w-5 md:h-5 text-purple-400"/> Sistem Aplikasi</h3>
               <div className="space-y-3">
                  <div className="px-4 py-3 bg-gray-700 rounded-lg flex justify-between items-center"><span className="text-xs md:text-sm font-medium">Versi Saat Ini</span><span className="text-[10px] md:text-xs font-mono bg-gray-900 px-2 py-1 rounded text-green-400 border border-gray-800">v5.0.0-stable</span></div>
                  <button onClick={() => { showToast('Sistem sudah versi terbaru.', 'info'); addLog('Developer', 'Memeriksa pembaruan sistem ke Git Server'); }} className="w-full py-3 bg-purple-600 hover:bg-purple-700 rounded-lg font-bold text-xs md:text-sm transition-colors shadow-sm">Cek Pembaruan Git</button>
               </div>
            </div>
         </div>
         <div className="mt-6 md:mt-8 bg-gray-800 p-5 md:p-6 rounded-xl border border-gray-700 relative z-10 overflow-hidden w-full">
            <h3 className="text-sm md:text-lg font-bold mb-4 flex items-center gap-2"><Shield className="w-4 h-4 md:w-5 md:h-5 text-red-400"/> Override Otoritas Pihak Lain</h3>
            <div className="w-full overflow-x-auto">
              <table className="w-full text-left min-w-[500px]">
                 <thead><tr className="border-b border-gray-700 text-xs text-gray-400 uppercase tracking-wider"><th className="pb-3">Pengguna</th><th className="pb-3 text-right">Otoritas</th></tr></thead>
                 <tbody className="divide-y divide-gray-700">
                   {users.map(u => (
                     <tr key={`devusr-${u.id}`}>
                       <td className="py-3 text-xs md:text-sm font-bold text-white">{u.name} {u.role === 'developer' && <span className="text-[9px] md:text-[10px] ml-2 bg-green-900/50 text-green-400 px-2 py-0.5 rounded border border-green-800">Root</span>}</td>
                       <td className="py-3 text-right">
                          <select value={u.role} disabled={u.role === 'developer'} onChange={(e) => handleRoleChange(u.id, e.target.value)} className="px-2 py-1.5 bg-gray-900 border border-gray-600 text-white rounded text-[16px] sm:text-xs md:text-sm outline-none focus:border-green-500 cursor-pointer">
                            <option value="admin">Admin Kasir</option><option value="manager">Manager</option><option value="owner">Owner</option>{u.role === 'developer' && <option value="developer">Developer</option>}
                          </select>
                       </td>
                     </tr>
                   ))}
                 </tbody>
               </table>
            </div>
         </div>
      </div>
    </div>
  );
};

export default function App() { return <AppStateProvider><AppContent /></AppStateProvider>; }

const AppContent = () => {
  const { view, loggedInUser } = useContext(AppStateContext);

  if (view === 'admin' && !loggedInUser) return <AdminLogin />;
  if (view === 'admin' && loggedInUser) return <AdminLayout />;
  
  return (
    <CustomerLayout>
      {view === 'dashboard' && <DashboardView />}
      {view === 'catalog' && <CatalogView />}
      {view === 'cart' && <CartView />}
      {view === 'checkout' && <CheckoutView />}
      {view === 'success' && <SuccessView />}
      {view === 'member_auth' && <MemberAuthView />}
      {view === 'member_profile' && <MemberProfileView />}
    </CustomerLayout>
  );
};