'use client';

import { useSidebar } from '@/app/(protected)/(basic)/_hooks/use-sidebar';
import { AdminFooter } from './admin-footer';
import { AdminHeader } from './admin-header';
import { AdminSidebar } from './admin-sidebar';

interface AdminShellProps {
  children: React.ReactNode;
}

/**
 * Basic 레이아웃의 상호작용 경계 — 헤더·사이드바·풋터를 조립하고 사이드바 상태(useSidebar)를
 * 소유한다. page 콘텐츠(children)는 상위 Server Component가 렌더한 결과를 props로 그대로
 * 통과시켜 RSC를 유지한다 — 이 컴포넌트 자신은 children의 내용을 알거나 가공하지 않는다.
 */
export function AdminShell({ children }: AdminShellProps) {
  const sidebar = useSidebar();

  return (
    <div className="flex min-h-screen flex-col">
      <AdminHeader
        onOpenSidebar={sidebar.openMobile}
        onToggleSidebarCollapse={sidebar.toggleDesktopCollapse}
      />
      <div className="flex flex-1">
        {/* Sidebar(components/ui/)는 자기 높이를 h-full(퍼센트)로 채우는데, 바로 위 부모(flex-1로
            산출된 행)의 높이는 flex-grow 결과값이라 CSS 퍼센트-높이 해석의 기준(containing block)이
            되지 못해 h-full이 auto로 무너지고 border-r이 메뉴 항목 높이까지만 그려졌다. 이 wrapper는
            자기 높이를 지정하지 않아(auto) align-items:stretch로 부모 높이를 그대로 받고, 그 stretch로
            정해진 높이는 정의된 값으로 취급되어 h-full이 정상 해석된다 — Sidebar 자체는 수정하지 않음
            (components/ui/ 소관). */}
        <div className="flex">
          <AdminSidebar
            isMobileOpen={sidebar.isMobileOpen}
            isDesktopCollapsed={sidebar.isDesktopCollapsed}
            onCloseMobile={sidebar.closeMobile}
          />
        </div>
        <div className="flex flex-1 flex-col">
          <main className="flex flex-1 flex-col">{children}</main>
          <AdminFooter />
        </div>
      </div>
    </div>
  );
}