import React, { useEffect } from 'react';
import { Redirect, Route, useHistory, useLocation } from 'react-router-dom';
import {
  IonApp,
  IonIcon,
  IonLabel,
  IonRouterOutlet,
  IonTabBar,
  IonTabButton,
  IonTabs,
} from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import {
  heart,
  heartOutline,
  listOutline,
  peopleOutline,
  personOutline,
} from 'ionicons/icons';

import '@ionic/react/css/core.css';
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';
import '@ionic/react/css/palettes/dark.system.css';
import './theme/variables.css';

import { setStatusBarStyle, Style } from './utils/statusBar';
import { AuthProvider, useAuth } from './contexts/AuthContext';
import ProtectedRoute from './components/ProtectedRoute';

// Auth Pages
import AuthPage from './pages/AuthPage';
import VerifyEmailPage from './pages/VerifyEmailPage';
import ForgotPasswordPage from './pages/ForgotPasswordPage';
import VerifyResetPage from './pages/VerifyResetPage';
import SetupProfilePage from './pages/SetupProfilePage';

// Main App Pages
import HomePage from './pages/HomePage';
import RecipientsPage from './pages/RecipientsPage';
import RecipientFormPage from './pages/RecipientFormPage';
import RecipientDetailPage from './pages/RecipientDetailPage';
import SupportFlowPage from './pages/SupportFlowPage';
import OrderDetailPage from './pages/OrderDetailPage';
import VoucherDetailPage from './pages/VoucherDetailPage';
import ActivityPage from './pages/ActivityPage';
import NotificationsPage from './pages/NotificationsPage';
import ProfilePage from './pages/ProfilePage';
import EditProfilePage from './pages/EditProfilePage';

const BYPASS_AUTH = true;

const SetupProfileRoute: React.FC = () => {
  const { user } = useAuth();
  return (
    <Route
      path="/setup-profile"
      render={() =>
        BYPASS_AUTH ? (
          <Redirect to="/home" />
        ) : !user ? (
          <Redirect to="/auth" />
        ) : (
          <SetupProfilePage />
        )
      }
      exact
    />
  );
};

const SendSupportFab: React.FC = () => {
  const history = useHistory();
  const location = useLocation();
  const hiddenPaths = [
    '/auth',
    '/verify-email',
    '/forgot-password',
    '/verify-reset',
    '/setup-profile',
    '/support/new',
  ];
  const showOnPaths = ['/home', '/recipients', '/activity', '/profile'];
  const isVisibleRoute =
    showOnPaths.includes(location.pathname) ||
    /^\/recipients\/[0-9a-fA-F-]{36}$/.test(location.pathname);

  if (!isVisibleRoute || hiddenPaths.includes(location.pathname)) return null;

  return (
    <button
      type="button"
      className="app-send-support-fab"
      aria-label="Send support"
      onClick={() => history.push('/support/new')}
    >
      <IonIcon icon={heart} />
    </button>
  );
};

const App: React.FC = () => {
  useEffect(() => {
    setStatusBarStyle(Style.Light);
  }, []);

  return (
    <IonApp>
      <AuthProvider>
        <IonReactRouter>
          <IonRouterOutlet>
            {/* Auth Routes */}
            <Route
              path="/auth"
              render={() =>
                BYPASS_AUTH ? <Redirect to="/home" /> : <AuthPage />
              }
              exact
            />
            <Route path="/verify-email" component={VerifyEmailPage} exact />
            <Route
              path="/forgot-password"
              component={ForgotPasswordPage}
              exact
            />
            <Route path="/verify-reset" component={VerifyResetPage} exact />

            {/* Setup Profile Route - Requires authenticated user but not necessarily complete profile */}
            <SetupProfileRoute />

            {/* Top-level Protected Routes (no tab bar) */}
            <ProtectedRoute
              path="/support/new"
              component={SupportFlowPage}
              exact
            />
            <ProtectedRoute
              path="/orders/:id([0-9a-fA-F-]{36})"
              component={OrderDetailPage}
              exact
            />
            <ProtectedRoute
              path="/recipients/new"
              component={RecipientFormPage}
              exact
            />
            <Route
              path="/recipients/:id([0-9a-fA-F-]{36}|preview-[a-zA-Z0-9-]+)"
              render={() =>
                BYPASS_AUTH ? (
                  <RecipientDetailPage />
                ) : (
                  <ProtectedRoute
                    path="/recipients/:id([0-9a-fA-F-]{36})"
                    component={RecipientDetailPage}
                    exact
                  />
                )
              }
              exact
            />
            <Route
              path="/recipients/:id([0-9a-fA-F-]{36}|preview-[a-zA-Z0-9-]+)/edit"
              render={() =>
                BYPASS_AUTH ? (
                  <RecipientFormPage />
                ) : (
                  <ProtectedRoute
                    path="/recipients/:id([0-9a-fA-F-]{36})/edit"
                    component={RecipientFormPage}
                    exact
                  />
                )
              }
              exact
            />
            <ProtectedRoute
              path="/profile/edit"
              component={EditProfilePage}
              exact
            />
            <ProtectedRoute
              path="/notifications"
              component={NotificationsPage}
              exact
            />
            <ProtectedRoute
              path="/voucher/:id([0-9a-fA-F-]{36})"
              component={VoucherDetailPage}
              exact
            />

            {/* Tab Routes */}
            <Route
              path={['/home', '/recipients', '/activity', '/profile']}
              exact
              render={() =>
                BYPASS_AUTH ? (
                  <IonTabs>
                    <IonRouterOutlet>
                      <Route path="/home" component={HomePage} exact />
                      <Route
                        path="/recipients"
                        component={RecipientsPage}
                        exact
                      />
                      <Route path="/activity" component={ActivityPage} exact />
                      <Route path="/profile" component={ProfilePage} exact />
                    </IonRouterOutlet>

                    <IonTabBar slot="bottom" className="app-tab-bar">
                      <IonTabButton tab="home" href="/home">
                        <IonIcon icon={heartOutline} />
                        <IonLabel>Care</IonLabel>
                      </IonTabButton>
                      <IonTabButton tab="recipients" href="/recipients">
                        <IonIcon icon={peopleOutline} />
                        <IonLabel>Recipients</IonLabel>
                      </IonTabButton>
                      <IonTabButton disabled tab="send-support-fab" />
                      <IonTabButton tab="activity" href="/activity">
                        <IonIcon icon={listOutline} />
                        <IonLabel>Activity</IonLabel>
                      </IonTabButton>
                      <IonTabButton tab="profile" href="/profile">
                        <IonIcon icon={personOutline} />
                        <IonLabel>Profile</IonLabel>
                      </IonTabButton>
                    </IonTabBar>
                  </IonTabs>
                ) : (
                  <ProtectedRoute
                    path={['/home', '/recipients', '/activity', '/profile']}
                    component={() => (
                      <IonTabs>
                        <IonRouterOutlet>
                          <Route path="/home" component={HomePage} exact />
                          <Route
                            path="/recipients"
                            component={RecipientsPage}
                            exact
                          />
                          <Route
                            path="/activity"
                            component={ActivityPage}
                            exact
                          />
                          <Route
                            path="/profile"
                            component={ProfilePage}
                            exact
                          />
                        </IonRouterOutlet>

                        <IonTabBar slot="bottom" className="app-tab-bar">
                          <IonTabButton tab="home" href="/home">
                            <IonIcon icon={heartOutline} />
                            <IonLabel>Care</IonLabel>
                          </IonTabButton>
                          <IonTabButton tab="recipients" href="/recipients">
                            <IonIcon icon={peopleOutline} />
                            <IonLabel>Recipients</IonLabel>
                          </IonTabButton>
                          <IonTabButton disabled tab="send-support-fab" />
                          <IonTabButton tab="activity" href="/activity">
                            <IonIcon icon={listOutline} />
                            <IonLabel>Activity</IonLabel>
                          </IonTabButton>
                          <IonTabButton tab="profile" href="/profile">
                            <IonIcon icon={personOutline} />
                            <IonLabel>Profile</IonLabel>
                          </IonTabButton>
                        </IonTabBar>
                      </IonTabs>
                    )}
                  />
                )
              }
            />

            {/* Orders Redirect */}
            <Route
              exact
              path="/orders"
              render={() => <Redirect to="/activity" />}
            />

            {/* Root Redirect */}
            <Route
              exact
              path="/"
              render={() => <Redirect to={BYPASS_AUTH ? '/home' : '/auth'} />}
            />
          </IonRouterOutlet>
          <SendSupportFab />
        </IonReactRouter>
      </AuthProvider>
    </IonApp>
  );
};

export default App;
