"use client";

/**
 * V2Group 설정 패널
 * 통합 그룹 컴포넌트의 세부 설정을 관리합니다.
 */

import React from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Separator } from "@/components/ui/separator";
import { Checkbox } from "@/components/ui/checkbox";
import { Button } from "@/components/ui/button";
import { Plus, Trash2 } from "lucide-react";

interface V2GroupConfigPanelProps {
  config: Record<string, any>;
  onChange: (config: Record<string, any>) => void;
}

export const V2GroupConfigPanel: React.FC<V2GroupConfigPanelProps> = ({
  config,
  onChange,
}) => {
  // 설정 업데이트 핸들러
  const updateConfig = (field: string, value: any) => {
    onChange({ ...config, [field]: value });
  };

  // 탭 관리
  const tabs = config.tabs || [];

  const addTab = () => {
    const newTabs = [...tabs, { id: `tab-${Date.now()}`, label: "새 탭", content: "" }];
    updateConfig("tabs", newTabs);
  };

  const updateTab = (index: number, field: string, value: string) => {
    const newTabs = [...tabs];
    newTabs[index] = { ...newTabs[index], [field]: value };
    updateConfig("tabs", newTabs);
  };

  const removeTab = (index: number) => {
    const newTabs = tabs.filter((_: any, i: number) => i !== index);
    updateConfig("tabs", newTabs);
  };

  return (
    <div className="space-y-4">
      {/* 그룹 타입 */}
      <div className="space-y-2">
        <Label className="text-xs font-medium">그룹 타입</Label>
        <Select
          value={config.groupType || config.type || "section"}
          onValueChange={(value) => updateConfig("groupType", value)}
        >
          <SelectTrigger className="h-8 text-xs">
            <SelectValue placeholder="타입 선택" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="section">섹션</SelectItem>
            <SelectItem value="tabs">탭</SelectItem>
            <SelectItem value="accordion">아코디언</SelectItem>
            <SelectItem value="card">카드 섹션</SelectItem>
            <SelectItem value="modal">모달</SelectItem>
            <SelectItem value="form-modal">폼 모달</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <Separator />

      {/* 제목 */}
      <div className="space-y-2">
        <Label className="text-xs font-medium">제목</Label>
        <Input
          value={config.title || ""}
          onChange={(e) => updateConfig("title", e.target.value)}
          placeholder="그룹 제목"
          className="h-8 text-xs"
        />
      </div>

      {/* 탭 설정 */}
      {config.groupType === "tabs" && (
        <div className="space-y-2">
          <div className="flex items-center justify-between">
            <Label className="text-xs font-medium">탭 목록</Label>
            <Button
              type="button"
              variant="ghost"
              size="sm"
              onClick={addTab}
              className="h-6 px-2 text-xs"
            >
              <Plus className="h-3 w-3 mr-1" />
              추가
            </Button>
          </div>
          <div className="space-y-2 max-h-40 overflow-y-auto">
            {tabs.map((tab: any, index: number) => (
              <div key={index} className="flex items-center gap-2">
                <Input
                  value={tab.id || ""}
                  onChange={(e) => updateTab(index, "id", e.target.value)}
                  placeholder="ID"
                  className="h-7 text-xs flex-1"
                />
                <Input
                  value={tab.label || ""}
                  onChange={(e) => updateTab(index, "label", e.target.value)}
                  placeholder="라벨"
                  className="h-7 text-xs flex-1"
                />
                <Button
                  type="button"
                  variant="ghost"
                  size="sm"
                  onClick={() => removeTab(index)}
                  className="h-7 w-7 p-0 text-destructive"
                >
                  <Trash2 className="h-3 w-3" />
                </Button>
              </div>
            ))}
            {tabs.length === 0 && (
              <p className="text-xs text-muted-foreground text-center py-2">
                탭을 추가해주세요
              </p>
            )}
          </div>
        </div>
      )}

      {/* 섹션/아코디언 옵션 */}
      {(config.groupType === "section" || config.groupType === "accordion" || !config.groupType) && (
        <div className="space-y-3">
          <div className="flex items-center space-x-2">
            <Checkbox
              id="collapsible"
              checked={config.collapsible || false}
              onCheckedChange={(checked) => updateConfig("collapsible", checked)}
            />
            <label htmlFor="collapsible" className="text-xs">접기/펴기 가능</label>
          </div>

          {config.collapsible && (
            <div className="flex items-center space-x-2">
              <Checkbox
                id="defaultOpen"
                checked={config.defaultOpen !== false}
                onCheckedChange={(checked) => updateConfig("defaultOpen", checked)}
              />
              <label htmlFor="defaultOpen" className="text-xs">기본으로 펼침</label>
            </div>
          )}
        </div>
      )}

      {/* 모달 옵션 */}
      {(config.groupType === "modal" || config.groupType === "form-modal") && (
        <div className="space-y-3">
          <div className="space-y-2">
            <Label className="text-xs font-medium">모달 크기</Label>
            <Select
              value={config.modalSize || "md"}
              onValueChange={(value) => updateConfig("modalSize", value)}
            >
              <SelectTrigger className="h-8 text-xs">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="sm">작게 (400px)</SelectItem>
                <SelectItem value="md">보통 (600px)</SelectItem>
                <SelectItem value="lg">크게 (800px)</SelectItem>
                <SelectItem value="xl">매우 크게 (1000px)</SelectItem>
                <SelectItem value="full">전체 화면</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div className="flex items-center space-x-2">
            <Checkbox
              id="closeable"
              checked={config.closeable !== false}
              onCheckedChange={(checked) => updateConfig("closeable", checked)}
            />
            <label htmlFor="closeable" className="text-xs">닫기 버튼 표시</label>
          </div>

          <div className="flex items-center space-x-2">
            <Checkbox
              id="backdrop"
              checked={config.backdrop !== false}
              onCheckedChange={(checked) => updateConfig("backdrop", checked)}
            />
            <label htmlFor="backdrop" className="text-xs">배경 클릭으로 닫기</label>
          </div>
        </div>
      )}

      {/* 헤더 표시 여부 */}
      <Separator />
      <div className="flex items-center space-x-2">
        <Checkbox
          id="showHeader"
          checked={config.showHeader !== false}
          onCheckedChange={(checked) => updateConfig("showHeader", checked)}
        />
        <label htmlFor="showHeader" className="text-xs">헤더 표시</label>
      </div>
    </div>
  );
};

V2GroupConfigPanel.displayName = "V2GroupConfigPanel";

export default V2GroupConfigPanel;