const { useState, useEffect } = React;

function App() {
  const [activeMenu, setActiveMenu] = useState('multiple');
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  if ('serviceWorker' in navigator) {
    useEffect(() => {
      navigator.serviceWorker.register('/sw.js').then(reg => {
        reg.addEventListener('updatefound', () => {
          const newWorker = reg.installing;
          newWorker.addEventListener('statechange', () => {
            if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
              console.log('Update sistem ditemukan. Memuat versi terbaru...');
            }
          });
        });
      }).catch(err => console.error('SW Error:', err));

      let refreshing = false;
      navigator.serviceWorker.addEventListener('controllerchange', () => {
        if (!refreshing) { refreshing = true; window.location.reload(); }
      });
    }, []);
  }

  const menuItems = [
    { id: 'single', label: 'VA Single Use', icon: <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" /> },
    { id: 'topup', label: 'VA Top Up', icon: <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" /> },
    { id: 'multiple', label: 'VA Multiple Use', icon: <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 01-2-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /> },
    { id: 'qris', label: 'QRIS BSS', icon: <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" /> },
    { id: 'upload', label: 'Upload Data', icon: <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0 2.21 3.582-4 8-4s8 1.79 8-4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" /> }
  ];

  const renderContent = () => {
    switch (activeMenu) {
      case 'single': return <window.VaSingleView />;
      case 'multiple': return <window.VaMultipleView />;
      case 'topup': return <window.VaTopUpView />;
      case 'qris': return <window.QrisBssView />;
      case 'upload': return <window.UploadDataView />;
      default: return <window.VaSingleView />;
    }
  };

  return (
    <div className="flex h-screen bg-darkbg overflow-hidden relative">
      {isMobileMenuOpen && (
        <div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-40 md:hidden" onClick={() => setIsMobileMenuOpen(false)}></div>
      )}
      <aside className={`fixed md:relative top-0 left-0 h-full w-72 bg-sidebar border-r border-slate-800 flex flex-col flex-shrink-0 z-50 transform transition-transform duration-300 ease-in-out ${isMobileMenuOpen ? 'translate-x-0' : '-translate-x-full'} md:translate-x-0`}>
        <div className="p-6 flex items-center justify-between mb-2">
          <div className="flex items-center space-x-3">
            <div className="w-10 h-10 bg-primary rounded-xl flex items-center justify-center shadow-lg shadow-primary/30"><span className="text-white font-bold text-xl">D</span></div>
            <div><h2 className="text-lg font-bold text-white leading-tight">DNR</h2><p className="text-xs text-slate-500 font-medium tracking-wide">DASHBOARD ACCEPTANCE</p></div>
          </div>
          <button onClick={() => setIsMobileMenuOpen(false)} className="md:hidden text-slate-400 hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg></button>
        </div>
        <nav className="flex-1 px-4 space-y-2 overflow-y-auto">
          <div className="text-xs font-bold text-slate-500 uppercase tracking-wider mb-4 px-3 mt-2">Menu Utama</div>
          {menuItems.map(menu => {
            const isActive = activeMenu === menu.id;
            return (
              <button key={menu.id} onClick={() => { setActiveMenu(menu.id); setIsMobileMenuOpen(false); }} className={`w-full flex items-center space-x-3 px-4 py-3.5 rounded-xl transition-all duration-200 group text-left ${isActive ? 'bg-blue-500/10 text-blue-400 border border-blue-500/20 shadow-sm' : 'text-slate-400 hover:bg-slate-800/50 hover:text-slate-200 border border-transparent'}`}>
                <svg xmlns="http://www.w3.org/2000/svg" className={`h-5 w-5 ${isActive ? 'text-blue-400' : 'text-slate-500 group-hover:text-slate-300'}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">{menu.icon}</svg>
                <span className="font-semibold text-sm">{menu.label}</span>
              </button>
            );
          })}
        </nav>
        <div className="p-6 border-t border-slate-800 mt-auto bg-sidebar">
          <div className="flex items-center space-x-3">
            <div className="w-10 h-10 rounded-full bg-slate-700 flex items-center justify-center"><svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-slate-300" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /></svg></div>
            <div className="text-left"><p className="text-sm font-semibold text-slate-200">Admin Finance</p><p className="text-xs text-slate-500">System Administrator</p></div>
          </div>
        </div>
      </aside>
      
      <main className="flex-1 flex flex-col min-w-0 overflow-hidden bg-darkbg relative">
        <header className="h-16 md:h-20 bg-darkbg/80 backdrop-blur-md border-b border-slate-800 flex items-center justify-between px-4 md:px-8 z-10 relative">
          <div className="flex items-center space-x-3">
            <button onClick={() => setIsMobileMenuOpen(true)} className="md:hidden p-2 -ml-2 text-slate-300 hover:text-white focus:outline-none"><svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" /></svg></button>
            <h2 className="text-lg md:text-xl font-bold text-white truncate">{menuItems.find(m => m.id === activeMenu)?.label}</h2>
          </div>
          <window.RangeModal />
        </header>

        <div className="flex-1 overflow-y-auto p-4 md:p-8 w-full">
          {renderContent()}
        </div>
      </main>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);