import React, {useEffect, useState} from "react";
import { BrowserRouter as Router, Routes, Route, Navigate, useLocation } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';
import Container from 'react-bootstrap/Container';
import UsersList from "./components/UsersList";
import TransRoutes from './components/trans-routes/TransRoutes';
import RoutesDashboard from "./components/trans-routes/RoutesDashboard";
import RouteView from "./components/trans-routes/RouteView";
import RouteEdit from "./components/trans-routes/RouteEdit";
import RoutesSchedule from "./components/trans-routes/RoutesSchedule";
import CreateVehicle from "./components/vehicles/CreateVehicle";
import UpdateVehicle from "./components/vehicles/UpdateVehicle";
import AddVehicleInspection from "./components/vehicles/AddVehicleInspection";
import EditVehicleInspection from "./components/vehicles/EditVehicleInspection";
import AddRepairRecord from "./components/vehicles/AddRepairRecord";
import EditRepairRecord from "./components/vehicles/EditRepairRecord";
import CreateEmployee from "./components/employees/CreateEmployee";
import UpdateEmployee from "./components/employees/UpdateEmployee";
import EmployeeList from "./components/employees/EmployeeList";
import ViewEmployee from "./components/employees/ViewEmployee";
import CreateRoute from "./components/trans-routes/CreateRoute";
import Admin from './components/admin/Admin';
import CustomerReport from "./components/admin/CustomerReport";
import Permission from "./components/admin/Permission";
import Login from "./components/login/Login";
import RoutesHistory from "./components/trans-routes/RoutesHistory";
import RouteTemplatesList from "./components/trans-routes/RouteTemplatesList";
import RouteTemplateEdit from "./components/trans-routes/RouteTemplateEdit";
import DailyTemplatesList from "./components/trans-routes/DailyTemplatesList";
import ViewDailyTemplate from "./components/trans-routes/ViewDailyTemplate";
import ViewDailyTemplateRoute from "./components/trans-routes/ViewDailyTemplateRoute";
import UpdateDailyTemplateRoute from "./components/trans-routes/UpdateDailyTemplateRoute";
import CreateTemplateRoute from "./components/trans-routes/CreateTemplateRoute";
import MealStatus from "./components/trans-routes/MealStatus";
import CreateCustomer from "./components/customers/CreateCustomer";
import CustomersList from "./components/customers/CustomersList";
import ViewCustomer from "./components/customers/ViewCustomer";
import UpdateCustomer from "./components/customers/UpdateCustomer";
import Landing from "./components/landing/Landing";
import VehicleList from "./components/vehicles/VehicleList";
import ViewVehicle from "./components/vehicles/ViewVehicle";
import CreateMessage from "./components/messages/CreateMessage";
import UpdateMessage from "./components/messages/UpdateMessage";
import MessageList from "./components/messages/MessageList";
import CreateCenterPhone from "./components/center-phone/CreateCenterPhone";
import UpdateCenterPhone from "./components/center-phone/UpdateCenterPhone";
import CenterPhoneList from "./components/center-phone/CenterPhoneList";
import MessageTokenEditor from "./components/messages/MessageTokenEditor";
import SendMessage from "./components/messages/SendMessage";
import SentMessageList from "./components/messages/SentMessageList";
import RouteSignatureList from "./components/trans-routes/RoutesSignature";

import CreateResource from "./components/resources/CreateResource";
import ResourcesList from "./components/resources/ResourcesList";
import UpdateResource from "./components/resources/UpdateResource";
import ViewResource from "./components/resources/ViewResource";

import CreateEvent from "./components/events/CreateEvent";
import EventsList from "./components/events/EventsList";
import EventsMultipleList from "./components/events/EventsMultipleList";
import UpdateEvent from "./components/events/UpdateEvent";
import ViewEvent from "./components/events/ViewEvent";
import EventsCalendar from "./components/events/EventsCalendar";

import Medical from "./components/medical/Medical";
import MedicalIndex from './components/medical/MedicalIndex';
import TemplateManager from "./components/medical/TemplateManager";
import CreateEventRequest from "./components/event-request/CreateEventRequest";
import EventRequestList from "./components/event-request/EventRequestList";

import DriverSignature from "./components/signature/DriverSignature";
import RouteReportWithSignature from './components/trans-routes/RouteReportWithSignature';

import Layout from "./components/home/layout";
import Home from "./components/home/home";

import Seating from "./components/seating/Seating";
import CenterCalendar from "./components/center-calendar/CenterCalendar";
import Dashboard from "./components/dashboard/Dashboard";
import AdminView from "./components/admin-view/AdminView";

import InfoScreen from './components/info-screen/InfoScreen';

function App() {
  const [showMenu, setShowMenu] = useState(false);
  // const getLogo = () => {
  //   return (window.location.hostname.includes('worldshine2.mayo.llc') || window.location.hostname.includes('site2') || window.location.host.includes('ws2') ||window.location.hostname.includes('localhost')) ? "/images/logo2.png" : ((window.location.hostname.includes('worldshine3.mayo.llc') ||window.location.hostname.includes('site3') || window.location.hostname.includes('ws3')) ? "/images/logo3.png" : "/images/logo1.png");
  // }
  const getLogoSuffix = () => {
    return (window.location.hostname.includes('worldshine2.mayo.llc') || window.location.hostname.includes('site2') || window.location.host.includes('ws2') ||window.location.hostname.includes('localhost')) ? "Care LLC" : ((window.location.hostname.includes('worldshine3.mayo.llc') ||window.location.hostname.includes('site3') || window.location.hostname.includes('ws3')) ? "Cloverleaf LLC" : "International LLC");
  }
  // For Test Site only
  // const getLogo = () => {
  //   return (window.location.hostname.includes('ws2') || window.location.hostname.includes('site2') ||window.location.hostname.includes('localhost')) ? "/images/logo2.png" : ((window.location.hostname.includes('ws3') ||window.location.hostname.includes('site3')) ? "/images/logo3.png" : "/images/logo1.png");
  // }

  // const goToAdmin = () => {
  //   window.location.href = `/admin`;
  // }
  useEffect(() => {
    const applyTimeInputConstraints = () => {
      document.querySelectorAll('.react-time-picker__inputGroup__hour, .react-datetime-picker__inputGroup__hour').forEach((input) => {
        input.setAttribute('min', '0');
        input.setAttribute('max', '23');
        input.setAttribute('inputmode', 'numeric');
      });

      document.querySelectorAll('.react-time-picker__inputGroup__minute, .react-datetime-picker__inputGroup__minute').forEach((input) => {
        input.setAttribute('min', '0');
        input.setAttribute('max', '59');
        input.setAttribute('inputmode', 'numeric');
      });

      document.querySelectorAll('.react-datepicker-time__input-container input[type="time"]').forEach((input) => {
        input.setAttribute('min', '00:00');
        input.setAttribute('max', '23:59');
      });
    };

    const isTimeFieldTarget = (target) => {
      if (!(target instanceof HTMLInputElement)) return false;
      const inTimePicker = target.closest('.react-time-picker, .react-datetime-picker, .react-datepicker-time__input-container');
      if (!inTimePicker) return false;
      return target.type === 'number' || target.type === 'time';
    };

    const preventArrowChange = (event) => {
      if (!isTimeFieldTarget(event.target)) return;
      if (event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'PageUp' || event.key === 'PageDown') {
        event.preventDefault();
      }
    };

    const preventWheelChange = (event) => {
      if (!isTimeFieldTarget(event.target)) return;
      if (document.activeElement === event.target) {
        event.preventDefault();
      }
    };

    applyTimeInputConstraints();
    const observer = new MutationObserver(() => applyTimeInputConstraints());
    observer.observe(document.body, { childList: true, subtree: true });

    document.addEventListener('keydown', preventArrowChange, true);
    document.addEventListener('wheel', preventWheelChange, { capture: true, passive: false });

    return () => {
      observer.disconnect();
      document.removeEventListener('keydown', preventArrowChange, true);
      document.removeEventListener('wheel', preventWheelChange, true);
    };
  }, []);

  return (
    <>
      {/* <div className="logo">
        <img src="/images/logo_new.jpg" /><span className="logo-suffix">{getLogoSuffix()}</span>
        {showMenu && <Navbar bg="#fff" expand="lg" className="admin-nav mb-4 ms-4">
          <Container>
            <Nav.Link onClick={() => goToAdmin()}>Home</Nav.Link>
          </Container>
        </Navbar>}
        
      </div> */}
      <div>
        <Router>
          <Routes>
            {/* <Route path="/" element={<Navigate replace to="/login" />} /> */}
            <Route path="/landing" element={<Landing />} />
            <Route path="/login" element={<Login setMenu={() => {setShowMenu(true)}}/>} />
            <Route path="/" element={<Layout />}>
              <Route index element={<Home />} ></Route>
              <Route path="/trans-routes" element={<TransRoutes />}>
                <Route path="" element={<Navigate replace to="dashboard" />} />
                <Route path="create" element={<CreateRoute/>} />
                <Route path="dashboard" element={<RoutesDashboard/>} />
                <Route path=":id" element={<RouteView/>} />
                <Route path="edit/:id" element={<RouteEdit/>} />
                <Route path="schedule" element={<RoutesSchedule />} />
                <Route path="history" element={<RoutesHistory />} />
                <Route path="templates" element={<RouteTemplatesList />} />
                <Route path="templates/edit/:id" element={<RouteTemplateEdit />} />
                <Route path="daily-templates/list" element={<DailyTemplatesList />} />
                <Route path="daily-templates/view/:id" element={<ViewDailyTemplate />} />
                <Route path="daily-templates/:id/view-route/:routeId" element={<ViewDailyTemplateRoute />} />
                <Route path="daily-templates/:id/update-route/:routeId" element={<UpdateDailyTemplateRoute />} />
                <Route path="daily-templates/:id/create-route" element={<CreateTemplateRoute />} />
                <Route path="route-signature" element={<RouteSignatureList/>} />
                <Route path="route-report-with-signature/:id" element={<RouteReportWithSignature/>} />
              </Route>
              <Route path="/signature/:id" element={<DriverSignature/>} />
              <Route path="/vehicles" element={<CreateVehicle /> } />
              <Route path="/vehicles/edit/:id" element={<UpdateVehicle />} />
              <Route path="/vehicles/list" element={<VehicleList/> } />
              <Route path="/vehicles/:id" element={<ViewVehicle/>}/>
              <Route path="/vehicles/:id/inspections/:type/add" element={<AddVehicleInspection />} />
              <Route path="/vehicles/:id/inspections/:type/edit" element={<EditVehicleInspection />} />
              <Route path="/vehicles/:id/repairs/add" element={<AddRepairRecord />} />
              <Route path="/vehicles/:id/repairs/edit/:repairId" element={<EditRepairRecord />} />

              <Route path="/messages" element={<CreateMessage /> } />
              <Route path="/messages/edit/:id" element={<UpdateMessage />} />
              <Route path="/messages/list" element={<MessageList/> } />
              <Route path="/message-tokens" element={<MessageTokenEditor/>} />
              <Route path="/messages/send-message" element={<SendMessage/>} />
              <Route path="/messages/sent-messages/list" element={<SentMessageList />} />

              <Route path="/center-phones" element={<CreateCenterPhone /> } />
              <Route path="/center-phones/edit/:id" element={<UpdateCenterPhone />} />
              <Route path="/center-phones/list" element={<CenterPhoneList/> } />
                
              <Route path="/employees" element={<CreateEmployee /> } />
              <Route path="/employees/list" element={<EmployeeList/> } />
              <Route path="/employees/:id" element={<ViewEmployee /> } />
              <Route path="/employees/edit/:id" element={<UpdateEmployee /> } />
              <Route path="/users" element={<UsersList />} />
              <Route path="/customers" element={<CreateCustomer /> } />
              <Route path="/customers/list" element={<CustomersList/> } />
              <Route path="/customers/:id" element={<ViewCustomer /> } />
              <Route path="/customers/edit/:id" element={<UpdateCustomer /> } />
              <Route path="/admin" element={<Admin />}>
                <Route path="" element={<Navigate replace to="customer-report" />} />
                <Route path="customer-report" element={<CustomerReport/>} />
                <Route path="permission" element={<Permission/>} />
              </Route>

              <Route path="/dashboard/dashboard" element={<Dashboard/>} />
              <Route path="/dashboard/admin-view" element={<AdminView/>} />

              <Route path="/seating" element={<Seating />} />
              <Route path="/center-calendar" element={<CenterCalendar/>} />
              <Route path="/meal-status" element={<MealStatus />} />
                
              <Route path="/medical" element={<Medical />}>
                <Route path="" element={<Navigate replace to="index" />} />
                <Route path="index" element={<MedicalIndex/>} />
                <Route path="resources" element={<CreateResource /> } />
                <Route path="resources/list" element={<ResourcesList/> } />
                <Route path="resources/:id" element={<ViewResource /> } />
                <Route path="resources/edit/:id" element={<UpdateResource /> } />

                <Route path="events" element={<CreateEvent /> } />
                <Route path="events/list" element={<EventsList/> } />
                <Route path="events/multiple-list" element={<EventsMultipleList/> } />
                <Route path="events/calendar" element={<EventsCalendar/> } />
                <Route path="events/:id" element={<ViewEvent /> } />
                <Route path="events/edit/:id" element={<UpdateEvent /> } />
                <Route path="events/create-from-request" element={<UpdateEvent /> } />
                <Route path="event-request" element={<CreateEventRequest />} />
                <Route path="event-request/list" element={<EventRequestList />} />
                <Route path="template" element={<TemplateManager />} />
              </Route>

              <Route path="/info-screen" element={<InfoScreen />} />
            </Route>
          </Routes>
        </Router>
      </div>
    </>
    
  );
}

export default App;