import React, { useState, useEffect, useMemo } from 'react';
import { 
  LayoutDashboard, Utensils, Truck, Package, Users, Settings, 
  Sun, Moon, Brain, Plus, Bell, ChevronRight, 
  ArrowRight, MapPin, CheckCircle, LogOut, Activity,
  PieChart, ClipboardList, Filter,
  TrendingUp, AlertCircle, Edit3, Save, X, Trash2, Search,
  ShieldCheck, Clock, Calendar, Camera, Globe, Building, Upload,
  ImageIcon, Key, User as UserIcon, Eye, EyeOff, PlusCircle,
  PackagePlus, Layers, Thermometer, Box, Timer, MoreVertical,
  ChefHat, Users2, LocateFixed, Play, Check, RotateCcw,
  MinusCircle, History, Mail, Shield, UserPlus, Phone, HelpCircle,
  Languages, BellRing, Smartphone, HardDrive, Info, Map,
  Navigation, CheckSquare, FastForward, UserCog, ToggleLeft, ToggleRight, Menu,
  Flame, Droplets, Wheat, Printer, ShoppingCart, Tag, Download, Stepper,
  Zap, Navigation2, Flag, ShieldAlert, Award, Briefcase, Lock
} from 'lucide-react';

const App = () => {
  // --- Auth State ---
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [currentUser, setCurrentUser] = useState(null);
  
  // --- UI State ---
  const [isDarkMode, setIsDarkMode] = useState(false);
  const [activeTab, setActiveTab] = useState('dashboard'); 
  const [notification, setNotification] = useState(null);
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);

  // --- Master Data ---
  const [kitchenSettings, setKitchenSettings] = useState({
    name: "MBG SMART",
    tagline: "Sistem Manajemen Gizi Cerdas",
    address: "Jl. Merdeka No. 123, Jakarta Pusat",
    logo: null,
    phone: "021-555-0123",
    email: "admin@mbgsmart.id",
    capacity: 1500,
    timezone: "WIB (UTC+7)",
    language: "Bahasa Indonesia",
  });

  const [inventory, setInventory] = useState([
    { id: 1, name: "Beras Pandan Wangi", stock: 450, unit: "Kg", status: "Aman", category: "Pokok", lastUpdate: "2026-01-17" },
    { id: 2, name: "Daging Ayam", stock: 15, unit: "Kg", status: "Kritis", category: "Protein", lastUpdate: "2026-01-18" },
    { id: 3, name: "Minyak Goreng", stock: 120, unit: "Liter", status: "Aman", category: "Lainnya", lastUpdate: "2026-01-15" },
    { id: 4, name: "Sayur Bayam", stock: 45, unit: "Kg", status: "Menipis", category: "Sayuran", lastUpdate: "2026-01-18" },
  ]);

  const [menus, setMenus] = useState([
    { id: 1, day: "Senin", date: "2026-01-12", name: "Nasi Ayam Bakar Madu", calories: 580, protein: 32, carbs: 65, fats: 18, ingredients: "Ayam, Nasi, Sayur, Madu", target: "SD/SMP", code: "MBG-001" },
    { id: 2, day: "Selasa", date: "2026-01-13", name: "Ikan Pesmol & Tumis Labu", calories: 520, protein: 28, carbs: 55, fats: 14, ingredients: "Ikan, Labu Siam, Nasi, Bumbu Kuning", target: "SD/SMP", code: "MBG-002" },
  ]);

  const [deliveries, setDeliveries] = useState([
    { id: 1, courier: "Rizky Kurir", target: "SDN 02 Pagi", status: "Dalam Perjalanan", eta: "12 Menit", address: "Jl. Diponegoro No. 10", items: 450, phone: "0812-3456-7890", progress: 65 },
    { id: 2, courier: "Andi Logistik", target: "MIN 1 Jakarta", status: "Tiba di Lokasi", eta: "0 Menit", address: "Jl. Sudirman Kav 22", items: 320, phone: "0812-9988-7766", progress: 100 },
  ]);

  const [users, setUsers] = useState([
    { id: 1, name: "Budi Santoso", username: "admin", role: "Super Admin", email: "budi@mbg.id", status: "Aktif", phone: "0811223344", joinDate: "2025-10-01", shift: "Full Time" },
    { id: 2, name: "Siti Aminah", username: "siti_chef", role: "Kepala Dapur", email: "siti@mbg.id", status: "Aktif", phone: "0812998877", joinDate: "2025-11-15", shift: "Pagi" },
    { id: 3, name: "SDN 01 Merdeka", username: "sdn01", role: "Akun Sekolah", email: "info@sdn01.sch.id", status: "Aktif", phone: "021-998877", joinDate: "2026-01-18", shift: "Monitoring" },
  ]);

  // --- Global Handlers ---
  const showToast = (msg) => {
    setNotification(msg);
    setTimeout(() => setNotification(null), 3000);
  };

  const handleLogin = (userCredentials) => {
    // Mock authentication logic
    const user = users.find(u => u.username === userCredentials.username);
    if (user) {
      setCurrentUser(user);
      setIsAuthenticated(true);
      // Auto-set tab based on role
      if (user.role === 'Akun Sekolah') {
        setActiveTab('menu');
      } else {
        setActiveTab('dashboard');
      }
      showToast(`Selamat datang, ${user.name}`);
    } else {
      showToast("Username tidak ditemukan");
    }
  };

  const handleLogout = () => {
    setIsAuthenticated(false);
    setCurrentUser(null);
    setActiveTab('dashboard');
  };

  useEffect(() => {
    if (isDarkMode) document.documentElement.classList.add('dark');
    else document.documentElement.classList.remove('dark');
  }, [isDarkMode]);

  // --- RBAC Navigation Logic ---
  const navItems = useMemo(() => {
    const allItems = [
      { id: 'dashboard', label: 'Dashboard', icon: LayoutDashboard, roles: ['Super Admin', 'Kepala Dapur'] },
      { id: 'inventory', label: 'Stok', icon: Package, roles: ['Super Admin', 'Kepala Dapur'] },
      { id: 'menu', label: 'Menu Gizi', icon: Utensils, roles: ['Super Admin', 'Kepala Dapur', 'Akun Sekolah'] },
      { id: 'logistics', label: 'Logistik', icon: Truck, roles: ['Super Admin', 'Kepala Dapur', 'Akun Sekolah'] },
      { id: 'users', label: 'Staf', icon: Users, roles: ['Super Admin'] },
      { id: 'settings', label: 'Sistem', icon: Settings, roles: ['Super Admin'] },
    ];
    
    if (!currentUser) return [];
    return allItems.filter(item => item.roles.includes(currentUser.role));
  }, [currentUser]);

  if (!isAuthenticated) {
    return <LoginView onLogin={handleLogin} isDark={isDarkMode} setIsDark={setIsDarkMode} />;
  }

  return (
    <div className={`min-h-screen flex flex-col lg:flex-row transition-all duration-500 ${isDarkMode ? 'bg-[#0f172a] text-slate-100' : 'bg-[#f8fafc] text-slate-900'}`}>
      
      {isSidebarOpen && (
        <div className="fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-[40] lg:hidden" onClick={() => setIsSidebarOpen(false)} />
      )}

      <aside className={`fixed lg:sticky top-0 left-0 h-screen w-72 z-[50] border-r flex flex-col transition-transform duration-300 lg:translate-x-0 ${isSidebarOpen ? 'translate-x-0' : '-translate-x-full'} ${isDarkMode ? 'bg-[#1e293b] border-slate-800' : 'bg-white border-slate-200 shadow-xl'}`}>
        <div className="p-8 text-center relative border-b dark:border-slate-800">
          <button onClick={() => setIsSidebarOpen(false)} className="lg:hidden absolute top-4 right-4 p-2 text-slate-400">
            <X size={20} />
          </button>
          <div className="flex flex-col items-center gap-3">
            <div className={`w-16 h-16 rounded-3xl flex items-center justify-center overflow-hidden border-4 ${isDarkMode ? 'border-slate-800 bg-slate-800' : 'border-slate-50 bg-slate-50 shadow-inner'}`}>
              <Brain size={32} className="text-blue-600" />
            </div>
            <div className="mt-1">
              <span className="font-black text-blue-600 text-base uppercase block leading-tight">{kitchenSettings.name}</span>
              <span className="text-[9px] font-bold text-slate-400 uppercase tracking-widest">{kitchenSettings.tagline}</span>
            </div>
          </div>
        </div>
        
        <nav className="px-6 flex-1 space-y-1 overflow-y-auto py-6">
          {navItems.map(item => {
            const Icon = item.icon;
            return (
              <button 
                key={item.id} 
                onClick={() => { setActiveTab(item.id); setIsSidebarOpen(false); }} 
                className={`w-full flex items-center gap-4 px-6 py-4 rounded-2xl transition-all ${activeTab === item.id ? 'bg-blue-600 text-white shadow-lg shadow-blue-500/30 font-black' : 'text-slate-500 hover:bg-slate-50 dark:hover:bg-slate-800/40'}`}
              >
                <Icon size={20} /> <span className="text-sm font-bold">{item.label}</span>
              </button>
            );
          })}
        </nav>

        <div className="p-6 border-t dark:border-slate-800">
           <div className="mb-4 px-4 py-3 bg-slate-50 dark:bg-slate-800/50 rounded-xl">
              <p className="text-[8px] font-black text-slate-400 uppercase tracking-tighter mb-1">Role Anda</p>
              <p className="text-[10px] font-bold text-blue-600 uppercase flex items-center gap-1.5">
                <Shield size={10}/> {currentUser?.role}
              </p>
           </div>
           <button onClick={handleLogout} className="w-full flex items-center gap-4 px-6 py-4 rounded-2xl text-red-500 hover:bg-red-50 dark:hover:bg-red-900/10 transition-all">
              <LogOut size={20} /> <span className="text-sm font-bold">Keluar</span>
           </button>
        </div>
      </aside>

      <main className="flex-1 flex flex-col h-screen overflow-hidden relative">
        <header className={`h-16 md:h-20 border-b flex items-center justify-between px-6 md:px-10 sticky top-0 z-30 transition-all ${isDarkMode ? 'bg-[#0f172a]/80 border-slate-800' : 'bg-white/80 border-slate-200 backdrop-blur-xl'}`}>
          <div className="flex items-center gap-4">
            <button onClick={() => setIsSidebarOpen(true)} className="lg:hidden p-2 -ml-2 text-slate-500">
              <Menu size={24} />
            </button>
            <h2 className="text-sm md:text-lg font-black tracking-tight flex items-center gap-2">
              <span className="text-blue-600 capitalize">{activeTab}</span>
              <ChevronRight size={14} className="text-slate-300" />
              <span className="text-[10px] text-slate-400 uppercase hidden sm:inline">{currentUser?.role} Panel</span>
            </h2>
          </div>

          <div className="flex items-center gap-3">
             <button onClick={() => setIsDarkMode(!isDarkMode)} className={`p-2 rounded-xl border ${isDarkMode ? 'bg-slate-800 border-slate-700 text-yellow-400' : 'bg-white border-slate-200 text-blue-600 shadow-sm'}`}>
              {isDarkMode ? <Sun size={18} /> : <Moon size={18} />}
            </button>
            <div className="h-9 w-9 rounded-full bg-blue-600 flex items-center justify-center text-white text-xs font-bold uppercase border-2 border-white shadow-sm">
              {currentUser?.name.charAt(0)}
            </div>
          </div>
        </header>

        <section className="flex-1 overflow-y-auto p-4 md:p-8 pb-32 lg:pb-10">
          <div className="max-w-6xl mx-auto">
            {activeTab === 'dashboard' && <DashboardView inventory={inventory} deliveries={deliveries} users={users} isDark={isDarkMode} />}
            {activeTab === 'inventory' && <InventoryView inventory={inventory} setInventory={setInventory} isDark={isDarkMode} showToast={showToast} />}
            {activeTab === 'menu' && <MenuView menus={menus} setMenus={setMenus} kitchenSettings={kitchenSettings} isDark={isDarkMode} showToast={showToast} role={currentUser.role} />}
            {activeTab === 'logistics' && <LogisticsView deliveries={deliveries} setDeliveries={setDeliveries} isDark={isDarkMode} showToast={showToast} role={currentUser.role} />}
            {activeTab === 'users' && <UsersView users={users} setUsers={setUsers} isDark={isDarkMode} showToast={showToast} />}
            {activeTab === 'settings' && <SettingsView kitchenSettings={kitchenSettings} isDark={isDarkMode} />}
          </div>
        </section>

        {/* Mobile Nav */}
        <nav className={`lg:hidden fixed bottom-0 left-0 right-0 h-20 border-t flex items-center justify-around px-2 z-[45] ${isDarkMode ? 'bg-[#1e293b]/95 border-slate-800' : 'bg-white/95 border-slate-200 shadow-xl'} backdrop-blur-lg`}>
          {navItems.map(item => {
            const Icon = item.icon;
            const isActive = activeTab === item.id;
            return (
              <button key={item.id} onClick={() => setActiveTab(item.id)} className={`flex flex-col items-center gap-1.5 transition-all px-3 py-2 ${isActive ? 'text-blue-600' : 'text-slate-400'}`}>
                <Icon size={isActive ? 24 : 20} />
                <span className={`text-[9px] font-black uppercase tracking-tighter ${isActive ? 'opacity-100' : 'opacity-60'}`}>{item.label}</span>
              </button>
            );
          })}
        </nav>
      </main>

      {notification && <Toast message={notification} />}
    </div>
  );
};

// --- LOGIN VIEW ---
const LoginView = ({ onLogin, isDark, setIsDark }) => {
  const [loading, setLoading] = useState(false);
  const [username, setUsername] = useState('admin');

  const handleSubmit = (e) => {
    e.preventDefault();
    setLoading(true);
    setTimeout(() => { 
      onLogin({ username }); 
      setLoading(false); 
    }, 800);
  };

  return (
    <div className={`min-h-screen flex items-center justify-center p-6 ${isDark ? 'bg-[#0f172a]' : 'bg-[#f1f5f9]'}`}>
      <div className={`w-full max-w-md p-8 md:p-12 rounded-[2.5rem] border shadow-2xl transition-all ${isDark ? 'bg-slate-900 border-slate-800 text-white' : 'bg-white border-slate-100'}`}>
        <div className="text-center mb-10">
          <div className="w-16 h-16 bg-blue-600 text-white rounded-[1.5rem] flex items-center justify-center mx-auto mb-6 shadow-xl shadow-blue-500/30"><Brain size={40}/></div>
          <h1 className="text-2xl font-black uppercase tracking-tight">MBG SMART <span className="text-blue-600">AI</span></h1>
          <p className="text-slate-400 text-[10px] font-bold uppercase tracking-widest mt-2">Masuk ke Panel Kontrol</p>
        </div>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="space-y-1">
            <label className="text-[10px] font-black uppercase text-slate-400 ml-2">Username</label>
            <input 
              type="text" 
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              className={`w-full px-6 py-4 rounded-xl border outline-none font-bold text-sm ${isDark ? 'bg-slate-800 border-slate-700' : 'bg-slate-50'}`} 
              required 
            />
            <div className="mt-2 flex gap-2 overflow-x-auto pb-1">
              <button type="button" onClick={() => setUsername('admin')} className="text-[8px] bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded font-bold uppercase">Super Admin</button>
              <button type="button" onClick={() => setUsername('sdn01')} className="text-[8px] bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded font-bold uppercase">Sekolah</button>
            </div>
          </div>
          <div className="space-y-1">
            <label className="text-[10px] font-black uppercase text-slate-400 ml-2">Sandi</label>
            <input type="password" defaultValue="password" className={`w-full px-6 py-4 rounded-xl border outline-none font-bold text-sm ${isDark ? 'bg-slate-800 border-slate-700' : 'bg-slate-50'}`} required />
          </div>
          <button disabled={loading} className="w-full mt-4 py-5 bg-blue-600 text-white rounded-xl font-black uppercase tracking-widest text-sm shadow-xl shadow-blue-500/30 hover:scale-[1.02] active:scale-95 transition-all">
            {loading ? 'Memuat...' : 'Masuk Aplikasi'}
          </button>
        </form>
      </div>
    </div>
  );
};

// --- STAF / USERS VIEW ---
const UsersView = ({ users, setUsers, isDark, showToast }) => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [editingUser, setEditingUser] = useState(null);
  const [searchQuery, setSearchQuery] = useState('');
  const [filterRole, setFilterRole] = useState('Semua');
  
  const [formData, setFormData] = useState({
    name: '', username: '', role: 'Staf Dapur', email: '', phone: '', status: 'Aktif', shift: 'Pagi', joinDate: new Date().toISOString().split('T')[0]
  });

  const roles = ['Semua', 'Super Admin', 'Kepala Dapur', 'Kurir', 'Staf Dapur', 'Akun Sekolah'];

  const handleOpen = (user = null) => {
    if (user) {
      setEditingUser(user);
      setFormData({...user});
    } else {
      setEditingUser(null);
      setFormData({ 
        name: '', username: '', role: 'Staf Dapur', email: '', phone: '', status: 'Aktif', shift: 'Pagi', joinDate: new Date().toISOString().split('T')[0] 
      });
    }
    setIsModalOpen(true);
  };

  const handleClose = () => {
    setIsModalOpen(false);
    setEditingUser(null);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (editingUser) {
      setUsers(users.map(u => u.id === editingUser.id ? { ...formData, id: u.id } : u));
      showToast(`Data ${formData.name} berhasil diperbarui`);
    } else {
      setUsers([...users, { ...formData, id: Date.now() }]);
      showToast(`Staf baru ${formData.name} telah terdaftar`);
    }
    handleClose();
  };

  const toggleUserStatus = (id) => {
    setUsers(users.map(u => {
      if (u.id === id) {
        const newStatus = u.status === 'Aktif' ? 'Non-Aktif' : 'Aktif';
        showToast(`Status ${u.name} diubah menjadi ${newStatus}`);
        return { ...u, status: newStatus };
      }
      return u;
    }));
  };

  const deleteUser = (id, name) => {
    if (window.confirm(`Hapus data staf ${name}? Tindakan ini tidak dapat dibatalkan.`)) {
      setUsers(users.filter(u => u.id !== id));
      showToast(`Data staf ${name} telah dihapus`);
    }
  };

  const filteredUsers = users.filter(u => {
    const matchesSearch = u.name.toLowerCase().includes(searchQuery.toLowerCase()) || 
                          u.username.toLowerCase().includes(searchQuery.toLowerCase());
    const matchesRole = filterRole === 'Semua' || u.role === filterRole;
    return matchesSearch && matchesRole;
  });

  return (
    <div className="space-y-8 animate-in fade-in duration-500">
      <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-6">
        <div>
          <h1 className="text-2xl font-black uppercase tracking-tight text-blue-600 flex items-center gap-2">
            <Users size={28}/> Manajemen Personel & Tim
          </h1>
          <p className="text-slate-500 text-xs font-medium italic">Kelola hak akses, status keaktifan, dan profil staf dapur pusat.</p>
        </div>
        <div className="flex flex-wrap gap-3 w-full md:w-auto">
          <div className="relative flex-1 md:w-64">
            <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400" size={16} />
            <input 
              type="text" 
              placeholder="Cari nama atau username..." 
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className={`w-full pl-11 pr-4 py-3.5 rounded-2xl border text-sm outline-none font-bold transition-all ${isDark ? 'bg-slate-800 border-slate-700 focus:border-blue-500' : 'bg-white border-slate-100 shadow-sm focus:border-blue-600'}`}
            />
          </div>
          <button onClick={() => handleOpen()} className="px-6 py-3.5 bg-blue-600 text-white rounded-2xl font-black text-[10px] uppercase shadow-lg shadow-blue-500/20 flex items-center gap-2 transition-transform hover:scale-105 active:scale-95">
            <UserPlus size={18}/> Tambah Personel
          </button>
        </div>
      </div>

      <div className="flex items-center gap-2 overflow-x-auto pb-2 scrollbar-hide">
        {roles.map(r => (
          <button 
            key={r} 
            onClick={() => setFilterRole(r)}
            className={`px-5 py-2.5 rounded-xl text-[10px] font-black uppercase whitespace-nowrap transition-all border ${
              filterRole === r 
                ? 'bg-blue-600 border-blue-600 text-white shadow-md' 
                : isDark ? 'bg-slate-800 border-slate-700 text-slate-400 hover:text-white' : 'bg-white border-slate-100 text-slate-500 hover:bg-slate-50'
            }`}
          >
            {r}
          </button>
        ))}
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {filteredUsers.length > 0 ? filteredUsers.map(u => (
          <div key={u.id} className={`p-8 rounded-[2.5rem] border group relative transition-all hover:shadow-2xl hover:-translate-y-1.5 ${isDark ? 'bg-slate-900 border-slate-800' : 'bg-white border-slate-100 shadow-xl shadow-slate-200/50'}`}>
            <div className={`absolute top-6 right-6 px-3 py-1 rounded-lg text-[8px] font-black uppercase text-white shadow-sm flex items-center gap-1.5 ${u.status === 'Aktif' ? 'bg-emerald-500' : 'bg-slate-400'}`}>
              <div className={`w-1.5 h-1.5 rounded-full bg-white ${u.status === 'Aktif' ? 'animate-pulse' : ''}`}></div>
              {u.status}
            </div>
            
            <div className="flex items-center gap-5 mb-6">
              <div className={`w-16 h-16 rounded-2xl flex items-center justify-center text-xl font-black shadow-inner border-2 ${
                u.role === 'Super Admin' ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 border-blue-100' :
                u.role === 'Kepala Dapur' ? 'bg-orange-50 dark:bg-orange-900/20 text-orange-600 border-orange-100' :
                u.role === 'Akun Sekolah' ? 'bg-purple-50 dark:bg-purple-900/20 text-purple-600 border-purple-100' :
                'bg-slate-50 dark:bg-slate-800/40 text-slate-500 border-slate-100'
              }`}>
                {u.name.charAt(0)}
              </div>
              <div>
                <h3 className="font-black text-lg tracking-tight line-clamp-1">{u.name}</h3>
                <p className="text-[10px] font-black uppercase text-blue-600 flex items-center gap-1.5 tracking-wider">
                  {u.role === 'Super Admin' && <ShieldCheck size={12}/>}
                  {u.role === 'Kepala Dapur' && <Award size={12}/>}
                  {u.role === 'Akun Sekolah' && <Building size={12}/>}
                  {u.role}
                </p>
              </div>
            </div>

            <div className="grid grid-cols-1 gap-3 mb-8">
              <div className={`p-3.5 rounded-2xl flex items-center gap-3 ${isDark ? 'bg-slate-800/50' : 'bg-slate-50'}`}>
                <Mail size={14} className="text-blue-600 shrink-0"/>
                <span className="text-[10px] font-bold text-slate-500 truncate">{u.email}</span>
              </div>
              <div className="grid grid-cols-2 gap-3">
                <div className={`p-3.5 rounded-2xl flex items-center gap-3 ${isDark ? 'bg-slate-800/50' : 'bg-slate-50'}`}>
                  <Phone size={14} className="text-blue-600 shrink-0"/>
                  <span className="text-[10px] font-bold text-slate-500">{u.phone}</span>
                </div>
                <div className={`p-3.5 rounded-2xl flex items-center gap-3 ${isDark ? 'bg-slate-800/50' : 'bg-slate-50'}`}>
                  <Clock size={14} className="text-blue-600 shrink-0"/>
                  <span className="text-[10px] font-bold text-slate-500">{u.shift}</span>
                </div>
              </div>
            </div>

            <div className="flex gap-2 pt-2">
              <button 
                onClick={() => handleOpen(u)} 
                className={`flex-1 flex items-center justify-center gap-2 py-3.5 rounded-xl text-[9px] font-black uppercase transition-all shadow-sm ${
                  isDark ? 'bg-slate-800 text-slate-300 hover:bg-blue-600 hover:text-white' : 'bg-white border text-slate-600 hover:bg-blue-600 hover:text-white'
                }`}
              >
                <Edit3 size={14}/> Edit
              </button>
              <button 
                onClick={() => toggleUserStatus(u.id)} 
                className={`p-3.5 rounded-xl transition-all shadow-sm ${
                  u.status === 'Aktif' 
                    ? (isDark ? 'bg-slate-800 text-orange-400 hover:bg-orange-500 hover:text-white' : 'bg-orange-50 text-orange-500 hover:bg-orange-500 hover:text-white')
                    : (isDark ? 'bg-slate-800 text-emerald-400 hover:bg-emerald-500 hover:text-white' : 'bg-emerald-50 text-emerald-500 hover:bg-emerald-500 hover:text-white')
                }`}
                title={u.status === 'Aktif' ? 'Non-aktifkan Akun' : 'Aktifkan Akun'}
              >
                {u.status === 'Aktif' ? <ToggleRight size={18}/> : <ToggleLeft size={18}/>}
              </button>
              <button 
                onClick={() => deleteUser(u.id, u.name)} 
                className={`p-3.5 rounded-xl transition-all shadow-sm ${
                  isDark ? 'bg-slate-800 text-red-400 hover:bg-red-500 hover:text-white' : 'bg-red-50 text-red-500 hover:bg-red-500 hover:text-white'
                }`}
              >
                <Trash2 size={18}/>
              </button>
            </div>
          </div>
        )) : (
          <div className="col-span-full py-20 flex flex-col items-center justify-center text-slate-400 gap-4">
            <Users size={64} className="opacity-20" />
            <p className="font-black uppercase tracking-widest text-xs">Tidak ada staf ditemukan</p>
          </div>
        )}
      </div>

      {isModalOpen && (
        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-900/80 backdrop-blur-md animate-in zoom-in duration-300">
          <div className={`w-full max-w-2xl rounded-[3rem] p-8 md:p-12 border shadow-2xl relative ${isDark ? 'bg-slate-900 border-slate-800 text-white' : 'bg-white'}`}>
            <button 
              onClick={handleClose}
              className="absolute top-8 right-8 p-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
            >
              <X size={24}/>
            </button>
            
            <div className="mb-10 text-center">
              <div className="w-16 h-16 bg-blue-600 text-white rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-xl shadow-blue-500/30">
                {editingUser ? <UserCog size={32}/> : <UserPlus size={32}/>}
              </div>
              <h2 className="text-2xl font-black uppercase italic tracking-tighter">
                {editingUser ? 'Perbarui Profil Personel' : 'Registrasi Personel Baru'}
              </h2>
              <p className="text-slate-400 text-[10px] font-bold uppercase tracking-[0.2em] mt-2">Atur identitas, shift kerja, dan hak akses aplikasi</p>
            </div>

            <form onSubmit={handleSubmit} className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="space-y-1.5">
                  <label className="text-[9px] font-black uppercase text-slate-400 ml-2 tracking-widest">Nama Lengkap / Instansi</label>
                  <input 
                    value={formData.name} 
                    onChange={e => setFormData({...formData, name: e.target.value})} 
                    className={`w-full p-4 rounded-2xl border outline-none font-bold text-sm transition-all ${isDark ? 'bg-slate-800 border-slate-700 focus:border-blue-500' : 'bg-slate-50 border-slate-100 focus:bg-white focus:border-blue-600'}`} 
                    placeholder="Contoh: SDN 01 Merdeka" 
                    required 
                  />
                </div>
                <div className="space-y-1.5">
                  <label className="text-[9px] font-black uppercase text-slate-400 ml-2 tracking-widest">Username Login</label>
                  <input 
                    value={formData.username} 
                    onChange={e => setFormData({...formData, username: e.target.value})} 
                    className={`w-full p-4 rounded-2xl border outline-none font-bold text-sm transition-all ${isDark ? 'bg-slate-800 border-slate-700 focus:border-blue-500' : 'bg-slate-50 border-slate-100 focus:bg-white focus:border-blue-600'}`} 
                    placeholder="username_login" 
                    required 
                  />
                </div>
              </div>
              
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="space-y-1.5">
                  <label className="text-[9px] font-black uppercase text-slate-400 ml-2 tracking-widest">Email Kontak</label>
                  <input 
                    type="email" 
                    value={formData.email} 
                    onChange={e => setFormData({...formData, email: e.target.value})} 
                    className={`w-full p-4 rounded-2xl border outline-none font-bold text-sm transition-all ${isDark ? 'bg-slate-800 border-slate-700 focus:border-blue-500' : 'bg-slate-50 border-slate-100 focus:bg-white focus:border-blue-600'}`} 
                    placeholder="email@domain.com" 
                    required 
                  />
                </div>
                <div className="space-y-1.5">
                  <label className="text-[9px] font-black uppercase text-slate-400 ml-2 tracking-widest">Nomor Telepon</label>
                  <input 
                    value={formData.phone} 
                    onChange={e => setFormData({...formData, phone: e.target.value})} 
                    className={`w-full p-4 rounded-2xl border outline-none font-bold text-sm transition-all ${isDark ? 'bg-slate-800 border-slate-700 focus:border-blue-500' : 'bg-slate-50 border-slate-100 focus:bg-white focus:border-blue-600'}`} 
                    placeholder="08xxxxxxxxxx" 
                    required 
                  />
                </div>
              </div>
              
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div className="space-y-1.5">
                  <label className="text-[9px] font-black uppercase text-slate-400 ml-2 tracking-widest">Hak Akses</label>
                  <select 
                    value={formData.role} 
                    onChange={e => setFormData({...formData, role: e.target.value})} 
                    className={`w-full p-4 rounded-2xl border font-bold text-sm transition-all ${isDark ? 'bg-slate-800 border-slate-700' : 'bg-slate-50 border-slate-100'}`}
                  >
                    {['Super Admin', 'Kepala Dapur', 'Kurir', 'Staf Dapur', 'Akun Sekolah'].map(r => <option key={r} value={r}>{r}</option>)}
                  </select>
                </div>
                <div className="space-y-1.5">
                  <label className="text-[9px] font-black uppercase text-slate-400 ml-2 tracking-widest">Shift Kerja</label>
                  <select 
                    value={formData.shift} 
                    onChange={e => setFormData({...formData, shift: e.target.value})} 
                    className={`w-full p-4 rounded-2xl border font-bold text-sm transition-all ${isDark ? 'bg-slate-800 border-slate-700' : 'bg-slate-50 border-slate-100'}`}
                  >
                    {['Pagi', 'Siang', 'Full Time', 'Monitoring'].map(s => <option key={s} value={s}>{s}</option>)}
                  </select>
                </div>
                <div className="space-y-1.5">
                  <label className="text-[9px] font-black uppercase text-slate-400 ml-2 tracking-widest">Status</label>
                  <select 
                    value={formData.status} 
                    onChange={e => setFormData({...formData, status: e.target.value})} 
                    className={`w-full p-4 rounded-2xl border font-bold text-sm transition-all ${isDark ? 'bg-slate-800 border-slate-700' : 'bg-slate-50 border-slate-100'}`}
                  >
                    {['Aktif', 'Non-Aktif'].map(s => <option key={s} value={s}>{s}</option>)}
                  </select>
                </div>
              </div>

              <div className="flex gap-4 pt-4">
                <button 
                  type="button" 
                  onClick={handleClose} 
                  className={`flex-1 py-5 rounded-2xl font-black uppercase text-[10px] tracking-[0.2em] border transition-all ${isDark ? 'border-slate-700 hover:bg-slate-800' : 'border-slate-200 hover:bg-slate-100'}`}
                >
                  Batal
                </button>
                <button 
                  type="submit" 
                  className="flex-1 py-5 bg-blue-600 text-white rounded-2xl font-black uppercase text-[10px] tracking-[0.2em] shadow-2xl shadow-blue-500/40 hover:bg-blue-700 hover:scale-[1.02] active:scale-95 transition-all flex items-center justify-center gap-3"
                >
                  <Save size={18}/> {editingUser ? 'Update Data' : 'Daftarkan Akun'}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
};

// --- LOGISTICS VIEW ---
const LogisticsView = ({ deliveries, setDeliveries, isDark, showToast, role }) => {
  const isSchool = role === 'Akun Sekolah';

  const handleUpdateStatus = (id, newStatus) => {
    if (isSchool) return;
    setDeliveries(deliveries.map(d => {
      if (d.id === id) {
        let progress = 10;
        if (newStatus === 'Dalam Perjalanan') progress = 65;
        if (newStatus === 'Tiba di Lokasi') progress = 100;
        return { ...d, status: newStatus, progress };
      }
      return d;
    }));
    showToast(`Status pengiriman diperbarui: ${newStatus}`);
  };

  return (
    <div className="space-y-8 animate-in fade-in duration-500">
      <div className="flex justify-between items-end gap-4">
        <div>
          <h1 className="text-2xl font-black uppercase tracking-tight text-blue-600">Pelacakan Logistik</h1>
          <p className="text-slate-500 text-xs font-medium italic">
            {isSchool ? "Pantau status kedatangan paket gizi ke sekolah Anda." : "Pantau status pengantaran seluruh paket gizi."}
          </p>
        </div>
        {!isSchool && (
          <button className="px-5 py-3 bg-blue-600 text-white rounded-xl font-black text-[10px] uppercase shadow-lg flex items-center gap-2">
            <Truck size={16}/> Kirim Baru
          </button>
        )}
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {deliveries.map(d => (
          <div key={d.id} className={`p-8 rounded-[2.5rem] border transition-all ${isDark ? 'bg-slate-900 border-slate-800' : 'bg-white border-slate-100 shadow-xl'}`}>
            <div className="flex justify-between items-start mb-6">
              <div>
                <h4 className="text-lg font-black tracking-tight">{d.target}</h4>
                <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{d.courier}</p>
              </div>
              <span className={`px-3 py-1 rounded-lg text-[9px] font-black uppercase ${d.status === 'Tiba di Lokasi' ? 'bg-emerald-500 text-white' : 'bg-blue-600 text-white'}`}>
                {d.status}
              </span>
            </div>
            <div className="w-full bg-slate-100 dark:bg-slate-800 h-2 rounded-full overflow-hidden mb-6">
               <div className="h-full bg-blue-600 transition-all duration-1000" style={{ width: `${d.progress}%` }}></div>
            </div>
            <div className="flex gap-2">
               {!isSchool && d.status === 'Dalam Perjalanan' && (
                 <button onClick={() => handleUpdateStatus(d.id, 'Tiba di Lokasi')} className="flex-1 py-3 bg-emerald-600 text-white rounded-xl text-[10px] font-black uppercase flex items-center justify-center gap-2">
                   <Check size={14}/> Konfirmasi Tiba
                 </button>
               )}
               <button className="flex-1 py-3 bg-slate-100 dark:bg-slate-800 rounded-xl text-[10px] font-black uppercase flex items-center justify-center gap-2 text-slate-500">
                <Navigation size={18}/> {isSchool ? "Lihat Peta" : "Lacak Kurir"}
               </button>
               {isSchool && d.status === 'Tiba di Lokasi' && (
                  <div className="flex items-center gap-2 text-emerald-500 font-black text-[9px] uppercase">
                    <CheckCircle size={16}/> Paket Terverifikasi
                  </div>
               )}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

// --- MENU VIEW ---
const MenuView = ({ menus, setMenus, kitchenSettings, isDark, showToast, role }) => {
  const isSchool = role === 'Akun Sekolah';
  
  return (
    <div className="space-y-8 animate-in fade-in">
      <div className="flex justify-between items-end gap-4">
        <div>
          <h1 className="text-2xl font-black uppercase tracking-tight text-blue-600">Jadwal Menu Gizi</h1>
          <p className="text-slate-500 text-xs font-medium italic">Informasi nutrisi harian untuk siswa.</p>
        </div>
        {!isSchool && (
          <button className="px-5 py-3 bg-blue-600 text-white rounded-xl font-black text-[10px] uppercase shadow-lg"><PlusCircle size={16}/></button>
        )}
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {menus.map(menu => (
          <div key={menu.id} className={`p-8 rounded-[2.5rem] border ${isDark ? 'bg-slate-900 border-slate-800' : 'bg-white border-slate-100 shadow-xl shadow-slate-200/50'}`}>
            <div className="flex justify-between items-start mb-2">
              <h3 className="text-2xl font-black text-blue-600">{menu.name}</h3>
              {isSchool && <div className="px-3 py-1 bg-blue-50 text-blue-600 rounded-lg text-[8px] font-black uppercase">Menu Hari Ini</div>}
            </div>
            <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-6">{menu.day}, {menu.date} • {menu.target}</p>
            <div className="grid grid-cols-4 gap-2 mb-8">
               <div className="p-3 bg-slate-50 dark:bg-slate-800 rounded-xl text-center"><p className="text-xs font-black">{menu.calories}</p><p className="text-[8px] font-bold text-slate-400">KCAL</p></div>
               <div className="p-3 bg-slate-50 dark:bg-slate-800 rounded-xl text-center"><p className="text-xs font-black">{menu.protein}g</p><p className="text-[8px] font-bold text-slate-400">PROT</p></div>
               <div className="p-3 bg-slate-50 dark:bg-slate-800 rounded-xl text-center"><p className="text-xs font-black">{menu.carbs}g</p><p className="text-[8px] font-bold text-slate-400">KARB</p></div>
               <div className="p-3 bg-slate-50 dark:bg-slate-800 rounded-xl text-center"><p className="text-xs font-black">{menu.fats}g</p><p className="text-[8px] font-bold text-slate-400">LEMK</p></div>
            </div>
            <div className="p-4 border rounded-2xl mb-6 bg-slate-50/50 dark:bg-slate-800/30">
               <p className="text-[8px] font-black uppercase text-slate-400 mb-2">Komposisi Bahan</p>
               <p className="text-[11px] font-bold text-slate-600 dark:text-slate-300">{menu.ingredients}</p>
            </div>
            <div className="flex gap-2">
              <button className="flex-1 py-3 bg-slate-100 dark:bg-slate-800 rounded-xl text-[10px] font-black uppercase flex items-center justify-center gap-2"><Printer size={16}/> Cetak Label</button>
              {isSchool && (
                <button className="flex-1 py-3 bg-blue-600 text-white rounded-xl text-[10px] font-black uppercase flex items-center justify-center gap-2"><Info size={16}/> Detail Gizi</button>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

// --- INVENTORY VIEW ---
const InventoryView = ({ inventory, setInventory, isDark, showToast }) => {
  return (
    <div className="space-y-6 animate-in fade-in">
      <div className="flex justify-between items-end gap-4">
        <div>
          <h1 className="text-2xl font-black uppercase tracking-tight text-blue-600">Gudang Bahan</h1>
          <p className="text-slate-500 text-xs font-medium italic">Pantau ketersediaan logistik.</p>
        </div>
        <button className="px-5 py-3 bg-blue-600 text-white rounded-xl font-black text-[10px] uppercase shadow-lg">Tambah Stok</button>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {inventory.map(item => (
          <div key={item.id} className={`p-6 rounded-[2rem] border ${isDark ? 'bg-slate-900 border-slate-800' : 'bg-white border-slate-100 shadow-md'}`}>
            <div className={`w-fit px-3 py-1 rounded-lg text-[8px] font-black uppercase mb-4 ${item.status === 'Kritis' ? 'bg-red-500 text-white' : item.status === 'Menipis' ? 'bg-orange-500 text-white' : 'bg-emerald-500 text-white'}`}>{item.status}</div>
            <h3 className="text-lg font-black text-blue-600">{item.name}</h3>
            <p className="text-[9px] font-bold text-slate-400 uppercase tracking-widest">{item.category}</p>
            <div className="flex items-end justify-between p-4 bg-slate-50 dark:bg-slate-800/50 rounded-2xl my-4">
              <div><p className="text-2xl font-black tracking-tight">{item.stock} <span className="text-sm text-slate-400 font-bold">{item.unit}</span></p></div>
              <Package size={24} className="text-slate-300" />
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

// --- DASHBOARD COMPONENTS ---
const DashboardView = ({ inventory, deliveries, users, isDark }) => (
  <div className="space-y-8 animate-in fade-in">
    <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
      {[
        { label: 'Total Porsi', val: '1,240', icon: ClipboardList, color: 'text-blue-600', bg: 'bg-blue-50' },
        { label: 'Stok Kritis', val: `${inventory.filter(i => i.status === 'Kritis').length}`, icon: AlertCircle, color: 'text-red-500', bg: 'bg-red-50' },
        { label: 'Total Staf', val: `${users.length}`, icon: Users, color: 'text-emerald-500', bg: 'bg-emerald-50' },
        { label: 'Logistik', val: `${deliveries.length}`, icon: Truck, color: 'text-orange-500', bg: 'bg-orange-50' },
      ].map((s, i) => (
        <div key={i} className={`p-6 rounded-3xl border ${isDark ? 'bg-slate-900 border-slate-800' : 'bg-white border-slate-100 shadow-xl shadow-slate-200/50'}`}>
          <div className={`w-12 h-12 ${s.bg} ${s.color} rounded-2xl flex items-center justify-center mb-4 shadow-sm`}><s.icon size={20} /></div>
          <p className="text-[9px] font-black uppercase text-slate-400 tracking-wider">{s.label}</p>
          <h4 className="text-2xl font-black tracking-tight">{s.val}</h4>
        </div>
      ))}
    </div>
    
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
      <div className={`p-8 rounded-[2.5rem] border ${isDark ? 'bg-slate-900 border-slate-800' : 'bg-white border-slate-100 shadow-xl'}`}>
        <h3 className="text-[10px] font-black uppercase text-slate-400 mb-6 flex items-center gap-2"><Briefcase size={14} className="text-blue-600"/> Aktivitas Personel</h3>
        <div className="space-y-4">
          {users.slice(0, 4).map(u => (
            <div key={u.id} className="flex items-center justify-between p-4 rounded-2xl bg-slate-50 dark:bg-slate-800/50">
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 bg-blue-600 text-white rounded-xl flex items-center justify-center text-xs font-black">{u.name.charAt(0)}</div>
                <div><p className="text-sm font-black">{u.name}</p><p className="text-[9px] font-bold text-slate-400 uppercase">{u.role} • Shift {u.shift}</p></div>
              </div>
              <span className={`px-2 py-1 rounded text-[8px] font-black uppercase ${u.status === 'Aktif' ? 'bg-emerald-500 text-white' : 'bg-slate-400 text-white'}`}>{u.status}</span>
            </div>
          ))}
        </div>
      </div>
      
      <div className={`p-8 rounded-[2.5rem] border ${isDark ? 'bg-slate-900 border-slate-800' : 'bg-white border-slate-100 shadow-xl'}`}>
        <h3 className="text-[10px] font-black uppercase text-slate-400 mb-6 flex items-center gap-2"><Truck size={14} className="text-blue-600"/> Status Armada</h3>
        <div className="space-y-4">
          {deliveries.map(d => (
            <div key={d.id} className="flex items-center justify-between p-4 rounded-2xl bg-slate-50 dark:bg-slate-800/50">
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 bg-slate-200 dark:bg-slate-700 text-slate-500 rounded-xl flex items-center justify-center"><Navigation size={18}/></div>
                <div><p className="text-sm font-black">{d.target}</p><p className="text-[9px] font-bold text-slate-400 uppercase">Kurir: {d.courier}</p></div>
              </div>
              <div className="text-right">
                <p className="text-[10px] font-black text-blue-600">{d.progress}%</p>
                <div className="w-16 bg-slate-200 dark:bg-slate-700 h-1 rounded-full mt-1 overflow-hidden">
                  <div className="bg-blue-600 h-full" style={{ width: `${d.progress}%` }}></div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </div>
);

const SettingsView = ({ kitchenSettings, isDark }) => (
  <div className={`p-10 rounded-[3rem] border ${isDark ? 'bg-slate-900 border-slate-800' : 'bg-white border-slate-100 shadow-xl'} max-w-2xl mx-auto`}>
    <h3 className="text-xl font-black uppercase italic mb-8 flex items-center gap-3"><Settings className="text-blue-600"/> Konfigurasi Sistem</h3>
    <div className="space-y-4">
      {['name', 'tagline', 'address', 'email'].map(f => (
        <div key={f} className="space-y-1">
          <label className="text-[9px] font-black uppercase text-slate-400 ml-2">{f === 'name' ? 'Nama Unit Dapur' : f === 'tagline' ? 'Slogan' : f === 'address' ? 'Alamat Kantor' : 'Email Kontak'}</label>
          <input defaultValue={kitchenSettings[f]} className={`w-full p-4 rounded-xl border outline-none font-bold text-sm ${isDark ? 'bg-slate-800 border-slate-700' : 'bg-slate-50'}`} />
        </div>
      ))}
      <button className="w-full py-5 bg-blue-600 text-white rounded-2xl font-black uppercase text-[11px] mt-6 shadow-xl shadow-blue-500/30">Simpan Perubahan</button>
    </div>
  </div>
);

const Toast = ({ message }) => (
  <div className="fixed bottom-24 lg:bottom-10 right-4 left-4 md:left-auto md:right-10 z-[1000] animate-in slide-in-from-bottom-10">
    <div className="px-6 py-4 bg-slate-900/95 text-white rounded-2xl shadow-2xl flex items-center justify-center gap-4 font-black text-[10px] uppercase border border-white/10 backdrop-blur-md">
      <div className="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center shadow-lg"><Check size={14} strokeWidth={4} /></div>
      {message}
    </div>
  </div>
);

export default App;