"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 { 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-1">
      {/* MEDIA 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">MEDIA 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.mediaType || config.type || "image"}
              onValueChange={(value) => updateConfig("mediaType", value)}
            >
              <SelectTrigger className="h-7 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>
        </div>
      </div>

      {/* FILE SETTINGS 섹션 */}
      <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">FILE SETTINGS</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.accept || ""}
              onChange={(e) => updateConfig("accept", e.target.value)}
              placeholder=".jpg,.png,.pdf"
              className="h-7 text-xs"
            />
          </div>
        </div>
        <div className="flex items-center justify-between py-1.5">
          <span className="text-xs text-muted-foreground">최대 크기 (MB)</span>
          <div className="w-[140px]">
            <Input
              type="number"
              value={config.maxSize || ""}
              onChange={(e) => updateConfig("maxSize", e.target.value ? Number(e.target.value) : undefined)}
              placeholder="10"
              min="1"
              className="h-7 text-xs"
            />
          </div>
        </div>
        <div className="flex items-center justify-between py-1.5">
          <span className="text-xs text-muted-foreground">최대 파일 수</span>
          <div className="w-[140px]">
            <Input
              type="number"
              value={config.maxFiles || ""}
              onChange={(e) => updateConfig("maxFiles", e.target.value ? Number(e.target.value) : undefined)}
              placeholder="제한 없음"
              min="1"
              className="h-7 text-xs"
            />
          </div>
        </div>
      </div>

      {/* OPTIONS 섹션 */}
      <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">OPTIONS</h4>
        <div className="flex items-center justify-between py-1.5">
          <span className="text-xs text-muted-foreground">다중 파일 업로드</span>
          <Checkbox
            checked={config.multiple || false}
            onCheckedChange={(checked) => updateConfig("multiple", checked)}
          />
        </div>
        <div className="flex items-center justify-between py-1.5">
          <span className="text-xs text-muted-foreground">미리보기 표시</span>
          <Checkbox
            checked={config.preview !== false}
            onCheckedChange={(checked) => updateConfig("preview", checked)}
          />
        </div>
        <div className="flex items-center justify-between py-1.5">
          <span className="text-xs text-muted-foreground">드래그 앤 드롭</span>
          <Checkbox
            checked={config.dragDrop !== false}
            onCheckedChange={(checked) => updateConfig("dragDrop", checked)}
          />
        </div>
      </div>

      {/* IMAGE SETTINGS 섹션 - 이미지 타입 전용 */}
      {config.mediaType === "image" && (
        <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">IMAGE SETTINGS</h4>
          <div className="flex gap-2">
            <div className="flex-1">
              <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-7 text-xs"
              />
            </div>
            <div className="flex-1">
              <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-7 text-xs"
              />
            </div>
          </div>
          <div className="flex items-center justify-between py-1.5">
            <span className="text-xs text-muted-foreground">자르기 기능</span>
            <Checkbox
              checked={config.crop || false}
              onCheckedChange={(checked) => updateConfig("crop", checked)}
            />
          </div>
        </div>
      )}

      {/* PLAYER SETTINGS 섹션 - 비디오/오디오 전용 */}
      {(config.mediaType === "video" || config.mediaType === "audio") && (
        <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">PLAYER SETTINGS</h4>
          <div className="flex items-center justify-between py-1.5">
            <span className="text-xs text-muted-foreground">자동 재생</span>
            <Checkbox
              checked={config.autoplay || false}
              onCheckedChange={(checked) => updateConfig("autoplay", checked)}
            />
          </div>
          <div className="flex items-center justify-between py-1.5">
            <span className="text-xs text-muted-foreground">컨트롤 표시</span>
            <Checkbox
              checked={config.controls !== false}
              onCheckedChange={(checked) => updateConfig("controls", checked)}
            />
          </div>
          <div className="flex items-center justify-between py-1.5">
            <span className="text-xs text-muted-foreground">반복 재생</span>
            <Checkbox
              checked={config.loop || false}
              onCheckedChange={(checked) => updateConfig("loop", checked)}
            />
          </div>
        </div>
      )}
    </div>
  );
};

V2MediaConfigPanel.displayName = "V2MediaConfigPanel";

export default V2MediaConfigPanel;