import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { AuthProvider, useAuth } from './contexts/AuthContext';
import AuthLayout from './layouts/AuthLayout';
import AppLayout from './layouts/AppLayout';
import Login from './pages/auth/Login';
import Dashboard from './pages/Dashboard';
import Periods from './pages/Periods';
import Investors from './pages/Investors';
import Purchases from './pages/Purchases';
import Stock from './pages/Stock';
import Sales from './pages/Sales';
import Factories from './pages/Factories';
import FactoryOutputs from './pages/FactoryOutputs';
import Expenses from './pages/Expenses';
import Cashouts from './pages/Cashouts';
import BankTransfers from './pages/BankTransfers';
import ProfitReport from './pages/ProfitReport';
import Profile from './pages/settings/Profile';
import Security from './pages/settings/Security';
import ItemTypes from './pages/settings/ItemTypes';
import FactoryRegisters from './pages/settings/FactoryRegisters';
import BankAccounts from './pages/settings/BankAccounts';

function ProtectedRoute({ children }: { children: React.ReactNode }) {
  const { user, loading } = useAuth();

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen bg-gray-50">
        <div className="text-gray-500">Loading…</div>
      </div>
    );
  }

  if (!user) return <Navigate to="/login" replace />;

  return <AppLayout>{children}</AppLayout>;
}

function GuestRoute({ children }: { children: React.ReactNode }) {
  const { user, loading } = useAuth();

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen bg-gray-50">
        <div className="text-gray-500">Loading…</div>
      </div>
    );
  }

  if (user) return <Navigate to="/dashboard" replace />;

  return <AuthLayout>{children}</AuthLayout>;
}

export default function App() {
  return (
    <BrowserRouter>
      <AuthProvider>
        <Routes>
          <Route path="/login" element={<GuestRoute><Login /></GuestRoute>} />

          <Route path="/dashboard" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
          <Route path="/periods" element={<ProtectedRoute><Periods /></ProtectedRoute>} />
          <Route path="/investors" element={<ProtectedRoute><Investors /></ProtectedRoute>} />
          <Route path="/purchases" element={<ProtectedRoute><Purchases /></ProtectedRoute>} />
          <Route path="/stock" element={<ProtectedRoute><Stock /></ProtectedRoute>} />
          <Route path="/sales" element={<ProtectedRoute><Sales /></ProtectedRoute>} />
          <Route path="/factories" element={<ProtectedRoute><Factories /></ProtectedRoute>} />
          <Route path="/factories/:id/outputs" element={<ProtectedRoute><FactoryOutputs /></ProtectedRoute>} />
          <Route path="/expenses" element={<ProtectedRoute><Expenses /></ProtectedRoute>} />
          <Route path="/cashouts" element={<ProtectedRoute><Cashouts /></ProtectedRoute>} />
          <Route path="/bank-transfers" element={<ProtectedRoute><BankTransfers /></ProtectedRoute>} />
          <Route path="/reports/profit" element={<ProtectedRoute><ProfitReport /></ProtectedRoute>} />
          <Route path="/settings/profile" element={<ProtectedRoute><Profile /></ProtectedRoute>} />
          <Route path="/settings/security" element={<ProtectedRoute><Security /></ProtectedRoute>} />
          <Route path="/settings/item-types" element={<ProtectedRoute><ItemTypes /></ProtectedRoute>} />
          <Route path="/settings/factory-registers" element={<ProtectedRoute><FactoryRegisters /></ProtectedRoute>} />
          <Route path="/settings/bank-accounts" element={<ProtectedRoute><BankAccounts /></ProtectedRoute>} />

          <Route path="/" element={<Navigate to="/dashboard" replace />} />
          <Route path="*" element={<Navigate to="/dashboard" replace />} />
        </Routes>
      </AuthProvider>
    </BrowserRouter>
  );
}