import React, { useState, useEffect, useMemo } from 'react';
import { 
  LayoutDashboard, CreditCard, Gift, BarChart3, History, Settings, 
  Plus, ChevronLeft, Trash2, Save, ArrowUp, ArrowDown, Globe, 
  Sun, Moon, X, Plane, Coins, Star, Building, Fuel, Info, 
  Clock, CheckCircle2, Github, Download, RotateCcw, Eye, EyeOff, Loader2, Menu
} from 'lucide-react';

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

// --- Konfigurasi Firebase ---
const firebaseConfig = JSON.parse(__firebase_config);
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'credit-control-hub-default';

// --- Penempatan Bahasa (Localization) ---
const translations = {
  ENG: {
    dashboard: "Dashboard",
    inventory: "Card Inventory",
    perks: "Card Perks",
    analysis: "Debt Analysis",
    history: "History & Logs",
    config: "System Config",
    total_credit: "Total Credit Limit",
    total_usage: "Total Usage",
    debt_balance: "Debt Balance",
    recent_activity: "Recent Activity",
    status_system: "System Status: Normal & Active",
    add_bank: "Add Bank",
    bank_gallery: "Bank Gallery",
    filter_perks: "Filter by Perks",
    debt_freedom: "Debt Freedom Score",
    utilization: "Utilization Analysis",
    freedom_desc: "Safe credit limit percentage.",
    available_limit: "Available Limit",
    quick_update: "Quick Update",
    rewards_table: "Rewards Summary Table",
    settings_updated: "Cloud Synced!",
    visual_effects: "Visual Effects & Glow",
    glow_enabled: "Glow Enabled",
    theme_selection: "Background Theme Selection",
    lang_setting: "Default Language Setting",
    syncing: "Saving to cloud...",
    light_widget_setting: "Day Mode Widget Color",
    light_widget_desc: "Choose background color for boxes in Day Mode.",
    night_widget_setting: "Night Mode Widget Color",
    night_widget_desc: "Choose background color for boxes in Night Mode."
  },
  BM: {
    dashboard: "Papan Pemuka",
    inventory: "Inventori Kad",
    perks: "Kelebihan Kad",
    analysis: "Analisis Beban",
    history: "Sejarah & Log",
    config: "Konfigurasi Sistem",
    total_credit: "Total Had Kredit",
    total_usage: "Total Penggunaan",
    debt_balance: "Baki Hutang",
    recent_activity: "Aktiviti Terkini",
    status_system: "Status Sistem: Normal & Aktif",
    add_bank: "Tambah Bank",
    bank_gallery: "Galeri Bank",
    filter_perks: "Tapis mengikut Kelebihan",
    debt_freedom: "Skor Kebebasan Hutang",
    utilization: "Analisis Penggunaan",
    freedom_desc: "Peratusan had kredit selamat.",
    available_limit: "Had Tersedia",
    quick_update: "Kemaskini Pantas",
    rewards_table: "Jadual Ringkasan Ganjaran",
    settings_updated: "Data Disinkron!",
    visual_effects: "Kesan Visual & Cahaya",
    glow_enabled: "Cahaya Diaktifkan",
    theme_selection: "Pilihan Tema Latar Belakang",
    lang_setting: "Tetapan Bahasa Lalai",
    syncing: "Menyimpan ke awan...",
    light_widget_setting: "Warna Widget Mod Siang",
    light_widget_desc: "Pilih warna latar belakang kotak untuk Mod Siang.",
    night_widget_setting: "Warna Widget Mod Malam",
    night_widget_desc: "Pilih warna latar belakang kotak untuk Mod Malam."
  }
};

const App = () => {
  // Autentikasi & State Pangkalan Data
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [isSyncing, setIsSyncing] = useState(false);

  // State UI
  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
  const [lang, setLang] = useState('ENG');
  const [activeTab, setActiveTab] = useState('dashboard');
  const [banks, setBanks] = useState([]);
  const [glowEnabled, setGlowEnabled] = useState(true);
  const [glowColor, setGlowColor] = useState('#22D3EE');
  const [theme, setTheme] = useState('bg-slate-950');
  const [lightWidgetBg, setLightWidgetBg] = useState('bg-white');
  const [nightWidgetBg, setNightWidgetBg] = useState('bg-[#0B0E14]');
  const [showToast, setShowToast] = useState(false);
  const [time, setTime] = useState(new Date());

  const t = translations[lang];

  // Derived UI states based on theme
  const isDark = theme === 'bg-slate-950' || theme === 'bg-black';
  const cardBg = isDark ? nightWidgetBg : `${lightWidgetBg} shadow-sm`;
  const borderColor = isDark ? 'border-gray-800/50' : 'border-gray-200';
  const textColor = isDark ? 'text-white' : 'text-slate-900';
  const labelColor = isDark ? 'text-gray-500' : 'text-slate-500';

  // Format Tarikh dan Masa
  const formattedTime = time.toLocaleTimeString('en-GB', { hour12: false });
  const formattedDate = time.toLocaleDateString(lang === 'ENG' ? 'en-GB' : 'ms-MY', { 
    weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' 
  }).toUpperCase();

  // Autentikasi
  useEffect(() => {
    const initAuth = async () => {
      try {
        if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
          await signInWithCustomToken(auth, __initial_auth_token);
        } else {
          await signInAnonymously(auth);
        }
      } catch (err) { console.error(err); }
    };
    initAuth();
    const unsubscribe = onAuthStateChanged(auth, (u) => {
      setUser(u);
      if (!u) setLoading(false);
    });
    return () => unsubscribe();
  }, []);

  // Pengambilan Data
  useEffect(() => {
    if (!user) return;
    const settingsRef = doc(db, 'artifacts', appId, 'users', user.uid, 'settings', 'appConfig');
    const unsubSettings = onSnapshot(settingsRef, (snap) => {
      if (snap.exists()) {
        const data = snap.data();
        if (data.lang) setLang(data.lang);
        if (data.glowEnabled !== undefined) setGlowEnabled(data.glowEnabled);
        if (data.glowColor) setGlowColor(data.glowColor);
        if (data.theme) setTheme(data.theme);
        if (data.lightWidgetBg) setLightWidgetBg(data.lightWidgetBg);
        if (data.nightWidgetBg) setNightWidgetBg(data.nightWidgetBg);
      }
      setLoading(false);
    });
    const banksRef = collection(db, 'artifacts', appId, 'users', user.uid, 'banks');
    const unsubBanks = onSnapshot(banksRef, (snap) => {
      setBanks(snap.docs.map(doc => ({ id: doc.id, ...doc.data() })));
    });
    return () => { unsubSettings(); unsubBanks(); };
  }, [user]);

  const syncSettings = async (newData) => {
    if (!user) return;
    setIsSyncing(true);
    try {
      const settingsRef = doc(db, 'artifacts', appId, 'users', user.uid, 'settings', 'appConfig');
      await setDoc(settingsRef, newData, { merge: true });
      triggerToast();
    } catch (err) { console.error(err); }
    setIsSyncing(false);
  };

  const addBank = async () => {
    if (!user) return;
    await addDoc(collection(db, 'artifacts', appId, 'users', user.uid, 'banks'), {
      name: 'NEW BANK', cards: 0, limit: 0, usage: 0, createdAt: new Date().toISOString()
    });
    triggerToast();
  };

  const deleteBank = async (id, e) => {
    e.stopPropagation();
    await deleteDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'banks', id));
    triggerToast();
  };

  useEffect(() => {
    const timer = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(timer);
  }, []);

  const triggerToast = () => {
    setShowToast(true);
    setTimeout(() => setShowToast(false), 3000);
  };

  const totalLimit = banks.reduce((sum, b) => sum + (Number(b.limit) || 0), 0);
  const totalUsage = banks.reduce((sum, b) => sum + (Number(b.usage) || 0), 0);
  const freedomScore = totalLimit > 0 ? ((totalLimit - totalUsage) / totalLimit * 100).toFixed(1) : "100.0";

  if (loading) return (
    <div className="h-screen bg-slate-950 flex flex-col items-center justify-center space-y-4 text-cyan-400">
      <Loader2 className="w-10 h-10 animate-spin" />
      <span className="text-[10px] font-bold uppercase tracking-[0.3em] animate-pulse">Initializing Control Hub</span>
    </div>
  );

  return (
    <div className={`flex h-screen ${theme} ${isDark ? 'text-white' : 'text-slate-900'} font-sans selection:bg-cyan-500 selection:text-black overflow-hidden transition-colors duration-700`}>
      {showToast && (
        <div className="fixed top-10 right-10 z-[100] bg-[#10B981] text-black px-6 py-3 rounded-xl font-bold flex items-center space-x-3 shadow-2xl animate-in slide-in-from-right duration-300">
          <CheckCircle2 className="w-5 h-5" />
          <span className="uppercase text-xs tracking-widest">{t.settings_updated}</span>
        </div>
      )}

      {/* Sidebar */}
      <aside className={`${isSidebarCollapsed ? 'w-20' : 'w-64'} bg-black flex flex-col border-r border-gray-800/50 z-20 transition-all duration-300 overflow-hidden`}>
        <div className={`p-6 mb-4 flex-shrink-0 flex items-center ${isSidebarCollapsed ? 'justify-center' : 'space-x-3'}`}>
          <div 
            onClick={() => setIsSidebarCollapsed(!isSidebarCollapsed)}
            className="w-10 h-10 bg-cyan-400 rounded-xl flex items-center justify-center shadow-lg cursor-pointer hover:scale-105 active:scale-95 transition-all flex-shrink-0"
            style={{ boxShadow: glowEnabled ? `0 0 15px ${glowColor}55` : 'none' }}
          >
            <svg viewBox="0 0 24 24" className="w-6 h-6 text-black" fill="currentColor"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" /></svg>
          </div>
          {!isSidebarCollapsed && (
            <h1 className="text-sm font-black italic tracking-tighter uppercase leading-none text-white animate-in fade-in duration-500">
              {lang === 'ENG' ? "CREDIT CONTROL HUB" : "HAB KAWALAN KREDIT"}
            </h1>
          )}
        </div>

        <nav className="flex-1 space-y-1 overflow-y-auto custom-scrollbar pb-8">
          <NavItem icon={LayoutDashboard} label={t.dashboard} active={activeTab === 'dashboard'} onClick={() => setActiveTab('dashboard')} color={glowColor} isCollapsed={isSidebarCollapsed} />
          <NavItem icon={CreditCard} label={t.inventory} active={activeTab === 'inventory'} onClick={() => setActiveTab('inventory')} color={glowColor} isCollapsed={isSidebarCollapsed} />
          <NavItem icon={Gift} label={t.perks} active={activeTab === 'perks'} onClick={() => setActiveTab('perks')} color={glowColor} isCollapsed={isSidebarCollapsed} />
          <NavItem icon={BarChart3} label={t.analysis} active={activeTab === 'analysis'} onClick={() => setActiveTab('analysis')} color={glowColor} isCollapsed={isSidebarCollapsed} />
          <NavItem icon={History} label={t.history} active={activeTab === 'history'} onClick={() => setActiveTab('history')} color={glowColor} isCollapsed={isSidebarCollapsed} />
          <NavItem icon={Settings} label={t.config} active={activeTab === 'config'} onClick={() => setActiveTab('config')} color={glowColor} isCollapsed={isSidebarCollapsed} />
        </nav>
      </aside>

      {/* Kandungan Utama */}
      <main className="flex-1 flex flex-col relative overflow-hidden">
        <div className="absolute top-0 right-0 w-[600px] h-[600px] blur-[150px] opacity-10 pointer-events-none" style={{ backgroundColor: glowColor }} />
        
        <header className={`h-20 flex items-center justify-between px-10 border-b ${isDark ? 'border-gray-800/30 bg-black/20' : 'border-gray-200 bg-white/50'} backdrop-blur-xl z-10 transition-colors`}>
          <div className="border-l-2 pl-4 transition-colors" style={{ borderColor: glowColor }}>
            <div className="text-2xl font-mono font-bold tracking-widest">{formattedTime}</div>
            <div className={`text-[10px] font-bold ${labelColor} tracking-tighter uppercase`}>{formattedDate}</div>
          </div>
          
          <div className="flex items-center space-x-6">
            <button onClick={() => syncSettings({ lang: lang === 'ENG' ? 'BM' : 'ENG' })} className={`text-[10px] font-bold uppercase tracking-widest ${isDark ? 'text-gray-400 hover:text-white' : 'text-slate-500 hover:text-slate-900'} transition-colors`}>{lang}</button>
            <button onClick={() => syncSettings({ theme: isDark ? 'bg-white' : 'bg-slate-950' })} className="p-2 text-yellow-500 hover:bg-black/5 rounded-full transition-all">
              {!isDark ? <Moon className="w-5 h-5" /> : <Sun className="w-5 h-5" />}
            </button>
          </div>
        </header>

        <div className="flex-1 overflow-y-auto p-10 custom-scrollbar">
          {activeTab === 'dashboard' && (
             <div className="space-y-8 animate-in fade-in duration-500">
               <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                 <StatCard title={t.total_credit} value={totalLimit.toLocaleString()} icon={BarChart3} color={glowColor} isDark={isDark} cardBg={cardBg} borderColor={borderColor} textColor={textColor} labelColor={labelColor} />
                 <StatCard title={t.total_usage} value={totalUsage.toLocaleString()} icon={CreditCard} color={glowColor} isDark={isDark} cardBg={cardBg} borderColor={borderColor} textColor={textColor} labelColor={labelColor} />
                 <StatCard title={t.debt_balance} value={(totalLimit - totalUsage).toLocaleString()} icon={Info} color={glowColor} isDark={isDark} cardBg={cardBg} borderColor={borderColor} textColor={textColor} labelColor={labelColor} />
               </div>
               <div className={`${cardBg} border ${borderColor} rounded-2xl p-8 min-h-[200px] transition-all duration-500`} style={glowEnabled ? { boxShadow: `0 0 20px ${glowColor}11`, borderColor: isDark ? `${glowColor}33` : `${glowColor}55` } : {}}>
                 <div className="flex items-center space-x-3 mb-6">
                   <Clock className="w-5 h-5" style={{ color: glowColor }} />
                   <h2 className={`text-xl font-bold uppercase tracking-wider ${textColor} italic`}>{t.recent_activity}</h2>
                 </div>
                 <p className={`text-xs font-bold ${labelColor} uppercase tracking-widest`}>{t.status_system}</p>
               </div>
             </div>
          )}
          
          {activeTab === 'inventory' && (
            <div className="space-y-8 animate-in fade-in duration-500">
              <div className="flex items-center justify-between">
                <h2 className={`text-2xl font-black uppercase tracking-tighter ${textColor} italic`}>{t.bank_gallery}</h2>
                <button className={`${isDark ? 'bg-gray-800/50 border-gray-700 text-gray-400 hover:bg-gray-800' : 'bg-white border-gray-200 text-slate-500 hover:bg-slate-50'} border px-4 py-2 rounded-lg text-xs font-bold uppercase flex items-center space-x-2 transition-all`} onClick={addBank}>
                  <Plus className="w-4 h-4" /><span>{t.add_bank}</span>
                </button>
              </div>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
                {banks.map(bank => (
                  <div key={bank.id} className={`${cardBg} border ${borderColor} rounded-2xl p-8 flex flex-col items-center justify-center space-y-4 hover:border-cyan-500/50 cursor-pointer transition-all relative group`}>
                    <div className="absolute top-4 left-4 opacity-0 group-hover:opacity-100 transition-opacity" onClick={(e) => deleteBank(bank.id, e)}><Trash2 className="w-4 h-4 text-red-500/50 hover:text-red-500" /></div>
                    <Building className="w-8 h-8 text-cyan-400" />
                    <div className="text-center">
                      <h3 className={`font-bold ${textColor} uppercase tracking-wider`}>{bank.name}</h3>
                      <p className={`text-[10px] ${labelColor} font-bold uppercase`}>{bank.cards} CARDS</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {activeTab === 'analysis' && (
            <div className="space-y-10 animate-in fade-in duration-500">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div className={`${cardBg} border ${borderColor} rounded-2xl p-8 flex flex-col items-center justify-center text-center`}>
                  <h3 className={`text-xl font-black italic uppercase ${textColor} mb-2`}>{t.debt_freedom}</h3>
                  <div className="relative w-48 h-48 flex items-center justify-center">
                    <svg className="w-full h-full transform -rotate-90">
                      <circle cx="96" cy="96" r="80" stroke={isDark ? "#1f2937" : "#e2e8f0"} strokeWidth="8" fill="transparent" />
                      <circle cx="96" cy="96" r="80" stroke={glowColor} strokeWidth="12" fill="transparent" strokeDasharray={2 * Math.PI * 80} strokeDashoffset={2 * Math.PI * 80 * (1 - Number(freedomScore)/100)} className="transition-all duration-1000" style={{ filter: `drop-shadow(0 0 8px ${glowColor})` }} />
                    </svg>
                    <span className={`absolute text-4xl font-black italic ${textColor}`}>{freedomScore}%</span>
                  </div>
                  <div className={`mt-8 text-sm font-bold ${labelColor} uppercase tracking-widest`}>RM {(totalLimit - totalUsage).toLocaleString()} {t.available_limit}</div>
                </div>
                <div className={`${cardBg} border ${borderColor} rounded-2xl p-8`}>
                  <h3 className={`text-lg font-black italic uppercase ${textColor} mb-8`}>{t.utilization}</h3>
                  <div className="space-y-6">
                    {banks.length === 0 ? <div className={`text-center py-20 opacity-20 text-[10px] font-bold ${labelColor} uppercase tracking-widest`}>No Data Recorded</div> : 
                      banks.map(bank => (
                        <div key={bank.id} className="space-y-2">
                          <div className="flex justify-between text-[10px] font-bold uppercase tracking-widest"><span className={textColor}>{bank.name}</span><span className={labelColor}>{(bank.limit > 0 ? (bank.usage / bank.limit * 100).toFixed(1) : 0)}%</span></div>
                          <div className={`h-2 ${isDark ? 'bg-gray-800' : 'bg-slate-100'} rounded-full overflow-hidden`}><div className="h-full transition-all duration-1000" style={{ width: `${(bank.limit > 0 ? (bank.usage / bank.limit * 100) : 0)}%`, backgroundColor: glowColor }} /></div>
                        </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          )}

          {activeTab === 'config' && (
            <div className="space-y-8 animate-in fade-in pb-20">
              {/* Kesan Visual */}
              <div className={`${cardBg} border ${borderColor} rounded-2xl overflow-hidden`}>
                <ConfigHeader title={t.visual_effects} desc="Glow and lighting." isDark={isDark} />
                <div className="p-8 flex items-center justify-between">
                  <div className="flex items-center space-x-4">
                    <span className={`text-[10px] font-bold uppercase ${labelColor} tracking-widest`}>{t.glow_enabled}</span>
                    <button onClick={() => syncSettings({ glowEnabled: !glowEnabled })} className={`w-12 h-6 rounded-full transition-all relative ${glowEnabled ? 'bg-cyan-500' : isDark ? 'bg-gray-800' : 'bg-slate-200'}`}>
                      <div className={`absolute top-1 w-4 h-4 bg-white rounded-full transition-all ${glowEnabled ? 'left-7' : 'left-1'}`} />
                    </button>
                  </div>
                  <div className="flex space-x-2">
                    {['#22D3EE', '#F43F5E', '#F97316', '#EAB308', '#8B5CF6', '#10B981', '#EC4899', '#3B82F6'].map(c => <div key={c} onClick={() => syncSettings({ glowColor: c })} className={`w-8 h-8 rounded-full cursor-pointer transition-all ${glowColor === c ? 'ring-2 ring-cyan-500 ring-offset-2' : ''} ${!isDark && 'ring-offset-white'}`} style={{ backgroundColor: c }} />)}
                  </div>
                </div>
              </div>

              {/* Warna Widget Mod Siang */}
              <div className={`${cardBg} border ${borderColor} rounded-2xl overflow-hidden`}>
                <ConfigHeader title={t.light_widget_setting} desc={t.light_widget_desc} isDark={isDark} />
                <div className="p-8 grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
                  {[
                    { id: 'bg-white', label: 'White' },
                    { id: 'bg-slate-50', label: 'Slate 50' },
                    { id: 'bg-blue-50', label: 'Blue 50' },
                    { id: 'bg-orange-50', label: 'Orange 50' },
                    { id: 'bg-emerald-50', label: 'Emerald 50' },
                    { id: 'bg-rose-50', label: 'Rose 50' },
                    { id: 'bg-amber-50', label: 'Amber 50' },
                    { id: 'bg-violet-50', label: 'Violet 50' },
                    { id: 'bg-cyan-50', label: 'Cyan 50' },
                    { id: 'bg-gray-50', label: 'Gray 50' }
                  ].map(color => (
                    <div 
                      key={color.id} 
                      onClick={() => syncSettings({ lightWidgetBg: color.id })} 
                      className={`h-16 rounded-xl cursor-pointer border-2 transition-all flex items-center justify-center ${lightWidgetBg === color.id ? 'border-cyan-500 scale-95 shadow-lg' : 'border-gray-200'} ${color.id}`}
                    >
                       <span className="text-[9px] font-bold text-slate-500 uppercase text-center px-1">{color.label}</span>
                    </div>
                  ))}
                </div>
              </div>

              {/* Warna Widget Mod Malam */}
              <div className={`${cardBg} border ${borderColor} rounded-2xl overflow-hidden`}>
                <ConfigHeader title={t.night_widget_setting} desc={t.night_widget_desc} isDark={isDark} />
                <div className="p-8 grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
                  {[
                    { id: 'bg-[#0B0E14]', label: 'Default Dark' },
                    { id: 'bg-slate-900', label: 'Slate 900' },
                    { id: 'bg-zinc-950', label: 'Zinc 950' },
                    { id: 'bg-neutral-900', label: 'Neutral 900' },
                    { id: 'bg-stone-950', label: 'Stone 950' },
                    { id: 'bg-[#020617]', label: 'Deep Blue' },
                    { id: 'bg-[#0a0a0a]', label: 'True Black' },
                    { id: 'bg-[#1a1a2e]', label: 'Midnight' },
                    { id: 'bg-[#121212]', label: 'Material Dark' },
                    { id: 'bg-[#1c1c1c]', label: 'Onyx' }
                  ].map(color => (
                    <div 
                      key={color.id} 
                      onClick={() => syncSettings({ nightWidgetBg: color.id })} 
                      className={`h-16 rounded-xl cursor-pointer border-2 transition-all flex items-center justify-center ${nightWidgetBg === color.id ? 'border-cyan-500 scale-95 shadow-lg' : 'border-gray-800'} ${color.id}`}
                    >
                       <span className="text-[9px] font-bold text-gray-500 uppercase text-center px-1">{color.label}</span>
                    </div>
                  ))}
                </div>
              </div>

              {/* Pilihan Latar Belakang */}
              <div className={`${cardBg} border ${borderColor} rounded-2xl overflow-hidden`}>
                <ConfigHeader title={t.theme_selection} desc="Choose backgrounds." isDark={isDark} />
                <div className="p-8 grid grid-cols-2 md:grid-cols-4 gap-4">
                  {['bg-white', 'bg-slate-50', 'bg-slate-950', 'bg-black'].map(bg => <div key={bg} onClick={() => syncSettings({ theme: bg })} className={`h-16 rounded-xl cursor-pointer border-2 transition-all ${theme === bg ? 'border-cyan-500 scale-95' : isDark ? 'border-gray-800' : 'border-slate-200'} ${bg}`} />)}
                </div>
              </div>
            </div>
          )}

          {['history', 'perks'].includes(activeTab) && <div className={`h-full flex items-center justify-center opacity-20 text-xs font-bold ${labelColor} tracking-[0.3em] uppercase italic`}>Tiada data direkodkan di awan.</div>}
        </div>
      </main>

      <style dangerouslySetInnerHTML={{ __html: `
        .custom-scrollbar::-webkit-scrollbar { width: 4px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: ${isDark ? '#1e293b' : '#cbd5e1'}; border-radius: 10px; }
      `}} />
    </div>
  );
};

const NavItem = ({ icon: Icon, label, active, onClick, color, isCollapsed }) => (
  <button onClick={onClick} title={isCollapsed ? label : ''} className={`w-full flex items-center ${isCollapsed ? 'justify-center' : 'px-8 space-x-4'} py-4 transition-all duration-300 relative group flex-shrink-0`}>
    {active && <div className="absolute left-0 top-2 bottom-2 w-1.5 rounded-r-lg" style={{ backgroundColor: color, boxShadow: `0 0 10px ${color}` }} />}
    <Icon className={`w-5 h-5 transition-colors ${active ? '' : 'text-gray-500 group-hover:text-white'}`} style={active ? { color } : {}} />
    {!isCollapsed && <span className={`uppercase tracking-widest text-[11px] font-bold ${active ? 'text-white' : 'text-gray-400 group-hover:text-white'} animate-in slide-in-from-left-2 duration-300 text-left`}>{label}</span>}
  </button>
);

const StatCard = ({ title, value, icon: Icon, color, isDark, cardBg, borderColor, textColor, labelColor }) => (
  <div className={`${cardBg} border ${borderColor} rounded-2xl p-6 flex flex-col justify-between min-h-[160px] group hover:scale-[1.02] transition-all`}>
    <div className="flex items-center space-x-3 text-gray-500"><Icon className="w-4 h-4" style={{ color }} /><span className={`text-[9px] font-bold uppercase tracking-widest ${labelColor}`}>{title}</span></div>
    <div className="mt-4 flex items-baseline space-x-2">
      <span className={`${isDark ? 'text-gray-600' : 'text-slate-400'} font-bold text-sm`}>RM</span>
      <span className={`text-3xl font-black italic tracking-tighter ${textColor}`}>{value}</span>
    </div>
  </div>
);

const ConfigHeader = ({ title, desc, isDark }) => (
  <div className={`p-6 flex items-center justify-between border-b ${isDark ? 'border-gray-800/50' : 'border-gray-100 bg-slate-50/50'}`}>
    <div>
      <h3 className={`text-lg font-bold ${isDark ? 'text-white' : 'text-slate-900'} italic uppercase tracking-tighter`}>{title}</h3>
      <p className={`text-[9px] ${isDark ? 'text-gray-500' : 'text-slate-500'} font-bold uppercase tracking-widest`}>{desc}</p>
    </div>
  </div>
);

export default App;