"use client";

/**
 * V2 카테고리 관리 설정 패널
 */

import React from "react";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Input } from "@/components/ui/input";
import { V2CategoryManagerConfig, defaultV2CategoryManagerConfig, ViewMode } from "./types";

interface V2CategoryManagerConfigPanelProps {
  config: Partial<V2CategoryManagerConfig>;
  onChange: (config: Partial<V2CategoryManagerConfig>) => void;
}

export function V2CategoryManagerConfigPanel({ config: externalConfig, onChange }: V2CategoryManagerConfigPanelProps) {
  const config: V2CategoryManagerConfig = {
    ...defaultV2CategoryManagerConfig,
    ...externalConfig,
  };

  const handleChange = <K extends keyof V2CategoryManagerConfig>(key: K, value: V2CategoryManagerConfig[K]) => {
    onChange({ ...config, [key]: value });
  };

  return (
    <div className="space-y-6">
      {/* 뷰 모드 설정 */}
      <div className="space-y-4">
        <h4 className="text-sm font-medium">뷰 모드 설정</h4>

        <div className="space-y-3">
          <div>
            <Label className="text-xs">기본 뷰 모드</Label>
            <Select value={config.viewMode} onValueChange={(value: ViewMode) => handleChange("viewMode", value)}>
              <SelectTrigger className="mt-1 h-8 text-xs">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="tree">트리 뷰</SelectItem>
                <SelectItem value="list">목록 뷰</SelectItem>
              </SelectContent>
            </Select>
            <p className="text-muted-foreground mt-1 text-[10px]">컴포넌트가 처음 표시될 때의 기본 뷰 모드</p>
          </div>

          <div className="flex items-center justify-between">
            <div>
              <Label className="text-xs">뷰 모드 토글 표시</Label>
              <p className="text-muted-foreground text-[10px]">트리/목록 전환 버튼 표시</p>
            </div>
            <Switch checked={config.showViewModeToggle} onCheckedChange={(checked) => handleChange("showViewModeToggle", checked)} />
          </div>
        </div>
      </div>

      {/* 트리 설정 */}
      <div className="space-y-4">
        <h4 className="text-sm font-medium">트리 설정</h4>

        <div className="space-y-3">
          <div>
            <Label className="text-xs">기본 펼침 단계</Label>
            <Select
              value={String(config.defaultExpandLevel)}
              onValueChange={(value) => handleChange("defaultExpandLevel", Number(value))}
            >
              <SelectTrigger className="mt-1 h-8 text-xs">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="1">1단계 (대분류만)</SelectItem>
                <SelectItem value="2">2단계 (중분류까지)</SelectItem>
                <SelectItem value="3">3단계 (전체 펼침)</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div className="flex items-center justify-between">
            <div>
              <Label className="text-xs">비활성 항목 표시</Label>
              <p className="text-muted-foreground text-[10px]">비활성화된 카테고리도 표시</p>
            </div>
            <Switch checked={config.showInactiveItems} onCheckedChange={(checked) => handleChange("showInactiveItems", checked)} />
          </div>
        </div>
      </div>

      {/* 레이아웃 설정 */}
      <div className="space-y-4">
        <h4 className="text-sm font-medium">레이아웃 설정</h4>

        <div className="space-y-3">
          <div className="flex items-center justify-between">
            <div>
              <Label className="text-xs">컬럼 목록 표시</Label>
              <p className="text-muted-foreground text-[10px]">좌측 카테고리 컬럼 목록 패널</p>
            </div>
            <Switch checked={config.showColumnList} onCheckedChange={(checked) => handleChange("showColumnList", checked)} />
          </div>

          {config.showColumnList && (
            <div>
              <Label className="text-xs">좌측 패널 너비 (%)</Label>
              <Input
                type="number"
                min={10}
                max={40}
                value={config.leftPanelWidth}
                onChange={(e) => handleChange("leftPanelWidth", Number(e.target.value))}
                className="mt-1 h-8 text-xs"
              />
              <p className="text-muted-foreground mt-1 text-[10px]">10~40% 범위에서 설정 가능</p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

export default V2CategoryManagerConfigPanel;

