"use client";

import { CodeInfoPanel } from "@/components/admin/CodeInfoPanel";
import { CodeDetailPanel } from "@/components/admin/CodeDetailPanel";
import { useSelectedCodeInfo } from "@/hooks/useSelectedCodeInfo";
import { ScrollToTop } from "@/components/common/ScrollToTop";

export default function CommonCodeManagementPage() {
  const { selectedCodeInfo, selectCodeInfo } = useSelectedCodeInfo();

  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">
            그룹(code_info) 과 디테일 트리(code_detail) 를 관리합니다
          </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>
              <CodeInfoPanel
                selectedCodeInfo={selectedCodeInfo}
                onSelectCodeInfo={selectCodeInfo}
              />
            </div>
          </div>

          {/* 우측: 디테일 트리 패널 */}
          <div className="min-w-0 flex-1 lg:pl-0">
            <div className="space-y-4">
              <h2 className="text-lg font-semibold">
                코드 디테일
                {selectedCodeInfo && (
                  <span className="ml-2 text-sm font-normal text-muted-foreground">
                    ({selectedCodeInfo})
                  </span>
                )}
              </h2>
              <CodeDetailPanel codeInfo={selectedCodeInfo} />
            </div>
          </div>
        </div>
      </div>

      <ScrollToTop />
    </div>
  );
}
