import React, { useState } from 'react';
import { FIELD_TYPES } from './FormTypes';
import * as LucideIcons from 'lucide-react';
import Button from './Button';

// Utiliser les mêmes icônes que dans FormTemplateBuilder
const FIELD_TYPES_ICON = {
  text: { icon: LucideIcons.TextCursorInput },
  email: { icon: LucideIcons.AtSign },
  phone: { icon: LucideIcons.Phone },
  date: { icon: LucideIcons.Calendar },
  select: { icon: LucideIcons.ChevronDown },
  radio: { icon: LucideIcons.Radio },
  checkbox: { icon: LucideIcons.CheckSquare },
  toggle: { icon: LucideIcons.ToggleLeft },
  file: { icon: LucideIcons.FileUp },
  signature: { icon: LucideIcons.PenTool },
  textarea: { icon: LucideIcons.Type },
  paragraph: { icon: LucideIcons.AlignLeft },
  heading1: { icon: LucideIcons.Heading1 },
  heading2: { icon: LucideIcons.Heading2 },
  heading3: { icon: LucideIcons.Heading3 },
  heading4: { icon: LucideIcons.Heading4 },
  heading5: { icon: LucideIcons.Heading5 },
  heading6: { icon: LucideIcons.Heading6 },
};

export default function FieldTypeSelector({ isOpen, onClose, onSelect }) {
  const [searchTerm, setSearchTerm] = useState('');

  if (!isOpen) return null;

  // Filtrer les types de champs selon le terme de recherche
  const filteredFieldTypes = FIELD_TYPES.filter((fieldType) =>
    fieldType.label.toLowerCase().includes(searchTerm.toLowerCase())
  );

  const selectFieldType = (fieldType) => {
    onSelect(fieldType);
    onClose();
  };

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div className="bg-white rounded-lg p-6 max-w-4xl w-full mx-4 max-h-[85vh] overflow-y-auto">
        <div className="flex justify-between items-center mb-4">
          <h3 className="font-headline text-lg font-semibold">
            Choisir un type de champ ({filteredFieldTypes.length} /{' '}
            {FIELD_TYPES.length} types)
          </h3>
          <button
            onClick={onClose}
            className="text-gray-500 hover:text-gray-700 text-xl"
          >
            ✕
          </button>
        </div>

        {/* Barre de recherche */}
        <div className="mb-6">
          <div className="relative">
            <input
              type="text"
              placeholder="Rechercher un type de champ..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-full px-4 py-3 pl-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            />
            <LucideIcons.Search
              className="absolute left-3 top-3.5 text-gray-400"
              size={18}
            />
            {searchTerm && (
              <button
                onClick={() => setSearchTerm('')}
                className="absolute right-3 top-3.5 text-gray-400 hover:text-gray-600"
              >
                <LucideIcons.X size={18} />
              </button>
            )}
          </div>
        </div>

        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
          {filteredFieldTypes.map((fieldType) => {
            const IconComponent = FIELD_TYPES_ICON[fieldType.value]?.icon;
            return (
              <button
                key={fieldType.value}
                onClick={() => selectFieldType(fieldType)}
                className="p-5 rounded-lg border-2 border-gray-200 bg-gray-50
                          hover:bg-blue-50 hover:border-blue-300 hover:shadow-md hover:scale-105
                          flex flex-col items-center justify-center gap-4 min-h-[140px] w-full
                          transition-all duration-200"
                title={fieldType.label}
              >
                {IconComponent && (
                  <IconComponent
                    size={32}
                    className="text-gray-700 flex-shrink-0"
                  />
                )}
                <span className="text-sm text-gray-600 text-center font-medium">
                  {fieldType.label}
                </span>
              </button>
            );
          })}
        </div>

        <div className="mt-6 flex justify-end">
          <Button
            text="Annuler"
            onClick={onClose}
            className="px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600"
          />
        </div>
      </div>
    </div>
  );
}
