"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";

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

export function SectionPaperConfigPanel({
  config,
  onChange,
}: SectionPaperConfigPanelProps) {
  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 Paper 설정</h3>
        <p className="text-xs text-muted-foreground">
          배경색 기반의 미니멀한 그룹화 컨테이너
        </p>
      </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="accent">강조 (연한 파랑)</SelectItem>
            <SelectItem value="primary">브랜드 컬러</SelectItem>
            <SelectItem value="custom">커스텀</SelectItem>
          </SelectContent>
        </Select>
      </div>

      {/* 커스텀 색상 */}
      {config.backgroundColor === "custom" && (
        <div className="space-y-2">
          <Label className="text-xs">커스텀 색상</Label>
          <Input
            type="color"
            value={config.customColor || "#f0f0f0"}
            onChange={(e) => handleChange("customColor", e.target.value)}
            className="h-9"
          />
        </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">중간 (16px)</SelectItem>
            <SelectItem value="lg">크게 (24px)</SelectItem>
          </SelectContent>
        </Select>
      </div>

      {/* 둥근 모서리 */}
      <div className="space-y-2">
        <Label className="text-xs">둥근 모서리</Label>
        <Select
          value={config.roundedCorners || "md"}
          onValueChange={(value) => handleChange("roundedCorners", value)}
        >
          <SelectTrigger className="h-9 text-xs">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="none">없음</SelectItem>
            <SelectItem value="sm">작게 (2px)</SelectItem>
            <SelectItem value="md">중간 (6px)</SelectItem>
            <SelectItem value="lg">크게 (8px)</SelectItem>
          </SelectContent>
        </Select>
      </div>

      {/* 그림자 */}
      <div className="space-y-2">
        <Label className="text-xs">그림자</Label>
        <Select
          value={config.shadow || "none"}
          onValueChange={(value) => handleChange("shadow", value)}
        >
          <SelectTrigger className="h-9 text-xs">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="none">없음</SelectItem>
            <SelectItem value="sm">작게</SelectItem>
            <SelectItem value="md">중간</SelectItem>
          </SelectContent>
        </Select>
      </div>

      {/* 테두리 표시 */}
      <div className="flex items-center space-x-2">
        <Checkbox
          id="showBorder"
          checked={config.showBorder || false}
          onCheckedChange={(checked) => handleChange("showBorder", checked)}
        />
        <Label htmlFor="showBorder" className="text-xs cursor-pointer">
          미묘한 테두리 표시
        </Label>
      </div>
    </div>
  );
}