"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 { 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-1">
      {/* GROUP TYPE 섹션 */}
      <div className="border-b border-border/50 pb-3 mb-3">
        <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">GROUP TYPE</h4>
        <div className="flex items-center justify-between py-1.5">
          <span className="text-xs text-muted-foreground">그룹 타입</span>
          <div className="w-[140px]">
            <Select
              value={config.groupType || config.type || "section"}
              onValueChange={(value) => updateConfig("groupType", value)}
            >
              <SelectTrigger className="h-7 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>
        </div>
      </div>

      {/* TITLE 섹션 */}
      <div className="border-b border-border/50 pb-3 mb-3">
        <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">TITLE</h4>
        <div className="flex items-center justify-between py-1.5">
          <span className="text-xs text-muted-foreground">제목</span>
          <div className="w-[140px]">
            <Input
              value={config.title || ""}
              onChange={(e) => updateConfig("title", e.target.value)}
              placeholder="그룹 제목"
              className="h-7 text-xs"
            />
          </div>
        </div>
      </div>

      {/* TABS 섹션 - 탭 타입일 때만 */}
      {config.groupType === "tabs" && (
        <div className="border-b border-border/50 pb-3 mb-3">
          <div className="flex items-center justify-between py-2">
            <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">TABS</h4>
            <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-1.5 max-h-40 overflow-y-auto">
            {tabs.map((tab: any, index: number) => (
              <div key={index} className="flex items-center gap-1.5">
                <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>
      )}

      {/* SECTION OPTIONS 섹션 - 섹션/아코디언일 때 */}
      {(config.groupType === "section" || config.groupType === "accordion" || !config.groupType) && (
        <div className="border-b border-border/50 pb-3 mb-3">
          <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">SECTION OPTIONS</h4>

          <div className="flex items-center justify-between py-1.5">
            <span className="text-xs text-muted-foreground">접기/펴기 가능</span>
            <Checkbox
              checked={config.collapsible || false}
              onCheckedChange={(checked) => updateConfig("collapsible", checked)}
            />
          </div>

          {config.collapsible && (
            <div className="flex items-center justify-between py-1.5">
              <span className="text-xs text-muted-foreground">기본으로 펼침</span>
              <Checkbox
                checked={config.defaultOpen !== false}
                onCheckedChange={(checked) => updateConfig("defaultOpen", checked)}
              />
            </div>
          )}
        </div>
      )}

      {/* MODAL OPTIONS 섹션 - 모달/폼모달일 때 */}
      {(config.groupType === "modal" || config.groupType === "form-modal") && (
        <div className="border-b border-border/50 pb-3 mb-3">
          <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">MODAL OPTIONS</h4>

          <div className="flex items-center justify-between py-1.5">
            <span className="text-xs text-muted-foreground">모달 크기</span>
            <div className="w-[140px]">
              <Select
                value={config.modalSize || "md"}
                onValueChange={(value) => updateConfig("modalSize", value)}
              >
                <SelectTrigger className="h-7 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>

          <div className="flex items-center justify-between py-1.5">
            <span className="text-xs text-muted-foreground">닫기 버튼 표시</span>
            <Checkbox
              checked={config.closeable !== false}
              onCheckedChange={(checked) => updateConfig("closeable", checked)}
            />
          </div>

          <div className="flex items-center justify-between py-1.5">
            <span className="text-xs text-muted-foreground">배경 클릭으로 닫기</span>
            <Checkbox
              checked={config.backdrop !== false}
              onCheckedChange={(checked) => updateConfig("backdrop", checked)}
            />
          </div>
        </div>
      )}

      {/* DISPLAY 섹션 */}
      <div className="border-b border-border/50 pb-3 mb-3">
        <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">DISPLAY</h4>
        <div className="flex items-center justify-between py-1.5">
          <span className="text-xs text-muted-foreground">헤더 표시</span>
          <Checkbox
            checked={config.showHeader !== false}
            onCheckedChange={(checked) => updateConfig("showHeader", checked)}
          />
        </div>
      </div>
    </div>
  );
};

V2GroupConfigPanel.displayName = "V2GroupConfigPanel";

export default V2GroupConfigPanel;