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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import { ComponentData } from "@/types/screen";

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

export const DashboardConfigPanel: React.FC<DashboardConfigPanelProps> = ({ 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="grid-title">그리드 제목</Label>
          <Input
            id="grid-title"
            placeholder="그리드 제목을 입력하세요"
            value={config.title || "대시보드 그리드"}
            onChange={(e) => handleConfigChange("title", e.target.value)}
          />
        </div>

        {/* 행 개수 */}
        <div className="space-y-2">
          <Label htmlFor="grid-rows">행 개수</Label>
          <Select
            value={String(config.rows || 2)}
            onValueChange={(value) => handleConfigChange("rows", parseInt(value))}
          >
            <SelectTrigger>
              <SelectValue placeholder="행 개수 선택" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="1">1행</SelectItem>
              <SelectItem value="2">2행</SelectItem>
              <SelectItem value="3">3행</SelectItem>
              <SelectItem value="4">4행</SelectItem>
            </SelectContent>
          </Select>
        </div>

        {/* 열 개수 */}
        <div className="space-y-2">
          <Label htmlFor="grid-columns">열 개수</Label>
          <Select
            value={String(config.columns || 3)}
            onValueChange={(value) => handleConfigChange("columns", parseInt(value))}
          >
            <SelectTrigger>
              <SelectValue placeholder="열 개수 선택" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="1">1열</SelectItem>
              <SelectItem value="2">2열</SelectItem>
              <SelectItem value="3">3열</SelectItem>
              <SelectItem value="4">4열</SelectItem>
              <SelectItem value="6">6열</SelectItem>
            </SelectContent>
          </Select>
        </div>

        {/* 간격 설정 */}
        <div className="space-y-2">
          <Label htmlFor="grid-gap">그리드 간격</Label>
          <Select value={config.gap || "medium"} onValueChange={(value) => handleConfigChange("gap", value)}>
            <SelectTrigger>
              <SelectValue placeholder="간격 선택" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="none">없음 (0px)</SelectItem>
              <SelectItem value="small">작게 (8px)</SelectItem>
              <SelectItem value="medium">보통 (16px)</SelectItem>
              <SelectItem value="large">크게 (24px)</SelectItem>
            </SelectContent>
          </Select>
        </div>

        {/* 그리드 아이템 높이 */}
        <div className="space-y-2">
          <Label htmlFor="item-height">아이템 높이</Label>
          <Input
            id="item-height"
            placeholder="120px"
            value={config.itemHeight || "120px"}
            onChange={(e) => handleConfigChange("itemHeight", e.target.value)}
          />
        </div>

        {/* 반응형 설정 */}
        <div className="flex items-center space-x-2">
          <Switch
            id="responsive"
            checked={config.responsive !== false}
            onCheckedChange={(checked) => handleConfigChange("responsive", checked)}
          />
          <Label htmlFor="responsive">반응형 레이아웃</Label>
        </div>

        {/* 테두리 표시 */}
        <div className="flex items-center space-x-2">
          <Switch
            id="show-borders"
            checked={config.showBorders !== false}
            onCheckedChange={(checked) => handleConfigChange("showBorders", checked)}
          />
          <Label htmlFor="show-borders">그리드 테두리 표시</Label>
        </div>

        {/* 배경색 */}
        <div className="space-y-2">
          <Label htmlFor="background-color">배경색</Label>
          <Input
            id="background-color"
            type="color"
            value={config.backgroundColor || "#f8f9fa"}
            onChange={(e) => handleConfigChange("backgroundColor", e.target.value)}
          />
        </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>
  );
};