"use client";

import React, { useState, useEffect } from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { Button } from "@/components/ui/button";
import { CheckSquare, Plus, Trash2 } from "lucide-react";
import { WebTypeConfigPanelProps } from "@/lib/registry/types";
import { WidgetComponent, CheckboxTypeConfig } from "@/types/screen";

interface CheckboxOption {
  label: string;
  value: string;
  checked?: boolean;
  disabled?: boolean;
}

export const CheckboxConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
  component,
  onUpdateComponent,
  onUpdateProperty,
}) => {
  const widget = component as WidgetComponent;
  const config = (widget.webTypeConfig as CheckboxTypeConfig) || {};

  // 로컬 상태
  const [localConfig, setLocalConfig] = useState<CheckboxTypeConfig>({
    // 단일 체크박스용
    label: config.label || "",
    checkedValue: config.checkedValue || "Y",
    uncheckedValue: config.uncheckedValue || "N",
    defaultChecked: config.defaultChecked || false,

    // 다중 체크박스용 (체크박스 그룹)
    options: config.options || [],
    isGroup: config.isGroup || false,
    groupLabel: config.groupLabel || "",

    // 공통 설정
    required: config.required || false,
    readonly: config.readonly || false,
    inline: config.inline !== false, // 기본값 true
  });

  // 새 옵션 추가용 상태
  const [newOptionLabel, setNewOptionLabel] = useState("");
  const [newOptionValue, setNewOptionValue] = useState("");

  // 컴포넌트 변경 시 로컬 상태 동기화
  useEffect(() => {
    const currentConfig = (widget.webTypeConfig as CheckboxTypeConfig) || {};
    setLocalConfig({
      label: currentConfig.label || "",
      checkedValue: currentConfig.checkedValue || "Y",
      uncheckedValue: currentConfig.uncheckedValue || "N",
      defaultChecked: currentConfig.defaultChecked || false,
      options: currentConfig.options || [],
      isGroup: currentConfig.isGroup || false,
      groupLabel: currentConfig.groupLabel || "",
      required: currentConfig.required || false,
      readonly: currentConfig.readonly || false,
      inline: currentConfig.inline !== false,
    });
  }, [widget.webTypeConfig]);

  // 설정 업데이트 핸들러
  const updateConfig = (field: keyof CheckboxTypeConfig, value: any) => {
    const newConfig = { ...localConfig, [field]: value };
    setLocalConfig(newConfig);
    onUpdateProperty("webTypeConfig", newConfig);
  };

  // 체크박스 유형 변경
  const toggleCheckboxType = (isGroup: boolean) => {
    if (isGroup && localConfig.options.length === 0) {
      // 그룹으로 변경할 때 기본 옵션 추가
      const defaultOptions: CheckboxOption[] = [
        { label: "옵션 1", value: "option1" },
        { label: "옵션 2", value: "option2" },
      ];
      updateConfig("options", defaultOptions);
    }
    updateConfig("isGroup", isGroup);
  };

  // 옵션 추가
  const addOption = () => {
    if (!newOptionLabel.trim() || !newOptionValue.trim()) return;

    const newOption: CheckboxOption = {
      label: newOptionLabel.trim(),
      value: newOptionValue.trim(),
      checked: false,
    };

    const newOptions = [...localConfig.options, newOption];
    updateConfig("options", newOptions);
    setNewOptionLabel("");
    setNewOptionValue("");
  };

  // 옵션 제거
  const removeOption = (index: number) => {
    const newOptions = localConfig.options.filter((_, i) => i !== index);
    updateConfig("options", newOptions);
  };

  // 옵션 업데이트
  const updateOption = (index: number, field: keyof CheckboxOption, value: any) => {
    const newOptions = [...localConfig.options];
    newOptions[index] = { ...newOptions[index], [field]: value };
    updateConfig("options", newOptions);
  };

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2 text-xs" style={{ fontSize: "12px" }}>
          <CheckSquare className="h-4 w-4" />
          체크박스 설정
        </CardTitle>
        <CardDescription className="text-xs">체크박스의 라벨, 값, 동작을 설정합니다.</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        {/* 체크박스 유형 선택 */}
        <div className="space-y-3">
          <h4 className="text-sm font-medium">체크박스 유형</h4>

          <div className="grid grid-cols-2 gap-2">
            <button
              type="button"
              onClick={() => toggleCheckboxType(false)}
              className={`rounded border p-3 text-xs ${
                !localConfig.isGroup ? "bg-primary text-primary-foreground" : "bg-background"
              }`}
            >
              <div className="flex flex-col items-center gap-1">
                <CheckSquare className="h-4 w-4" />
                <span>단일 체크박스</span>
              </div>
            </button>
            <button
              type="button"
              onClick={() => toggleCheckboxType(true)}
              className={`rounded border p-3 text-xs ${
                localConfig.isGroup ? "bg-primary text-primary-foreground" : "bg-background"
              }`}
            >
              <div className="flex flex-col items-center gap-1">
                <div className="flex gap-1">
                  <CheckSquare className="h-3 w-3" />
                  <CheckSquare className="h-3 w-3" />
                </div>
                <span>체크박스 그룹</span>
              </div>
            </button>
          </div>
        </div>

        {!localConfig.isGroup ? (
          /* 단일 체크박스 설정 */
          <div className="space-y-3">
            <h4 className="text-sm font-medium">단일 체크박스 설정</h4>

            <div className="space-y-2">
              <Label htmlFor="label" className="text-xs">
                라벨
              </Label>
              <Input
                id="label"
                value={localConfig.label || ""}
                onChange={(e) => updateConfig("label", e.target.value)}
                placeholder="체크박스 라벨"
                className="text-xs" style={{ fontSize: "12px" }}
              />
            </div>

            <div className="grid grid-cols-2 gap-2">
              <div className="space-y-2">
                <Label htmlFor="checkedValue" className="text-xs">
                  체크된 값
                </Label>
                <Input
                  id="checkedValue"
                  value={localConfig.checkedValue || ""}
                  onChange={(e) => updateConfig("checkedValue", e.target.value)}
                  placeholder="Y"
                  className="text-xs" style={{ fontSize: "12px" }}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="uncheckedValue" className="text-xs">
                  체크 해제된 값
                </Label>
                <Input
                  id="uncheckedValue"
                  value={localConfig.uncheckedValue || ""}
                  onChange={(e) => updateConfig("uncheckedValue", e.target.value)}
                  placeholder="N"
                  className="text-xs" style={{ fontSize: "12px" }}
                />
              </div>
            </div>

            <div className="flex items-center justify-between">
              <div className="space-y-1">
                <Label htmlFor="defaultChecked" className="text-xs">
                  기본 체크 상태
                </Label>
                <p className="text-muted-foreground text-xs">초기에 체크된 상태로 표시됩니다.</p>
              </div>
              <Switch
                id="defaultChecked"
                checked={localConfig.defaultChecked || false}
                onCheckedChange={(checked) => updateConfig("defaultChecked", checked)}
              />
            </div>
          </div>
        ) : (
          /* 체크박스 그룹 설정 */
          <div className="space-y-3">
            <h4 className="text-sm font-medium">체크박스 그룹 설정</h4>

            <div className="space-y-2">
              <Label htmlFor="groupLabel" className="text-xs">
                그룹 라벨
              </Label>
              <Input
                id="groupLabel"
                value={localConfig.groupLabel || ""}
                onChange={(e) => updateConfig("groupLabel", e.target.value)}
                placeholder="체크박스 그룹 제목"
                className="text-xs" style={{ fontSize: "12px" }}
              />
            </div>

            {/* 옵션 추가 */}
            <div className="space-y-2">
              <Label className="text-xs">옵션 추가</Label>
              <div className="flex gap-2">
                <Input
                  value={newOptionLabel}
                  onChange={(e) => setNewOptionLabel(e.target.value)}
                  placeholder="라벨"
                  className="flex-1 text-xs" style={{ fontSize: "12px" }}
                />
                <Input
                  value={newOptionValue}
                  onChange={(e) => setNewOptionValue(e.target.value)}
                  placeholder="값"
                  className="flex-1 text-xs" style={{ fontSize: "12px" }}
                />
                <Button
                  size="sm"
                  onClick={addOption}
                  disabled={!newOptionLabel.trim() || !newOptionValue.trim()}
                  className="text-xs" style={{ fontSize: "12px" }}
                >
                  <Plus className="h-3 w-3" />
                </Button>
              </div>
            </div>

            {/* 현재 옵션 목록 */}
            <div className="space-y-2">
              <Label className="text-xs">옵션 목록 ({localConfig.options.length}개)</Label>
              <div className="max-h-40 space-y-2 overflow-y-auto">
                {localConfig.options.map((option, index) => (
                  <div key={index} className="flex items-center gap-2 rounded border p-2">
                    <Switch
                      checked={option.checked || false}
                      onCheckedChange={(checked) => updateOption(index, "checked", checked)}
                    />
                    <Input
                      value={option.label}
                      onChange={(e) => updateOption(index, "label", e.target.value)}
                      placeholder="라벨"
                      className="flex-1 text-xs" style={{ fontSize: "12px" }}
                    />
                    <Input
                      value={option.value}
                      onChange={(e) => updateOption(index, "value", e.target.value)}
                      placeholder="값"
                      className="flex-1 text-xs" style={{ fontSize: "12px" }}
                    />
                    <Switch
                      checked={!option.disabled}
                      onCheckedChange={(checked) => updateOption(index, "disabled", !checked)}
                    />
                    <Button size="sm" variant="destructive" onClick={() => removeOption(index)} className="p-1 text-xs">
                      <Trash2 className="h-3 w-3" />
                    </Button>
                  </div>
                ))}
              </div>
            </div>
          </div>
        )}

        {/* 공통 설정 */}
        <div className="space-y-3">
          <h4 className="text-sm font-medium">공통 설정</h4>

          <div className="flex items-center justify-between">
            <div className="space-y-1">
              <Label htmlFor="inline" className="text-xs">
                가로 배열
              </Label>
              <p className="text-muted-foreground text-xs">체크박스들을 가로로 배열합니다.</p>
            </div>
            <Switch
              id="inline"
              checked={localConfig.inline !== false}
              onCheckedChange={(checked) => updateConfig("inline", checked)}
            />
          </div>

          <div className="flex items-center justify-between">
            <div className="space-y-1">
              <Label htmlFor="required" className="text-xs">
                필수 선택
              </Label>
              <p className="text-muted-foreground text-xs">
                {localConfig.isGroup ? "최소 하나 이상 선택해야 합니다." : "체크박스가 선택되어야 합니다."}
              </p>
            </div>
            <Switch
              id="required"
              checked={localConfig.required || false}
              onCheckedChange={(checked) => updateConfig("required", checked)}
            />
          </div>

          <div className="flex items-center justify-between">
            <div className="space-y-1">
              <Label htmlFor="readonly" className="text-xs">
                읽기 전용
              </Label>
              <p className="text-muted-foreground text-xs">체크박스 상태를 변경할 수 없습니다.</p>
            </div>
            <Switch
              id="readonly"
              checked={localConfig.readonly || false}
              onCheckedChange={(checked) => updateConfig("readonly", checked)}
            />
          </div>
        </div>

        {/* 미리보기 */}
        <div className="space-y-3">
          <h4 className="text-sm font-medium">미리보기</h4>
          <div className="bg-muted/50 rounded-md border p-3">
            {!localConfig.isGroup ? (
              /* 단일 체크박스 미리보기 */
              <div className="flex items-center space-x-2">
                <input
                  type="checkbox"
                  id="preview-single"
                  disabled={localConfig.readonly}
                  required={localConfig.required}
                  defaultChecked={localConfig.defaultChecked}
                  className="text-xs" style={{ fontSize: "12px" }}
                />
                <Label htmlFor="preview-single" className="text-xs">
                  {localConfig.label || "체크박스 라벨"}
                </Label>
              </div>
            ) : (
              /* 체크박스 그룹 미리보기 */
              <div className="space-y-2">
                {localConfig.groupLabel && <Label className="text-xs font-medium">{localConfig.groupLabel}</Label>}
                <div className={`space-y-1 ${localConfig.inline ? "flex gap-4" : ""}`}>
                  {localConfig.options.map((option, index) => (
                    <div key={index} className="flex items-center space-x-2">
                      <input
                        type="checkbox"
                        id={`preview-group-${index}`}
                        disabled={localConfig.readonly || option.disabled}
                        required={localConfig.required && index === 0} // 첫 번째에만 required 표시
                        defaultChecked={option.checked}
                        className="text-xs" style={{ fontSize: "12px" }}
                      />
                      <Label htmlFor={`preview-group-${index}`} className="text-xs">
                        {option.label}
                      </Label>
                    </div>
                  ))}
                </div>
              </div>
            )}
            <div className="text-muted-foreground mt-2 text-xs">
              {localConfig.isGroup
                ? `${localConfig.options.length}개 옵션`
                : `값: ${localConfig.checkedValue}/${localConfig.uncheckedValue}`}
              {localConfig.inline && " • 가로 배열"}
              {localConfig.required && " • 필수"}
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
};

CheckboxConfigPanel.displayName = "CheckboxConfigPanel";