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

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

// 신규 화면이 추가될 때마다 이 목록에 항목을 늘린다. 「학생 회원」은 기획상 「회원정보관리」
// 그룹에 속하지만(Figma ADM_MEM_101 기준 — 「학생회원관리」가 아니다), 사이드바가 아직 flat
// 구조(그룹 헤딩 없음)라 지금은 평탄한 항목으로만 추가한다 — 그룹 헤딩 컴포넌트 신설은 공용
// 컴포넌트 영역이라 design 레인 소관(§4.2)이다.
const SIDEBAR_NAV_ITEMS: SidebarNavItem[] = [
  { label: '홈', href: '/' },
  { label: '학생 회원', href: '/students' },
];

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

/**
 * 사이드바 배치 — 비주얼 셸(Sidebar)과 내비 항목(SidebarLink)은 design 공용 컴포넌트를 그대로
 * 쓰고, 데스크톱 push/접힘과 모바일 오버레이+백드롭 등 반응형 배치(공용 컴포넌트가 제공하지 않음)만
 * className 패스스루로 처리한다. 전부 Tailwind 반응형 클래스(CSS-first) — JS로 브레이크포인트를
 * 판별하지 않는다.
 *
 * 주의(공용 컴포넌트 부족분 — 실증됨): SidebarLink는 아이콘 전용(라벨 숨김) variant를 제공하지
 * 않는다. "홈"은 1글자라 접힘 폭(md:w-16=4rem)에서도 문제없었지만, "학생 회원"(4글자)을 추가한
 * 뒤 접힘 상태를 실제로 확인한 결과 라벨이 글자 단위로 세로 줄바꿈되어("학\n생\n회\n원") 링크
 * pill이 4줄로 늘어나는 것을 확인했다(라이트/다크 동일하게 재현 — 테마 무관, 순수 레이아웃
 * 이슈). SidebarLink에 collapsed/아이콘 전용 variant(예: 접힘 시 라벨을 툴팁으로 옮기고 아이콘만
 * 표시) 추가가 필요하다 — design 레인 소관(§4.2 공용 컴포넌트 신설)이라 이번 범위에서는
 * 수정하지 않고 보고만 한다.
 */
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>
    </>
  );
}