ERP-node/frontend/components/report/designer/ReportDesignerRightPanel.tsx

"use client";

import { useState, useRef } from "react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Trash2, Settings, Database, Link2, Upload, Loader2 } from "lucide-react";
import { useReportDesigner } from "@/contexts/ReportDesignerContext";
import { QueryManager } from "./QueryManager";
import { reportApi } from "@/lib/api/reportApi";
import { useToast } from "@/hooks/use-toast";

export function ReportDesignerRightPanel() {
  const context = useReportDesigner();
  const { selectedComponentId, components, updateComponent, removeComponent, queries } = context;
  const [activeTab, setActiveTab] = useState<string>("properties");
  const [uploadingImage, setUploadingImage] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const { toast } = useToast();

  const selectedComponent = components.find((c) => c.id === selectedComponentId);

  // 이미지 업로드 핸들러
  const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file || !selectedComponent) return;

    // 파일 타입 체크
    if (!file.type.startsWith("image/")) {
      toast({
        title: "오류",
        description: "이미지 파일만 업로드 가능합니다.",
        variant: "destructive",
      });
      return;
    }

    // 파일 크기 체크 (10MB)
    if (file.size > 10 * 1024 * 1024) {
      toast({
        title: "오류",
        description: "파일 크기는 10MB 이하여야 합니다.",
        variant: "destructive",
      });
      return;
    }

    try {
      setUploadingImage(true);

      const result = await reportApi.uploadImage(file);

      if (result.success) {
        // 업로드된 이미지 URL을 컴포넌트에 설정
        updateComponent(selectedComponent.id, {
          imageUrl: result.data.fileUrl,
        });

        toast({
          title: "성공",
          description: "이미지가 업로드되었습니다.",
        });
      }
    } catch (error) {
      toast({
        title: "오류",
        description: "이미지 업로드 중 오류가 발생했습니다.",
        variant: "destructive",
      });
    } finally {
      setUploadingImage(false);
      // input 초기화
      if (fileInputRef.current) {
        fileInputRef.current.value = "";
      }
    }
  };

  // 선택된 쿼리의 결과 필드 가져오기
  const getQueryFields = (queryId: string): string[] => {
    const result = context.getQueryResult(queryId);
    return result ? result.fields : [];
  };

  return (
    <div className="w-[450px] border-l bg-white">
      <Tabs value={activeTab} onValueChange={setActiveTab} className="h-full">
        <div className="border-b p-2">
          <TabsList className="grid w-full grid-cols-2">
            <TabsTrigger value="properties" className="gap-2">
              <Settings className="h-4 w-4" />
              속성
            </TabsTrigger>
            <TabsTrigger value="queries" className="gap-2">
              <Database className="h-4 w-4" />
              쿼리
            </TabsTrigger>
          </TabsList>
        </div>

        {/* 속성 탭 */}
        <TabsContent value="properties" className="mt-0 h-[calc(100vh-120px)]">
          <ScrollArea className="h-full">
            <div className="space-y-4 p-4">
              {!selectedComponent ? (
                <div className="flex h-full items-center justify-center p-4 text-center text-sm text-gray-500">
                  컴포넌트를 선택하면 속성을 편집할 수 있습니다
                </div>
              ) : (
                <Card>
                  <CardHeader className="pb-3">
                    <div className="flex items-center justify-between">
                      <CardTitle className="text-sm">컴포넌트 속성</CardTitle>
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={() => removeComponent(selectedComponent.id)}
                        className="text-destructive hover:bg-destructive/10 h-8 w-8 p-0"
                      >
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    </div>
                  </CardHeader>
                  <CardContent className="space-y-3">
                    {/* 타입 */}
                    <div>
                      <Label className="text-xs">타입</Label>
                      <div className="mt-1 text-sm font-medium capitalize">{selectedComponent.type}</div>
                    </div>

                    {/* 위치 */}
                    <div className="grid grid-cols-2 gap-2">
                      <div>
                        <Label className="text-xs">X</Label>
                        <Input
                          type="number"
                          value={Math.round(selectedComponent.x)}
                          onChange={(e) =>
                            updateComponent(selectedComponent.id, {
                              x: parseInt(e.target.value) || 0,
                            })
                          }
                          className="h-8"
                        />
                      </div>
                      <div>
                        <Label className="text-xs">Y</Label>
                        <Input
                          type="number"
                          value={Math.round(selectedComponent.y)}
                          onChange={(e) =>
                            updateComponent(selectedComponent.id, {
                              y: parseInt(e.target.value) || 0,
                            })
                          }
                          className="h-8"
                        />
                      </div>
                    </div>

                    {/* 크기 */}
                    <div className="grid grid-cols-2 gap-2">
                      <div>
                        <Label className="text-xs">너비</Label>
                        <Input
                          type="number"
                          value={Math.round(selectedComponent.width)}
                          onChange={(e) =>
                            updateComponent(selectedComponent.id, {
                              width: parseInt(e.target.value) || 50,
                            })
                          }
                          className="h-8"
                        />
                      </div>
                      <div>
                        <Label className="text-xs">높이</Label>
                        <Input
                          type="number"
                          value={Math.round(selectedComponent.height)}
                          onChange={(e) =>
                            updateComponent(selectedComponent.id, {
                              height: parseInt(e.target.value) || 30,
                            })
                          }
                          className="h-8"
                        />
                      </div>
                    </div>

                    {/* 스타일링 섹션 */}
                    <div className="space-y-3 rounded-md border border-gray-200 bg-gray-50 p-3">
                      <h4 className="text-xs font-semibold text-gray-700">스타일</h4>

                      {/* 글꼴 크기 */}
                      <div>
                        <Label className="text-xs">글꼴 크기</Label>
                        <Input
                          type="number"
                          value={selectedComponent.fontSize || 13}
                          onChange={(e) =>
                            updateComponent(selectedComponent.id, {
                              fontSize: parseInt(e.target.value) || 13,
                            })
                          }
                          className="h-8"
                        />
                      </div>

                      {/* 글꼴 색상 */}
                      <div>
                        <Label className="text-xs">글꼴 색상</Label>
                        <div className="flex gap-2">
                          <Input
                            type="color"
                            value={selectedComponent.fontColor || "#000000"}
                            onChange={(e) =>
                              updateComponent(selectedComponent.id, {
                                fontColor: e.target.value,
                              })
                            }
                            className="h-8 w-16"
                          />
                          <Input
                            type="text"
                            value={selectedComponent.fontColor || "#000000"}
                            onChange={(e) =>
                              updateComponent(selectedComponent.id, {
                                fontColor: e.target.value,
                              })
                            }
                            className="h-8 flex-1 font-mono text-xs"
                          />
                        </div>
                      </div>

                      {/* 텍스트 정렬 (텍스트/라벨만) */}
                      {(selectedComponent.type === "text" || selectedComponent.type === "label") && (
                        <div>
                          <Label className="text-xs">텍스트 정렬</Label>
                          <Select
                            value={selectedComponent.textAlign || "left"}
                            onValueChange={(value) =>
                              updateComponent(selectedComponent.id, {
                                textAlign: value as "left" | "center" | "right",
                              })
                            }
                          >
                            <SelectTrigger className="h-8">
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="left">왼쪽</SelectItem>
                              <SelectItem value="center">가운데</SelectItem>
                              <SelectItem value="right">오른쪽</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                      )}

                      {/* 글꼴 굵기 (텍스트/라벨만) */}
                      {(selectedComponent.type === "text" || selectedComponent.type === "label") && (
                        <div>
                          <Label className="text-xs">글꼴 굵기</Label>
                          <Select
                            value={selectedComponent.fontWeight || "normal"}
                            onValueChange={(value) =>
                              updateComponent(selectedComponent.id, {
                                fontWeight: value as "normal" | "bold",
                              })
                            }
                          >
                            <SelectTrigger className="h-8">
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="normal">보통</SelectItem>
                              <SelectItem value="bold">굵게</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                      )}

                      {/* 배경 색상 */}
                      <div>
                        <Label className="text-xs">배경 색상</Label>
                        <div className="flex gap-2">
                          <Input
                            type="color"
                            value={selectedComponent.backgroundColor || "#ffffff"}
                            onChange={(e) =>
                              updateComponent(selectedComponent.id, {
                                backgroundColor: e.target.value,
                              })
                            }
                            className="h-8 w-16"
                          />
                          <Input
                            type="text"
                            value={selectedComponent.backgroundColor || "#ffffff"}
                            onChange={(e) =>
                              updateComponent(selectedComponent.id, {
                                backgroundColor: e.target.value,
                              })
                            }
                            placeholder="transparent"
                            className="h-8 flex-1 font-mono text-xs"
                          />
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() =>
                              updateComponent(selectedComponent.id, {
                                backgroundColor: "transparent",
                              })
                            }
                            className="h-8 px-2 text-xs"
                          >
                            없음
                          </Button>
                        </div>
                      </div>

                      {/* 테두리 */}
                      <div className="space-y-2">
                        <Label className="text-xs">테두리</Label>
                        <div className="grid grid-cols-2 gap-2">
                          <div>
                            <Label className="text-xs text-gray-600">두께</Label>
                            <Input
                              type="number"
                              min="0"
                              max="10"
                              value={selectedComponent.borderWidth || 0}
                              onChange={(e) =>
                                updateComponent(selectedComponent.id, {
                                  borderWidth: parseInt(e.target.value) || 0,
                                })
                              }
                              className="h-8"
                            />
                          </div>
                          <div>
                            <Label className="text-xs text-gray-600">색상</Label>
                            <Input
                              type="color"
                              value={selectedComponent.borderColor || "#cccccc"}
                              onChange={(e) =>
                                updateComponent(selectedComponent.id, {
                                  borderColor: e.target.value,
                                })
                              }
                              className="h-8"
                            />
                          </div>
                        </div>
                      </div>
                    </div>

                    {/* 테이블 스타일 */}
                    {selectedComponent.type === "table" && (
                      <Card className="mt-4 border-indigo-200 bg-indigo-50">
                        <CardHeader className="pb-3">
                          <CardTitle className="text-sm text-indigo-900">테이블 스타일</CardTitle>
                        </CardHeader>
                        <CardContent className="space-y-3">
                          {/* 헤더 배경색 */}
                          <div>
                            <Label className="text-xs">헤더 배경색</Label>
                            <div className="flex gap-2">
                              <Input
                                type="color"
                                value={selectedComponent.headerBackgroundColor || "#f3f4f6"}
                                onChange={(e) =>
                                  updateComponent(selectedComponent.id, {
                                    headerBackgroundColor: e.target.value,
                                  })
                                }
                                className="h-8 w-16"
                              />
                              <Input
                                type="text"
                                value={selectedComponent.headerBackgroundColor || "#f3f4f6"}
                                onChange={(e) =>
                                  updateComponent(selectedComponent.id, {
                                    headerBackgroundColor: e.target.value,
                                  })
                                }
                                className="h-8 flex-1 font-mono text-xs"
                              />
                            </div>
                          </div>

                          {/* 헤더 텍스트 색상 */}
                          <div>
                            <Label className="text-xs">헤더 텍스트 색상</Label>
                            <div className="flex gap-2">
                              <Input
                                type="color"
                                value={selectedComponent.headerTextColor || "#111827"}
                                onChange={(e) =>
                                  updateComponent(selectedComponent.id, {
                                    headerTextColor: e.target.value,
                                  })
                                }
                                className="h-8 w-16"
                              />
                              <Input
                                type="text"
                                value={selectedComponent.headerTextColor || "#111827"}
                                onChange={(e) =>
                                  updateComponent(selectedComponent.id, {
                                    headerTextColor: e.target.value,
                                  })
                                }
                                className="h-8 flex-1 font-mono text-xs"
                              />
                            </div>
                          </div>

                          {/* 테두리 표시 */}
                          <div className="flex items-center gap-2">
                            <input
                              type="checkbox"
                              id="showBorder"
                              checked={selectedComponent.showBorder !== false}
                              onChange={(e) =>
                                updateComponent(selectedComponent.id, {
                                  showBorder: e.target.checked,
                                })
                              }
                              className="h-4 w-4"
                            />
                            <Label htmlFor="showBorder" className="text-xs">
                              테두리 표시
                            </Label>
                          </div>

                          {/* 행 높이 */}
                          <div>
                            <Label className="text-xs">행 높이 (px)</Label>
                            <Input
                              type="number"
                              min="20"
                              max="100"
                              value={selectedComponent.rowHeight || 32}
                              onChange={(e) =>
                                updateComponent(selectedComponent.id, {
                                  rowHeight: parseInt(e.target.value),
                                })
                              }
                              className="h-8"
                            />
                          </div>
                        </CardContent>
                      </Card>
                    )}

                    {/* 이미지 속성 */}
                    {selectedComponent.type === "image" && (
                      <Card className="mt-4 border-purple-200 bg-purple-50">
                        <CardHeader className="pb-3">
                          <CardTitle className="text-sm text-purple-900">이미지 설정</CardTitle>
                        </CardHeader>
                        <CardContent className="space-y-3">
                          {/* 파일 업로드 */}
                          <div>
                            <Label className="text-xs">이미지 파일</Label>
                            <div className="flex gap-2">
                              <input
                                ref={fileInputRef}
                                type="file"
                                accept="image/*"
                                onChange={handleImageUpload}
                                className="hidden"
                                disabled={uploadingImage}
                              />
                              <Button
                                type="button"
                                variant="outline"
                                size="sm"
                                onClick={() => fileInputRef.current?.click()}
                                disabled={uploadingImage}
                                className="flex-1"
                              >
                                {uploadingImage ? (
                                  <>
                                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                                    업로드 중...
                                  </>
                                ) : (
                                  <>
                                    <Upload className="mr-2 h-4 w-4" />
                                    {selectedComponent.imageUrl ? "파일 변경" : "파일 선택"}
                                  </>
                                )}
                              </Button>
                            </div>
                            <p className="mt-1 text-xs text-gray-500">JPG, PNG, GIF, WEBP (최대 10MB)</p>
                            {selectedComponent.imageUrl && (
                              <p className="mt-2 truncate text-xs text-purple-600">
                                현재: {selectedComponent.imageUrl}
                              </p>
                            )}
                          </div>

                          <div>
                            <Label className="text-xs">맞춤 방식</Label>
                            <Select
                              value={selectedComponent.objectFit || "contain"}
                              onValueChange={(value) =>
                                updateComponent(selectedComponent.id, {
                                  objectFit: value as "contain" | "cover" | "fill" | "none",
                                })
                              }
                            >
                              <SelectTrigger className="h-8">
                                <SelectValue />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="contain">포함 (비율 유지)</SelectItem>
                                <SelectItem value="cover">채우기 (잘림)</SelectItem>
                                <SelectItem value="fill">늘리기</SelectItem>
                                <SelectItem value="none">원본 크기</SelectItem>
                              </SelectContent>
                            </Select>
                          </div>
                        </CardContent>
                      </Card>
                    )}

                    {/* 구분선 속성 */}
                    {selectedComponent.type === "divider" && (
                      <Card className="mt-4 border-gray-200 bg-gray-50">
                        <CardHeader className="pb-3">
                          <CardTitle className="text-sm text-gray-900">구분선 설정</CardTitle>
                        </CardHeader>
                        <CardContent className="space-y-3">
                          <div>
                            <Label className="text-xs">방향</Label>
                            <Select
                              value={selectedComponent.orientation || "horizontal"}
                              onValueChange={(value) =>
                                updateComponent(selectedComponent.id, {
                                  orientation: value as "horizontal" | "vertical",
                                })
                              }
                            >
                              <SelectTrigger className="h-8">
                                <SelectValue />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="horizontal">가로</SelectItem>
                                <SelectItem value="vertical">세로</SelectItem>
                              </SelectContent>
                            </Select>
                          </div>

                          <div>
                            <Label className="text-xs">선 스타일</Label>
                            <Select
                              value={selectedComponent.lineStyle || "solid"}
                              onValueChange={(value) =>
                                updateComponent(selectedComponent.id, {
                                  lineStyle: value as "solid" | "dashed" | "dotted" | "double",
                                })
                              }
                            >
                              <SelectTrigger className="h-8">
                                <SelectValue />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="solid">실선</SelectItem>
                                <SelectItem value="dashed">파선</SelectItem>
                                <SelectItem value="dotted">점선</SelectItem>
                                <SelectItem value="double">이중선</SelectItem>
                              </SelectContent>
                            </Select>
                          </div>

                          <div>
                            <Label className="text-xs">선 두께</Label>
                            <Input
                              type="number"
                              min="1"
                              max="20"
                              value={selectedComponent.lineWidth || 1}
                              onChange={(e) =>
                                updateComponent(selectedComponent.id, {
                                  lineWidth: Number(e.target.value),
                                })
                              }
                              className="h-8"
                            />
                          </div>

                          <div>
                            <Label className="text-xs">선 색상</Label>
                            <div className="flex gap-2">
                              <Input
                                type="color"
                                value={selectedComponent.lineColor || "#000000"}
                                onChange={(e) =>
                                  updateComponent(selectedComponent.id, {
                                    lineColor: e.target.value,
                                  })
                                }
                                className="h-8 w-16"
                              />
                              <Input
                                type="text"
                                value={selectedComponent.lineColor || "#000000"}
                                onChange={(e) =>
                                  updateComponent(selectedComponent.id, {
                                    lineColor: e.target.value,
                                  })
                                }
                                className="h-8 flex-1 font-mono text-xs"
                              />
                            </div>
                          </div>
                        </CardContent>
                      </Card>
                    )}

                    {/* 서명/도장 속성 */}
                    {(selectedComponent.type === "signature" || selectedComponent.type === "stamp") && (
                      <Card className="mt-4 border-indigo-200 bg-indigo-50">
                        <CardHeader className="pb-3">
                          <CardTitle className="text-sm text-indigo-900">
                            {selectedComponent.type === "signature" ? "서명란 설정" : "도장란 설정"}
                          </CardTitle>
                        </CardHeader>
                        <CardContent className="space-y-3">
                          {/* 파일 업로드 */}
                          <div>
                            <Label className="text-xs">
                              {selectedComponent.type === "signature" ? "서명 이미지" : "도장 이미지"}
                            </Label>
                            <div className="flex gap-2">
                              <input
                                ref={fileInputRef}
                                type="file"
                                accept="image/*"
                                onChange={handleImageUpload}
                                className="hidden"
                                disabled={uploadingImage}
                              />
                              <Button
                                type="button"
                                variant="outline"
                                size="sm"
                                onClick={() => fileInputRef.current?.click()}
                                disabled={uploadingImage}
                                className="flex-1"
                              >
                                {uploadingImage ? (
                                  <>
                                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                                    업로드 중...
                                  </>
                                ) : (
                                  <>
                                    <Upload className="mr-2 h-4 w-4" />
                                    {selectedComponent.imageUrl ? "파일 변경" : "파일 선택"}
                                  </>
                                )}
                              </Button>
                            </div>
                            <p className="mt-1 text-xs text-gray-500">JPG, PNG, GIF, WEBP (최대 10MB)</p>
                            {selectedComponent.imageUrl && (
                              <p className="mt-2 truncate text-xs text-indigo-600">
                                현재: {selectedComponent.imageUrl}
                              </p>
                            )}
                          </div>

                          {/* 맞춤 방식 */}
                          <div>
                            <Label className="text-xs">맞춤 방식</Label>
                            <Select
                              value={selectedComponent.objectFit || "contain"}
                              onValueChange={(value) =>
                                updateComponent(selectedComponent.id, {
                                  objectFit: value as "contain" | "cover" | "fill" | "none",
                                })
                              }
                            >
                              <SelectTrigger className="h-8">
                                <SelectValue />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="contain">포함 (비율 유지)</SelectItem>
                                <SelectItem value="cover">채우기 (잘림)</SelectItem>
                                <SelectItem value="fill">늘리기</SelectItem>
                                <SelectItem value="none">원본 크기</SelectItem>
                              </SelectContent>
                            </Select>
                          </div>

                          {/* 레이블 표시 */}
                          <div className="flex items-center gap-2">
                            <input
                              type="checkbox"
                              id="showLabel"
                              checked={selectedComponent.showLabel !== false}
                              onChange={(e) =>
                                updateComponent(selectedComponent.id, {
                                  showLabel: e.target.checked,
                                })
                              }
                              className="h-4 w-4"
                            />
                            <Label htmlFor="showLabel" className="text-xs">
                              레이블 표시
                            </Label>
                          </div>

                          {/* 레이블 텍스트 */}
                          {selectedComponent.showLabel !== false && (
                            <>
                              <div>
                                <Label className="text-xs">레이블 텍스트</Label>
                                <Input
                                  type="text"
                                  value={
                                    selectedComponent.labelText ||
                                    (selectedComponent.type === "signature" ? "서명:" : "(인)")
                                  }
                                  onChange={(e) =>
                                    updateComponent(selectedComponent.id, {
                                      labelText: e.target.value,
                                    })
                                  }
                                  className="h-8"
                                />
                              </div>

                              {/* 레이블 위치 (서명란만) */}
                              {selectedComponent.type === "signature" && (
                                <div>
                                  <Label className="text-xs">레이블 위치</Label>
                                  <Select
                                    value={selectedComponent.labelPosition || "left"}
                                    onValueChange={(value) =>
                                      updateComponent(selectedComponent.id, {
                                        labelPosition: value as "top" | "left" | "bottom" | "right",
                                      })
                                    }
                                  >
                                    <SelectTrigger className="h-8">
                                      <SelectValue />
                                    </SelectTrigger>
                                    <SelectContent>
                                      <SelectItem value="top">위</SelectItem>
                                      <SelectItem value="left">왼쪽</SelectItem>
                                      <SelectItem value="bottom">아래</SelectItem>
                                      <SelectItem value="right">오른쪽</SelectItem>
                                    </SelectContent>
                                  </Select>
                                </div>
                              )}
                            </>
                          )}

                          {/* 밑줄 표시 (서명란만) */}
                          {selectedComponent.type === "signature" && (
                            <div className="flex items-center gap-2">
                              <input
                                type="checkbox"
                                id="showUnderline"
                                checked={selectedComponent.showUnderline !== false}
                                onChange={(e) =>
                                  updateComponent(selectedComponent.id, {
                                    showUnderline: e.target.checked,
                                  })
                                }
                                className="h-4 w-4"
                              />
                              <Label htmlFor="showUnderline" className="text-xs">
                                밑줄 표시
                              </Label>
                            </div>
                          )}

                          {/* 이름 입력 (도장란만) */}
                          {selectedComponent.type === "stamp" && (
                            <div>
                              <Label className="text-xs">이름</Label>
                              <Input
                                type="text"
                                value={selectedComponent.personName || ""}
                                onChange={(e) =>
                                  updateComponent(selectedComponent.id, {
                                    personName: e.target.value,
                                  })
                                }
                                placeholder="예: 홍길동"
                                className="h-8"
                              />
                              <p className="mt-1 text-xs text-gray-500">도장 옆에 표시될 이름</p>
                            </div>
                          )}
                        </CardContent>
                      </Card>
                    )}

                    {/* 데이터 바인딩 (텍스트/라벨/테이블 컴포넌트) */}
                    {(selectedComponent.type === "text" ||
                      selectedComponent.type === "label" ||
                      selectedComponent.type === "table") && (
                      <Card className="mt-4 border-blue-200 bg-blue-50">
                        <CardHeader className="pb-3">
                          <div className="flex items-center gap-2">
                            <Link2 className="h-4 w-4 text-blue-600" />
                            <CardTitle className="text-sm text-blue-900">데이터 바인딩</CardTitle>
                          </div>
                        </CardHeader>
                        <CardContent className="space-y-3">
                          {/* 쿼리 선택 */}
                          <div>
                            <Label className="text-xs">쿼리</Label>
                            <Select
                              value={selectedComponent.queryId || "none"}
                              onValueChange={(value) =>
                                updateComponent(selectedComponent.id, {
                                  queryId: value === "none" ? undefined : value,
                                  fieldName: undefined,
                                })
                              }
                            >
                              <SelectTrigger className="h-8">
                                <SelectValue placeholder="쿼리 선택" />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="none">선택 안함</SelectItem>
                                {queries.map((query) => (
                                  <SelectItem key={query.id} value={query.id}>
                                    {query.name} ({query.type})
                                  </SelectItem>
                                ))}
                              </SelectContent>
                            </Select>
                          </div>

                          {/* 필드 선택 (텍스트/라벨만) */}
                          {selectedComponent.queryId &&
                            (selectedComponent.type === "text" || selectedComponent.type === "label") && (
                              <div>
                                <Label className="text-xs">필드</Label>
                                <Select
                                  value={selectedComponent.fieldName || "none"}
                                  onValueChange={(value) =>
                                    updateComponent(selectedComponent.id, {
                                      fieldName: value === "none" ? undefined : value,
                                    })
                                  }
                                >
                                  <SelectTrigger className="h-8">
                                    <SelectValue placeholder="필드 선택" />
                                  </SelectTrigger>
                                  <SelectContent>
                                    <SelectItem value="none">선택 안함</SelectItem>
                                    {getQueryFields(selectedComponent.queryId).length > 0 ? (
                                      getQueryFields(selectedComponent.queryId).map((field) => (
                                        <SelectItem key={field} value={field}>
                                          {field}
                                        </SelectItem>
                                      ))
                                    ) : (
                                      <SelectItem value="no-result" disabled>
                                        쿼리 탭에서 실행 필요
                                      </SelectItem>
                                    )}
                                  </SelectContent>
                                </Select>
                              </div>
                            )}

                          {/* 테이블 컬럼 설정 */}
                          {selectedComponent.queryId && selectedComponent.type === "table" && (
                            <Card className="border-green-200 bg-green-50">
                              <CardHeader className="pb-2">
                                <CardTitle className="text-xs text-green-900">컬럼 설정</CardTitle>
                              </CardHeader>
                              <CardContent className="space-y-2">
                                <Button
                                  size="sm"
                                  variant="outline"
                                  className="h-7 w-full text-xs"
                                  onClick={() => {
                                    const fields = getQueryFields(selectedComponent.queryId!);
                                    if (fields.length > 0) {
                                      const autoColumns = fields.map((field) => ({
                                        field,
                                        header: field,
                                        align: "left" as const,
                                      }));
                                      updateComponent(selectedComponent.id, {
                                        tableColumns: autoColumns,
                                      });
                                    }
                                  }}
                                >
                                  자동 설정 (쿼리 필드 기반)
                                </Button>

                                {selectedComponent.tableColumns && selectedComponent.tableColumns.length > 0 && (
                                  <div className="mt-3 space-y-2">
                                    {selectedComponent.tableColumns.map((col, idx) => (
                                      <div key={idx} className="space-y-1 rounded border border-green-200 bg-white p-2">
                                        <div className="flex items-center justify-between">
                                          <span className="text-xs font-medium text-gray-700">컬럼 {idx + 1}</span>
                                          <Button
                                            size="sm"
                                            variant="ghost"
                                            className="h-5 w-5 p-0 text-red-500 hover:bg-red-50"
                                            onClick={() => {
                                              const newColumns = [...selectedComponent.tableColumns!];
                                              newColumns.splice(idx, 1);
                                              updateComponent(selectedComponent.id, {
                                                tableColumns: newColumns,
                                              });
                                            }}
                                          >
                                            ×
                                          </Button>
                                        </div>
                                        <div className="grid grid-cols-2 gap-2">
                                          <div>
                                            <Label className="text-xs">필드</Label>
                                            <Input
                                              value={col.field}
                                              onChange={(e) => {
                                                const newColumns = [...selectedComponent.tableColumns!];
                                                newColumns[idx].field = e.target.value;
                                                updateComponent(selectedComponent.id, {
                                                  tableColumns: newColumns,
                                                });
                                              }}
                                              className="h-7 text-xs"
                                            />
                                          </div>
                                          <div>
                                            <Label className="text-xs">헤더명</Label>
                                            <Input
                                              value={col.header}
                                              onChange={(e) => {
                                                const newColumns = [...selectedComponent.tableColumns!];
                                                newColumns[idx].header = e.target.value;
                                                updateComponent(selectedComponent.id, {
                                                  tableColumns: newColumns,
                                                });
                                              }}
                                              className="h-7 text-xs"
                                            />
                                          </div>
                                          <div>
                                            <Label className="text-xs">너비(px)</Label>
                                            <Input
                                              type="number"
                                              value={col.width || ""}
                                              onChange={(e) => {
                                                const newColumns = [...selectedComponent.tableColumns!];
                                                newColumns[idx].width = e.target.value
                                                  ? parseInt(e.target.value)
                                                  : undefined;
                                                updateComponent(selectedComponent.id, {
                                                  tableColumns: newColumns,
                                                });
                                              }}
                                              placeholder="자동"
                                              className="h-7 text-xs"
                                            />
                                          </div>
                                          <div>
                                            <Label className="text-xs">정렬</Label>
                                            <Select
                                              value={col.align || "left"}
                                              onValueChange={(value) => {
                                                const newColumns = [...selectedComponent.tableColumns!];
                                                newColumns[idx].align = value as "left" | "center" | "right";
                                                updateComponent(selectedComponent.id, {
                                                  tableColumns: newColumns,
                                                });
                                              }}
                                            >
                                              <SelectTrigger className="h-7 text-xs">
                                                <SelectValue />
                                              </SelectTrigger>
                                              <SelectContent>
                                                <SelectItem value="left">왼쪽</SelectItem>
                                                <SelectItem value="center">가운데</SelectItem>
                                                <SelectItem value="right">오른쪽</SelectItem>
                                              </SelectContent>
                                            </Select>
                                          </div>
                                        </div>
                                      </div>
                                    ))}
                                  </div>
                                )}
                              </CardContent>
                            </Card>
                          )}

                          {/* 기본값 (텍스트/라벨만) */}
                          {(selectedComponent.type === "text" || selectedComponent.type === "label") && (
                            <div>
                              <Label className="text-xs">기본값</Label>
                              <Input
                                value={selectedComponent.defaultValue || ""}
                                onChange={(e) =>
                                  updateComponent(selectedComponent.id, {
                                    defaultValue: e.target.value,
                                  })
                                }
                                placeholder="데이터가 없을 때 표시할 값"
                                className="h-8"
                              />
                            </div>
                          )}

                          {/* 포맷 (텍스트/라벨만) */}
                          {(selectedComponent.type === "text" || selectedComponent.type === "label") && (
                            <div>
                              <Label className="text-xs">포맷</Label>
                              <Input
                                value={selectedComponent.format || ""}
                                onChange={(e) =>
                                  updateComponent(selectedComponent.id, {
                                    format: e.target.value,
                                  })
                                }
                                placeholder="예: YYYY-MM-DD, #,###"
                                className="h-8"
                              />
                            </div>
                          )}
                        </CardContent>
                      </Card>
                    )}
                  </CardContent>
                </Card>
              )}
            </div>
          </ScrollArea>
        </TabsContent>

        {/* 쿼리 탭 */}
        <TabsContent value="queries" className="mt-0 h-[calc(100vh-120px)]">
          <QueryManager />
        </TabsContent>
      </Tabs>
    </div>
  );
}