"use client";

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

export interface ImageDisplayConfigPanelProps {
  config: ImageDisplayConfig;
  onChange?: (config: Partial<ImageDisplayConfig>) => void;
  onConfigChange?: (config: Partial<ImageDisplayConfig>) => void;
}

/**
 * ImageDisplay 설정 패널
 */
export const ImageDisplayConfigPanel: React.FC<ImageDisplayConfigPanelProps> = ({
  config,
  onChange,
  onConfigChange,
}) => {
  const handleChange = (key: keyof ImageDisplayConfig, value: any) => {
    const update = { ...config, [key]: value };
    onChange?.(update);
    onConfigChange?.(update);
  };

  return (
    <div className="space-y-4">
      <div className="text-sm font-medium">이미지 표시 설정</div>

      {/* 이미지 URL */}
      <div className="space-y-2">
        <Label htmlFor="imageUrl" className="text-xs">
          기본 이미지 URL
        </Label>
        <Input
          id="imageUrl"
          value={config.imageUrl || ""}
          onChange={(e) => handleChange("imageUrl", e.target.value)}
          placeholder="https://..."
          className="h-8 text-xs"
        />
        <p className="text-muted-foreground text-[10px]">
          데이터 바인딩 값이 없을 때 표시할 기본 이미지
        </p>
      </div>

      {/* 대체 텍스트 */}
      <div className="space-y-2">
        <Label htmlFor="altText" className="text-xs">
          대체 텍스트 (alt)
        </Label>
        <Input
          id="altText"
          value={config.altText || ""}
          onChange={(e) => handleChange("altText", e.target.value)}
          placeholder="이미지 설명"
          className="h-8 text-xs"
        />
      </div>

      {/* 이미지 맞춤 */}
      <div className="space-y-2">
        <Label htmlFor="objectFit" className="text-xs">
          이미지 맞춤 (Object Fit)
        </Label>
        <Select
          value={config.objectFit || "contain"}
          onValueChange={(value) => handleChange("objectFit", value)}
        >
          <SelectTrigger className="h-8 text-xs">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="contain">Contain (비율 유지, 전체 표시)</SelectItem>
            <SelectItem value="cover">Cover (비율 유지, 영역 채움)</SelectItem>
            <SelectItem value="fill">Fill (영역에 맞춤)</SelectItem>
            <SelectItem value="none">None (원본 크기)</SelectItem>
            <SelectItem value="scale-down">Scale Down (축소만)</SelectItem>
          </SelectContent>
        </Select>
      </div>

      {/* 테두리 둥글기 */}
      <div className="space-y-2">
        <Label htmlFor="borderRadius" className="text-xs">
          테두리 둥글기 (px)
        </Label>
        <Input
          id="borderRadius"
          type="number"
          min="0"
          max="50"
          value={config.borderRadius ?? 8}
          onChange={(e) => handleChange("borderRadius", parseInt(e.target.value) || 0)}
          className="h-8 text-xs"
        />
      </div>

      {/* 배경 색상 */}
      <div className="space-y-2">
        <Label htmlFor="backgroundColor" className="text-xs">
          배경 색상
        </Label>
        <div className="flex items-center gap-2">
          <input
            type="color"
            value={config.backgroundColor || "#f9fafb"}
            onChange={(e) => handleChange("backgroundColor", e.target.value)}
            className="h-8 w-8 cursor-pointer rounded border"
          />
          <Input
            id="backgroundColor"
            value={config.backgroundColor || "#f9fafb"}
            onChange={(e) => handleChange("backgroundColor", e.target.value)}
            className="h-8 flex-1 text-xs"
          />
        </div>
      </div>

      {/* 플레이스홀더 */}
      <div className="space-y-2">
        <Label htmlFor="placeholder" className="text-xs">
          이미지 없을 때 텍스트
        </Label>
        <Input
          id="placeholder"
          value={config.placeholder || ""}
          onChange={(e) => handleChange("placeholder", e.target.value)}
          placeholder="이미지 없음"
          className="h-8 text-xs"
        />
      </div>

      {/* 테두리 표시 */}
      <div className="flex items-center gap-2">
        <Checkbox
          id="showBorder"
          checked={config.showBorder ?? true}
          onCheckedChange={(checked) => handleChange("showBorder", checked)}
        />
        <Label htmlFor="showBorder" className="text-xs cursor-pointer">
          테두리 표시
        </Label>
      </div>

      {/* 읽기 전용 */}
      <div className="flex items-center gap-2">
        <Checkbox
          id="readonly"
          checked={config.readonly || false}
          onCheckedChange={(checked) => handleChange("readonly", checked)}
        />
        <Label htmlFor="readonly" className="text-xs cursor-pointer">
          읽기 전용
        </Label>
      </div>

      {/* 필수 입력 */}
      <div className="flex items-center gap-2">
        <Checkbox
          id="required"
          checked={config.required || false}
          onCheckedChange={(checked) => handleChange("required", checked)}
        />
        <Label htmlFor="required" className="text-xs cursor-pointer">
          필수 입력
        </Label>
      </div>
    </div>
  );
};