import Link from 'next/link';
import { usePathname } from 'next/navigation';

interface SidebarNavItem {
  label: string;
  href: string;
}

// 현재 정의된 화면은 홈뿐이다 — 신규 화면이 추가될 때마다 이 목록에 항목을 늘린다.
const SIDEBAR_NAV_ITEMS: SidebarNavItem[] = [{ label: '홈', href: '/' }];

interface AdminSidebarProps {
  isMobileOpen: boolean;
  isDesktopCollapsed: boolean;
  onCloseMobile: () => void;
}

/**
 * 사이드바 View — 내비 목록을 그린다. 데스크톱 push/접힘과 모바일 오버레이+백드롭은 전부
 * Tailwind 반응형 클래스로 처리한다(CSS-first) — JS로 브레이크포인트를 판별하지 않는다.
 */
export function AdminSidebar({
  isMobileOpen,
  isDesktopCollapsed,
  onCloseMobile,
}: AdminSidebarProps) {
  const pathname = usePathname();

  return (
    <>
      {isMobileOpen && (
        <button
          type="button"
          aria-label="사이드바 닫기"
          onClick={onCloseMobile}
          className="fixed inset-0 z-30 bg-foreground/50 md:hidden"
        />
      )}
      <aside
        className={`fixed inset-y-0 left-0 z-40 flex flex-col overflow-hidden border-r border-foreground/15 bg-background transition-all duration-200 md:relative md:z-auto md:translate-x-0 ${
          isMobileOpen ? 'w-64 translate-x-0' : 'w-64 -translate-x-full'
        } ${isDesktopCollapsed ? 'md:w-16' : 'md:w-64'}`}
      >
        <nav className="flex flex-1 flex-col gap-1 p-4">
          {SIDEBAR_NAV_ITEMS.map((item) => {
            const isActive = pathname === item.href;

            return (
              <Link
                key={item.href}
                href={item.href}
                aria-current={isActive ? 'page' : undefined}
                className={`rounded-md px-3 py-2 text-sm whitespace-nowrap ${
                  isActive
                    ? 'bg-foreground/10 text-foreground'
                    : 'text-foreground/70'
                }`}
              >
                <span className={isDesktopCollapsed ? 'md:hidden' : undefined}>
                  {item.label}
                </span>
                {isDesktopCollapsed && (
                  <span aria-hidden className="hidden md:inline">
                    {item.label.slice(0, 1)}
                  </span>
                )}
              </Link>
            );
          })}
        </nav>
      </aside>
    </>
  );
}