"use client";

/**
 * V2Media 설정 패널
 * 통합 미디어 컴포넌트의 세부 설정을 관리합니다.
 */

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

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

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

  return (
    <div className="space-y-4">
      {/* 미디어 타입 */}
      <div className="space-y-2">
        <Label className="text-xs font-medium">미디어 타입</Label>
        <Select
          value={config.mediaType || config.type || "image"}
          onValueChange={(value) => updateConfig("mediaType", value)}
        >
          <SelectTrigger className="h-8 text-xs">
            <SelectValue placeholder="타입 선택" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="file">파일</SelectItem>
            <SelectItem value="image">이미지</SelectItem>
            <SelectItem value="video">비디오</SelectItem>
            <SelectItem value="audio">오디오</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <Separator />

      {/* 허용 파일 형식 */}
      <div className="space-y-2">
        <Label className="text-xs font-medium">허용 파일 형식</Label>
        <Input
          value={config.accept || ""}
          onChange={(e) => updateConfig("accept", e.target.value)}
          placeholder="예: .jpg,.png,.pdf"
          className="h-8 text-xs"
        />
        <p className="text-[10px] text-muted-foreground">
          쉼표로 구분. 예: .jpg,.png,.gif 또는 image/*
        </p>
      </div>

      {/* 최대 파일 크기 */}
      <div className="space-y-2">
        <Label className="text-xs font-medium">최대 파일 크기 (MB)</Label>
        <Input
          type="number"
          value={config.maxSize || ""}
          onChange={(e) => updateConfig("maxSize", e.target.value ? Number(e.target.value) : undefined)}
          placeholder="10"
          min="1"
          className="h-8 text-xs"
        />
      </div>

      {/* 최대 파일 수 */}
      <div className="space-y-2">
        <Label className="text-xs font-medium">최대 파일 수</Label>
        <Input
          type="number"
          value={config.maxFiles || ""}
          onChange={(e) => updateConfig("maxFiles", e.target.value ? Number(e.target.value) : undefined)}
          placeholder="제한 없음"
          min="1"
          className="h-8 text-xs"
        />
      </div>

      <Separator />

      {/* 옵션 */}
      <div className="space-y-3">
        <Label className="text-xs font-medium">옵션</Label>
        
        <div className="flex items-center space-x-2">
          <Checkbox
            id="multiple"
            checked={config.multiple || false}
            onCheckedChange={(checked) => updateConfig("multiple", checked)}
          />
          <label htmlFor="multiple" className="text-xs">다중 파일 업로드</label>
        </div>

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

        <div className="flex items-center space-x-2">
          <Checkbox
            id="dragDrop"
            checked={config.dragDrop !== false}
            onCheckedChange={(checked) => updateConfig("dragDrop", checked)}
          />
          <label htmlFor="dragDrop" className="text-xs">드래그 앤 드롭</label>
        </div>
      </div>

      {/* 이미지 전용 설정 */}
      {config.mediaType === "image" && (
        <>
          <Separator />
          <div className="space-y-3">
            <Label className="text-xs font-medium">이미지 설정</Label>
            
            <div className="grid grid-cols-2 gap-2">
              <div className="space-y-2">
                <Label className="text-[10px] text-muted-foreground">최대 너비 (px)</Label>
                <Input
                  type="number"
                  value={config.maxWidth || ""}
                  onChange={(e) => updateConfig("maxWidth", e.target.value ? Number(e.target.value) : undefined)}
                  placeholder="자동"
                  className="h-8 text-xs"
                />
              </div>
              <div className="space-y-2">
                <Label className="text-[10px] text-muted-foreground">최대 높이 (px)</Label>
                <Input
                  type="number"
                  value={config.maxHeight || ""}
                  onChange={(e) => updateConfig("maxHeight", e.target.value ? Number(e.target.value) : undefined)}
                  placeholder="자동"
                  className="h-8 text-xs"
                />
              </div>
            </div>

            <div className="flex items-center space-x-2">
              <Checkbox
                id="crop"
                checked={config.crop || false}
                onCheckedChange={(checked) => updateConfig("crop", checked)}
              />
              <label htmlFor="crop" className="text-xs">자르기 기능</label>
            </div>
          </div>
        </>
      )}

      {/* 비디오/오디오 전용 설정 */}
      {(config.mediaType === "video" || config.mediaType === "audio") && (
        <>
          <Separator />
          <div className="space-y-3">
            <Label className="text-xs font-medium">플레이어 설정</Label>
            
            <div className="flex items-center space-x-2">
              <Checkbox
                id="autoplay"
                checked={config.autoplay || false}
                onCheckedChange={(checked) => updateConfig("autoplay", checked)}
              />
              <label htmlFor="autoplay" className="text-xs">자동 재생</label>
            </div>

            <div className="flex items-center space-x-2">
              <Checkbox
                id="controls"
                checked={config.controls !== false}
                onCheckedChange={(checked) => updateConfig("controls", checked)}
              />
              <label htmlFor="controls" className="text-xs">컨트롤 표시</label>
            </div>

            <div className="flex items-center space-x-2">
              <Checkbox
                id="loop"
                checked={config.loop || false}
                onCheckedChange={(checked) => updateConfig("loop", checked)}
              />
              <label htmlFor="loop" className="text-xs">반복 재생</label>
            </div>
          </div>
        </>
      )}
    </div>
  );
};

V2MediaConfigPanel.displayName = "V2MediaConfigPanel";

export default V2MediaConfigPanel;