/**
 * 布局容器设计器组件（占位符）
 * TODO: 待实现完整的布局容器设计功能
 */

'use client';

import React from 'react';
import { useTranslation } from '@/hooks/useTranslation';
import type { DesignField } from './types';

interface LayoutContainerDesignerProps {
  field: DesignField;
  isSelected?: boolean;
  onClick?: () => void;
  onChange?: (updates: any) => void;
  onSelect?: () => void;
  onChildHover?: React.Dispatch<React.SetStateAction<boolean>>;
}

/**
 * 布局容器设计器
 * 用于设计多列布局容器（如两列、三列布局）
 */
export function LayoutContainerDesigner({ field, isSelected, onClick }: LayoutContainerDesignerProps) {
  const { t } = useTranslation();
  const layout = (field.props?.layout as { ratios: number[]; gap?: number }) || { ratios: [1, 1], gap: 16 };
  const columnCount = layout.ratios.length;

  return (
    <div
      className={`
        p-4 border rounded-lg bg-gradient-to-r from-blue-50 to-purple-50
        ${isSelected ? 'ring-2 ring-blue-500 border-blue-500' : 'border-gray-200'}
        ${onClick ? 'cursor-pointer hover:border-blue-300' : ''}
      `}
      onClick={onClick}
    >
      <div className="flex items-center gap-2 mb-2">
        <span className="text-sm font-medium text-gray-700">
          📐 {field.label || t.forms.designer.container.placeholder}
        </span>
        <span className="text-xs text-gray-500">
          ({t.forms.designer.container.columns.replace('{count}', String(columnCount))})
        </span>
      </div>
      <div className="flex gap-2">
        {layout.ratios.map((ratio, index) => (
          <div
            key={index}
            className="flex-1 h-20 border-2 border-dashed border-gray-300 rounded bg-white flex items-center justify-center"
            style={{ flex: ratio }}
          >
            <span className="text-xs text-gray-400">
              {t.forms.designer.container.column.replace('{index}', String(index + 1))}
            </span>
          </div>
        ))}
      </div>
      <div className="text-xs text-gray-500 mt-2">
        {t.forms.designer.container.developing}
      </div>
    </div>
  );
}