import React from "react";
import {
  BrowserRouter as Router,
  Route,
  Routes,
  Link,
  useLocation,
} from "react-router-dom";
import { library } from "@fortawesome/fontawesome-svg-core";
import {
  faEllipsisVertical,
  faPlay,
  faChevronLeft,
  faCaretDown,
  faCaretLeft,
  faCaretRight,
  faMagnifyingGlass,
  faHome,
  faFilm,
  faTv,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import HomePage from "./pages/homePage";
import FilmsPage from "./pages/filmsPage";
import TvShowsPage from "./pages/tvshowsPage";
import FilmDetailsPage from "./pages/filmDetailsPage";
import { FilmProvider } from "./context/FilmContext";
import { TvShowsProvider } from "./context/TvShowsContext";
import "./App.css";
import MenueModal from "./components/modals/menueModal";
import FilmPlayer from "./pages/filmPlayer";
import TvshowPlayer from "./pages/tvshowPlayer";
import TvShowDetailsPage from "./pages/tvshowDetailsPage";
import AdminPage from "./pages/Admin/adminPage";
import SearchPage from "./pages/searchPage";


library.add(
  faEllipsisVertical,
  faPlay,
  faChevronLeft,
  faCaretDown,
  faCaretLeft,
  faCaretRight,
  faMagnifyingGlass,
  faHome,
  faFilm,
  faTv
);

function Navbar() {
  const location = useLocation();
  const [hoveredLink, setHoveredLink] = React.useState(null);
  const [prevLink, setPrevLink] = React.useState(null);
  const [isModalOpen, setIsModalOpen] = React.useState(false);

  const handleModalClose = () => {
    setIsModalOpen(false);
  };

  const handleModalOpen = () => {
    setIsModalOpen(!isModalOpen);
  };

  React.useEffect(() => {
    const activeLink = document.querySelector(
      `.nav-link[href="${location.pathname}"]`
    );
    if (activeLink) {
      setPrevLink(activeLink);
    }
  }, [location.pathname]);

  const handleMouseEnter = (e) => {
    setPrevLink(document.querySelector(".nav-link.active"));
    setHoveredLink(e.target);
  };

  const handleMouseLeave = () => {
    setHoveredLink(null);
  };

  return (
    <nav>
      <ul className="nav-links">
        <li>
          <Link
            to="/"
            className={`nav-link ${location.pathname === "/" ? "active" : ""}`}
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
          >
            <FontAwesomeIcon icon="fa-solid fa-house" size="lg" />
          </Link>
        </li>
        <li>
          <Link
            to="/search"
            className={`nav-link ${
              location.pathname === "/search" ? "active" : ""
            }`}
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
          >
            <FontAwesomeIcon icon="fa-solid fa-magnifying-glass" size="lg" />
          </Link>
        </li>
        <li>
          <Link
            to="/films"
            className={`nav-link ${
              location.pathname === "/films" ? "active" : ""
            }`}
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
          >
            <FontAwesomeIcon icon="fa-solid fa-film" size="lg" />
          </Link>
        </li>
        <li>
          <Link
            to="/tvshows"
            className={`nav-link ${
              location.pathname === "/tvshows" ? "active" : ""
            }`}
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
          >
            <FontAwesomeIcon icon="fa-solid fa-tv" size="lg" />
          </Link>
        </li>
        <li>
          <FontAwesomeIcon
            className="nav-link-menue"
            icon="fa-solid fa-caret-down"
            size="xl"
            onClick={handleModalOpen}
          />
        </li>
      </ul>
      <span
        className="underline active-underline"
        style={
          prevLink
            ? {
                width: prevLink.offsetWidth,
                left: prevLink.offsetLeft,
              }
            : {}
        }
      />
      <span
        className="underline hover-underline"
        style={
          hoveredLink
            ? {
                width: hoveredLink.offsetWidth,
                left: hoveredLink.offsetLeft,
              }
            : {}
        }
      />
      <MenueModal isOpen={isModalOpen} onRequestClose={setIsModalOpen} />
    </nav>
  );
}

function AppContent() {
  const location = useLocation();
  const isFilmPlayer = location.pathname.startsWith("/player");

  return (
    <div className="App">
      {!isFilmPlayer && (
        <header className="App-header">
          <Navbar />
        </header>
      )}
      <main>
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/search" element={<SearchPage />} />
          <Route path="/films" element={<FilmsPage />} />
          <Route path="/tvshows" element={<TvShowsPage />} />
          <Route path="/film/:title" element={<FilmDetailsPage />} />
          <Route path="/player/film/:videoUrl" element={<FilmPlayer />} />
          <Route path="/player/tvshow/:title/:season/:episode" element={<TvshowPlayer />} />
          <Route path="/tvshow/:title" element={<TvShowDetailsPage />} />
          <Route path="/admin" element={<AdminPage />} />
        </Routes>
      </main>
    </div>
  );
}

function App() {
  return (
    <FilmProvider>
      <TvShowsProvider>
        <Router>
          <AppContent />
        </Router>
      </TvShowsProvider>
    </FilmProvider>
  );
}

export default App;