"use client";

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

const LANG_KEYS = [
  "commonCode.page.title",
  "commonCode.category.title",
  "commonCode.detail.title",
] as const;

const DEFAULT_TEXTS: Record<string, string> = {
  "commonCode.page.title": "공통코드 관리",
  "commonCode.category.title": "코드 카테고리",
  "commonCode.detail.title": "코드 상세 정보",
};

export default function CommonCodeManagementPage() {
  const { t } = usePageMultiLang({
    keys: LANG_KEYS,
    defaults: DEFAULT_TEXTS,
    menuCode: "admin.systemMng.commonCode",
  });
  const { selectedCategoryCode, selectCategory } = useSelectedCategory();

  return (
    <div className="flex h-full flex-col overflow-hidden bg-background p-4">
      {/* 페이지 헤더 (얇게, 설명 없이) */}
      <div className="flex items-center justify-between border-b pb-2">
        <h1 className="text-lg font-semibold tracking-tight">{t("commonCode.page.title")}</h1>
      </div>

      {/* 메인 콘텐츠 — 좌(카테고리) / 우(코드 상세) 2열, 한 프레임으로 보이게 컴팩트 */}
      <div className="mt-3 flex min-h-0 flex-1 flex-col gap-3 lg:flex-row">
        {/* 좌측: 카테고리 패널 */}
        <div className="flex min-h-0 w-full flex-col rounded-md border bg-card lg:w-72">
          <div className="flex h-9 items-center border-b px-3">
            <h2 className="text-xs font-semibold tracking-tight">{t("commonCode.category.title")}</h2>
          </div>
          <div className="flex min-h-0 flex-1 flex-col p-2">
            <CodeCategoryPanel selectedCategoryCode={selectedCategoryCode} onSelectCategory={selectCategory} />
          </div>
        </div>

        {/* 우측: 코드 상세 패널 */}
        <div className="flex min-h-0 min-w-0 flex-1 flex-col rounded-md border bg-card">
          <div className="flex h-9 items-center justify-between border-b px-3">
            <h2 className="text-xs font-semibold tracking-tight">
              {t("commonCode.detail.title")}
              {selectedCategoryCode && (
                <span className="ml-1.5 font-mono text-[11px] font-normal text-muted-foreground">
                  · {selectedCategoryCode}
                </span>
              )}
            </h2>
          </div>
          <div className="flex min-h-0 flex-1 flex-col p-2">
            <CodeDetailPanel categoryCode={selectedCategoryCode} />
          </div>
        </div>
      </div>
    </div>
  );
}
