"use client";

import { CodeCategoryPanel } from "@/components/admin/CodeCategoryPanel";
import { CodeDetailPanel } from "@/components/admin/CodeDetailPanel";
import { useSelectedCategory } from "@/hooks/useSelectedCategory";
import { ScrollToTop } from "@/components/common/ScrollToTop";

export default function CommonCodeManagementPage() {
  const { selectedCategoryCode, selectCategory } = useSelectedCategory();

  return (
    <div className="flex min-h-screen flex-col bg-background">
      <div className="space-y-6 p-6">
        {/* 페이지 헤더 */}
        <div className="space-y-2 border-b pb-4">
          <h1 className="text-3xl font-bold tracking-tight">공통코드 관리</h1>
          <p className="text-sm text-muted-foreground">시스템에서 사용하는 공통코드를 관리합니다</p>
        </div>

        {/* 메인 콘텐츠 - 좌우 레이아웃 */}
        <div className="flex flex-col gap-6 lg:flex-row lg:gap-6">
          {/* 좌측: 카테고리 패널 */}
          <div className="w-full lg:w-80 lg:border-r lg:pr-6">
            <div className="space-y-4">
              <h2 className="text-lg font-semibold">코드 카테고리</h2>
              <CodeCategoryPanel selectedCategoryCode={selectedCategoryCode} onSelectCategory={selectCategory} />
            </div>
          </div>

          {/* 우측: 코드 상세 패널 */}
          <div className="min-w-0 flex-1 lg:pl-0">
            <div className="space-y-4">
              <h2 className="text-lg font-semibold">
                코드 상세 정보
                {selectedCategoryCode && (
                  <span className="ml-2 text-sm font-normal text-muted-foreground">({selectedCategoryCode})</span>
                )}
              </h2>
              <CodeDetailPanel categoryCode={selectedCategoryCode} />
            </div>
          </div>
        </div>
      </div>

      {/* Scroll to Top 버튼 */}
      <ScrollToTop />
    </div>
  );
}