import React, { memo, useMemo } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { ChevronDown, ChevronRight, X } from 'lucide-react';
import { getSidebarSectionsForUser } from './constants';
import type { MenuItem } from './constants';
import { useAuthStore } from '../../store/useAuthStore';
import ProjectSelector from './ProjectSelector';

interface SidebarProps {
  isSidebarOpen: boolean;
  setSidebarOpen: (open: boolean) => void;
  expandedGroups: Record<string, boolean>;
  toggleGroup: (groupKey: string) => void;
}

const linkBase =
  'flex items-center gap-3 px-3 py-2 rounded-lg transition-all duration-200 group relative text-[13px] leading-snug';

const Sidebar: React.FC<SidebarProps> = memo(({ isSidebarOpen, setSidebarOpen, expandedGroups, toggleGroup }) => {
  const location = useLocation();
  const { user } = useAuthStore();

  const sections = useMemo(() => getSidebarSectionsForUser(user ?? null), [user]);

  const isExactActive = (path: string) => location.pathname === path;

  const linkClassForPath = (path: string) =>
    [
      linkBase,
      isExactActive(path)
        ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/40 dark:text-blue-400 shadow-sm'
        : 'text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 hover:text-slate-900 dark:hover:text-white',
    ].join(' ');

  const SectionHeader = ({ groupKey, label }: { groupKey: string; label: string }) => {
    const expanded = expandedGroups[groupKey] !== false;
    if (!isSidebarOpen) {
      return (
        <div className="h-px bg-slate-200 dark:bg-slate-800 my-2 mx-1" aria-hidden title={label} />
      );
    }
    return (
      <button
        type="button"
        className="flex items-center justify-between w-full px-3 py-1.5 text-[11px] font-semibold text-slate-500 dark:text-slate-500 uppercase tracking-wider hover:text-slate-800 dark:hover:text-slate-300 rounded-md"
        onClick={() => toggleGroup(groupKey)}
        aria-expanded={expanded}
      >
        <span>{label}</span>
        {expanded ? <ChevronDown size={14} className="text-slate-400" /> : <ChevronRight size={14} className="text-slate-400" />}
      </button>
    );
  };

  const renderNavLink = (item: MenuItem, opts?: { indent?: boolean }) => {
    const indent = opts?.indent ?? false;
    return (
      <Link
        key={item.path}
        to={item.path}
        className={`${linkClassForPath(item.path)} ${indent ? 'pl-9' : ''}`}
        title={!isSidebarOpen ? item.label : ''}
      >
        <div className="flex-shrink-0 w-[18px] flex justify-center">{item.icon}</div>
        <span
          className={`font-medium whitespace-nowrap transition-opacity duration-200 ${
            isSidebarOpen ? 'opacity-100' : 'opacity-0 lg:hidden'
          }`}
        >
          {item.label}
        </span>
        {!isSidebarOpen && (
          <span className="hidden lg:inline absolute left-14 bg-white dark:bg-slate-800 text-slate-900 dark:text-white text-xs px-2 py-1 rounded shadow-lg border border-slate-200 dark:border-slate-700 opacity-0 group-hover:opacity-100 transition-opacity z-[60] whitespace-nowrap pointer-events-none">
            {item.label}
          </span>
        )}
      </Link>
    );
  };

  const showOverview = sections.overview.length > 0;
  const showCurrentProjectBody = sections.currentProjectSubgroups.length > 0;
  const showFinance = sections.finance.length > 0;
  const showSystem = sections.system.length > 0;

  return (
    <>
      {isSidebarOpen && (
        <div
          className="fixed inset-0 bg-slate-900/50 z-20 lg:hidden backdrop-blur-sm transition-opacity"
          onClick={() => setSidebarOpen(false)}
        />
      )}

      <aside
        className={`
          fixed lg:static inset-y-0 left-0 z-30
          bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-300 transition-all duration-300 ease-in-out flex flex-col shadow-xl lg:shadow-none
          border-r border-slate-200 dark:border-slate-800
          ${isSidebarOpen ? 'translate-x-0 w-64' : '-translate-x-full w-64 lg:translate-x-0 lg:w-20'}
        `}
      >
        <div className="h-16 flex-shrink-0 flex items-center justify-center border-b border-slate-200 dark:border-slate-800 relative">
          {isSidebarOpen ? (
            <>
              <div className="flex items-center space-x-2 font-bold text-xl tracking-tight text-blue-600 dark:text-blue-400">
                <span>AM & OM</span>
                <span className="text-white text-xs bg-blue-600 px-1 rounded">VPEG</span>
              </div>
              <button
                onClick={() => setSidebarOpen(false)}
                className="absolute right-4 text-slate-400 hover:text-slate-600 dark:hover:text-white lg:hidden"
                aria-label="Đóng sidebar"
                type="button"
              >
                <X size={20} />
              </button>
            </>
          ) : (
            <span className="font-bold text-blue-600 dark:text-blue-400 text-xl">VP</span>
          )}
        </div>

        <nav className="flex-1 overflow-y-auto overflow-x-visible py-3 px-3 scrollbar-hide space-y-3 min-h-0">
          {showOverview && (
            <div className="space-y-1">
              <SectionHeader groupKey="overview" label="TỔNG QUAN" />
              {(!isSidebarOpen || expandedGroups.overview !== false) && (
                <div className="space-y-1">{sections.overview.map((item) => renderNavLink(item))}</div>
              )}
            </div>
          )}

          <div className={showOverview ? 'pt-3 mt-0 border-t border-slate-200 dark:border-slate-800 space-y-2' : 'space-y-2'}>
            {isSidebarOpen && (
              <p className="text-[11px] font-semibold text-slate-500 dark:text-slate-500 uppercase tracking-wider">Dự án hiện tại</p>
            )}
            <ProjectSelector sidebarCollapsed={!isSidebarOpen} />
            {showCurrentProjectBody && (
              <div className="space-y-3 mt-1">
                {sections.currentProjectSubgroups.map((sub) => (
                  <div key={sub.key} className="space-y-1">
                    {isSidebarOpen && sub.subheading != null ? (
                      <p className="px-3 pt-1 pb-0.5 text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wide">
                        {sub.subheading}
                      </p>
                    ) : null}
                    <div className="space-y-1">
                      {sub.items.map((item) => renderNavLink(item, { indent: !!sub.subheading && isSidebarOpen }))}
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>

          {showFinance && (
            <div className="space-y-1">
              <SectionHeader groupKey="finance" label="TÀI CHÍNH & BÁO CÁO" />
              {(!isSidebarOpen || expandedGroups.finance !== false) && (
                <div className="space-y-1">{sections.finance.map((item) => renderNavLink(item))}</div>
              )}
            </div>
          )}

          {showSystem && (
            <div className="space-y-1">
              <SectionHeader groupKey="system" label="HỆ THỐNG" />
              {(!isSidebarOpen || expandedGroups.system !== false) && (
                <div className="space-y-1">{sections.system.map((item) => renderNavLink(item))}</div>
              )}
            </div>
          )}
        </nav>
      </aside>
    </>
  );
});

Sidebar.displayName = 'Sidebar';

export default Sidebar;