import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
import AuthenticationScreen from './authentication';
import { Chat } from './chat';
import { MailPage } from './mail';
import DashboardPage from './dashboard';
import TaskPage from './tasks';
import TemplatesPage from './templates';
import { DriveScreen } from './drive';
import SyncPage from './sync/page';
import { Button } from './components/ui/button';

const examples = [
  { name: "Home", href: "authentication" },
  { name: "Dashboard", href: "dashboard" },
  { name: "Chat", href: "chat" },
  { name: "Mail", href: "mail" },
  { name: "Drive", href: "drive" },
  { name: "Tasks", href: "tasks" },
  { name: "Meet", href: "meet" },
  { name: "Templates", href: "templates" },
  { name: "Settings", href: "sync" },
  { name: "Help", href: "help" },
];

const ExamplesNav = () => {
  const location = useLocation();
  const navigate = useNavigate();

  return (
    <div className="examples-nav-container">
      <div className="examples-nav-inner">
        {examples.map((example) => (
            <Button
              key={example.href}
              onClick={() => navigate(example.href)}
              className={`example-button ${location.pathname.includes(example.href) ? 'active' : ''
                }`}
            >
              {example.name}
            </Button>
        ))}
      </div>
    </div>
  );
};


export function RootLayout() {
  return (
    <div className="app-container">
      <ExamplesNav />
      <main className="app-main">
        <Routes>
          <Route path="authentication" element={
            <>
              <AuthenticationScreen />
            </>
          } />
          <Route path="chat" element={
            <>
              <Chat />

            </>
          } />
          <Route path="dashboard" element={
            <>
              <DashboardPage />

            </>
          } />
          <Route path="mail" element={
            <>
              <MailPage />

            </>
          } />
          <Route path="drive" element={<DriveScreen />} />
          <Route path="tasks" element={
            <>
              <TaskPage />

            </>
          } />
          <Route path="meet" element={<div>Meet Screen (Placeholder)</div>} />
          <Route path="templates" element={
            <>
              <TemplatesPage />

            </>
          } />
          <Route path="sync" element={<SyncPage />} />
        </Routes>
      </main>
    </div>
  );
}

export default RootLayout;