"use client";

/**
 * UnifiedLayout 설정 패널
 * 통합 레이아웃 컴포넌트의 세부 설정을 관리합니다.
 */

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 UnifiedLayoutConfigPanelProps {
  config: Record<string, any>;
  onChange: (config: Record<string, any>) => void;
}

export const UnifiedLayoutConfigPanel: React.FC<UnifiedLayoutConfigPanelProps> = ({
  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.layoutType || config.type || "grid"}
          onValueChange={(value) => updateConfig("layoutType", value)}
        >
          <SelectTrigger className="h-8 text-xs">
            <SelectValue placeholder="타입 선택" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="grid">그리드</SelectItem>
            <SelectItem value="split">분할 패널</SelectItem>
            <SelectItem value="flex">플렉스</SelectItem>
            <SelectItem value="divider">구분선</SelectItem>
            <SelectItem value="screen-embed">화면 임베드</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <Separator />

      {/* 그리드 설정 */}
      {(config.layoutType === "grid" || !config.layoutType) && (
        <div className="space-y-3">
          <Label className="text-xs font-medium">그리드 설정</Label>
          
          <div className="flex items-center space-x-2">
            <Checkbox
              id="use12Column"
              checked={config.use12Column !== false}
              onCheckedChange={(checked) => updateConfig("use12Column", checked)}
            />
            <label htmlFor="use12Column" className="text-xs">12컬럼 그리드 시스템 사용</label>
          </div>

          <div className="grid grid-cols-2 gap-2">
            <div className="space-y-2">
              <Label className="text-[10px] text-muted-foreground">컬럼 수</Label>
              <Select
                value={String(config.columns || 12)}
                onValueChange={(value) => updateConfig("columns", Number(value))}
              >
                <SelectTrigger className="h-8 text-xs">
                  <SelectValue />
                </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>
                  <SelectItem value="12">12</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label className="text-[10px] text-muted-foreground">간격 (px)</Label>
              <Input
                value={config.gap || "16"}
                onChange={(e) => updateConfig("gap", e.target.value)}
                placeholder="16"
                className="h-8 text-xs"
              />
            </div>
          </div>
        </div>
      )}

      {/* 분할 패널 설정 */}
      {config.layoutType === "split" && (
        <div className="space-y-3">
          <Label className="text-xs font-medium">분할 설정</Label>
          
          <div className="space-y-2">
            <Label className="text-[10px] text-muted-foreground">분할 방향</Label>
            <Select
              value={config.direction || "horizontal"}
              onValueChange={(value) => updateConfig("direction", value)}
            >
              <SelectTrigger className="h-8 text-xs">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="horizontal">가로</SelectItem>
                <SelectItem value="vertical">세로</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div className="space-y-2">
            <Label className="text-[10px] text-muted-foreground">비율 (%)</Label>
            <div className="grid grid-cols-2 gap-2">
              <Input
                type="number"
                value={config.splitRatio?.[0] || 50}
                onChange={(e) => updateConfig("splitRatio", [Number(e.target.value), 100 - Number(e.target.value)])}
                placeholder="50"
                min="10"
                max="90"
                className="h-8 text-xs"
              />
              <Input
                type="number"
                value={config.splitRatio?.[1] || 50}
                disabled
                className="h-8 text-xs bg-muted"
              />
            </div>
          </div>

          <div className="flex items-center space-x-2">
            <Checkbox
              id="resizable"
              checked={config.resizable !== false}
              onCheckedChange={(checked) => updateConfig("resizable", checked)}
            />
            <label htmlFor="resizable" className="text-xs">크기 조절 가능</label>
          </div>
        </div>
      )}

      {/* 플렉스 설정 */}
      {config.layoutType === "flex" && (
        <div className="space-y-3">
          <Label className="text-xs font-medium">플렉스 설정</Label>
          
          <div className="space-y-2">
            <Label className="text-[10px] text-muted-foreground">방향</Label>
            <Select
              value={config.direction || "row"}
              onValueChange={(value) => updateConfig("direction", value)}
            >
              <SelectTrigger className="h-8 text-xs">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="row">가로</SelectItem>
                <SelectItem value="column">세로</SelectItem>
                <SelectItem value="row-reverse">가로 (역순)</SelectItem>
                <SelectItem value="column-reverse">세로 (역순)</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div className="grid grid-cols-2 gap-2">
            <div className="space-y-2">
              <Label className="text-[10px] text-muted-foreground">정렬</Label>
              <Select
                value={config.justifyContent || "flex-start"}
                onValueChange={(value) => updateConfig("justifyContent", value)}
              >
                <SelectTrigger className="h-8 text-xs">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="flex-start">시작</SelectItem>
                  <SelectItem value="center">가운데</SelectItem>
                  <SelectItem value="flex-end">끝</SelectItem>
                  <SelectItem value="space-between">양끝 정렬</SelectItem>
                  <SelectItem value="space-around">균등 배치</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label className="text-[10px] text-muted-foreground">교차축 정렬</Label>
              <Select
                value={config.alignItems || "stretch"}
                onValueChange={(value) => updateConfig("alignItems", value)}
              >
                <SelectTrigger className="h-8 text-xs">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="flex-start">시작</SelectItem>
                  <SelectItem value="center">가운데</SelectItem>
                  <SelectItem value="flex-end">끝</SelectItem>
                  <SelectItem value="stretch">늘리기</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>

          <div className="space-y-2">
            <Label className="text-[10px] text-muted-foreground">간격 (px)</Label>
            <Input
              value={config.gap || "16"}
              onChange={(e) => updateConfig("gap", e.target.value)}
              placeholder="16"
              className="h-8 text-xs"
            />
          </div>

          <div className="flex items-center space-x-2">
            <Checkbox
              id="wrap"
              checked={config.wrap || false}
              onCheckedChange={(checked) => updateConfig("wrap", checked)}
            />
            <label htmlFor="wrap" className="text-xs">줄바꿈 허용</label>
          </div>
        </div>
      )}

      {/* 화면 임베드 설정 */}
      {config.layoutType === "screen-embed" && (
        <div className="space-y-2">
          <Label className="text-xs font-medium">임베드할 화면 ID</Label>
          <Input
            type="number"
            value={config.screenId || ""}
            onChange={(e) => updateConfig("screenId", e.target.value ? Number(e.target.value) : undefined)}
            placeholder="화면 ID"
            className="h-8 text-xs"
          />
        </div>
      )}
    </div>
  );
};

UnifiedLayoutConfigPanel.displayName = "UnifiedLayoutConfigPanel";

export default UnifiedLayoutConfigPanel;