import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import {
  IonRouterOutlet,
  IonTabs,
  IonTabBar,
  IonTabButton,
  IonIcon,
  IonLabel,
} from '@ionic/react';
import {
  homeOutline,
  documentTextOutline,
  personOutline,
} from 'ionicons/icons';
import { useAuth } from './contexts/AuthContext';

import Auth from './pages/Auth';
import VerifyEmail from './pages/VerifyEmail';
import ForgotPassword from './pages/ForgotPassword';
import VerifyReset from './pages/VerifyReset';
import SetupProfile from './pages/SetupProfile';
import Home from './pages/Home';
import BuyerRequests from './pages/BuyerRequests';
import NewRfq from './pages/NewRfq';
import RfqDetail from './pages/RfqDetail';
import SupplierQuoteForm from './pages/SupplierQuoteForm';
import BuyerQuoteList from './pages/BuyerQuoteList';
import Profile from './pages/Profile';
import EditProfile from './pages/EditProfile';
import ProtectedRoute from './components/ProtectedRoute';

const AppRoutes: React.FC = () => {
  const { user } = useAuth();

  return (
    <IonRouterOutlet>
      {/* Auth routes */}
      <Route path="/auth" component={Auth} exact />
      <Route path="/verify-email" component={VerifyEmail} exact />
      <Route path="/forgot-password" component={ForgotPassword} exact />
      <Route path="/verify-reset" component={VerifyReset} exact />

      {/* Setup Profile (guarded manually by user presence, not ProtectedRoute to avoid loop) */}
      <Route
        path="/setup-profile"
        exact
        render={() => (!user ? <Redirect to="/auth" /> : <SetupProfile />)}
      />

      {/* Pushed routes without tab bar */}
      <ProtectedRoute path="/rfq/new" component={NewRfq} exact />
      <ProtectedRoute
        path="/rfq/:id([0-9a-fA-F-]{36})"
        component={RfqDetail}
        exact
      />
      <ProtectedRoute
        path="/quote/:id([0-9a-fA-F-]{36})"
        component={SupplierQuoteForm}
        exact
      />
      <ProtectedRoute
        path="/quote-list/:id([0-9a-fA-F-]{36})"
        component={BuyerQuoteList}
        exact
      />
      <ProtectedRoute path="/profile/edit" component={EditProfile} exact />

      {/* Tabs */}
      <ProtectedRoute
        path={['/home', '/requests', '/profile']}
        component={() => (
          <IonTabs>
            <IonRouterOutlet>
              <Route path="/home" component={Home} exact />
              <Route path="/requests" component={BuyerRequests} exact />
              <Route path="/profile" component={Profile} exact />
            </IonRouterOutlet>

            <IonTabBar slot="bottom">
              <IonTabButton tab="home" href="/home">
                <IonIcon icon={homeOutline} />
                <IonLabel>Home</IonLabel>
              </IonTabButton>
              <IonTabButton tab="requests" href="/requests">
                <IonIcon icon={documentTextOutline} />
                <IonLabel>Requests</IonLabel>
              </IonTabButton>
              <IonTabButton tab="profile" href="/profile">
                <IonIcon icon={personOutline} />
                <IonLabel>Profile</IonLabel>
              </IonTabButton>
            </IonTabBar>
          </IonTabs>
        )}
      />

      {/* Default Redirect */}
      <Route exact path="/" render={() => <Redirect to="/home" />} />
    </IonRouterOutlet>
  );
};

export default AppRoutes;