"use client";
import React from "react";
import Link from "next/link";
import Image from "next/image";
import { useTheme } from "../context/ThemeContext";
import { useSidebar } from "../context/SidebarContext";

const Sidebar = () => {
  const { darkMode } = useTheme();
  const { isCollapsed } = useSidebar();

  return (
    <aside className={`h-full border-r flex flex-col transition-all duration-200 ease-in-out 
      ${isCollapsed ? 'w-20' : 'w-[290px]'} 
      ${darkMode ? 'bg-gray-900 border-gray-800' : 'bg-white border-gray-200'}`}>

      {/* Logo - Only shown when expanded */}
      {!isCollapsed && (
        <div className="py-8 flex justify-start px-4">
          <Link href="/">
            <Image
              src={darkMode ? "/images/logo/logo-dark.svg" : "/images/logo/logo.svg"}
              alt="Logo"
              width={150}
              height={40}
            />
          </Link>
        </div>
      )}

      {/* Navigation */}
      <div className="flex flex-col overflow-y-auto no-scrollbar">
        <nav className="mb-6 px-2">
          {/* Menu heading - Only shown when expanded */}
          {!isCollapsed && (
            <h2 className="mb-4 text-xs uppercase leading-[20px] text-gray-400 dark:text-gray-500 px-2">
              Menu
            </h2>
          )}

          <div className="flex flex-col gap-1">
            {/* Dashboard */}
            <Link
              href="/pages/dashboard"
              className={`flex items-center w-full p-2 rounded-lg group
                ${darkMode
                  ? 'text-gray-300 hover:text-white hover:bg-gray-800'
                  : 'text-gray-600 hover:text-brand-500 hover:bg-gray-100'
                }`}
            >
              <img
                src="/images/icons/grid.svg"
                alt="Dashboard"
                className={`w-5 h-5 ${isCollapsed ? 'mx-auto' : 'mr-3'} ${darkMode ? 'filter invert' : ''}`}
              />
              {!isCollapsed && <span className="flex-1 text-left">Dashboard</span>}
              {isCollapsed && (
                <span className={`absolute left-full ml-2 px-2 py-1 text-xs rounded-md shadow-lg
                  ${darkMode ? 'bg-gray-800 text-white' : 'bg-white text-gray-900'} 
                  opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap`}>
                  Dashboard
                </span>
              )}
            </Link>

            {/* table01 page */}
            <Link
              href="/pages/table01"
              className={`flex items-center w-full p-2 rounded-lg group
                ${darkMode
                  ? 'text-gray-300 hover:text-white hover:bg-gray-800'
                  : 'text-gray-600 hover:text-brand-500 hover:bg-gray-100'
                }`}
            >
              <img
                src="/file.svg"
                alt="table01"
                className={`w-5 h-5 ${isCollapsed ? 'mx-auto' : 'mr-3'} ${darkMode ? 'filter invert' : ''}`}
              />
              {!isCollapsed && <span className="flex-1 text-left">table01</span>}
              {isCollapsed && (
                <span className={`absolute left-full ml-2 px-2 py-1 text-xs rounded-md shadow-lg
                  ${darkMode ? 'bg-gray-800 text-white' : 'bg-white text-gray-900'} 
                  opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap`}>
                  table01
                </span>
              )}
            </Link>

            {/* register employee */}
            <Link
              href="/pages/register-employee"
              className={`flex items-center w-full p-2 rounded-lg group
                ${darkMode
                  ? 'text-gray-300 hover:text-white hover:bg-gray-800'
                  : 'text-gray-600 hover:text-brand-500 hover:bg-gray-100'
                }`}
            >
              <img
                src="/file.svg"
                alt="register employee"
                className={`w-5 h-5 ${isCollapsed ? 'mx-auto' : 'mr-3'} ${darkMode ? 'filter invert' : ''}`}
              />
              {!isCollapsed && <span className="flex-1 text-left">register employee</span>}
              {isCollapsed && (
                <span className={`absolute left-full ml-2 px-2 py-1 text-xs rounded-md shadow-lg
                  ${darkMode ? 'bg-gray-800 text-white' : 'bg-white text-gray-900'} 
                  opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap`}>
                  register employee
                </span>
              )}
            </Link>

            {/* TemporaryTable */}
            <Link
              href="/pages/TemporaryTable"
              className={`flex items-center w-full p-2 rounded-lg group
                ${darkMode
                  ? 'text-gray-300 hover:text-white hover:bg-gray-800'
                  : 'text-gray-600 hover:text-brand-500 hover:bg-gray-100'
                }`}
            >
              <img
                src="/file.svg"
                alt="TemporaryTable"
                className={`w-5 h-5 ${isCollapsed ? 'mx-auto' : 'mr-3'} ${darkMode ? 'filter invert' : ''}`}
              />
              {!isCollapsed && <span className="flex-1 text-left">TemporaryTable</span>}
              {isCollapsed && (
                <span className={`absolute left-full ml-2 px-2 py-1 text-xs rounded-md shadow-lg
                  ${darkMode ? 'bg-gray-800 text-white' : 'bg-white text-gray-900'} 
                  opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap`}>
                  TemporaryTable
                </span>
              )}
            </Link>

            {/* Trainees Data */}
            <Link
              href="/pages/TraineesData"
              className={`flex items-center w-full p-2 rounded-lg group
                ${darkMode
                  ? 'text-gray-300 hover:text-white hover:bg-gray-800'
                  : 'text-gray-600 hover:text-brand-500 hover:bg-gray-100'
                }`}
            >
              <img
                src="/file.svg"
                alt="TraineesData"
                className={`w-5 h-5 ${isCollapsed ? 'mx-auto' : 'mr-3'} ${darkMode ? 'filter invert' : ''}`}
              />
              {!isCollapsed && <span className="flex-1 text-left">Trainees Data</span>}
              {isCollapsed && (
                <span className={`absolute left-full ml-2 px-2 py-1 text-xs rounded-md shadow-lg
                  ${darkMode ? 'bg-gray-800 text-white' : 'bg-white text-gray-900'} 
                  opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap`}>
                  Trainees Data
                </span>
              )}
            </Link>
          </div>
        </nav>
      </div>
    </aside>
  );
};

export default Sidebar;