/**
 * 设计画布组件 - 钉钉/飞书风格
 * 清晰的表单标题区，字段展示更紧凑
 */

'use client';

import React from 'react';
import { useDroppable } from '@dnd-kit/core';
import {
  SortableContext,
  verticalListSortingStrategy,
  useSortable,
} from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import {
  GripVertical,
  Trash2,
  Copy,
  Type,
  AlignLeft,
  Hash,
  Calendar,
  CalendarRange,
  ChevronDown,
  ListChecks,
  Circle,
  CheckSquare,
  Paperclip,
  Image,
  MapPin,
  User,
  Building,
  Table,
  FolderOpen,
  Monitor,
  Smartphone,
  Undo2,
  Redo2,
  History,
  Search,
  Keyboard,
  Star,
  FileText,
  Globe,
  Navigation,
  GitBranch,
  PenTool,
  Stamp,
  Layout,
  Banknote,
  LucideIcon,
} from 'lucide-react';
import { useDesignerStore, useCanUndo, useCanRedo } from './useDesignerStore';
import { useTranslation } from '@/hooks/useTranslation';
import type { DesignField, FieldType, FieldWidth } from './types';
import { FIELD_TYPES, WIDTH_PERCENT } from './types';
import { DetailFieldDesigner } from './DetailFieldDesigner';
import { LayoutContainerDesigner } from './LayoutContainerDesigner';
import { GroupFieldDesigner } from './GroupFieldDesigner';

// 图标映射
const ICON_MAP: Record<string, LucideIcon> = {
  Type, AlignLeft, Hash, Calendar, CalendarRange, ChevronDown,
  ListChecks, Circle, CheckSquare, Paperclip, Image, MapPin,
  User, Building, Table, FolderOpen, Star, FileText, Globe,
  Navigation, GitBranch, PenTool, Stamp, Layout, Search, Banknote,
};

// 获取字段图标
function getFieldIcon(type: FieldType): LucideIcon {
  const config = FIELD_TYPES.find((f) => f.type === type);
  return config ? ICON_MAP[config.icon] || Type : Type;
}

// 获取宽度样式
function getWidthStyle(width: FieldWidth = 'full'): React.CSSProperties {
  return { width: WIDTH_PERCENT[width], flexShrink: 0 };
}

// 字段预览组件 - 所见即所得风格
function FieldPreview({ field }: { field: DesignField }) {
  const { t } = useTranslation();
  // 真实表单输入框样式
  const inputClass = "w-full h-9 px-3 border border-gray-300 rounded-md text-sm text-gray-900 bg-white placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent";
  
  // 获取文本类默认值
  const textDefault = typeof field.defaultValue === 'string' ? field.defaultValue : undefined;
  // 获取数字类默认值
  const numberDefault = typeof field.defaultValue === 'number' ? String(field.defaultValue) : undefined;
  
  switch (field.type) {
    case 'text':
    case 'email':
    case 'phone':
    case 'url':
      return (
        <input 
          type="text" 
          value={textDefault || ''}
          placeholder={field.placeholder || t.forms.designer.defaults.input} 
          className={inputClass}
          readOnly
        />
      );
    
    case 'textarea':
      return (
        <textarea 
          value={textDefault || ''}
          placeholder={field.placeholder || t.forms.designer.defaults.input} 
          className={`${inputClass} h-24 py-2 resize-none`}
          rows={3}
          readOnly
        />
      );
    
    case 'number':
    case 'money':
      return (
        <div className="flex items-center gap-2">
          {field.prefix && <span className="text-sm text-gray-500 flex-shrink-0">{field.prefix}</span>}
          <input 
            type="text" 
            value={numberDefault || ''}
            placeholder={field.placeholder || t.forms.designer.defaults.number} 
            className={`${inputClass} flex-1`}
            readOnly
          />
          {field.suffix && <span className="text-sm text-gray-500 flex-shrink-0">{field.suffix}</span>}
        </div>
      );
    
    case 'date':
    case 'datetime':
    case 'time':
      return (
        <div className="relative">
          <input 
            type="text" 
            value={textDefault || ''}
            placeholder={field.type === 'time' ? t.forms.designer.canvas.timePlaceholder : t.forms.designer.canvas.datePlaceholder} 
            className={`${inputClass} pr-10`}
            readOnly
          />
          <Calendar className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" />
        </div>
      );
    
    case 'dateRange':
      return (
        <div className="flex items-center gap-2">
          <div className="relative flex-1">
            <input type="text" placeholder={t.forms.designer.canvas.dateRangeStartPlaceholder} className={`${inputClass} pr-10`} readOnly />
            <Calendar className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" />
          </div>
          <span className="text-sm text-gray-400">{t.forms.designer.canvas.dateRangeTo}</span>
          <div className="relative flex-1">
            <input type="text" placeholder={t.forms.designer.canvas.dateRangeEndPlaceholder} className={`${inputClass} pr-10`} readOnly />
            <Calendar className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" />
          </div>
        </div>
      );
    
    case 'select': {
      // 查找默认值对应的选项标签
      const defaultOption = field.options?.find(opt => opt.value === field.defaultValue);
      return (
        <div className="relative">
          <div className={`${inputClass} flex items-center cursor-pointer`}>
            <span className={defaultOption ? 'text-gray-900 flex-1' : 'text-gray-400 flex-1'}>
              {defaultOption?.label || field.placeholder || t.forms.designer.defaults.select}
            </span>
            <ChevronDown className="w-4 h-4 text-gray-400" />
          </div>
        </div>
      );
    }

    case 'multiSelect': {
      // 查找默认值对应的选项标签
      const defaultValues = Array.isArray(field.defaultValue) ? field.defaultValue : [];
      const selectedLabels = field.options?.filter(opt => defaultValues.includes(opt.value)).map(opt => opt.label) || [];
      return (
        <div className="relative">
          <div className={`${inputClass} flex items-center cursor-pointer`}>
            <span className={selectedLabels.length > 0 ? 'text-gray-900 flex-1' : 'text-gray-400 flex-1'}>
              {selectedLabels.length > 0 ? selectedLabels.join('、') : (field.placeholder || t.forms.designer.canvas.multiSelectPlaceholder)}
            </span>
            <ChevronDown className="w-4 h-4 text-gray-400" />
          </div>
        </div>
      );
    }
    
    case 'radio': {
      const defaultValue = field.defaultValue as string | undefined;
      return (
        <div className="flex flex-wrap gap-x-6 gap-y-2 py-1">
          {(field.options || [
            { label: t.forms.designer.defaults.optionLabel.replace('{index}', '1'), value: '1' },
            { label: t.forms.designer.defaults.optionLabel.replace('{index}', '2'), value: '2' },
          ]).map((opt) => {
            const isSelected = defaultValue ? opt.value === defaultValue : false;
            return (
              <label key={opt.value} className="flex items-center gap-2 cursor-pointer">
                <div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center
                  ${isSelected ? 'border-blue-500' : 'border-gray-300'}`}>
                  {isSelected && <div className="w-2 h-2 rounded-full bg-blue-500" />}
                </div>
                <span className="text-sm text-gray-700">{opt.label}</span>
              </label>
            );
          })}
        </div>
      );
    }
    
    case 'checkbox': {
      const defaultValues = Array.isArray(field.defaultValue) ? field.defaultValue : [];
      return (
        <div className="flex flex-wrap gap-x-6 gap-y-2 py-1">
          {(field.options || [
            { label: t.forms.designer.defaults.optionLabel.replace('{index}', '1'), value: '1' },
            { label: t.forms.designer.defaults.optionLabel.replace('{index}', '2'), value: '2' },
          ]).map((opt) => {
            const isSelected = defaultValues.includes(opt.value);
            return (
              <label key={opt.value} className="flex items-center gap-2 cursor-pointer">
                <div className={`w-4 h-4 rounded border-2 flex items-center justify-center
                  ${isSelected ? 'border-blue-500 bg-blue-500' : 'border-gray-300'}`}>
                  {isSelected && <CheckSquare className="w-3 h-3 text-white" />}
                </div>
                <span className="text-sm text-gray-700">{opt.label}</span>
              </label>
            );
          })}
        </div>
      );
    }
    
    case 'switch': {
      const isOn = field.defaultValue === true;
      return (
        <div className="py-1">
          <div className={`w-11 h-6 rounded-full relative cursor-pointer ${isOn ? 'bg-blue-500' : 'bg-gray-300'}`}>
            <div className={`absolute top-0.5 w-5 h-5 bg-white rounded-full shadow transition-transform ${isOn ? 'right-0.5' : 'left-0.5'}`} />
          </div>
        </div>
      );
    }
    
    case 'rating': {
      const ratingValue = typeof field.defaultValue === 'number' ? field.defaultValue : 0;
      return (
        <div className="flex items-center gap-1 py-1">
          {[1, 2, 3, 4, 5].map((i) => (
            <Star 
              key={i} 
              className={`w-6 h-6 cursor-pointer transition-colors
                ${i <= ratingValue ? 'text-yellow-400 fill-yellow-400' : 'text-gray-300 hover:text-yellow-300'}`} 
            />
          ))}
          {ratingValue > 0 && (
            <span className="ml-2 text-sm text-gray-500">
              {ratingValue} {t.forms.designer.canvas.ratingUnit}
            </span>
          )}
        </div>
      );
    }
    
    case 'file':
      return (
        <div className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-blue-400 hover:bg-blue-50/50 transition-colors cursor-pointer">
          <Paperclip className="w-8 h-8 text-gray-400 mx-auto mb-2" />
          <p className="text-sm text-gray-600">{t.forms.designer.canvas.fileUpload.title}</p>
          <p className="text-xs text-gray-400 mt-1">{t.forms.designer.canvas.fileUpload.hint}</p>
        </div>
      );

    case 'image':
      return (
        <div className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-blue-400 hover:bg-blue-50/50 transition-colors cursor-pointer">
          <Image className="w-8 h-8 text-gray-400 mx-auto mb-2" />
          <p className="text-sm text-gray-600">{t.forms.designer.canvas.imageUpload.title}</p>
          <p className="text-xs text-gray-400 mt-1">{t.forms.designer.canvas.imageUpload.hint}</p>
        </div>
      );
    
    case 'member':
      return (
        <div className={`${inputClass} flex items-center gap-2 cursor-pointer`}>
          <div className="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
            <User className="w-3.5 h-3.5 text-blue-600" />
          </div>
          <span className="text-gray-400">{field.placeholder || t.forms.designer.canvas.memberPlaceholder}</span>
          <ChevronDown className="w-4 h-4 text-gray-400 ml-auto" />
        </div>
      );
    
    case 'department':
      return (
        <div className={`${inputClass} flex items-center gap-2 cursor-pointer`}>
          <Building className="w-4 h-4 text-gray-400" />
          <span className="text-gray-400">{field.placeholder || t.forms.designer.canvas.departmentPlaceholder}</span>
          <ChevronDown className="w-4 h-4 text-gray-400 ml-auto" />
        </div>
      );
    
    case 'location':
      return (
        <div className={`${inputClass} flex items-center gap-2 cursor-pointer`}>
          <MapPin className="w-4 h-4 text-blue-500" />
          <span className="text-gray-400">{field.placeholder || t.forms.designer.canvas.locationPlaceholder}</span>
        </div>
      );
    
    case 'detail':
      // 子表单由 DetailFieldDesigner 渲染
      return null;
    
    case 'serialNumber':
      return (
        <div className={`${inputClass} flex items-center gap-2 bg-gray-50`}>
          <Hash className="w-4 h-4 text-gray-400" />
          <span className="text-gray-500 font-mono">{t.forms.designer.canvas.serialNumberPlaceholder}</span>
        </div>
      );
    
    case 'relatedForm':
    case 'relatedQuery':
      return (
        <div className={`${inputClass} flex items-center gap-2 cursor-pointer`}>
          <span className="text-gray-400 flex-1">{field.placeholder || t.forms.designer.canvas.relatedPlaceholder}</span>
          <Search className="w-4 h-4 text-gray-400" />
        </div>
      );
    
    case 'address':
      return (
        <div className="space-y-2">
          <div className={`${inputClass} flex items-center gap-2 cursor-pointer`}>
            <span className="text-gray-400 flex-1">{t.forms.designer.canvas.addressRegionPlaceholder}</span>
            <ChevronDown className="w-4 h-4 text-gray-400" />
          </div>
          <input type="text" placeholder={t.forms.designer.canvas.addressDetailPlaceholder} className={inputClass} />
        </div>
      );
    
    case 'region':
      return (
        <div className={`${inputClass} flex items-center gap-2 cursor-pointer`}>
          <Globe className="w-4 h-4 text-gray-400" />
          <span className="text-gray-400">{field.placeholder || t.forms.designer.canvas.regionPlaceholder}</span>
          <ChevronDown className="w-4 h-4 text-gray-400 ml-auto" />
        </div>
      );
    
    case 'cascade':
      return (
        <div className={`${inputClass} flex items-center gap-2 cursor-pointer`}>
          <span className="text-gray-400">{t.forms.designer.canvas.cascadePlaceholder}</span>
          <ChevronDown className="w-4 h-4 text-gray-400" />
          <span className="text-gray-300 mx-1">/</span>
          <span className="text-gray-400">{t.forms.designer.canvas.cascadePlaceholder}</span>
          <ChevronDown className="w-4 h-4 text-gray-400" />
        </div>
      );
    
    case 'signature':
      return (
        <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-blue-400 hover:bg-blue-50/50 transition-colors cursor-pointer">
          <PenTool className="w-10 h-10 text-gray-400 mx-auto mb-2" />
          <p className="text-sm text-gray-600">{t.forms.designer.canvas.signature.title}</p>
          <p className="text-xs text-gray-400 mt-1">{t.forms.designer.canvas.signature.hint}</p>
        </div>
      );
    
    case 'seal':
      return (
        <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-red-400 hover:bg-red-50/50 transition-colors cursor-pointer">
          <Stamp className="w-10 h-10 text-red-400 mx-auto mb-2" />
          <p className="text-sm text-gray-600">{t.forms.designer.canvas.seal.title}</p>
          <p className="text-xs text-gray-400 mt-1">{t.forms.designer.canvas.seal.hint}</p>
        </div>
      );
    
    case 'richtext':
      return (
        <div className="border border-gray-300 rounded-lg overflow-hidden">
          {/* 工具栏 */}
          <div className="flex items-center gap-1 px-3 py-2 bg-gray-50 border-b border-gray-200">
            <button className="w-7 h-7 flex items-center justify-center hover:bg-gray-200 rounded text-gray-600 font-bold">B</button>
            <button className="w-7 h-7 flex items-center justify-center hover:bg-gray-200 rounded text-gray-600 italic">I</button>
            <button className="w-7 h-7 flex items-center justify-center hover:bg-gray-200 rounded text-gray-600 underline">U</button>
            <div className="w-px h-4 bg-gray-300 mx-1" />
            <button className="w-7 h-7 flex items-center justify-center hover:bg-gray-200 rounded">
              <ListChecks className="w-4 h-4 text-gray-600" />
            </button>
            <button className="w-7 h-7 flex items-center justify-center hover:bg-gray-200 rounded">
              <Image className="w-4 h-4 text-gray-600" />
            </button>
          </div>
          {/* 编辑区 */}
          <div className="p-3 min-h-[120px] text-sm text-gray-400">
            {t.forms.designer.canvas.richTextPlaceholder}
          </div>
        </div>
      );
    
    case 'imageText':
      return (
        <div className="border border-gray-200 rounded-lg p-4 bg-gradient-to-r from-blue-50 to-white">
          <div className="flex items-start gap-4">
            <div className="w-20 h-20 bg-gray-200 rounded-lg flex items-center justify-center flex-shrink-0">
              <Image className="w-8 h-8 text-gray-400" />
            </div>
            <div className="flex-1 space-y-2">
              <div className="h-4 bg-gray-200 rounded w-3/4" />
              <div className="h-3 bg-gray-100 rounded w-full" />
              <div className="h-3 bg-gray-100 rounded w-2/3" />
            </div>
          </div>
        </div>
      );
    
    case 'group':
      return (
        <div className="flex items-center gap-2 py-1">
          <ChevronDown className="w-4 h-4 text-gray-400" />
          <span className="text-sm font-medium text-gray-700">{field.label}</span>
        </div>
      );
    
    case 'container':
      // 布局容器由 LayoutContainerDesigner 渲染
      return null;
    
    case 'wordTemplate':
      return (
        <div className="flex items-center gap-3 p-4 bg-blue-50 rounded-lg border border-blue-200">
          <div className="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center">
            <FileText className="w-5 h-5 text-white" />
          </div>
          <div>
            <p className="text-sm font-medium text-gray-700">{t.forms.designer.canvas.wordTemplate.title}</p>
            <p className="text-xs text-gray-500">{t.forms.designer.canvas.wordTemplate.action}</p>
          </div>
        </div>
      );
    
    case 'currency':
      // 货币符号映射
      const currencySymbols: Record<string, { symbol: string; flag: string }> = {
        CNY: { symbol: '¥', flag: '🇨🇳' },
        USD: { symbol: '$', flag: '🇺🇸' },
        EUR: { symbol: '€', flag: '🇪🇺' },
        JPY: { symbol: '¥', flag: '🇯🇵' },
        GBP: { symbol: '£', flag: '🇬🇧' },
        HKD: { symbol: 'HK$', flag: '🇭🇰' },
      };
      const currencyType = field.currencyType || 'CNY';
      const currencyInfo = currencySymbols[currencyType] || currencySymbols.CNY;
      const showSelector = field.showCurrencySelect !== false;
      
      return (
        <div className="flex gap-2">
          {/* 货币选择器 */}
          {showSelector ? (
            <div className={`w-24 h-9 px-3 border border-gray-300 rounded-md text-sm flex items-center justify-between bg-white cursor-pointer`}>
              <span className="flex items-center gap-1.5">
                <span>{currencyInfo.flag}</span>
                <span className="text-gray-700">{currencyType}</span>
              </span>
              <ChevronDown className="w-3.5 h-3.5 text-gray-400" />
            </div>
          ) : (
            <div className="flex items-center px-3 bg-gray-100 border border-gray-200 rounded-md text-sm text-gray-600">
              {currencyInfo.flag} {currencyType}
            </div>
          )}
          
          {/* 金额输入 */}
          <div className="flex-1 relative">
            <span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 text-sm">
              {currencyInfo.symbol}
            </span>
            <input 
              type="text" 
              placeholder={field.placeholder || t.forms.designer.canvas.currencyPlaceholder} 
              className={`${inputClass} pl-7`}
            />
          </div>
        </div>
      );
    
    default:
      return <div className="text-xs text-gray-400">{t.forms.designer.canvas.unknownPlaceholder}</div>;
  }
}

// 可排序的字段项（支持根据鼠标位置显示插入指示器）
function SortableFieldItem({ field }: { field: DesignField }) {
  const { t } = useTranslation();
  const itemRef = React.useRef<HTMLDivElement>(null);
  const [mousePosition, setMousePosition] = React.useState<'top' | 'bottom' | null>(null);
  const [isChildHovered, setIsChildHovered] = React.useState(false);

  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging,
    isOver,
    active,
  } = useSortable({
    id: field.id,
    data: { type: 'canvas-item', field },
  });

  const { selectedFieldId, selectField, removeField, duplicateField, updateField } = useDesignerStore();
  const isSelected = selectedFieldId === field.id;
  const isLayoutField = ['divider', 'description'].includes(field.type);
  const isDetailField = field.type === 'detail';
  const isContainerField = field.type === 'container';

  // 监听鼠标位置，判断在字段上半部分还是下半部分
  React.useEffect(() => {
    if (!isOver || !itemRef.current || isDragging) {
      setMousePosition(null);
      return;
    }

    const handleMouseMove = (e: MouseEvent) => {
      if (!itemRef.current) return;
      const rect = itemRef.current.getBoundingClientRect();
      const midY = rect.top + rect.height / 2;
      setMousePosition(e.clientY < midY ? 'top' : 'bottom');
    };

    document.addEventListener('mousemove', handleMouseMove);
    return () => document.removeEventListener('mousemove', handleMouseMove);
  }, [isOver, isDragging]);

  // 合并 refs
  const combinedRef = React.useCallback((node: HTMLDivElement | null) => {
    setNodeRef(node);
    (itemRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
  }, [setNodeRef]);

  const style: React.CSSProperties = {
    transform: CSS.Transform.toString(transform),
    transition,
    ...getWidthStyle(field.width),
  };

  // 是否显示插入指示器（从面板拖入或画布内排序时）
  const activeData = active?.data?.current;
  const isFromPalette = activeData?.type === 'palette-item';
  const isCanvasSort = activeData?.type === 'canvas-item' && active?.id !== field.id;
  const showIndicator = isOver && !isDragging && (isFromPalette || isCanvasSort);

  // 子表单使用专门的设计器
  if (isDetailField) {
    return (
      <div
        ref={combinedRef}
        style={{ ...style, width: '100%' }}
        className={`relative p-0.5 group ${isDragging ? 'opacity-50' : ''}`}
      >
        {/* 顶部插入指示器 */}
        {showIndicator && mousePosition === 'top' && (
          <div className="absolute -top-1 left-0 right-0 h-1 bg-blue-500 rounded-full z-20 shadow-[0_0_8px_rgba(59,130,246,0.5)]" />
        )}
        
        {/* hover 虚线框 / 选中实线框 */}
        <div
          className={`
            absolute inset-0 rounded-lg pointer-events-none transition-all z-10
            ${isSelected 
              ? 'border-2 border-blue-500' 
              : 'border-2 border-transparent group-hover:border-dashed group-hover:border-blue-300'
            }
          `}
        />
        
        <DetailFieldDesigner
          field={field}
          onChange={(updates) => updateField(field.id, updates)}
          isSelected={isSelected}
          onSelect={() => selectField(field.id)}
        />
        {/* 拖拽手柄 */}
        {isSelected && (
          <div
            {...attributes}
            {...listeners}
            className="absolute -left-5 top-6 w-4 h-8 
              bg-blue-500 rounded-l flex items-center justify-center cursor-grab z-20"
          >
            <GripVertical className="w-3 h-3 text-white" />
          </div>
        )}
        
        {/* 底部插入指示器 */}
        {showIndicator && mousePosition === 'bottom' && (
          <div className="absolute -bottom-1 left-0 right-0 h-1 bg-blue-500 rounded-full z-20 shadow-[0_0_8px_rgba(59,130,246,0.5)]" />
        )}
      </div>
    );
  }

  // 布局容器使用专门的设计器
  if (isContainerField) {
    return (
      <div
        ref={combinedRef}
        style={{ ...style, width: '100%' }}
        className={`relative p-0.5 group/container ${isDragging ? 'opacity-50' : ''}`}
      >
        {/* 顶部插入指示器 */}
        {showIndicator && mousePosition === 'top' && (
          <div className="absolute -top-1 left-0 right-0 h-1 bg-blue-500 rounded-full z-20 shadow-[0_0_8px_rgba(59,130,246,0.5)]" />
        )}
        
        {/* hover 虚线框 / 选中实线框 - 内部组件 hover 时隐藏容器边框 */}
        <div
          className={`
            absolute inset-0 rounded-lg pointer-events-none transition-all z-10
            ${isSelected 
              ? 'border-2 border-blue-500' 
              : isChildHovered
              ? 'border-2 border-transparent'
              : 'border-2 border-transparent group-hover/container:border-dashed group-hover/container:border-blue-300'
            }
          `}
        />
        
        <LayoutContainerDesigner
          field={field}
          onChange={(updates) => updateField(field.id, updates)}
          isSelected={isSelected}
          onSelect={() => selectField(field.id)}
          onChildHover={setIsChildHovered}
        />
        {/* 拖拽手柄 */}
        {isSelected && (
          <div
            {...attributes}
            {...listeners}
            className="absolute -left-5 top-6 w-4 h-8 
              bg-blue-500 rounded-l flex items-center justify-center cursor-grab z-20"
          >
            <GripVertical className="w-3 h-3 text-white" />
          </div>
        )}
        
        {/* 底部插入指示器 */}
        {showIndicator && mousePosition === 'bottom' && (
          <div className="absolute -bottom-1 left-0 right-0 h-1 bg-blue-500 rounded-full z-20 shadow-[0_0_8px_rgba(59,130,246,0.5)]" />
        )}
      </div>
    );
  }

  // 分组使用专门的设计器
  const isGroupField = field.type === 'group';
  if (isGroupField) {
    return (
      <div
        ref={combinedRef}
        style={{ ...style, width: '100%' }}
        className={`relative p-0.5 group/group ${isDragging ? 'opacity-50' : ''}`}
      >
        {/* 顶部插入指示器 */}
        {showIndicator && mousePosition === 'top' && (
          <div className="absolute -top-1 left-0 right-0 h-1 bg-blue-500 rounded-full z-20 shadow-[0_0_8px_rgba(59,130,246,0.5)]" />
        )}
        
        {/* hover 虚线框 / 选中实线框 */}
        <div
          className={`
            absolute inset-0 rounded-lg pointer-events-none transition-all z-10
            ${isSelected 
              ? 'border-2 border-blue-500' 
              : isChildHovered
              ? 'border-2 border-transparent'
              : 'border-2 border-transparent group-hover/group:border-dashed group-hover/group:border-blue-300'
            }
          `}
        />
        
        <GroupFieldDesigner
          field={field}
          onChange={(updates) => updateField(field.id, updates)}
          isSelected={isSelected}
          onSelect={() => selectField(field.id)}
          onChildHover={setIsChildHovered}
        />
        {/* 拖拽手柄 */}
        {isSelected && (
          <div
            {...attributes}
            {...listeners}
            className="absolute -left-5 top-6 w-4 h-8 
              bg-blue-500 rounded-l flex items-center justify-center cursor-grab z-20"
          >
            <GripVertical className="w-3 h-3 text-white" />
          </div>
        )}
        
        {/* 底部插入指示器 */}
        {showIndicator && mousePosition === 'bottom' && (
          <div className="absolute -bottom-1 left-0 right-0 h-1 bg-blue-500 rounded-full z-20 shadow-[0_0_8px_rgba(59,130,246,0.5)]" />
        )}
      </div>
    );
  }

  return (
    <div
      ref={combinedRef}
      style={style}
      className={`group relative ${isDragging ? 'opacity-50' : ''}`}
      onClick={(e) => { e.stopPropagation(); selectField(field.id); }}
    >
      {/* 顶部插入指示器 */}
      {showIndicator && mousePosition === 'top' && (
        <div className="absolute -top-1 left-0 right-0 h-1 bg-blue-500 rounded-full z-20 shadow-[0_0_8px_rgba(59,130,246,0.5)]" />
      )}
      
      {/* hover 虚线框 / 选中实线框 */}
      <div
        className={`
          absolute inset-0 rounded-lg pointer-events-none transition-all z-10
          ${isSelected 
            ? 'border-2 border-blue-500' 
            : 'border-2 border-transparent group-hover:border-dashed group-hover:border-blue-300'
          }
        `}
      />
      
      <div
        className={`
          relative rounded-lg transition-all
          ${isSelected 
            ? 'bg-white' 
            : ''
          }
        `}
      >
        {/* 字段内容 - 所见即所得样式 */}
        <div>
          {/* 字段标签 - 更接近真实表单样式 */}
          {!isLayoutField && (
            <label className="flex items-center gap-1 mb-2">
              <span className="text-sm font-medium text-gray-700">{field.label}</span>
              {field.required && <span className="text-red-500 text-sm">*</span>}
            </label>
          )}

          {/* 字段预览 */}
          <div className="pointer-events-none">
            <FieldPreview field={field} />
          </div>
        </div>

        {/* 选中时的工具栏 */}
        {isSelected && (
          <>
            {/* 左侧拖拽手柄 */}
            <div
              {...attributes}
              {...listeners}
              className="absolute -left-5 top-1/2 -translate-y-1/2 w-4 h-8 
                bg-blue-500 rounded-l flex items-center justify-center cursor-grab"
            >
              <GripVertical className="w-3 h-3 text-white" />
            </div>

            {/* 右上角操作 */}
            <div className="absolute -top-2 right-2 flex items-center gap-0.5 
              bg-white shadow-sm border border-gray-200 rounded px-1 py-0.5">
              <button
                onClick={(e) => { e.stopPropagation(); duplicateField(field.id); }}
                className="p-1 hover:bg-gray-100 rounded text-gray-500"
                title={t.forms.designer.canvas.actions.duplicate}
              >
                <Copy className="w-3 h-3" />
              </button>
              <button
                onClick={(e) => { e.stopPropagation(); removeField(field.id); }}
                className="p-1 hover:bg-red-50 rounded text-gray-500 hover:text-red-500"
                title={t.forms.designer.canvas.actions.delete}
              >
                <Trash2 className="w-3 h-3" />
              </button>
            </div>
          </>
        )}
      </div>
      
      {/* 底部插入指示器 */}
      {showIndicator && mousePosition === 'bottom' && (
        <div className="absolute -bottom-1 left-0 right-0 h-1 bg-blue-500 rounded-full z-20 shadow-[0_0_8px_rgba(59,130,246,0.5)]" />
      )}
    </div>
  );
}

// 空状态 - 增强视觉
function EmptyState() {
  const { t } = useTranslation();
  const { isOver } = useDroppable({ id: 'empty-canvas-drop' });
  
  return (
    <div className={`
      flex flex-col items-center justify-center h-72 
      border-2 border-dashed rounded-lg m-2
      transition-all duration-200
      ${isOver 
        ? 'border-blue-400 bg-blue-50 scale-[1.01]' 
        : 'border-gray-200 bg-gray-50/30'
      }
    `}>
      <div className={`
        w-16 h-16 rounded-full flex items-center justify-center mb-4
        transition-colors duration-200
        ${isOver ? 'bg-blue-100' : 'bg-gray-100'}
      `}>
        <Type className={`w-8 h-8 ${isOver ? 'text-blue-500' : 'text-gray-300'}`} />
      </div>
      {isOver ? (
        <>
          <p className="text-sm font-medium text-blue-600 mb-1">{t.forms.designer.canvas.empty.dropTitle}</p>
          <p className="text-xs text-blue-400">{t.forms.designer.canvas.empty.dropSubtitle}</p>
        </>
      ) : (
        <>
          <p className="text-sm font-medium text-gray-500 mb-1">{t.forms.designer.canvas.empty.idleTitle}</p>
          <p className="text-xs text-gray-400">{t.forms.designer.canvas.empty.idleSubtitle}</p>
        </>
      )}
    </div>
  );
}

// 工具栏
function CanvasToolbar() {
  const { t } = useTranslation();
  const { undo, redo } = useDesignerStore();
  const canUndo = useCanUndo();
  const canRedo = useCanRedo();

  return (
    <div className="flex items-center justify-center gap-1 py-2 border-b border-gray-100 bg-white">
      {/* 设备切换 */}
      <div className="flex items-center bg-gray-100 rounded p-0.5 mr-4">
        <button className="p-1.5 bg-white rounded shadow-sm">
          <Monitor className="w-4 h-4 text-gray-600" />
        </button>
        <button className="p-1.5 hover:bg-gray-200 rounded">
          <Smartphone className="w-4 h-4 text-gray-400" />
        </button>
      </div>

      {/* 撤销/重做 */}
      <button
        onClick={undo}
        disabled={!canUndo}
        className={`p-1.5 rounded ${canUndo ? 'hover:bg-gray-100 text-gray-600' : 'text-gray-300'}`}
        title={t.forms.designer.canvas.toolbar.undo}
      >
        <Undo2 className="w-4 h-4" />
      </button>
      <button
        onClick={redo}
        disabled={!canRedo}
        className={`p-1.5 rounded ${canRedo ? 'hover:bg-gray-100 text-gray-600' : 'text-gray-300'}`}
        title={t.forms.designer.canvas.toolbar.redo}
      >
        <Redo2 className="w-4 h-4" />
      </button>

      <div className="w-px h-4 bg-gray-200 mx-2" />

      {/* 其他工具 */}
      <button className="p-1.5 rounded hover:bg-gray-100 text-gray-400" title={t.forms.designer.canvas.toolbar.history}>
        <History className="w-4 h-4" />
      </button>
      <button className="p-1.5 rounded hover:bg-gray-100 text-gray-400" title={t.forms.designer.canvas.toolbar.search}>
        <Search className="w-4 h-4" />
      </button>
      <button className="p-1.5 rounded hover:bg-gray-100 text-gray-400" title={t.forms.designer.canvas.toolbar.shortcuts}>
        <Keyboard className="w-4 h-4" />
      </button>
    </div>
  );
}

export function DesignCanvas() {
  const { fields, selectField } = useDesignerStore();

  const { setNodeRef, isOver, active } = useDroppable({
    id: 'design-canvas',
    data: { type: 'canvas' },
  });

  // 是否正在从左侧面板拖拽
  const isDraggingFromPalette = active?.data?.current?.type === 'palette-item';

  return (
    <div className="flex-1 flex flex-col bg-gray-100 overflow-hidden">
      {/* 工具栏 */}
      <CanvasToolbar />

      {/* 画布区域 */}
      <div 
        className="flex-1 overflow-y-auto px-8 py-6"
        onClick={() => selectField(null)}
      >
        <div className="w-full min-h-full flex flex-col">
          {/* 表单容器 - 默认填满高度，内容超出时自动扩展 */}
          <div
            ref={setNodeRef}
            className={`
              bg-white rounded-lg shadow-sm flex-1
              transition-all duration-200
              ${isOver && isDraggingFromPalette
                ? 'ring-2 ring-blue-400 ring-offset-2 shadow-lg' 
                : 'border border-gray-200'
              }
            `}
          >
            {/* 字段区域 */}
            <div className="px-6 py-5">
              {fields.length === 0 ? (
                <EmptyState />
              ) : (
                <SortableContext
                  items={fields.map((f) => f.id)}
                  strategy={verticalListSortingStrategy}
                >
                  <div className="flex flex-wrap gap-y-4">
                    {fields.map((field) => (
                      <SortableFieldItem 
                        key={`${field.id}-${field.label}-${field.required}-${field.type}`} 
                        field={field} 
                      />
                    ))}
                  </div>
                </SortableContext>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}