"use client";

import React from "react";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Info, FolderTree, CheckCircle2 } from "lucide-react";

interface CategoryManagerConfigPanelProps {
  config: any;
  onChange: (config: any) => void;
}

/**
 * 카테고리 관리 컴포넌트 설정 패널
 * - 카테고리 관리는 대부분 자동으로 처리되므로 설정 항목이 적습니다
 */
export function CategoryManagerConfigPanel({
  config,
  onChange,
}: CategoryManagerConfigPanelProps) {
  return (
    <div className="space-y-4">
      {/* 정보 카드 */}
      <Card>
        <CardHeader>
          <div className="flex items-center gap-2">
            <FolderTree className="h-5 w-5 text-primary" />
            <CardTitle>카테고리 관리</CardTitle>
          </div>
          <CardDescription>
            메뉴 스코프 기반 카테고리 값 관리 컴포넌트
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          {/* 자동 설정 안내 */}
          <div className="rounded-lg border bg-muted/50 p-4 space-y-3">
            <div className="flex items-start gap-2">
              <Info className="h-4 w-4 mt-0.5 text-muted-foreground shrink-0" />
              <div className="space-y-2 text-sm text-muted-foreground">
                <p>
                  <strong>자동 설정:</strong> 이 컴포넌트는 현재 화면의 메뉴와
                  테이블 정보를 자동으로 사용합니다.
                </p>
                <ul className="space-y-1 ml-4 list-disc">
                  <li>
                    <strong>메뉴 ID</strong>: 현재 화면의 menu_id
                  </li>
                  <li>
                    <strong>테이블명</strong>: 현재 화면의 table_name
                  </li>
                </ul>
              </div>
            </div>
          </div>

          {/* 기능 설명 */}
          <div className="space-y-2">
            <h4 className="text-sm font-medium">주요 기능</h4>
            <div className="space-y-2">
              {[
                "좌우 분할 UI (컬럼 목록 + 값 관리)",
                "메뉴 스코프 기반 격리 (형제 메뉴 간 공유)",
                "실시간 검색 및 필터링",
                "CRUD 기능 (추가, 수정, 삭제)",
                "색상 및 아이콘 설정",
                "계층 구조 지원 (부모-자식)",
              ].map((feature, index) => (
                <div key={index} className="flex items-start gap-2">
                  <CheckCircle2 className="h-4 w-4 mt-0.5 text-emerald-600 shrink-0" />
                  <span className="text-sm">{feature}</span>
                </div>
              ))}
            </div>
          </div>

          {/* 사용 방법 */}
          <div className="rounded-lg border bg-primary/10 p-4 space-y-2">
            <h4 className="text-sm font-medium text-primary">
              사용 방법
            </h4>
            <ol className="space-y-1 ml-4 list-decimal text-sm text-primary">
              <li>
                테이블 타입 관리에서 컬럼의 입력 타입을{" "}
                <Badge variant="outline" className="text-xs">
                  카테고리
                </Badge>{" "}
                로 설정
              </li>
              <li>화면 편집기에서 이 컴포넌트를 배치</li>
              <li>좌측 패널에서 카테고리 컬럼 선택</li>
              <li>우측 패널에서 카테고리 값 관리</li>
            </ol>
          </div>

          {/* 메뉴 스코프 설명 */}
          <div className="rounded-lg border bg-amber-50 p-4 space-y-2">
            <h4 className="text-sm font-medium text-amber-900">
              메뉴 스코프
            </h4>
            <p className="text-sm text-amber-800">
              이 컴포넌트에서 생성한 카테고리는 <strong>같은 부모 메뉴를 가진
              형제 메뉴들</strong>에서만 사용할 수 있습니다. 다른 부모 메뉴의
              하위 메뉴에서는 접근할 수 없습니다.
            </p>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}

