"use client";

import React, { useState, useEffect } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import { 
  Mail, 
  Type, 
  Image as ImageIcon, 
  Square, 
  MousePointer,
  Eye,
  Send,
  Save,
  Plus,
  Trash2,
  Settings,
  Upload,
  X,
  GripVertical,
  ChevronUp,
  ChevronDown,
  LayoutTemplate,
  Table2,
  AlertCircle,
  Minus,
  Building2,
  ListOrdered
} from "lucide-react";
import { getMailTemplates } from "@/lib/api/mail";

export interface MailComponent {
  id: string;
  type: "text" | "button" | "image" | "spacer" | "table" | "header" | "infoTable" | "alertBox" | "divider" | "footer" | "numberedList";
  content?: string;
  text?: string;
  url?: string;
  src?: string;
  height?: number;
  styles?: Record<string, string>;
  // 헤더 컴포넌트용
  logoSrc?: string;
  brandName?: string;
  sendDate?: string;
  headerBgColor?: string;
  // 정보 테이블용
  rows?: Array<{ label: string; value: string }>;
  tableTitle?: string;
  // 강조 박스용
  alertType?: "info" | "warning" | "danger" | "success";
  alertTitle?: string;
  // 푸터용
  companyName?: string;
  ceoName?: string;
  businessNumber?: string;
  address?: string;
  phone?: string;
  email?: string;
  copyright?: string;
  // 번호 리스트용
  listItems?: string[];
  listTitle?: string;
}

export interface QueryConfig {
  id: string;
  name: string;
  sql: string;
  parameters: Array<{
    name: string;
    type: string;
    value?: any;
  }>;
}

interface MailDesignerProps {
  templateId?: string;
  onSave?: (data: any) => void;
  onPreview?: (data: any) => void;
  onSend?: (data: any) => void;
}

export default function MailDesigner({
  templateId,
  onSave,
  onPreview,
  onSend,
}: MailDesignerProps) {
  const [components, setComponents] = useState<MailComponent[]>([]);
  const [selectedComponent, setSelectedComponent] = useState<string | null>(null);
  const [templateName, setTemplateName] = useState("");
  const [subject, setSubject] = useState("");
  const [queries, setQueries] = useState<QueryConfig[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  
  // 드래그 앤 드롭 상태
  const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
  const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);

  // 템플릿 데이터 로드 (수정 모드)
  useEffect(() => {
    if (templateId) {
      loadTemplate(templateId);
    }
  }, [templateId]);

  const loadTemplate = async (id: string) => {
    try {
      setIsLoading(true);
      const templates = await getMailTemplates();
      const template = templates.find(t => t.id === id);
      
      if (template) {
        setTemplateName(template.name);
        setSubject(template.subject);
        setComponents(template.components || []);
        console.log('✅ 템플릿 로드 완료:', {
          name: template.name,
          components: template.components?.length || 0
        });
      }
    } catch (error) {
      console.error('❌ 템플릿 로드 실패:', error);
    } finally {
      setIsLoading(false);
    }
  };

  // 컴포넌트 타입 정의
  const componentTypes = [
    // 레이아웃 컴포넌트
    { type: "header", icon: LayoutTemplate, label: "헤더", color: "bg-indigo-100 hover:bg-indigo-200", category: "layout" },
    { type: "divider", icon: Minus, label: "구분선", color: "bg-gray-100 hover:bg-gray-200", category: "layout" },
    { type: "spacer", icon: Square, label: "여백", color: "bg-muted hover:bg-muted/80", category: "layout" },
    { type: "footer", icon: Building2, label: "푸터", color: "bg-slate-100 hover:bg-slate-200", category: "layout" },
    // 컨텐츠 컴포넌트
    { type: "text", icon: Type, label: "텍스트", color: "bg-primary/20 hover:bg-blue-200", category: "content" },
    { type: "button", icon: MousePointer, label: "버튼", color: "bg-success/20 hover:bg-success/30", category: "content" },
    { type: "image", icon: ImageIcon, label: "이미지", color: "bg-purple-100 hover:bg-purple-200", category: "content" },
    { type: "infoTable", icon: Table2, label: "정보 테이블", color: "bg-cyan-100 hover:bg-cyan-200", category: "content" },
    { type: "alertBox", icon: AlertCircle, label: "안내 박스", color: "bg-amber-100 hover:bg-amber-200", category: "content" },
    { type: "numberedList", icon: ListOrdered, label: "번호 리스트", color: "bg-emerald-100 hover:bg-emerald-200", category: "content" },
  ];

  // 컴포넌트 추가
  const addComponent = (type: string) => {
    const newComponent: MailComponent = {
      id: `comp-${Date.now()}`,
      type: type as any,
      content: type === "text" ? "" : undefined,
      text: type === "button" ? "버튼 텍스트" : undefined,
      url: type === "button" || type === "image" ? "" : undefined,
      src: type === "image" ? "https://placehold.co/600x200/e5e7eb/64748b?text=이미지를+업로드하세요" : undefined,
      height: type === "spacer" ? 30 : type === "divider" ? 1 : undefined,
      styles: {
        padding: type === "divider" ? "0" : "10px",
        backgroundColor: type === "button" ? "#007bff" : "transparent",
        color: type === "button" ? "#fff" : "#333",
      },
      // 헤더 기본값
      logoSrc: type === "header" ? "" : undefined,
      brandName: type === "header" ? "회사명" : undefined,
      sendDate: type === "header" ? new Date().toLocaleDateString("ko-KR") : undefined,
      headerBgColor: type === "header" ? "#f8f9fa" : undefined,
      // 정보 테이블 기본값
      rows: type === "infoTable" ? [{ label: "항목", value: "내용" }] : undefined,
      tableTitle: type === "infoTable" ? "" : undefined,
      // 안내 박스 기본값
      alertType: type === "alertBox" ? "info" : undefined,
      alertTitle: type === "alertBox" ? "안내" : undefined,
      // 푸터 기본값
      companyName: type === "footer" ? "회사명" : undefined,
      ceoName: type === "footer" ? "" : undefined,
      businessNumber: type === "footer" ? "" : undefined,
      address: type === "footer" ? "" : undefined,
      phone: type === "footer" ? "" : undefined,
      email: type === "footer" ? "" : undefined,
      copyright: type === "footer" ? `© ${new Date().getFullYear()} All rights reserved.` : undefined,
      // 번호 리스트 기본값
      listItems: type === "numberedList" ? ["첫 번째 항목"] : undefined,
      listTitle: type === "numberedList" ? "" : undefined,
    };

    setComponents([...components, newComponent]);
  };

  // 드래그 앤 드롭 핸들러
  const handleDragStart = (index: number) => {
    setDraggedIndex(index);
  };

  const handleDragOver = (e: React.DragEvent, index: number) => {
    e.preventDefault();
    if (draggedIndex !== null && draggedIndex !== index) {
      setDragOverIndex(index);
    }
  };

  const handleDrop = (index: number) => {
    if (draggedIndex !== null && draggedIndex !== index) {
      moveComponent(draggedIndex, index);
    }
    setDraggedIndex(null);
    setDragOverIndex(null);
  };

  const handleDragEnd = () => {
    setDraggedIndex(null);
    setDragOverIndex(null);
  };

  const moveComponent = (fromIndex: number, toIndex: number) => {
    const newComponents = [...components];
    const [movedItem] = newComponents.splice(fromIndex, 1);
    newComponents.splice(toIndex, 0, movedItem);
    setComponents(newComponents);
  };

  // 컴포넌트 삭제
  const removeComponent = (id: string) => {
    setComponents(components.filter(c => c.id !== id));
    if (selectedComponent === id) {
      setSelectedComponent(null);
    }
  };

  // 컴포넌트 선택
  const selectComponent = (id: string) => {
    setSelectedComponent(id);
  };

  // 컴포넌트 내용 업데이트
  const updateComponent = (id: string, updates: Partial<MailComponent>) => {
    setComponents(
      components.map(c => c.id === id ? { ...c, ...updates } : c)
    );
  };

  // 저장
  const handleSave = () => {
    const data = {
      name: templateName,
      subject,
      components,
      queries,
    };

    if (onSave) {
      onSave(data);
    }
  };

  // 미리보기
  const handlePreview = () => {
    if (onPreview) {
      onPreview({ components, subject });
    }
  };

  // 발송
  const handleSend = () => {
    if (onSend) {
      onSend({ components, subject, queries });
    }
  };

  // 선택된 컴포넌트 가져오기
  const selected = components.find(c => c.id === selectedComponent);

  // 로딩 중일 때
  if (isLoading) {
    return (
      <div className="flex items-center justify-center h-screen bg-muted/30">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-orange-500 mx-auto mb-4"></div>
          <p className="text-muted-foreground">템플릿을 불러오는 중...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="flex h-screen bg-muted/30">
      {/* 왼쪽: 컴포넌트 팔레트 */}
      <div className="w-64 bg-white border-r p-4 space-y-4 overflow-y-auto">
        {/* 레이아웃 컴포넌트 */}
        <div>
          <h3 className="text-sm font-semibold text-foreground mb-3 flex items-center">
            <LayoutTemplate className="w-4 h-4 mr-2 text-indigo-500" />
            레이아웃
          </h3>
          <div className="space-y-2">
            {componentTypes.filter(c => c.category === "layout").map(({ type, icon: Icon, label, color }) => (
              <Button
                key={type}
                onClick={() => addComponent(type)}
                variant="outline"
                className={`w-full justify-start ${color} border`}
              >
                <Icon className="w-4 h-4 mr-2" />
                {label}
              </Button>
            ))}
          </div>
        </div>

        {/* 컨텐츠 컴포넌트 */}
        <div>
          <h3 className="text-sm font-semibold text-foreground mb-3 flex items-center">
            <Mail className="w-4 h-4 mr-2 text-primary" />
            컨텐츠
          </h3>
          <div className="space-y-2">
            {componentTypes.filter(c => c.category === "content").map(({ type, icon: Icon, label, color }) => (
              <Button
                key={type}
                onClick={() => addComponent(type)}
                variant="outline"
                className={`w-full justify-start ${color} border`}
              >
                <Icon className="w-4 h-4 mr-2" />
                {label}
              </Button>
            ))}
          </div>
        </div>

        {/* 템플릿 정보 */}
        <Card>
          <CardHeader>
            <CardTitle className="text-sm">템플릿 정보</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            <div>
              <Label className="text-xs">템플릿 이름</Label>
              <Input
                value={templateName}
                onChange={(e) => setTemplateName(e.target.value)}
                placeholder="예: 고객 환영 메일"
                className="mt-1"
              />
            </div>
            <div>
              <Label className="text-xs">제목</Label>
              <Input
                value={subject}
                onChange={(e) => setSubject(e.target.value)}
                placeholder="예: {customer_name}님 환영합니다!"
                className="mt-1"
              />
            </div>
          </CardContent>
        </Card>

        {/* 액션 버튼 */}
        <div className="space-y-2">
          <Button onClick={handleSave} className="w-full" variant="default">
            <Save className="w-4 h-4 mr-2" />
            저장
          </Button>
          <Button onClick={handlePreview} className="w-full" variant="outline">
            <Eye className="w-4 h-4 mr-2" />
            미리보기
          </Button>
          <Button onClick={handleSend} variant="default" className="w-full">
            <Send className="w-4 h-4 mr-2" />
            발송
          </Button>
        </div>
      </div>

      {/* 중앙: 캔버스 */}
      <div className="flex-1 p-8 overflow-y-auto">
        <Card className="max-w-3xl mx-auto">
          <CardHeader className="bg-gradient-to-r from-muted to-muted border-b">
            <CardTitle className="flex items-center justify-between">
              <span>메일 미리보기</span>
              <span className="text-sm text-muted-foreground font-normal">
                {components.length}개 컴포넌트
              </span>
            </CardTitle>
          </CardHeader>
          <CardContent className="p-0">
            {/* 제목 영역 */}
            {subject && (
              <div className="p-6 bg-muted/30 border-b">
                <p className="text-sm text-muted-foreground">제목:</p>
                <p className="font-semibold text-lg">{subject}</p>
              </div>
            )}

            {/* 컴포넌트 렌더링 */}
            <div className="p-6 pl-14 space-y-4">
              {components.length === 0 ? (
                <div className="text-center py-16 text-muted-foreground/50">
                  <Mail className="w-16 h-16 mx-auto mb-4 opacity-20" />
                  <p>왼쪽에서 컴포넌트를 추가하세요</p>
                </div>
              ) : (
                components.map((comp, index) => (
                  <div
                    key={comp.id}
                    draggable
                    onDragStart={() => handleDragStart(index)}
                    onDragOver={(e) => handleDragOver(e, index)}
                    onDrop={() => handleDrop(index)}
                    onDragEnd={handleDragEnd}
                    onClick={() => selectComponent(comp.id)}
                    className={`relative group cursor-pointer rounded-lg transition-all ${
                      selectedComponent === comp.id
                        ? "ring-2 ring-orange-500 bg-orange-50/30"
                        : "hover:ring-2 hover:ring-gray-300"
                    } ${draggedIndex === index ? "opacity-50 scale-95" : ""} ${
                      dragOverIndex === index ? "ring-2 ring-primary ring-dashed bg-primary/10" : ""
                    }`}
                    style={comp.styles}
                  >
                    {/* 드래그 핸들 & 순서 이동 버튼 */}
                    <div className="absolute -left-10 top-1/2 -translate-y-1/2 flex flex-col items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                      <button
                        onClick={(e) => { e.stopPropagation(); if (index > 0) moveComponent(index, index - 1); }}
                        className="p-1 hover:bg-gray-200 rounded disabled:opacity-30"
                        disabled={index === 0}
                      >
                        <ChevronUp className="w-3 h-3" />
                      </button>
                      <div className="cursor-grab active:cursor-grabbing p-1 hover:bg-gray-200 rounded">
                        <GripVertical className="w-4 h-4 text-gray-400" />
                      </div>
                      <button
                        onClick={(e) => { e.stopPropagation(); if (index < components.length - 1) moveComponent(index, index + 1); }}
                        className="p-1 hover:bg-gray-200 rounded disabled:opacity-30"
                        disabled={index === components.length - 1}
                      >
                        <ChevronDown className="w-3 h-3" />
                      </button>
                    </div>

                    {/* 순서 배지 */}
                    <div className="absolute -left-10 top-0 text-xs text-gray-400 opacity-0 group-hover:opacity-100">
                      {index + 1}
                    </div>

                    {/* 삭제 버튼 */}
                    <button
                      onClick={(e) => {
                        e.stopPropagation();
                        removeComponent(comp.id);
                      }}
                      className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity bg-destructive text-white rounded-full p-1 hover:bg-destructive/90"
                    >
                      <Trash2 className="w-4 h-4" />
                    </button>

                    {/* 컴포넌트 내용 */}
                    {comp.type === "text" && (
                      <div dangerouslySetInnerHTML={{ __html: comp.content || "" }} />
                    )}
                    {comp.type === "button" && (
                      <a
                        href={comp.url}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="inline-block px-6 py-3 rounded-md"
                        style={comp.styles}
                      >
                        {comp.text}
                      </a>
                    )}
                    {comp.type === "image" && (
                      <img src={comp.src} alt="메일 이미지" className="w-full rounded" />
                    )}
                    {comp.type === "spacer" && (
                      <div style={{ height: `${comp.height}px` }} className="bg-gray-100 rounded flex items-center justify-center text-xs text-gray-400">
                        여백 {comp.height}px
                      </div>
                    )}
                    {comp.type === "header" && (
                      <div className="p-4 rounded-lg" style={{ backgroundColor: comp.headerBgColor || "#f8f9fa" }}>
                        <div className="flex items-center justify-between">
                          <div className="flex items-center gap-3">
                            {comp.logoSrc && <img src={comp.logoSrc} alt="로고" className="h-10" />}
                            <span className="font-bold text-lg">{comp.brandName}</span>
                          </div>
                          <span className="text-sm text-gray-500">{comp.sendDate}</span>
                        </div>
                      </div>
                    )}
                    {comp.type === "infoTable" && (
                      <div className="border rounded-lg overflow-hidden">
                        {comp.tableTitle && (
                          <div className="bg-gray-50 px-4 py-2 font-semibold border-b">{comp.tableTitle}</div>
                        )}
                        <table className="w-full">
                          <tbody>
                            {comp.rows?.map((row, i) => (
                              <tr key={i} className={i % 2 === 0 ? "bg-white" : "bg-gray-50"}>
                                <td className="px-4 py-2 font-medium text-gray-600 w-1/3 border-r">{row.label}</td>
                                <td className="px-4 py-2">{row.value}</td>
                              </tr>
                            ))}
                          </tbody>
                        </table>
                      </div>
                    )}
                    {comp.type === "alertBox" && (
                      <div className={`p-4 rounded-lg border-l-4 ${
                        comp.alertType === "info" ? "bg-blue-50 border-blue-500 text-blue-800" :
                        comp.alertType === "warning" ? "bg-amber-50 border-amber-500 text-amber-800" :
                        comp.alertType === "danger" ? "bg-red-50 border-red-500 text-red-800" :
                        "bg-emerald-50 border-emerald-500 text-emerald-800"
                      }`}>
                        {comp.alertTitle && <div className="font-bold mb-1">{comp.alertTitle}</div>}
                        <div>{comp.content}</div>
                      </div>
                    )}
                    {comp.type === "divider" && (
                      <hr className="border-gray-300" style={{ borderWidth: `${comp.height || 1}px` }} />
                    )}
                    {comp.type === "footer" && (
                      <div className="text-center text-sm text-gray-500 py-4 border-t bg-gray-50">
                        {comp.companyName && <div className="font-semibold text-gray-700">{comp.companyName}</div>}
                        {(comp.ceoName || comp.businessNumber) && (
                          <div className="mt-1">
                            {comp.ceoName && <span>대표: {comp.ceoName}</span>}
                            {comp.ceoName && comp.businessNumber && <span className="mx-2">|</span>}
                            {comp.businessNumber && <span>사업자등록번호: {comp.businessNumber}</span>}
                          </div>
                        )}
                        {comp.address && <div className="mt-1">{comp.address}</div>}
                        {(comp.phone || comp.email) && (
                          <div className="mt-1">
                            {comp.phone && <span>Tel: {comp.phone}</span>}
                            {comp.phone && comp.email && <span className="mx-2">|</span>}
                            {comp.email && <span>Email: {comp.email}</span>}
                          </div>
                        )}
                        {comp.copyright && <div className="mt-2 text-xs text-gray-400">{comp.copyright}</div>}
                      </div>
                    )}
                    {comp.type === "numberedList" && (
                      <div className="p-4">
                        {comp.listTitle && <div className="font-semibold mb-2">{comp.listTitle}</div>}
                        <ol className="list-decimal list-inside space-y-1">
                          {comp.listItems?.map((item, i) => (
                            <li key={i}>{item}</li>
                          ))}
                        </ol>
                      </div>
                    )}
                  </div>
                ))
              )}
            </div>
          </CardContent>
        </Card>
      </div>

      {/* 오른쪽: 속성 패널 */}
      <div className="w-80 bg-background border-l p-4 overflow-y-auto">
        {selected ? (
          <div className="space-y-4">
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-sm font-semibold text-foreground flex items-center">
                <Settings className="w-4 h-4 mr-2 text-primary" />
                속성 편집
              </h3>
              <Button
                size="sm"
                variant="ghost"
                onClick={() => setSelectedComponent(null)}
              >
                닫기
              </Button>
            </div>

            {/* 텍스트 컴포넌트 */}
            {selected.type === "text" && (
              <div className="space-y-4">
                <div>
                  <Label className="text-sm font-medium text-foreground flex items-center gap-2">
                    내용
                  </Label>
                  <p className="text-xs text-muted-foreground mt-1 mb-2">
                    메일에 표시될 텍스트를 입력하세요
                  </p>
                  <Textarea
                    value={(() => {
                      // 🎯 HTML 태그 자동 제거 (비개발자 친화적)
                      const content = selected.content || "";
                      const tmp = document.createElement("DIV");
                      tmp.innerHTML = content;
                      return tmp.textContent || tmp.innerText || "";
                    })()}
                    onChange={(e) =>
                      updateComponent(selected.id, { content: e.target.value })
                    }
                    onFocus={(e) => {
                      // 🎯 클릭 시 placeholder 같은 텍스트 자동 제거
                      const currentValue = e.target.value.trim();
                      if (currentValue === '텍스트를 입력하세요' || 
                          currentValue === '텍스트를 입력하세요...') {
                        e.target.value = '';
                        updateComponent(selected.id, { content: '' });
                      }
                    }}
                    rows={8}
                    className="mt-1"
                    placeholder="예) 안녕하세요! 특별한 소식을 전해드립니다..."
                  />
                </div>
              </div>
            )}

            {/* 버튼 컴포넌트 */}
            {selected.type === "button" && (
              <div className="space-y-4">
                <div>
                  <Label className="text-sm font-medium text-foreground flex items-center gap-2">
                    버튼 텍스트
                  </Label>
                  <p className="text-xs text-muted-foreground mt-1 mb-2">
                    버튼에 표시될 글자를 입력하세요
                  </p>
                  <Input
                    value={selected.text || ""}
                    onChange={(e) =>
                      updateComponent(selected.id, { text: e.target.value })
                    }
                    className="mt-1"
                    placeholder="예) 자세히 보기, 지금 시작하기"
                  />
                </div>
                <div>
                  <Label className="text-sm font-medium text-foreground flex items-center gap-2">
                    연결할 주소
                  </Label>
                  <p className="text-xs text-muted-foreground mt-1 mb-2">
                    버튼을 클릭하면 이동할 웹사이트 주소를 입력하세요
                  </p>
                  <Input
                    value={selected.url || ""}
                    onChange={(e) =>
                      updateComponent(selected.id, { url: e.target.value })
                    }
                    className="mt-1"
                    placeholder="예) https://www.example.com"
                  />
                </div>
                <div>
                  <Label className="text-sm font-medium text-foreground flex items-center gap-2">
                    버튼 색상
                  </Label>
                  <p className="text-xs text-muted-foreground mt-1 mb-2">
                    버튼의 배경색을 선택하세요
                  </p>
                  <div className="flex items-center gap-3">
                    <Input
                      type="color"
                      value={selected.styles?.backgroundColor || "#007bff"}
                      onChange={(e) =>
                        updateComponent(selected.id, {
                          styles: { ...selected.styles, backgroundColor: e.target.value },
                        })
                      }
                      className="w-16 h-10 cursor-pointer"
                    />
                    <span className="text-sm text-muted-foreground">
                      {selected.styles?.backgroundColor || "#007bff"}
                    </span>
                  </div>
                </div>
              </div>
            )}

            {/* 이미지 컴포넌트 */}
            {selected.type === "image" && (
              <div className="space-y-4">
                <div>
                  <Label className="text-sm font-medium text-foreground flex items-center gap-2">
                    이미지 선택
                  </Label>
                  <p className="text-xs text-muted-foreground mt-1 mb-2">
                    컴퓨터에서 이미지 파일을 선택하세요
                  </p>
                  
                  {/* 파일 업로드 버튼 */}
                  <div className="space-y-3">
                    <Button
                      type="button"
                      variant="outline"
                      className="w-full"
                      onClick={() => {
                        const input = document.createElement('input');
                        input.type = 'file';
                        input.accept = 'image/*';
                        input.onchange = (e: any) => {
                          const file = e.target?.files?.[0];
                          if (file) {
                            // 파일을 Base64로 변환
                            const reader = new FileReader();
                            reader.onload = (event) => {
                              updateComponent(selected.id, { 
                                src: event.target?.result as string 
                              });
                            };
                            reader.readAsDataURL(file);
                          }
                        };
                        input.click();
                      }}
                    >
                      <Upload className="w-4 h-4 mr-2" />
                      이미지 파일 선택
                    </Button>
                    
                    {/* 구분선 */}
                    <div className="relative">
                      <div className="absolute inset-0 flex items-center">
                        <div className="w-full border-t border"></div>
                      </div>
                      <div className="relative flex justify-center text-xs">
                        <span className="px-2 bg-white text-muted-foreground">또는</span>
                      </div>
                    </div>
                    
                    {/* URL 입력 */}
                    <div>
                      <Label className="text-xs text-muted-foreground mb-1 block">
                        이미지 웹 주소 입력
                      </Label>
                      <Input
                        value={selected.src || ""}
                        onChange={(e) =>
                          updateComponent(selected.id, { src: e.target.value })
                        }
                        className="text-sm"
                        placeholder="예) https://example.com/image.jpg"
                      />
                    </div>
                  </div>
                </div>
                
                {/* 미리보기 */}
                {selected.src && (
                  <div className="mt-4">
                    <div className="flex items-center justify-between mb-2">
                      <p className="text-xs text-muted-foreground">미리보기:</p>
                      <Button
                        type="button"
                        variant="ghost"
                        size="sm"
                        onClick={() => updateComponent(selected.id, { src: "" })}
                        className="h-6 text-xs text-red-600 hover:text-red-700 hover:bg-red-50"
                      >
                        <X className="w-3 h-3 mr-1" />
                        이미지 제거
                      </Button>
                    </div>
                    <div className="border rounded-lg p-2 bg-muted/30">
                      <img 
                        src={selected.src} 
                        alt="미리보기" 
                        className="w-full rounded"
                        onError={(e) => {
                          (e.target as HTMLImageElement).src = 'https://placehold.co/600x200?text=이미지+로드+실패';
                        }}
                      />
                    </div>
                  </div>
                )}
              </div>
            )}

            {/* 여백 컴포넌트 */}
            {selected.type === "spacer" && (
              <div className="space-y-4">
                <div>
                  <Label className="text-sm font-medium text-foreground flex items-center gap-2">
                    여백 크기
                  </Label>
                  <p className="text-xs text-muted-foreground mt-1 mb-2">
                    요소 사이의 간격을 조절하세요
                  </p>
                  <div className="flex items-center gap-3">
                    <Input
                      type="number"
                      value={selected.height || 20}
                      onChange={(e) =>
                        updateComponent(selected.id, { height: parseInt(e.target.value) || 20 })
                      }
                      className="w-24"
                      min="0"
                      max="200"
                    />
                    <span className="text-sm text-muted-foreground">픽셀</span>
                  </div>
                </div>
              </div>
            )}

            {/* 헤더 컴포넌트 */}
            {selected.type === "header" && (
              <div className="space-y-4">
                <div>
                  <Label>브랜드명</Label>
                  <Input
                    value={selected.brandName || ""}
                    onChange={(e) => updateComponent(selected.id, { brandName: e.target.value })}
                    placeholder="회사명"
                    className="mt-1"
                  />
                </div>
                <div>
                  <Label>로고 이미지 URL</Label>
                  <Input
                    value={selected.logoSrc || ""}
                    onChange={(e) => updateComponent(selected.id, { logoSrc: e.target.value })}
                    placeholder="https://example.com/logo.png"
                    className="mt-1"
                  />
                </div>
                <div>
                  <Label>발송일</Label>
                  <Input
                    value={selected.sendDate || ""}
                    onChange={(e) => updateComponent(selected.id, { sendDate: e.target.value })}
                    className="mt-1"
                  />
                </div>
                <div>
                  <Label>배경색</Label>
                  <div className="flex items-center gap-3 mt-1">
                    <Input
                      type="color"
                      value={selected.headerBgColor || "#f8f9fa"}
                      onChange={(e) => updateComponent(selected.id, { headerBgColor: e.target.value })}
                      className="w-16 h-10"
                    />
                    <span className="text-sm text-muted-foreground">{selected.headerBgColor || "#f8f9fa"}</span>
                  </div>
                </div>
              </div>
            )}

            {/* 정보 테이블 컴포넌트 */}
            {selected.type === "infoTable" && (
              <div className="space-y-4">
                <div>
                  <Label>테이블 제목</Label>
                  <Input
                    value={selected.tableTitle || ""}
                    onChange={(e) => updateComponent(selected.id, { tableTitle: e.target.value })}
                    placeholder="예: 주문 정보"
                    className="mt-1"
                  />
                </div>
                <div>
                  <Label>테이블 항목</Label>
                  <div className="space-y-2 mt-2">
                    {selected.rows?.map((row, i) => (
                      <div key={i} className="flex gap-2">
                        <Input
                          value={row.label}
                          onChange={(e) => {
                            const newRows = [...(selected.rows || [])];
                            newRows[i] = { ...newRows[i], label: e.target.value };
                            updateComponent(selected.id, { rows: newRows });
                          }}
                          placeholder="항목명"
                          className="flex-1"
                        />
                        <Input
                          value={row.value}
                          onChange={(e) => {
                            const newRows = [...(selected.rows || [])];
                            newRows[i] = { ...newRows[i], value: e.target.value };
                            updateComponent(selected.id, { rows: newRows });
                          }}
                          placeholder="값"
                          className="flex-1"
                        />
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => {
                            const newRows = selected.rows?.filter((_, idx) => idx !== i);
                            updateComponent(selected.id, { rows: newRows });
                          }}
                        >
                          <Trash2 className="w-4 h-4 text-destructive" />
                        </Button>
                      </div>
                    ))}
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => {
                        const newRows = [...(selected.rows || []), { label: "", value: "" }];
                        updateComponent(selected.id, { rows: newRows });
                      }}
                      className="w-full"
                    >
                      <Plus className="w-4 h-4 mr-2" />
                      항목 추가
                    </Button>
                  </div>
                </div>
              </div>
            )}

            {/* 안내 박스 컴포넌트 */}
            {selected.type === "alertBox" && (
              <div className="space-y-4">
                <div>
                  <Label>박스 유형</Label>
                  <div className="grid grid-cols-2 gap-2 mt-2">
                    {(["info", "warning", "danger", "success"] as const).map((type) => (
                      <Button
                        key={type}
                        variant={selected.alertType === type ? "default" : "outline"}
                        size="sm"
                        onClick={() => updateComponent(selected.id, { alertType: type })}
                        className={
                          type === "info" ? "border-blue-300" :
                          type === "warning" ? "border-amber-300" :
                          type === "danger" ? "border-red-300" : "border-emerald-300"
                        }
                      >
                        {type === "info" ? "정보" : type === "warning" ? "주의" : type === "danger" ? "위험" : "성공"}
                      </Button>
                    ))}
                  </div>
                </div>
                <div>
                  <Label>제목</Label>
                  <Input
                    value={selected.alertTitle || ""}
                    onChange={(e) => updateComponent(selected.id, { alertTitle: e.target.value })}
                    placeholder="안내 제목"
                    className="mt-1"
                  />
                </div>
                <div>
                  <Label>내용</Label>
                  <Textarea
                    value={selected.content || ""}
                    onChange={(e) => updateComponent(selected.id, { content: e.target.value })}
                    placeholder="안내 내용을 입력하세요"
                    rows={4}
                    className="mt-1"
                  />
                </div>
              </div>
            )}

            {/* 구분선 컴포넌트 */}
            {selected.type === "divider" && (
              <div className="space-y-4">
                <div>
                  <Label>선 두께</Label>
                  <div className="flex items-center gap-3 mt-1">
                    <Input
                      type="number"
                      value={selected.height || 1}
                      onChange={(e) => updateComponent(selected.id, { height: parseInt(e.target.value) || 1 })}
                      className="w-24"
                      min="1"
                      max="10"
                    />
                    <span className="text-sm text-muted-foreground">픽셀</span>
                  </div>
                </div>
              </div>
            )}

            {/* 푸터 컴포넌트 */}
            {selected.type === "footer" && (
              <div className="space-y-4">
                <div>
                  <Label>회사명</Label>
                  <Input
                    value={selected.companyName || ""}
                    onChange={(e) => updateComponent(selected.id, { companyName: e.target.value })}
                    className="mt-1"
                  />
                </div>
                <div>
                  <Label>대표자</Label>
                  <Input
                    value={selected.ceoName || ""}
                    onChange={(e) => updateComponent(selected.id, { ceoName: e.target.value })}
                    className="mt-1"
                  />
                </div>
                <div>
                  <Label>사업자등록번호</Label>
                  <Input
                    value={selected.businessNumber || ""}
                    onChange={(e) => updateComponent(selected.id, { businessNumber: e.target.value })}
                    placeholder="000-00-00000"
                    className="mt-1"
                  />
                </div>
                <div>
                  <Label>주소</Label>
                  <Input
                    value={selected.address || ""}
                    onChange={(e) => updateComponent(selected.id, { address: e.target.value })}
                    className="mt-1"
                  />
                </div>
                <div>
                  <Label>전화번호</Label>
                  <Input
                    value={selected.phone || ""}
                    onChange={(e) => updateComponent(selected.id, { phone: e.target.value })}
                    className="mt-1"
                  />
                </div>
                <div>
                  <Label>이메일</Label>
                  <Input
                    value={selected.email || ""}
                    onChange={(e) => updateComponent(selected.id, { email: e.target.value })}
                    className="mt-1"
                  />
                </div>
                <div>
                  <Label>저작권 문구</Label>
                  <Input
                    value={selected.copyright || ""}
                    onChange={(e) => updateComponent(selected.id, { copyright: e.target.value })}
                    className="mt-1"
                  />
                </div>
              </div>
            )}

            {/* 번호 리스트 컴포넌트 */}
            {selected.type === "numberedList" && (
              <div className="space-y-4">
                <div>
                  <Label>리스트 제목</Label>
                  <Input
                    value={selected.listTitle || ""}
                    onChange={(e) => updateComponent(selected.id, { listTitle: e.target.value })}
                    placeholder="예: 안내 사항"
                    className="mt-1"
                  />
                </div>
                <div>
                  <Label>항목</Label>
                  <div className="space-y-2 mt-2">
                    {selected.listItems?.map((item, i) => (
                      <div key={i} className="flex gap-2">
                        <span className="flex items-center justify-center w-6 text-sm text-muted-foreground">{i + 1}.</span>
                        <Input
                          value={item}
                          onChange={(e) => {
                            const newItems = [...(selected.listItems || [])];
                            newItems[i] = e.target.value;
                            updateComponent(selected.id, { listItems: newItems });
                          }}
                          className="flex-1"
                        />
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => {
                            const newItems = selected.listItems?.filter((_, idx) => idx !== i);
                            updateComponent(selected.id, { listItems: newItems });
                          }}
                        >
                          <Trash2 className="w-4 h-4 text-destructive" />
                        </Button>
                      </div>
                    ))}
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => {
                        const newItems = [...(selected.listItems || []), ""];
                        updateComponent(selected.id, { listItems: newItems });
                      }}
                      className="w-full"
                    >
                      <Plus className="w-4 h-4 mr-2" />
                      항목 추가
                    </Button>
                  </div>
                </div>
              </div>
            )}
          </div>
        ) : (
          <div className="text-center py-16 text-muted-foreground">
            <Settings className="w-12 h-12 mx-auto mb-4 opacity-20" />
            <p className="text-sm">컴포넌트를 선택하세요</p>
          </div>
        )}
      </div>
    </div>
  );
}