"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 { DateInputConfig } from "./types";
import { AutoGenerationType, AutoGenerationConfig } from "@/types/screen";
import { AutoGenerationUtils } from "@/lib/utils/autoGeneration";

export interface DateInputConfigPanelProps {
  config: DateInputConfig;
  onChange: (config: Partial<DateInputConfig>) => void;
}

/**
 * DateInput 설정 패널
 * 컴포넌트의 설정값들을 편집할 수 있는 UI 제공
 */
export const DateInputConfigPanel: React.FC<DateInputConfigPanelProps> = ({ config, onChange }) => {
  const handleChange = (key: keyof DateInputConfig, value: any) => {
    console.log("🔧 DateInputConfigPanel.handleChange:", { key, value });
    onChange({ [key]: value });
  };

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

      {/* date 관련 설정 */}
      <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="disabled">비활성화</Label>
        <Checkbox
          id="disabled"
          checked={config.disabled || false}
          onCheckedChange={(checked) => handleChange("disabled", checked)}
        />
      </div>

      <div className="space-y-2">
        <Label htmlFor="required">필수 입력</Label>
        <Checkbox
          id="required"
          checked={config.required || false}
          onCheckedChange={(checked) => handleChange("required", checked)}
        />
      </div>

      <div className="space-y-2">
        <Label htmlFor="readonly">읽기 전용</Label>
        <Checkbox
          id="readonly"
          checked={config.readonly || false}
          onCheckedChange={(checked) => handleChange("readonly", checked)}
        />
      </div>

      {/* 숨김 기능 */}
      <div className="space-y-2">
        <Label htmlFor="hidden">숨김</Label>
        <Checkbox
          id="hidden"
          checked={config.hidden || false}
          onCheckedChange={(checked) => handleChange("hidden", checked)}
        />
        <p className="text-xs text-gray-500">편집기에서는 연하게 보이지만 실제 화면에서는 숨겨집니다</p>
      </div>

      {/* 자동생성 기능 */}
      <div className="space-y-3 border-t pt-3">
        <div className="space-y-2">
          <Label htmlFor="autoGeneration">자동생성</Label>
          <Checkbox
            id="autoGeneration"
            checked={config.autoGeneration?.enabled || false}
            onCheckedChange={(checked) => {
              const newAutoGeneration: AutoGenerationConfig = {
                ...config.autoGeneration,
                enabled: checked as boolean,
                type: config.autoGeneration?.type || "current_time",
              };
              handleChange("autoGeneration", newAutoGeneration);
            }}
          />
        </div>

        {config.autoGeneration?.enabled && (
          <>
            <div className="space-y-2">
              <Label htmlFor="autoGenerationType">자동생성 타입</Label>
              <Select
                value={config.autoGeneration?.type || "current_time"}
                onValueChange={(value: AutoGenerationType) => {
                  const newAutoGeneration: AutoGenerationConfig = {
                    ...config.autoGeneration,
                    type: value,
                    options: value === "current_time" ? { format: "date" } : {},
                  };
                  handleChange("autoGeneration", newAutoGeneration);
                }}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="current_time">현재 날짜/시간</SelectItem>
                  <SelectItem value="uuid">UUID</SelectItem>
                  <SelectItem value="current_user">현재 사용자</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>
              <p className="text-xs text-gray-500">
                {AutoGenerationUtils.getTypeDescription(config.autoGeneration?.type || "current_time")}
              </p>
            </div>

            {config.autoGeneration?.type === "current_time" && (
              <div className="space-y-2">
                <Label htmlFor="dateFormat">날짜 형식</Label>
                <Select
                  value={config.autoGeneration?.options?.format || "date"}
                  onValueChange={(value) => {
                    const newAutoGeneration: AutoGenerationConfig = {
                      ...config.autoGeneration!,
                      options: {
                        ...config.autoGeneration?.options,
                        format: value,
                      },
                    };
                    handleChange("autoGeneration", newAutoGeneration);
                  }}
                >
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="date">날짜만 (YYYY-MM-DD)</SelectItem>
                    <SelectItem value="datetime">날짜+시간 (YYYY-MM-DD HH:mm:ss)</SelectItem>
                    <SelectItem value="time">시간만 (HH:mm:ss)</SelectItem>
                    <SelectItem value="timestamp">타임스탬프</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            )}

            {(config.autoGeneration?.type === "sequence" ||
              config.autoGeneration?.type === "random_string" ||
              config.autoGeneration?.type === "random_number") && (
              <>
                {config.autoGeneration?.type === "sequence" && (
                  <div className="space-y-2">
                    <Label htmlFor="startValue">시작값</Label>
                    <Input
                      id="startValue"
                      type="number"
                      value={config.autoGeneration?.options?.startValue || 1}
                      onChange={(e) => {
                        const newAutoGeneration: AutoGenerationConfig = {
                          ...config.autoGeneration!,
                          options: {
                            ...config.autoGeneration?.options,
                            startValue: parseInt(e.target.value) || 1,
                          },
                        };
                        handleChange("autoGeneration", newAutoGeneration);
                      }}
                    />
                  </div>
                )}

                {(config.autoGeneration?.type === "random_string" ||
                  config.autoGeneration?.type === "random_number") && (
                  <div className="space-y-2">
                    <Label htmlFor="length">길이</Label>
                    <Input
                      id="length"
                      type="number"
                      value={
                        config.autoGeneration?.options?.length ||
                        (config.autoGeneration?.type === "random_string" ? 8 : 6)
                      }
                      onChange={(e) => {
                        const newAutoGeneration: AutoGenerationConfig = {
                          ...config.autoGeneration!,
                          options: {
                            ...config.autoGeneration?.options,
                            length: parseInt(e.target.value) || 8,
                          },
                        };
                        handleChange("autoGeneration", newAutoGeneration);
                      }}
                    />
                  </div>
                )}

                <div className="grid grid-cols-2 gap-2">
                  <div className="space-y-2">
                    <Label htmlFor="prefix">접두사</Label>
                    <Input
                      id="prefix"
                      value={config.autoGeneration?.options?.prefix || ""}
                      onChange={(e) => {
                        const newAutoGeneration: AutoGenerationConfig = {
                          ...config.autoGeneration!,
                          options: {
                            ...config.autoGeneration?.options,
                            prefix: e.target.value,
                          },
                        };
                        handleChange("autoGeneration", newAutoGeneration);
                      }}
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="suffix">접미사</Label>
                    <Input
                      id="suffix"
                      value={config.autoGeneration?.options?.suffix || ""}
                      onChange={(e) => {
                        const newAutoGeneration: AutoGenerationConfig = {
                          ...config.autoGeneration!,
                          options: {
                            ...config.autoGeneration?.options,
                            suffix: e.target.value,
                          },
                        };
                        handleChange("autoGeneration", newAutoGeneration);
                      }}
                    />
                  </div>
                </div>
              </>
            )}

            <div className="rounded bg-gray-50 p-2 text-xs">
              <strong>미리보기:</strong> {AutoGenerationUtils.generatePreviewValue(config.autoGeneration)}
            </div>
          </>
        )}
      </div>
    </div>
  );
};