/**
 * 字段面板组件 - 钉钉/飞书风格
 * 两列网格布局，紧凑的图标+文字
 */

'use client';

import React, { useMemo, useState } from 'react';
import { useDraggable } from '@dnd-kit/core';
import {
  Type,
  AlignLeft,
  Hash,
  Mail,
  Phone,
  Link,
  Calendar,
  CalendarRange,
  ChevronDown,
  ListChecks,
  Circle,
  CheckSquare,
  Paperclip,
  Image,
  MapPin,
  User,
  Building,
  Table,
  FolderOpen,
  Search,
  X,
  Star,
  FileText,
  Globe,
  Navigation,
  GitBranch,
  PenTool,
  Stamp,
  Layout,
  Banknote,
  LucideIcon,
} from 'lucide-react';
import { Input } from '@/components/ui/input';
import { useTranslation } from '@/hooks/useTranslation';
import { FIELD_TYPES, createField, type FieldTypeConfig } from './types';
import { localizeFieldConfig } from './fieldI18n';
import { useDesignerStore } from './useDesignerStore';

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

// 可拖拽+可点击的字段项 - 紧凑版
function FieldItem({ config }: { config: FieldTypeConfig }) {
  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
    id: `palette-${config.type}`,
    data: {
      type: 'palette-item',
      fieldType: config.type,
      config,
    },
  });

  const { fields, addField } = useDesignerStore();
  const Icon = ICON_MAP[config.icon] || Type;

  // 点击添加字段
  const handleClick = () => {
    const newField = createField(config, fields);
    addField(newField);
  };

  return (
    <div
      ref={setNodeRef}
      {...listeners}
      {...attributes}
      onClick={handleClick}
      className={`
        flex items-center gap-2 px-2.5 py-2 rounded-md cursor-pointer
        bg-white border border-gray-100
        hover:border-blue-300 hover:bg-blue-50
        transition-all duration-100
        ${isDragging ? 'opacity-50 ring-1 ring-blue-400 shadow-md' : ''}
      `}
    >
      <Icon className="w-4 h-4 text-gray-500 flex-shrink-0" />
      <span className="text-xs text-gray-700 truncate">{config.label}</span>
    </div>
  );
}

// 分类组 - 带标题的网格
function CategorySection({
  title,
  fields,
}: {
  title: string;
  fields: FieldTypeConfig[];
}) {
  if (fields.length === 0) return null;

  return (
    <div className="mb-4">
      <h4 className="text-xs font-medium text-gray-500 mb-2 px-1">{title}</h4>
      <div className="grid grid-cols-2 gap-1.5">
        {fields.map((config) => (
          <FieldItem key={config.type} config={config} />
        ))}
      </div>
    </div>
  );
}

export function FieldPalette() {
  const { t } = useTranslation();
  const [searchTerm, setSearchTerm] = useState('');

  const localizedTypes = useMemo(
    () => FIELD_TYPES.map((config) => localizeFieldConfig(t, config)),
    [t]
  );

  // 过滤字段
  const filteredTypes = localizedTypes.filter((f) =>
    f.label.toLowerCase().includes(searchTerm.toLowerCase())
  );

  // 按分类分组（只有基础和高级）
  const basicFields = filteredTypes.filter((f) => f.category === 'basic');
  const advancedFields = filteredTypes.filter((f) => f.category === 'advanced');

  return (
    <div className="w-60 bg-gray-50 border-r border-gray-200 flex flex-col h-full">
      {/* 搜索 */}
      <div className="px-3 py-3 bg-white border-b border-gray-100">
        <div className="relative">
          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-gray-400" />
          <Input
            type="text"
            placeholder={t.forms.designer.palette.searchPlaceholder}
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="h-8 pl-8 text-xs bg-gray-50 border-gray-200"
          />
          {searchTerm && (
            <button
              onClick={() => setSearchTerm('')}
              className="absolute right-2.5 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
            >
              <X className="w-3.5 h-3.5" />
            </button>
          )}
        </div>
      </div>

      {/* 组件列表 */}
      <div className="flex-1 overflow-y-auto p-3">
        {searchTerm ? (
          // 搜索结果
          filteredTypes.length === 0 ? (
            <div className="text-center py-8 text-gray-400 text-xs">
              {t.forms.designer.palette.noMatch}
            </div>
          ) : (
            <div className="grid grid-cols-2 gap-1.5">
              {filteredTypes.map((config) => (
                <FieldItem key={config.type} config={config} />
              ))}
            </div>
          )
        ) : (
          // 分类展示（基础 + 高级）
          <>
            <CategorySection title={t.forms.designer.palette.categories.basic} fields={basicFields} />
            <CategorySection title={t.forms.designer.palette.categories.advanced} fields={advancedFields} />
          </>
        )}
      </div>
    </div>
  );
}