import { useState } from 'react'
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'
import { Toaster } from 'react-hot-toast'
import Sidebar from './components/Sidebar'
import Navbar from './components/Navbar'
import Dashboard from './pages/Dashboard'
import Inventory from './pages/Inventory'
import Sales from './pages/Sales'
import Customers from './pages/Customers'
import Drivers from './pages/Drivers'
import Settings from './pages/Settings'
import Login from './pages/Login'

export default function App() {
  const [isAuthenticated, setIsAuthenticated] = useState(false)
  const [isDarkMode, setIsDarkMode] = useState(false)
  const [isEnglish, setIsEnglish] = useState(false)

  const ProtectedRoute = ({ children }) => {
    if (!isAuthenticated) {
      return <Navigate to="/login" replace />
    }
    return children
  }

  const Layout = ({ children }) => {
    if (!isAuthenticated) return children

    return (
      <div className={`h-screen flex ${isDarkMode ? 'dark' : ''}`}>
        <Sidebar />
        <div className="flex-1 flex flex-col overflow-hidden">
          <Navbar 
            isDarkMode={isDarkMode} 
            setIsDarkMode={setIsDarkMode}
            isEnglish={isEnglish}
            setIsEnglish={setIsEnglish}
          />
          <main className="flex-1 overflow-x-hidden overflow-y-auto bg-gray-50 dark:bg-gray-900">
            {children}
          </main>
        </div>
      </div>
    )
  }

  return (
    <Router>
      <div className={`${isDarkMode ? 'dark' : ''}`}>
        <Layout>
          <Routes>
            <Route 
              path="/login" 
              element={<Login setIsAuthenticated={setIsAuthenticated} isEnglish={isEnglish} />} 
            />
            <Route
              path="/"
              element={
                <ProtectedRoute>
                  <Dashboard isEnglish={isEnglish} />
                </ProtectedRoute>
              }
            />
            <Route
              path="/inventory"
              element={
                <ProtectedRoute>
                  <Inventory isEnglish={isEnglish} />
                </ProtectedRoute>
              }
            />
            <Route
              path="/sales"
              element={
                <ProtectedRoute>
                  <Sales isEnglish={isEnglish} />
                </ProtectedRoute>
              }
            />
            <Route
              path="/customers"
              element={
                <ProtectedRoute>
                  <Customers isEnglish={isEnglish} />
                </ProtectedRoute>
              }
            />
            <Route
              path="/drivers"
              element={
                <ProtectedRoute>
                  <Drivers isEnglish={isEnglish} />
                </ProtectedRoute>
              }
            />
            <Route
              path="/settings"
              element={
                <ProtectedRoute>
                  <Settings isEnglish={isEnglish} />
                </ProtectedRoute>
              }
            />
          </Routes>
        </Layout>
        <Toaster position="top-right" />
      </div>
    </Router>
  )
}