import { Routes, Route, Navigate } from 'react-router-dom';
import { useWalletStore } from './store/wallet';

// Layout
import Layout from './components/Layout';
import TitleBar from './components/TitleBar';
import UpdateBanner from './components/UpdateBanner';

// Hooks
import { useTrayEvents } from './hooks/useTrayEvents';

// Pages
import Welcome from './pages/Welcome';
import CreateWallet from './pages/CreateWallet';
import ImportWallet from './pages/ImportWallet';
import Unlock from './pages/Unlock';
import Dashboard from './pages/Dashboard';
import Send from './pages/Send';
import Receive from './pages/Receive';
import History from './pages/History';
import Settings from './pages/Settings';

function App() {
  const { isInitialized, isUnlocked } = useWalletStore();

  // Listen for system tray events
  useTrayEvents();

  return (
    <div className="h-screen flex flex-col bg-gray-950">
      {/* Update notification banner */}
      <UpdateBanner />

      {/* Custom title bar for frameless window (optional) */}
      <TitleBar />

      {/* Main content */}
      <main className="flex-1 overflow-hidden">
        <Routes>
          {/* Onboarding routes */}
          <Route
            path="/"
            element={
              !isInitialized ? (
                <Welcome />
              ) : !isUnlocked ? (
                <Navigate to="/unlock" replace />
              ) : (
                <Navigate to="/dashboard" replace />
              )
            }
          />
          <Route path="/create" element={<CreateWallet />} />
          <Route path="/import" element={<ImportWallet />} />
          <Route path="/unlock" element={<Unlock />} />

          {/* Protected routes (require unlocked wallet) */}
          <Route element={<Layout />}>
            <Route
              path="/dashboard"
              element={
                isUnlocked ? <Dashboard /> : <Navigate to="/unlock" replace />
              }
            />
            <Route
              path="/send"
              element={
                isUnlocked ? <Send /> : <Navigate to="/unlock" replace />
              }
            />
            <Route
              path="/receive"
              element={
                isUnlocked ? <Receive /> : <Navigate to="/unlock" replace />
              }
            />
            <Route
              path="/history"
              element={
                isUnlocked ? <History /> : <Navigate to="/unlock" replace />
              }
            />
            <Route
              path="/settings"
              element={
                isUnlocked ? <Settings /> : <Navigate to="/unlock" replace />
              }
            />
          </Route>
        </Routes>
      </main>
    </div>
  );
}

export default App;
