"use client";
import React, { useState, useEffect } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import "./Sidebar.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faBars, faCogs, faHome, faStar, faTv, faFilm, faBookBookmark } from "@fortawesome/free-solid-svg-icons";

const Sidebar = () => {
  const [isOpen, setIsOpen] = useState(false);
  const pathname = usePathname();
  const [hoveredLink, setHoveredLink] = useState(null);
  const [prevLink, setPrevLink] = useState(null);

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

  const toggleSidebar = () => {
    setIsOpen(!isOpen);
  };

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

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

  return (
    <div className={`sidebar ${isOpen ? "open" : "closed"}`}>
      <div className="sidebar-header">
        <button className="sidebar-toggle" onClick={toggleSidebar}>
          <FontAwesomeIcon icon={faBars} size="sm" />
        </button>
        {isOpen && <h1 className="sidebar-title">Streamz</h1>}
      </div>
      <div className="sidebar-content">
      {isOpen && (
        <div className="sidebar-menu">
          <Link
            href="/"
            className={`sidebar-link ${pathname === "/" ? "active" : ""}`}
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
          >
            <SidebarItem icon={faHome} text="Home" />
          </Link>
          <Link
            href="/films"
            className={`sidebar-link ${pathname === "/films" ? "active" : ""}`}
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
          >
            <SidebarItem icon={faFilm} text="Movies" />
          </Link>
          <Link
            href="/tvshows"
            className={`sidebar-link ${
              pathname === "/tvshows" ? "active" : ""
            }`}
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
          >
            <SidebarItem icon={faTv} text="Series" />
          </Link>
          <Link
            href="/new"
            className={`sidebar-link ${pathname === "/new" ? "active" : ""}`}
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
          >
            <SidebarItem icon={faStar} text="New" />
          </Link>
          <Link
            href="/mylist"
            className={`sidebar-link ${pathname === "/mylist" ? "active" : ""}`}
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
          >
            <SidebarItem icon={faBookBookmark} text="My List" />
          </Link>
        </div>
      )}
      {isOpen && (
        <div className="sidebar-footer">
          <SidebarItem icon={faCogs} text="Settings" />
        </div>
      )}
      </div>
    </div>
  );
};

const SidebarItem = ({ icon, text }) => {
  return (
    <div className="sidebar-item">
      <FontAwesomeIcon icon={icon} size="lg" />
      <p className="sidebar-item-text">{text}</p>
    </div>
  );
};

export default Sidebar;