ERP-node/frontend/app/(main)/admin/commonCode/page.tsx

"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { CodeCategoryPanel } from "@/components/admin/CodeCategoryPanel";
import { CodeDetailPanel } from "@/components/admin/CodeDetailPanel";
import { useSelectedCategory } from "@/hooks/useSelectedCategory";
// import { useMultiLang } from "@/hooks/useMultiLang"; // 무한 루프 방지를 위해 임시 제거

export default function CommonCodeManagementPage() {
  // const { getText } = useMultiLang(); // 무한 루프 방지를 위해 임시 제거
  const { selectedCategoryCode, selectCategory } = useSelectedCategory();

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="w-full max-w-none px-4 py-8 space-y-8">
        {/* 페이지 제목 */}
        <div className="flex items-center justify-between bg-white rounded-lg shadow-sm border p-6">
          <div>
            <h1 className="text-3xl font-bold text-gray-900">공통코드 관리</h1>
            <p className="mt-2 text-gray-600">시스템에서 사용하는 공통코드를 관리합니다</p>
          </div>
        </div>

      {/* 메인 콘텐츠 */}
      {/* 반응형 레이아웃: PC는 가로, 모바일은 세로 */}
      <div className="flex flex-col gap-6 lg:flex-row lg:gap-8">
        {/* 카테고리 패널 - PC에서 좌측 고정 너비, 모바일에서 전체 너비 */}
        <div className="w-full lg:w-80 lg:flex-shrink-0">
          <Card className="h-full shadow-sm">
            <CardHeader className="bg-gray-50/50">
              <CardTitle className="flex items-center gap-2">📂 코드 카테고리</CardTitle>
            </CardHeader>
            <CardContent className="p-0">
              <CodeCategoryPanel selectedCategoryCode={selectedCategoryCode} onSelectCategory={selectCategory} />
            </CardContent>
          </Card>
        </div>

        {/* 코드 상세 패널 - PC에서 나머지 공간, 모바일에서 전체 너비 */}
        <div className="min-w-0 flex-1">
          <Card className="h-fit shadow-sm">
            <CardHeader className="bg-gray-50/50">
              <CardTitle className="flex items-center gap-2">
                📋 코드 상세 정보
                {selectedCategoryCode && (
                  <span className="text-muted-foreground text-sm font-normal">({selectedCategoryCode})</span>
                )}
              </CardTitle>
            </CardHeader>
            <CardContent className="p-0">
              <CodeDetailPanel categoryCode={selectedCategoryCode} />
            </CardContent>
          </Card>
        </div>
      </div>
      </div>
    </div>
  );
}