"use client";

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

export default function CommonCodeManagementPage() {
  // const { getText } = useMultiLang(); // 무한 루프 방지를 위해 임시 제거
  const [selectedCategoryCode, setSelectedCategoryCode] = useState<string>("");

  return (
    <div className="container mx-auto space-y-6 p-6">
      {/* 페이지 헤더 */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">공통코드 관리</h1>
          <p className="text-muted-foreground">시스템에서 사용하는 공통코드를 관리합니다</p>
        </div>
      </div>

      {/* 메인 콘텐츠 */}
      <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
        {/* 카테고리 패널 */}
        <Card className="lg:col-span-1">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">📂 코드 카테고리</CardTitle>
          </CardHeader>
          <CardContent className="p-0">
            <CodeCategoryPanel selectedCategoryCode={selectedCategoryCode} onSelectCategory={setSelectedCategoryCode} />
          </CardContent>
        </Card>

        {/* 구분선 */}
        <Separator orientation="vertical" className="hidden lg:block" />

        {/* 코드 상세 패널 */}
        <Card className="lg:col-span-2">
          <CardHeader>
            <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>
  );
}