"use client";

import React, { useState, useCallback } from "react";
import { useDrop, useDrag } from "react-dnd";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { Checkbox } from "@/components/ui/checkbox";
import { Textarea } from "@/components/ui/textarea";
import {
  Plus,
  Trash2,
  ChevronUp,
  ChevronDown,
  ChevronRight,
  Minus as MinusIcon,
  Type,
  CreditCard,
  Minus,
  Tag,
  ImageIcon,
  Hash,
  Calendar,
  Link2,
  Circle,
  Space,
  FileText,
} from "lucide-react";
import type {
  CardLayoutRow,
  CardElement,
  CardElementType,
  CardHeaderElement,
  CardDataCellElement,
  CardDividerElement,
  CardBadgeElement,
  CardImageElement,
  CardNumberElement,
  CardDateElement,
  CardLinkElement,
  CardStatusElement,
  CardSpacerElement,
  CardStaticTextElement,
  CellDirection,
} from "@/types/report";
import { CARD_ELEMENT_DND_TYPE } from "./CardElementPalette";

interface CardCanvasEditorProps {
  rows: CardLayoutRow[];
  onRowsChange: (rows: CardLayoutRow[]) => void;
}

const generateId = () => `el_${Date.now()}_${Math.random().toString(36).slice(2, 7)}`;

const createDefaultElement = (type: CardElementType): CardElement => {
  const id = generateId();
  switch (type) {
    case "header":
      return { id, type: "header", title: "제목", colspan: 1 } as CardHeaderElement;
    case "dataCell":
      return {
        id,
        type: "dataCell",
        direction: "vertical",
        label: "라벨",
        colspan: 1,
      } as CardDataCellElement;
    case "divider":
      return { id, type: "divider", colspan: 1 } as CardDividerElement;
    case "badge":
      return { id, type: "badge", label: "", colspan: 1 } as CardBadgeElement;
    case "image":
      return { id, type: "image", colspan: 1, objectFit: "contain", height: 80 } as CardImageElement;
    case "number":
      return { id, type: "number", label: "금액", colspan: 1 } as CardNumberElement;
    case "date":
      return { id, type: "date", label: "날짜", colspan: 1, dateFormat: "YYYY-MM-DD" } as CardDateElement;
    case "link":
      return { id, type: "link", label: "링크", colspan: 1, openInNewTab: true } as CardLinkElement;
    case "status":
      return { id, type: "status", colspan: 1, statusMappings: [] } as CardStatusElement;
    case "spacer":
      return { id, type: "spacer", colspan: 1, height: 16 } as CardSpacerElement;
    case "staticText":
      return { id, type: "staticText", text: "텍스트", colspan: 1, fontSize: 13 } as CardStaticTextElement;
  }
};

const getElementIcon = (type: CardElementType) => {
  switch (type) {
    case "header":
      return <Type className="w-3 h-3" />;
    case "dataCell":
      return <CreditCard className="w-3 h-3" />;
    case "divider":
      return <Minus className="w-3 h-3" />;
    case "badge":
      return <Tag className="w-3 h-3" />;
    case "image":
      return <ImageIcon className="w-3 h-3" />;
    case "number":
      return <Hash className="w-3 h-3" />;
    case "date":
      return <Calendar className="w-3 h-3" />;
    case "link":
      return <Link2 className="w-3 h-3" />;
    case "status":
      return <Circle className="w-3 h-3" />;
    case "spacer":
      return <Space className="w-3 h-3" />;
    case "staticText":
      return <FileText className="w-3 h-3" />;
  }
};

const getElementLabel = (element: CardElement): string => {
  switch (element.type) {
    case "header":
      return element.title || "헤더";
    case "dataCell":
      return element.label || "데이터 셀";
    case "divider":
      return "구분선";
    case "badge":
      return element.label || "뱃지";
    case "image":
      return "이미지";
    case "number":
      return (element as CardNumberElement).label || "숫자/금액";
    case "date":
      return (element as CardDateElement).label || "날짜";
    case "link":
      return (element as CardLinkElement).label || "링크";
    case "status":
      return "상태";
    case "spacer":
      return "빈 공간";
    case "staticText":
      return (element as CardStaticTextElement).text || "고정 텍스트";
  }
};

const TYPE_FIXED_LABELS: Record<string, string> = {
  header: "헤더",
  dataCell: "데이터 셀",
  divider: "구분선",
  badge: "뱃지",
  image: "이미지",
  number: "숫자/금액",
  date: "날짜",
  link: "링크",
  status: "상태",
  spacer: "빈 공간",
  staticText: "고정 텍스트",
};

const CARD_CELL_MOVE_TYPE = "card-cell-move";

interface DropZoneProps {
  rowIndex: number;
  cellIndex: number;
  element: CardElement | null;
  isSelected: boolean;
  onClick: () => void;
  onDrop: (type: CardElementType) => void;
  onDelete?: () => void;
  onMove?: (fromRow: number, fromCell: number) => void;
  colspan: number;
}

function DropZone({
  rowIndex,
  cellIndex,
  element,
  isSelected,
  onClick,
  onDrop,
  onDelete,
  onMove,
  colspan,
}: DropZoneProps) {
  const [{ isDragging }, drag] = useDrag(() => ({
    type: CARD_CELL_MOVE_TYPE,
    item: { fromRow: rowIndex, fromCell: cellIndex },
    canDrag: () => !!element,
    collect: (monitor) => ({ isDragging: monitor.isDragging() }),
  }), [rowIndex, cellIndex, element]);

  const [{ isOver, canDrop }, drop] = useDrop(() => ({
    accept: [CARD_ELEMENT_DND_TYPE, CARD_CELL_MOVE_TYPE],
    drop: (item: { elementType?: CardElementType; fromRow?: number; fromCell?: number }, monitor) => {
      const itemType = monitor.getItemType();
      if (itemType === CARD_ELEMENT_DND_TYPE && item.elementType) {
        onDrop(item.elementType);
      } else if (itemType === CARD_CELL_MOVE_TYPE && item.fromRow !== undefined && item.fromCell !== undefined) {
        onMove?.(item.fromRow, item.fromCell);
      }
    },
    collect: (monitor) => ({
      isOver: monitor.isOver(),
      canDrop: monitor.canDrop(),
    }),
  }), [onDrop, onMove]);

  const combinedRef = (node: HTMLDivElement | null) => {
    drag(node);
    drop(node);
  };

  return (
    <div
      ref={combinedRef}
      onClick={onClick}
      className={`
        relative group border rounded p-2 cursor-pointer transition-all min-h-[50px] flex flex-col justify-center
        ${isSelected ? "border-blue-500 bg-blue-50 ring-2 ring-blue-200" : "border-gray-200 bg-gray-50 hover:bg-gray-100"}
        ${isOver && canDrop ? "border-blue-400 bg-blue-100" : ""}
        ${!element ? "border-dashed" : ""}
        ${isDragging ? "opacity-40" : ""}
      `}
      style={{ gridColumn: `span ${colspan}` }}
    >
      {element ? (
        <>
          <div className="flex items-center gap-1.5">
            <span className="text-gray-500">{getElementIcon(element.type)}</span>
            <span className="text-xs text-gray-700 truncate">
              {getElementLabel(element)}
            </span>
          </div>
          {onDelete && (
            <button
              onClick={(e) => { e.stopPropagation(); onDelete(); }}
              className="absolute -top-1.5 -right-1.5 hidden group-hover:flex w-5 h-5 items-center justify-center rounded-full bg-red-500 text-white text-xs shadow-sm hover:bg-red-600 transition-colors"
              title="요소 삭제"
            >
              ×
            </button>
          )}
        </>
      ) : (
        <div className="text-xs text-gray-400 text-center">
          드롭하여 추가
        </div>
      )}
    </div>
  );
}

interface CellSettingsPanelProps {
  element: CardElement;
  onUpdate: (element: CardElement) => void;
  maxColspan: number;
}

function CellSettingsPanel({
  element,
  onUpdate,
  maxColspan,
}: CellSettingsPanelProps) {
  const handleColspanChange = (delta: number) => {
    const currentColspan = element.colspan || 1;
    const newColspan = Math.max(1, Math.min(maxColspan, currentColspan + delta));
    onUpdate({ ...element, colspan: newColspan });
  };

  return (
    <div className="space-y-3">
      <div className="flex items-center gap-2 mb-1">
        <div className="text-xs font-medium text-muted-foreground">
          기본 설정
        </div>
      </div>

      {/* 공통: colspan */}
      <div className="space-y-2">
        <Label className="text-xs font-medium text-foreground">
          열 병합
        </Label>
        <div className="flex items-center gap-2">
          <Button
            variant="outline"
            size="sm"
            onClick={() => handleColspanChange(-1)}
            className="h-8 w-8 p-0"
            disabled={(element.colspan || 1) <= 1}
          >
            <MinusIcon className="w-3.5 h-3.5" />
          </Button>
          <span className="text-sm font-medium w-8 text-center">
            {element.colspan || 1}
          </span>
          <Button
            variant="outline"
            size="sm"
            onClick={() => handleColspanChange(1)}
            className="h-8 w-8 p-0"
            disabled={(element.colspan || 1) >= maxColspan}
          >
            <Plus className="w-3.5 h-3.5" />
          </Button>
        </div>
      </div>

      {/* 방향 설정 (수직/수평) — header, divider, spacer 제외 */}
      {!["header", "divider", "spacer"].includes(element.type) && (
        <div className="space-y-2">
          <Label className="text-xs font-medium text-foreground">배치 방향</Label>
          <RadioGroup
            value={element.direction || "vertical"}
            onValueChange={(value: CellDirection) =>
              onUpdate({ ...element, direction: value })
            }
            className="flex gap-4"
          >
            <div className="flex items-center space-x-2">
              <RadioGroupItem value="vertical" id={`dir-v-${element.id}`} />
              <Label htmlFor={`dir-v-${element.id}`} className="text-xs">
                수직 (라벨 위)
              </Label>
            </div>
            <div className="flex items-center space-x-2">
              <RadioGroupItem value="horizontal" id={`dir-h-${element.id}`} />
              <Label htmlFor={`dir-h-${element.id}`} className="text-xs">
                수평 (라벨:값)
              </Label>
            </div>
          </RadioGroup>
        </div>
      )}

      {/* 헤더 설정 */}
      {element.type === "header" && (
        <div className="space-y-3">
          <div>
            <Label className="mb-1.5 block text-xs text-gray-500">제목</Label>
            <Input
              value={(element as CardHeaderElement).title}
              onChange={(e) =>
                onUpdate({ ...element, title: e.target.value } as CardHeaderElement)
              }
              placeholder="헤더 제목"
              className="h-9 text-sm"
            />
          </div>
          <div className="grid grid-cols-3 gap-2">
            <div>
              <Label className="mb-1.5 block text-xs text-gray-500">크기</Label>
              <Input
                type="number"
                min={10}
                max={48}
                value={(element as CardHeaderElement).fontSize || 20}
                onChange={(e) =>
                  onUpdate({ ...element, fontSize: parseInt(e.target.value) || 20 } as CardHeaderElement)
                }
                className="h-9 text-xs"
              />
            </div>
            <div>
              <Label className="mb-1.5 block text-xs text-gray-500">굵기</Label>
              <Select
                value={(element as any).fontWeight || "bold"}
                onValueChange={(v) =>
                  onUpdate({ ...element, fontWeight: v } as CardHeaderElement)
                }
              >
                <SelectTrigger className="h-9 text-xs"><SelectValue /></SelectTrigger>
                <SelectContent>
                  <SelectItem value="normal">보통</SelectItem>
                  <SelectItem value="bold">굵게</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div>
              <Label className="mb-1.5 block text-xs text-gray-500">색상</Label>
              <div className="flex items-center gap-1.5 rounded-lg border border-gray-200 bg-white px-2 py-1.5">
                <input
                  type="color"
                  value={(element as CardHeaderElement).color || "#1e40af"}
                  onChange={(e) =>
                    onUpdate({ ...element, color: e.target.value } as CardHeaderElement)
                  }
                  className="h-6 w-6 shrink-0 cursor-pointer rounded border-0 p-0"
                />
                <Input
                  value={(element as CardHeaderElement).color || "#1e40af"}
                  onChange={(e) =>
                    onUpdate({ ...element, color: e.target.value } as CardHeaderElement)
                  }
                  className="h-6 border-0 bg-transparent px-0 font-mono text-[10px] shadow-none focus-visible:ring-0"
                />
              </div>
            </div>
          </div>
        </div>
      )}

      {/* 데이터 셀 설정 */}
      {element.type === "dataCell" && (
        <div className="space-y-3">
          <div>
            <Label className="mb-1.5 block text-xs text-gray-500">라벨</Label>
            <Input
              value={(element as CardDataCellElement).label}
              onChange={(e) =>
                onUpdate({ ...element, label: e.target.value } as CardDataCellElement)
              }
              placeholder="라벨 입력"
              className="h-9 text-sm"
            />
          </div>
          <div className="grid grid-cols-3 gap-2">
            <div>
              <Label className="mb-1.5 block text-xs text-gray-500">라벨 굵기</Label>
              <Select
                value={(element as any).labelFontWeight || "normal"}
                onValueChange={(v) => onUpdate({ ...element, labelFontWeight: v })}
              >
                <SelectTrigger className="h-9 text-xs"><SelectValue /></SelectTrigger>
                <SelectContent>
                  <SelectItem value="normal">보통</SelectItem>
                  <SelectItem value="bold">굵게</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div>
              <Label className="mb-1.5 block text-xs text-gray-500">라벨 색상</Label>
              <div className="flex items-center gap-1.5 rounded-lg border border-gray-200 bg-white px-2 py-1.5">
                <input type="color" value={(element as any).labelColor || "#374151"} onChange={(e) => onUpdate({ ...element, labelColor: e.target.value })} className="h-6 w-6 shrink-0 cursor-pointer rounded border-0 p-0" />
                <Input value={(element as any).labelColor || "#374151"} onChange={(e) => onUpdate({ ...element, labelColor: e.target.value })} className="h-6 border-0 bg-transparent px-0 font-mono text-[10px] shadow-none focus-visible:ring-0" />
              </div>
            </div>
            <div>
              <Label className="mb-1.5 block text-xs text-gray-500">값 색상</Label>
              <div className="flex items-center gap-1.5 rounded-lg border border-gray-200 bg-white px-2 py-1.5">
                <input type="color" value={(element as any).valueColor || "#000000"} onChange={(e) => onUpdate({ ...element, valueColor: e.target.value })} className="h-6 w-6 shrink-0 cursor-pointer rounded border-0 p-0" />
                <Input value={(element as any).valueColor || "#000000"} onChange={(e) => onUpdate({ ...element, valueColor: e.target.value })} className="h-6 border-0 bg-transparent px-0 font-mono text-[10px] shadow-none focus-visible:ring-0" />
              </div>
            </div>
          </div>
        </div>
      )}

      {/* 구분선 설정 */}
      {element.type === "divider" && (
        <div className="space-y-3">
          <div className="grid grid-cols-3 gap-2">
            <div>
              <Label className="mb-1.5 block text-xs text-gray-500">스타일</Label>
              <Select
                value={(element as CardDividerElement).style || "solid"}
                onValueChange={(value: "solid" | "dashed" | "dotted") =>
                  onUpdate({ ...element, style: value } as CardDividerElement)
                }
              >
                <SelectTrigger className="h-9 text-xs"><SelectValue /></SelectTrigger>
                <SelectContent>
                  <SelectItem value="solid">실선</SelectItem>
                  <SelectItem value="dashed">점선</SelectItem>
                  <SelectItem value="dotted">점점선</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div>
              <Label className="mb-1.5 block text-xs text-gray-500">두께</Label>
              <Input
                type="number"
                min={1}
                max={10}
                value={(element as any).thickness || 1}
                onChange={(e) => onUpdate({ ...element, thickness: parseInt(e.target.value) || 1 })}
                className="h-9 text-xs"
              />
            </div>
            <div>
              <Label className="mb-1.5 block text-xs text-gray-500">색상</Label>
              <div className="flex items-center gap-1.5 rounded-lg border border-gray-200 bg-white px-2 py-1.5">
                <input type="color" value={(element as any).color || "#e5e7eb"} onChange={(e) => onUpdate({ ...element, color: e.target.value })} className="h-6 w-6 shrink-0 cursor-pointer rounded border-0 p-0" />
                <Input value={(element as any).color || "#e5e7eb"} onChange={(e) => onUpdate({ ...element, color: e.target.value })} className="h-6 border-0 bg-transparent px-0 font-mono text-[10px] shadow-none focus-visible:ring-0" />
              </div>
            </div>
          </div>
        </div>
      )}

      {/* 뱃지 설정 */}
      {element.type === "badge" && (
        <>
          <div className="space-y-2">
            <Label className="text-xs font-medium text-foreground">
              앞 라벨 (선택)
            </Label>
            <Input
              value={(element as CardBadgeElement).label || ""}
              onChange={(e) =>
                onUpdate({ ...element, label: e.target.value } as CardBadgeElement)
              }
              placeholder="예: 상태"
              className="h-9 text-sm"
            />
          </div>
          <div className="grid grid-cols-2 gap-2">
            <div className="space-y-2">
              <Label className="text-xs font-medium text-foreground">배경색</Label>
              <div className="flex items-center gap-2">
                <input
                  type="color"
                  value={(element as any).bgColor || "#dbeafe"}
                  onChange={(e) => onUpdate({ ...element, bgColor: e.target.value })}
                  className="w-9 h-9 rounded cursor-pointer border border-gray-200"
                />
                <Input
                  value={(element as any).bgColor || "#dbeafe"}
                  onChange={(e) => onUpdate({ ...element, bgColor: e.target.value })}
                  className="h-9 text-sm flex-1"
                />
              </div>
            </div>
            <div className="space-y-2">
              <Label className="text-xs font-medium text-foreground">텍스트 색상</Label>
              <div className="flex items-center gap-2">
                <input
                  type="color"
                  value={(element as any).textColor || "#1e40af"}
                  onChange={(e) => onUpdate({ ...element, textColor: e.target.value })}
                  className="w-9 h-9 rounded cursor-pointer border border-gray-200"
                />
                <Input
                  value={(element as any).textColor || "#1e40af"}
                  onChange={(e) => onUpdate({ ...element, textColor: e.target.value })}
                  className="h-9 text-sm flex-1"
                />
              </div>
            </div>
          </div>
        </>
      )}

      {/* 이미지 설정 */}
      {element.type === "image" && (
        <>
          <div className="space-y-2">
            <Label className="text-xs font-medium text-foreground">컬럼명 (이미지 URL)</Label>
            <Input
              value={(element as CardImageElement).columnName || ""}
              onChange={(e) => onUpdate({ ...element, columnName: e.target.value } as CardImageElement)}
              placeholder="image_url"
              className="h-9 text-sm"
            />
          </div>
          <div className="space-y-2">
            <Label className="text-xs font-medium text-foreground">표시 방식</Label>
            <Select
              value={(element as CardImageElement).objectFit || "contain"}
              onValueChange={(v) => onUpdate({ ...element, objectFit: v as "contain" | "cover" | "fill" } as CardImageElement)}
            >
              <SelectTrigger className="h-9 text-sm"><SelectValue /></SelectTrigger>
              <SelectContent>
                <SelectItem value="contain">비율 유지 (contain)</SelectItem>
                <SelectItem value="cover">영역 채우기 (cover)</SelectItem>
                <SelectItem value="fill">늘리기 (fill)</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div className="space-y-2">
            <Label className="text-xs font-medium text-foreground">높이 (px)</Label>
            <Input
              type="number"
              value={(element as CardImageElement).height || 80}
              onChange={(e) => onUpdate({ ...element, height: parseInt(e.target.value) || 80 } as CardImageElement)}
              className="h-9 text-sm"
            />
          </div>
        </>
      )}

      {/* 숫자/금액 설정 */}
      {element.type === "number" && (
        <>
          <div className="space-y-2">
            <Label className="text-xs font-medium text-foreground">라벨</Label>
            <Input
              value={(element as CardNumberElement).label}
              onChange={(e) => onUpdate({ ...element, label: e.target.value } as CardNumberElement)}
              placeholder="금액"
              className="h-9 text-sm"
            />
          </div>
          <div className="space-y-2">
            <Label className="text-xs font-medium text-foreground">컬럼명</Label>
            <Input
              value={(element as CardNumberElement).columnName || ""}
              onChange={(e) => onUpdate({ ...element, columnName: e.target.value } as CardNumberElement)}
              placeholder="amount"
              className="h-9 text-sm"
            />
          </div>
          <div className="space-y-2">
            <Label className="text-xs font-medium text-foreground">숫자 포맷</Label>
            <Select
              value={(element as CardNumberElement).numberFormat || "none"}
              onValueChange={(v) => onUpdate({ ...element, numberFormat: v as "none" | "comma" | "currency" } as CardNumberElement)}
            >
              <SelectTrigger className="h-9 text-sm"><SelectValue /></SelectTrigger>
              <SelectContent>
                <SelectItem value="none">없음</SelectItem>
                <SelectItem value="comma">콤마 (1,000)</SelectItem>
                <SelectItem value="currency">통화 (1,000원)</SelectItem>
              </SelectContent>
            </Select>
          </div>
          {(element as CardNumberElement).numberFormat === "currency" && (
            <div className="space-y-2">
              <Label className="text-xs font-medium text-foreground">통화 단위</Label>
              <Input
                value={(element as CardNumberElement).currencySuffix || "원"}
                onChange={(e) => onUpdate({ ...element, currencySuffix: e.target.value } as CardNumberElement)}
                placeholder="원"
                className="h-9 text-sm"
              />
            </div>
          )}
        </>
      )}

      {/* 날짜 설정 */}
      {element.type === "date" && (
        <>
          <div className="space-y-2">
            <Label className="text-xs font-medium text-foreground">라벨</Label>
            <Input
              value={(element as CardDateElement).label}
              onChange={(e) => onUpdate({ ...element, label: e.target.value } as CardDateElement)}
              placeholder="날짜"
              className="h-9 text-sm"
            />
          </div>
          <div className="space-y-2">
            <Label className="text-xs font-medium text-foreground">컬럼명</Label>
            <Input
              value={(element as CardDateElement).columnName || ""}
              onChange={(e) => onUpdate({ ...element, columnName: e.target.value } as CardDateElement)}
              placeholder="created_at"
              className="h-9 text-sm"
            />
          </div>
          <div className="space-y-2">
            <Label className="text-xs font-medium text-foreground">날짜 포맷</Label>
            <Input
              value={(element as CardDateElement).dateFormat || "YYYY-MM-DD"}
              onChange={(e) => onUpdate({ ...element, dateFormat: e.target.value } as CardDateElement)}
              placeholder="YYYY-MM-DD"
              className="h-9 text-sm"
            />
          </div>
        </>
      )}

      {/* 링크 설정 */}
      {element.type === "link" && (
        <>
          <div className="space-y-2">
            <Label className="text-xs font-medium text-foreground">라벨</Label>
            <Input
              value={(element as CardLinkElement).label}
              onChange={(e) => onUpdate({ ...element, label: e.target.value } as CardLinkElement)}
              placeholder="링크"
              className="h-9 text-sm"
            />
          </div>
          <div className="space-y-2">
            <Label className="text-xs font-medium text-foreground">컬럼명 (URL)</Label>
            <Input
              value={(element as CardLinkElement).columnName || ""}
              onChange={(e) => onUpdate({ ...element, columnName: e.target.value } as CardLinkElement)}
              placeholder="url"
              className="h-9 text-sm"
            />
          </div>
          <div className="space-y-2">
            <Label className="text-xs font-medium text-foreground">링크 텍스트</Label>
            <Input
              value={(element as CardLinkElement).linkText || ""}
              onChange={(e) => onUpdate({ ...element, linkText: e.target.value } as CardLinkElement)}
              placeholder="자동 (URL 표시)"
              className="h-9 text-sm"
            />
          </div>
          <div className="flex items-center gap-2">
            <Checkbox
              checked={(element as CardLinkElement).openInNewTab ?? true}
              onCheckedChange={(checked) => onUpdate({ ...element, openInNewTab: !!checked } as CardLinkElement)}
            />
            <Label className="text-xs">새 탭에서 열기</Label>
          </div>
        </>
      )}

      {/* 상태 설정 */}
      {element.type === "status" && (
        <>
          <div className="space-y-2">
            <Label className="text-xs font-medium text-foreground">컬럼명</Label>
            <Input
              value={(element as CardStatusElement).columnName || ""}
              onChange={(e) => onUpdate({ ...element, columnName: e.target.value } as CardStatusElement)}
              placeholder="status"
              className="h-9 text-sm"
            />
          </div>
          <div className="space-y-2">
            <Label className="text-xs font-medium text-foreground">상태 매핑</Label>
            {((element as CardStatusElement).statusMappings || []).map((mapping, i) => (
              <div key={i} className="flex items-center gap-1.5">
                <Input
                  value={mapping.value}
                  onChange={(e) => {
                    const mappings = [...((element as CardStatusElement).statusMappings || [])];
                    mappings[i] = { ...mappings[i], value: e.target.value };
                    onUpdate({ ...element, statusMappings: mappings } as CardStatusElement);
                  }}
                  placeholder="값"
                  className="h-8 text-xs flex-1"
                />
                <Input
                  value={mapping.label}
                  onChange={(e) => {
                    const mappings = [...((element as CardStatusElement).statusMappings || [])];
                    mappings[i] = { ...mappings[i], label: e.target.value };
                    onUpdate({ ...element, statusMappings: mappings } as CardStatusElement);
                  }}
                  placeholder="라벨"
                  className="h-8 text-xs flex-1"
                />
                <input
                  type="color"
                  value={mapping.color || "#3b82f6"}
                  onChange={(e) => {
                    const mappings = [...((element as CardStatusElement).statusMappings || [])];
                    mappings[i] = { ...mappings[i], color: e.target.value };
                    onUpdate({ ...element, statusMappings: mappings } as CardStatusElement);
                  }}
                  className="w-8 h-8 rounded cursor-pointer border border-gray-200"
                />
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => {
                    const mappings = [...((element as CardStatusElement).statusMappings || [])];
                    mappings.splice(i, 1);
                    onUpdate({ ...element, statusMappings: mappings } as CardStatusElement);
                  }}
                  className="h-8 w-8 p-0 text-destructive hover:text-destructive hover:bg-destructive/10"
                >
                  <Trash2 className="w-3 h-3" />
                </Button>
              </div>
            ))}
            <Button
              variant="outline"
              size="sm"
              onClick={() => {
                const mappings = [...((element as CardStatusElement).statusMappings || [])];
                mappings.push({ value: "", label: "", color: "#3b82f6" });
                onUpdate({ ...element, statusMappings: mappings } as CardStatusElement);
              }}
              className="w-full gap-2"
            >
              <Plus className="w-3.5 h-3.5" />매핑 추가
            </Button>
          </div>
        </>
      )}

      {/* 빈 공간 설정 */}
      {element.type === "spacer" && (
        <div className="space-y-2">
          <Label className="text-xs font-medium text-foreground">높이 (px)</Label>
          <Input
            type="number"
            value={(element as CardSpacerElement).height || 16}
            onChange={(e) => onUpdate({ ...element, height: parseInt(e.target.value) || 16 } as CardSpacerElement)}
            className="h-9 text-sm"
          />
        </div>
      )}

      {/* 고정 텍스트 설정 */}
      {element.type === "staticText" && (
        <>
          <div className="space-y-2">
            <Label className="text-xs font-medium text-foreground">텍스트</Label>
            <Textarea
              value={(element as CardStaticTextElement).text}
              onChange={(e) => onUpdate({ ...element, text: e.target.value } as CardStaticTextElement)}
              placeholder="텍스트 입력"
              className="text-sm min-h-[60px]"
            />
          </div>
          <div className="grid grid-cols-2 gap-2">
            <div className="space-y-2">
              <Label className="text-xs font-medium text-foreground">글꼴 크기</Label>
              <Input
                type="number"
                value={(element as CardStaticTextElement).fontSize || 13}
                onChange={(e) => onUpdate({ ...element, fontSize: parseInt(e.target.value) || 13 } as CardStaticTextElement)}
                className="h-9 text-sm"
              />
            </div>
            <div className="space-y-2">
              <Label className="text-xs font-medium text-foreground">굵기</Label>
              <Select
                value={(element as CardStaticTextElement).fontWeight || "normal"}
                onValueChange={(v) => onUpdate({ ...element, fontWeight: v as "normal" | "bold" } as CardStaticTextElement)}
              >
                <SelectTrigger className="h-9 text-sm"><SelectValue /></SelectTrigger>
                <SelectContent>
                  <SelectItem value="normal">보통</SelectItem>
                  <SelectItem value="bold">굵게</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
          <div className="grid grid-cols-2 gap-2">
            <div className="space-y-2">
              <Label className="text-xs font-medium text-foreground">색상</Label>
              <div className="flex items-center gap-2">
                <input
                  type="color"
                  value={(element as CardStaticTextElement).color || "#000000"}
                  onChange={(e) => onUpdate({ ...element, color: e.target.value } as CardStaticTextElement)}
                  className="w-9 h-9 rounded cursor-pointer border border-gray-200"
                />
                <Input
                  value={(element as CardStaticTextElement).color || "#000000"}
                  onChange={(e) => onUpdate({ ...element, color: e.target.value } as CardStaticTextElement)}
                  className="h-9 text-sm flex-1"
                />
              </div>
            </div>
            <div className="space-y-2">
              <Label className="text-xs font-medium text-foreground">정렬</Label>
              <Select
                value={(element as CardStaticTextElement).textAlign || "left"}
                onValueChange={(v) => onUpdate({ ...element, textAlign: v as "left" | "center" | "right" } as CardStaticTextElement)}
              >
                <SelectTrigger className="h-9 text-sm"><SelectValue /></SelectTrigger>
                <SelectContent>
                  <SelectItem value="left">왼쪽</SelectItem>
                  <SelectItem value="center">가운데</SelectItem>
                  <SelectItem value="right">오른쪽</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        </>
      )}
    </div>
  );
}

export function CardCanvasEditor({ rows, onRowsChange }: CardCanvasEditorProps) {
  const [selectedCell, setSelectedCell] = useState<{
    rowIndex: number;
    cellIndex: number;
  } | null>(null);
  const [collapsedRows, setCollapsedRows] = useState<Set<number>>(new Set());

  const toggleRowCollapse = (rowIndex: number) => {
    setCollapsedRows((prev) => {
      const next = new Set(prev);
      if (next.has(rowIndex)) next.delete(rowIndex);
      else next.add(rowIndex);
      return next;
    });
  };

  const handleAddRow = () => {
    const newRow: CardLayoutRow = {
      id: generateId(),
      gridColumns: 2,
      elements: [],
    };
    onRowsChange([...rows, newRow]);
  };

  const handleDeleteRow = (rowIndex: number) => {
    onRowsChange(rows.filter((_, i) => i !== rowIndex));
    setSelectedCell(null);
  };

  const handleMoveRow = (rowIndex: number, direction: "up" | "down") => {
    const newIndex = direction === "up" ? rowIndex - 1 : rowIndex + 1;
    if (newIndex < 0 || newIndex >= rows.length) return;

    const newRows = [...rows];
    [newRows[rowIndex], newRows[newIndex]] = [newRows[newIndex], newRows[rowIndex]];
    onRowsChange(newRows);
  };

  const handleGridColumnsChange = (rowIndex: number, gridColumns: number) => {
    const newRows = [...rows];
    newRows[rowIndex] = { ...newRows[rowIndex], gridColumns };
    onRowsChange(newRows);
  };

  const handleDropElement = useCallback(
    (rowIndex: number, cellIndex: number, elementType: CardElementType) => {
      const newRows = [...rows];
      const row = newRows[rowIndex];
      const newElement = createDefaultElement(elementType);

      const existingElements = [...row.elements];
      if (cellIndex < existingElements.length && existingElements[cellIndex]) {
        existingElements.splice(cellIndex, 0, newElement);
      } else if (cellIndex < existingElements.length) {
        existingElements[cellIndex] = newElement;
      } else {
        existingElements.push(newElement);
      }

      newRows[rowIndex] = { ...row, elements: existingElements };
      onRowsChange(newRows);
      setSelectedCell({ rowIndex, cellIndex });
    },
    [rows, onRowsChange],
  );

  const handleCellClick = (rowIndex: number, cellIndex: number) => {
    const element = rows[rowIndex]?.elements[cellIndex];
    if (element) {
      setSelectedCell({ rowIndex, cellIndex });
    } else {
      setSelectedCell(null);
    }
  };

  const handleElementUpdate = (element: CardElement) => {
    if (!selectedCell) return;
    const { rowIndex, cellIndex } = selectedCell;
    const newRows = [...rows];
    const newElements = [...newRows[rowIndex].elements];
    newElements[cellIndex] = element;
    newRows[rowIndex] = { ...newRows[rowIndex], elements: newElements };
    onRowsChange(newRows);
  };

  const handleMoveElement = useCallback(
    (fromRow: number, fromCell: number, toRow: number, toCell: number) => {
      if (fromRow === toRow && fromCell === toCell) return;
      const newRows = [...rows];

      const sourceElement = newRows[fromRow].elements[fromCell];
      if (!sourceElement) return;

      const sourceElements = [...newRows[fromRow].elements];
      sourceElements.splice(fromCell, 1);
      newRows[fromRow] = { ...newRows[fromRow], elements: sourceElements };

      const targetElements = [...newRows[toRow].elements];
      if (toCell < targetElements.length) {
        targetElements.splice(toCell, 0, sourceElement);
      } else {
        targetElements.push(sourceElement);
      }
      newRows[toRow] = { ...newRows[toRow], elements: targetElements };

      onRowsChange(newRows);
      setSelectedCell(null);
    },
    [rows, onRowsChange],
  );

  const handleQuickDelete = useCallback(
    (rowIndex: number, cellIndex: number) => {
      const newRows = [...rows];
      const newElements = [...newRows[rowIndex].elements];
      newElements.splice(cellIndex, 1);
      newRows[rowIndex] = { ...newRows[rowIndex], elements: newElements };
      onRowsChange(newRows);
      if (selectedCell?.rowIndex === rowIndex && selectedCell?.cellIndex === cellIndex) {
        setSelectedCell(null);
      }
    },
    [rows, onRowsChange, selectedCell],
  );

  const handleElementDelete = () => {
    if (!selectedCell) return;
    const { rowIndex, cellIndex } = selectedCell;
    const newRows = [...rows];
    const newElements = [...newRows[rowIndex].elements];
    newElements.splice(cellIndex, 1);
    newRows[rowIndex] = { ...newRows[rowIndex], elements: newElements };
    onRowsChange(newRows);
    setSelectedCell(null);
  };

  const selectedElement =
    selectedCell !== null
      ? rows[selectedCell.rowIndex]?.elements[selectedCell.cellIndex]
      : null;

  return (
    <div className="space-y-4">
      {/* 캔버스 영역 */}
      <div className="bg-white border border-border rounded-xl p-4 space-y-3">
        <div className="text-sm font-bold text-gray-800 mb-2">
          레이아웃 캔버스
        </div>

        {rows.map((row, rowIndex) => {
          const isCollapsed = collapsedRows.has(rowIndex);
          const hasElements = row.elements.length > 0;

          return (
          <div
            key={row.id}
            className="border border-gray-200 rounded-lg overflow-hidden"
          >
            {/* 행 헤더 */}
            <div className={`flex items-center justify-between px-3 py-2 ${isCollapsed ? "bg-gray-50" : ""}`}>
              <div className="flex items-center gap-2">
                <button
                  onClick={() => toggleRowCollapse(rowIndex)}
                  className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors"
                >
                  <ChevronRight className={`w-3.5 h-3.5 transition-transform ${isCollapsed ? "" : "rotate-90"}`} />
                  Row {rowIndex + 1}
                  {hasElements && (
                    <span className="text-[10px] text-blue-600 bg-blue-50 rounded px-1">
                      {row.elements.length}개
                    </span>
                  )}
                </button>
                {!isCollapsed && (
                  <div className="flex items-center gap-2">
                    <div className="flex items-center gap-1">
                      <Label className="text-[10px] text-muted-foreground">열</Label>
                      <Input
                        type="number"
                        min={1}
                        max={6}
                        value={row.gridColumns}
                        onChange={(e) =>
                          handleGridColumnsChange(
                            rowIndex,
                            parseInt(e.target.value) || 1,
                          )
                        }
                        className="w-12 h-6 text-[10px] text-center"
                      />
                    </div>
                    <div className="flex items-center gap-1">
                      <Label className="text-[10px] text-muted-foreground">아래 여백</Label>
                      <Select
                        value={row.marginBottom || "0px"}
                        onValueChange={(v) => {
                          const newRows = [...rows];
                          newRows[rowIndex] = { ...newRows[rowIndex], marginBottom: v };
                          onRowsChange(newRows);
                        }}
                      >
                        <SelectTrigger className="h-6 w-16 text-[10px]"><SelectValue /></SelectTrigger>
                        <SelectContent>
                          <SelectItem value="0px">없음</SelectItem>
                          <SelectItem value="2px">보통</SelectItem>
                          <SelectItem value="14px">넓게</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                  </div>
                )}
              </div>
              <div className="flex items-center gap-1">
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => handleMoveRow(rowIndex, "up")}
                  disabled={rowIndex === 0}
                  className="h-7 w-7 p-0"
                >
                  <ChevronUp className="w-3.5 h-3.5" />
                </Button>
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => handleMoveRow(rowIndex, "down")}
                  disabled={rowIndex === rows.length - 1}
                  className="h-7 w-7 p-0"
                >
                  <ChevronDown className="w-3.5 h-3.5" />
                </Button>
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => handleDeleteRow(rowIndex)}
                  disabled={rows.length <= 1}
                  className="h-7 w-7 p-0 text-destructive hover:text-destructive hover:bg-destructive/10"
                >
                  <Trash2 className="w-3.5 h-3.5" />
                </Button>
              </div>
            </div>

            {/* 셀 그리드 (접힌 상태에서는 숨김) */}
            {!isCollapsed && (
              <div
                className="grid gap-2 px-3 pb-3"
                style={{ gridTemplateColumns: `repeat(${row.gridColumns}, 1fr)` }}
              >
                {Array.from({ length: row.gridColumns }).map((_, cellIndex) => {
                  const element = row.elements[cellIndex] || null;
                  const isSelected =
                    selectedCell?.rowIndex === rowIndex &&
                    selectedCell?.cellIndex === cellIndex;
                  return (
                    <DropZone
                      key={cellIndex}
                      rowIndex={rowIndex}
                      cellIndex={cellIndex}
                      element={element}
                      isSelected={isSelected}
                      onClick={() => handleCellClick(rowIndex, cellIndex)}
                      onDrop={(type) => handleDropElement(rowIndex, cellIndex, type)}
                      onDelete={element ? () => handleQuickDelete(rowIndex, cellIndex) : undefined}
                      onMove={(fromRow, fromCell) => handleMoveElement(fromRow, fromCell, rowIndex, cellIndex)}
                      colspan={element?.colspan || 1}
                    />
                  );
                })}
              </div>
            )}
          </div>
          );
        })}

        {/* 행 추가 버튼 */}
        <Button
          variant="outline"
          size="sm"
          onClick={handleAddRow}
          className="w-full gap-2"
        >
          <Plus className="w-3.5 h-3.5" />행 추가
        </Button>
      </div>

      {/* 선택된 셀 설정 다이얼로그 */}
      {selectedElement && (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center"
          onClick={() => setSelectedCell(null)}
        >
          <div className="absolute inset-0 bg-black/25" />
          <div
            className="relative z-10 w-[520px] max-h-[70vh] bg-white rounded-xl shadow-2xl flex flex-col"
            onClick={(e) => e.stopPropagation()}
          >
            <div className="px-5 py-4 border-b flex items-center gap-2">
              <span className="text-gray-500">{getElementIcon(selectedElement.type)}</span>
              <span className="text-base font-bold text-foreground">
                {TYPE_FIXED_LABELS[selectedElement.type] || selectedElement.type} 설정
              </span>
            </div>
            <div className="flex-1 overflow-y-auto px-5 py-4">
              <CellSettingsPanel
                element={selectedElement}
                onUpdate={handleElementUpdate}
                maxColspan={rows[selectedCell!.rowIndex].gridColumns}
              />
            </div>
            <div className="px-5 py-3 border-t flex items-center justify-end gap-2">
              <Button
                size="sm"
                className="text-xs bg-blue-600 hover:bg-blue-700 text-white"
                onClick={() => setSelectedCell(null)}
              >
                확인
              </Button>
              <Button
                size="sm"
                variant="outline"
                className="text-xs text-red-600 border-red-300 hover:bg-red-50 hover:text-red-700"
                onClick={() => setSelectedCell(null)}
              >
                취소
              </Button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}