import { BrowserRouter, Routes, Route, Navigate, Link } from 'react-router-dom';
import { LoginForm } from './components/LoginForm.tsx';
import { Layout } from './components/Layout.tsx';
import { ChatArea } from './components/ChatArea.tsx';
import { UserSettings } from './components/UserSettings.tsx';
import { useAuthStore } from './stores/auth.ts';

function ProtectedRoute({ children }: { children: React.ReactNode }) {
  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
  return isAuthenticated ? <>{children}</> : <Navigate to="/login" replace />;
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<LoginForm />} />
        <Route
          path="/settings"
          element={
            <ProtectedRoute>
              <div className="h-full w-full flex flex-col bg-gb-bg">
                <header className="flex items-center gap-4 px-4 py-2 border-b border-gb-bg-t bg-gb-bg-s">
                  <Link to="/" className="text-gb-fg-f hover:text-gb-aqua font-mono text-sm">
                    ← [BACK]
                  </Link>
                  <span className="text-gb-orange font-mono text-sm">SETTINGS</span>
                </header>
                <div className="flex-1 overflow-hidden">
                  <UserSettings />
                </div>
              </div>
            </ProtectedRoute>
          }
        />
        <Route
          path="/"
          element={
            <ProtectedRoute>
              <Layout />
            </ProtectedRoute>
          }
        >
          <Route index element={<ChatArea />} />
          <Route path="channels/:channelId" element={<ChatArea />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;