"use client";

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

interface NumberingRuleConfigPanelProps {
  config: NumberingRuleComponentConfig;
  onChange: (config: NumberingRuleComponentConfig) => void;
}

export const NumberingRuleConfigPanel: React.FC<NumberingRuleConfigPanelProps> = ({
  config,
  onChange,
}) => {
  return (
    <div className="space-y-4 p-4">
      <div className="space-y-2">
        <Label className="text-sm font-medium">최대 규칙 수</Label>
        <Input
          type="number"
          min={1}
          max={10}
          value={config.maxRules || 6}
          onChange={(e) =>
            onChange({ ...config, maxRules: parseInt(e.target.value) || 6 })
          }
          className="h-9"
        />
        <p className="text-xs text-muted-foreground">
          한 규칙에 추가할 수 있는 최대 파트 개수 (1-10)
        </p>
      </div>

      <div className="flex items-center justify-between">
        <div className="space-y-0.5">
          <Label className="text-sm font-medium">읽기 전용 모드</Label>
          <p className="text-xs text-muted-foreground">
            편집 기능을 비활성화합니다
          </p>
        </div>
        <Switch
          checked={config.readonly || false}
          onCheckedChange={(checked) =>
            onChange({ ...config, readonly: checked })
          }
        />
      </div>

      <div className="flex items-center justify-between">
        <div className="space-y-0.5">
          <Label className="text-sm font-medium">미리보기 표시</Label>
          <p className="text-xs text-muted-foreground">
            코드 미리보기를 항상 표시합니다
          </p>
        </div>
        <Switch
          checked={config.showPreview !== false}
          onCheckedChange={(checked) =>
            onChange({ ...config, showPreview: checked })
          }
        />
      </div>

      <div className="flex items-center justify-between">
        <div className="space-y-0.5">
          <Label className="text-sm font-medium">규칙 목록 표시</Label>
          <p className="text-xs text-muted-foreground">
            저장된 규칙 목록을 표시합니다
          </p>
        </div>
        <Switch
          checked={config.showRuleList !== false}
          onCheckedChange={(checked) =>
            onChange({ ...config, showRuleList: checked })
          }
        />
      </div>

      <div className="space-y-2">
        <Label className="text-sm font-medium">카드 레이아웃</Label>
        <Select
          value={config.cardLayout || "vertical"}
          onValueChange={(value: "vertical" | "horizontal") =>
            onChange({ ...config, cardLayout: value })
          }
        >
          <SelectTrigger className="h-9">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="vertical">세로</SelectItem>
            <SelectItem value="horizontal">가로</SelectItem>
          </SelectContent>
        </Select>
        <p className="text-xs text-muted-foreground">
          규칙 파트 카드의 배치 방향
        </p>
      </div>
    </div>
  );
};