"use client";

import React from "react";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { TextInputConfig } from "./types";
import { AutoGenerationType, AutoGenerationConfig } from "@/types/screen";
import { AutoGenerationUtils } from "@/lib/utils/autoGeneration";

export interface TextInputConfigPanelProps {
  config: TextInputConfig;
  onChange: (config: Partial<TextInputConfig>) => void;
}

/**
 * TextInput 설정 패널
 * 컴포넌트의 설정값들을 편집할 수 있는 UI 제공
 */
export const TextInputConfigPanel: React.FC<TextInputConfigPanelProps> = ({ config, onChange }) => {
  const handleChange = (key: keyof TextInputConfig, value: any) => {
    onChange({ [key]: value });
  };

  return (
    <div className="space-y-4">
      <div className="text-sm font-medium">text-input 설정</div>

      {/* 텍스트 관련 설정 */}
      <div className="space-y-2">
        <Label htmlFor="placeholder">플레이스홀더</Label>
        <Input
          id="placeholder"
          value={config.placeholder || ""}
          onChange={(e) => handleChange("placeholder", e.target.value)}
        />
      </div>

      <div className="space-y-2">
        <Label htmlFor="maxLength">최대 길이</Label>
        <Input
          id="maxLength"
          type="number"
          value={config.maxLength || ""}
          onChange={(e) => handleChange("maxLength", parseInt(e.target.value) || undefined)}
        />
      </div>

      {/* 구분선 */}
      <div className="border-t pt-4">
        <div className="mb-3 text-sm font-medium">고급 기능</div>

        {/* 숨김 기능 */}
        <div className="space-y-2">
          <Label htmlFor="hidden">숨김</Label>
          <Checkbox
            id="hidden"
            checked={config.hidden || false}
            onCheckedChange={(checked) => handleChange("hidden", checked)}
          />
        </div>

        {/* 자동생성 기능 */}
        <div className="space-y-2">
          <Label htmlFor="autoGeneration">자동생성 활성화</Label>
          <Checkbox
            id="autoGeneration"
            checked={config.autoGeneration?.enabled || false}
            onCheckedChange={(checked) => {
              const currentConfig = config.autoGeneration || { type: "none", enabled: false };
              handleChange("autoGeneration", {
                ...currentConfig,
                enabled: checked as boolean,
              });
            }}
          />
        </div>

        {/* 자동생성 타입 선택 */}
        {config.autoGeneration?.enabled && (
          <div className="space-y-2">
            <Label htmlFor="autoGenerationType">자동생성 타입</Label>
            <Select
              value={config.autoGeneration?.type || "none"}
              onValueChange={(value: AutoGenerationType) => {
                const currentConfig = config.autoGeneration || { type: "none", enabled: false };
                handleChange("autoGeneration", {
                  ...currentConfig,
                  type: value,
                });
              }}
            >
              <SelectTrigger>
                <SelectValue placeholder="자동생성 타입 선택" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="none">자동생성 없음</SelectItem>
                <SelectItem value="uuid">UUID 생성</SelectItem>
                <SelectItem value="current_user">현재 사용자 ID</SelectItem>
                <SelectItem value="current_time">현재 시간</SelectItem>
                <SelectItem value="sequence">순차 번호</SelectItem>
                <SelectItem value="random_string">랜덤 문자열</SelectItem>
                <SelectItem value="random_number">랜덤 숫자</SelectItem>
                <SelectItem value="company_code">회사 코드</SelectItem>
                <SelectItem value="department">부서 코드</SelectItem>
              </SelectContent>
            </Select>

            {/* 선택된 타입 설명 */}
            {config.autoGeneration?.type && config.autoGeneration.type !== "none" && (
              <div className="text-xs text-gray-500">
                {AutoGenerationUtils.getTypeDescription(config.autoGeneration.type)}
              </div>
            )}
          </div>
        )}

        {/* 자동생성 옵션 */}
        {config.autoGeneration?.enabled &&
          config.autoGeneration?.type &&
          ["random_string", "random_number", "sequence"].includes(config.autoGeneration.type) && (
            <div className="space-y-2">
              <Label>자동생성 옵션</Label>

              {/* 길이 설정 (랜덤 문자열/숫자용) */}
              {["random_string", "random_number"].includes(config.autoGeneration.type) && (
                <div className="space-y-1">
                  <Label htmlFor="autoGenLength" className="text-xs">
                    길이
                  </Label>
                  <Input
                    id="autoGenLength"
                    type="number"
                    min="1"
                    max="50"
                    value={
                      config.autoGeneration?.options?.length || (config.autoGeneration.type === "random_string" ? 8 : 6)
                    }
                    onChange={(e) => {
                      const currentConfig = config.autoGeneration!;
                      handleChange("autoGeneration", {
                        ...currentConfig,
                        options: {
                          ...currentConfig.options,
                          length: parseInt(e.target.value) || 8,
                        },
                      });
                    }}
                  />
                </div>
              )}

              {/* 접두사 */}
              <div className="space-y-1">
                <Label htmlFor="autoGenPrefix" className="text-xs">
                  접두사
                </Label>
                <Input
                  id="autoGenPrefix"
                  value={config.autoGeneration?.options?.prefix || ""}
                  onChange={(e) => {
                    const currentConfig = config.autoGeneration!;
                    handleChange("autoGeneration", {
                      ...currentConfig,
                      options: {
                        ...currentConfig.options,
                        prefix: e.target.value,
                      },
                    });
                  }}
                />
              </div>

              {/* 접미사 */}
              <div className="space-y-1">
                <Label htmlFor="autoGenSuffix" className="text-xs">
                  접미사
                </Label>
                <Input
                  id="autoGenSuffix"
                  value={config.autoGeneration?.options?.suffix || ""}
                  onChange={(e) => {
                    const currentConfig = config.autoGeneration!;
                    handleChange("autoGeneration", {
                      ...currentConfig,
                      options: {
                        ...currentConfig.options,
                        suffix: e.target.value,
                      },
                    });
                  }}
                />
              </div>

              {/* 미리보기 */}
              <div className="space-y-1">
                <Label className="text-xs">미리보기</Label>
                <div className="rounded border bg-gray-100 p-2 text-xs">
                  {AutoGenerationUtils.generatePreviewValue(config.autoGeneration)}
                </div>
              </div>
            </div>
          )}
      </div>
    </div>
  );
};