"use client";

import React from "react";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Input } from "@/components/ui/input";
import { Checkbox } from "@/components/ui/checkbox";
import { Textarea } from "@/components/ui/textarea";

interface SectionCardConfigPanelProps {
  config: any;
  onChange: (config: any) => void;
}

export function SectionCardConfigPanel({
  config,
  onChange,
}: SectionCardConfigPanelProps) {
  const handleChange = (key: string, value: any) => {
    const newConfig = {
      ...config,
      [key]: value,
    };
    onChange(newConfig);
    
    // 🎯 실시간 업데이트를 위한 이벤트 발생
    if (typeof window !== "undefined") {
      window.dispatchEvent(new CustomEvent("componentConfigChanged", {
        detail: { config: newConfig }
      }));
    }
  };

  return (
    <div className="space-y-4 p-4">
      <div className="space-y-2">
        <h3 className="text-sm font-semibold">Section Card 설정</h3>
        <p className="text-xs text-muted-foreground">
          제목과 테두리가 있는 명확한 그룹화 컨테이너
        </p>
      </div>

      {/* 헤더 표시 */}
      <div className="flex items-center space-x-2">
        <Checkbox
          id="showHeader"
          checked={config.showHeader !== false}
          onCheckedChange={(checked) => handleChange("showHeader", checked)}
        />
        <Label htmlFor="showHeader" className="text-xs cursor-pointer">
          헤더 표시
        </Label>
      </div>

      {/* 제목 */}
      {config.showHeader !== false && (
        <div className="space-y-2">
          <Label className="text-xs">제목</Label>
          <Input
            value={config.title || ""}
            onChange={(e) => handleChange("title", e.target.value)}
            placeholder="섹션 제목 입력"
            className="h-9 text-xs"
          />
        </div>
      )}

      {/* 설명 */}
      {config.showHeader !== false && (
        <div className="space-y-2">
          <Label className="text-xs">설명 (선택)</Label>
          <Textarea
            value={config.description || ""}
            onChange={(e) => handleChange("description", e.target.value)}
            placeholder="섹션 설명 입력"
            className="text-xs resize-none"
            rows={2}
          />
        </div>
      )}

      {/* 패딩 */}
      <div className="space-y-2">
        <Label className="text-xs">내부 여백</Label>
        <Select
          value={config.padding || "md"}
          onValueChange={(value) => handleChange("padding", value)}
        >
          <SelectTrigger className="h-9 text-xs">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="none">없음</SelectItem>
            <SelectItem value="sm">작게 (12px)</SelectItem>
            <SelectItem value="md">중간 (24px)</SelectItem>
            <SelectItem value="lg">크게 (32px)</SelectItem>
          </SelectContent>
        </Select>
      </div>

      {/* 배경색 */}
      <div className="space-y-2">
        <Label className="text-xs">배경색</Label>
        <Select
          value={config.backgroundColor || "default"}
          onValueChange={(value) => handleChange("backgroundColor", value)}
        >
          <SelectTrigger className="h-9 text-xs">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="default">기본 (카드)</SelectItem>
            <SelectItem value="muted">회색</SelectItem>
            <SelectItem value="transparent">투명</SelectItem>
          </SelectContent>
        </Select>
      </div>

      {/* 테두리 스타일 */}
      <div className="space-y-2">
        <Label className="text-xs">테두리 스타일</Label>
        <Select
          value={config.borderStyle || "solid"}
          onValueChange={(value) => handleChange("borderStyle", value)}
        >
          <SelectTrigger className="h-9 text-xs">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="solid">실선</SelectItem>
            <SelectItem value="dashed">점선</SelectItem>
            <SelectItem value="none">없음</SelectItem>
          </SelectContent>
        </Select>
      </div>

      {/* 접기/펼치기 기능 */}
      <div className="space-y-2 pt-2 border-t">
        <div className="flex items-center space-x-2">
          <Checkbox
            id="collapsible"
            checked={config.collapsible || false}
            onCheckedChange={(checked) => handleChange("collapsible", checked)}
          />
          <Label htmlFor="collapsible" className="text-xs cursor-pointer">
            접기/펼치기 가능
          </Label>
        </div>

        {config.collapsible && (
          <div className="flex items-center space-x-2 ml-6">
            <Checkbox
              id="defaultOpen"
              checked={config.defaultOpen !== false}
              onCheckedChange={(checked) => handleChange("defaultOpen", checked)}
            />
            <Label htmlFor="defaultOpen" className="text-xs cursor-pointer">
              기본으로 펼치기
            </Label>
          </div>
        )}
      </div>
    </div>
  );
}