import React from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import { ComponentData } from "@/types/screen";
import { ColorPickerWithTransparent } from "../common/ColorPickerWithTransparent";

interface CardConfigPanelProps {
  component: ComponentData;
  onUpdateProperty: (path: string, value: any) => void;
}

export const CardConfigPanel: React.FC<CardConfigPanelProps> = ({ component, onUpdateProperty }) => {
  const config = component.componentConfig || {};

  const handleConfigChange = (key: string, value: any) => {
    onUpdateProperty(`componentConfig.${key}`, value);
  };

  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-sm font-medium">카드 설정</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        {/* 카드 제목 */}
        <div className="space-y-2">
          <Label htmlFor="card-title">카드 제목</Label>
          <Input
            id="card-title"
            placeholder="카드 제목을 입력하세요"
            value={config.title || "카드 제목"}
            onChange={(e) => handleConfigChange("title", e.target.value)}
          />
        </div>

        {/* 카드 내용 */}
        <div className="space-y-2">
          <Label htmlFor="card-content">카드 내용</Label>
          <Textarea
            id="card-content"
            placeholder="카드 내용을 입력하세요"
            value={config.content || "카드 내용 영역"}
            onChange={(e) => handleConfigChange("content", e.target.value)}
            rows={3}
          />
        </div>

        {/* 카드 스타일 */}
        <div className="space-y-2">
          <Label htmlFor="card-variant">카드 스타일</Label>
          <Select value={config.variant || "default"} onValueChange={(value) => handleConfigChange("variant", value)}>
            <SelectTrigger>
              <SelectValue placeholder="카드 스타일 선택" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="default">기본 (Default)</SelectItem>
              <SelectItem value="outlined">테두리 (Outlined)</SelectItem>
              <SelectItem value="elevated">그림자 (Elevated)</SelectItem>
              <SelectItem value="filled">채움 (Filled)</SelectItem>
            </SelectContent>
          </Select>
        </div>

        {/* 헤더 표시 여부 */}
        <div className="flex items-center space-x-2">
          <Switch
            id="show-header"
            checked={config.showHeader !== false}
            onCheckedChange={(checked) => handleConfigChange("showHeader", checked)}
          />
          <Label htmlFor="show-header">헤더 표시</Label>
        </div>

        {/* 패딩 설정 */}
        <div className="space-y-2">
          <Label htmlFor="card-padding">패딩</Label>
          <Select value={config.padding || "default"} onValueChange={(value) => handleConfigChange("padding", value)}>
            <SelectTrigger>
              <SelectValue placeholder="패딩 선택" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="none">없음 (None)</SelectItem>
              <SelectItem value="small">작게 (Small)</SelectItem>
              <SelectItem value="default">기본 (Default)</SelectItem>
              <SelectItem value="large">크게 (Large)</SelectItem>
            </SelectContent>
          </Select>
        </div>

        {/* 배경색 */}
        <div className="space-y-2">
          <Label htmlFor="background-color">배경색</Label>
          <ColorPickerWithTransparent
            id="background-color"
            value={config.backgroundColor}
            onChange={(value) => handleConfigChange("backgroundColor", value)}
            defaultColor="#ffffff"
            placeholder="#ffffff"
          />
        </div>

        {/* 테두리 반경 */}
        <div className="space-y-2">
          <Label htmlFor="border-radius">테두리 반경</Label>
          <Input
            id="border-radius"
            placeholder="8px"
            value={config.borderRadius || "8px"}
            onChange={(e) => handleConfigChange("borderRadius", e.target.value)}
          />
        </div>
      </CardContent>
    </Card>
  );
};