import { usePathname } from 'next/navigation';
import { Sidebar } from '@/components/ui/sidebar';
import { SidebarLink } from '@/components/ui/sidebar-link';

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

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

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

/**
 * 사이드바 배치 — 비주얼 셸(Sidebar)과 내비 항목(SidebarLink)은 design 공용 컴포넌트를 그대로
 * 쓰고, 데스크톱 push/접힘과 모바일 오버레이+백드롭 등 반응형 배치(공용 컴포넌트가 제공하지 않음)만
 * className 패스스루로 처리한다. 전부 Tailwind 반응형 클래스(CSS-first) — JS로 브레이크포인트를
 * 판별하지 않는다.
 *
 * 주의(공용 컴포넌트 부족분): SidebarLink는 아이콘 전용(라벨 숨김) variant를 제공하지 않는다.
 * 현재 유일한 내비 항목("홈")은 라벨이 1글자라 접힘 폭(w-16)에서도 시각적으로 문제없지만,
 * 라벨이 긴 항목이 추가되면 SidebarLink에 collapsed/아이콘 전용 variant 추가가 필요하다.
 */
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-scrim md:hidden"
        />
      )}
      <Sidebar
        className={`fixed inset-y-0 left-0 z-40 overflow-hidden transition-all duration-200 md:relative md:z-auto md:translate-x-0 ${
          isMobileOpen ? 'translate-x-0' : '-translate-x-full'
        } ${isDesktopCollapsed ? 'md:w-16' : 'md:w-64'}`}
      >
        {SIDEBAR_NAV_ITEMS.map((item) => (
          <SidebarLink
            key={item.href}
            href={item.href}
            label={item.label}
            isActive={pathname === item.href}
          />
        ))}
      </Sidebar>
    </>
  );
}