import React, { useState } from 'react';
import { X, Plus } from 'lucide-react';

interface Props {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: (fieldName: string, fieldType: 'text' | 'number' | 'checkbox', forAllBuildings: boolean) => void;
  section?: 'general' | 'construction' | 'engineering' | 'land' | 'management';
}

export const AddCustomFieldModal: React.FC<Props> = ({ isOpen, onClose, onConfirm, section }) => {
  const [fieldName, setFieldName] = useState('');
  const [fieldType, setFieldType] = useState<'text' | 'number' | 'checkbox'>('text');
  const [forAllBuildings, setForAllBuildings] = useState(false);

  if (!isOpen) return null;

  const handleConfirm = () => {
    if (!fieldName.trim()) {
      alert('Введите название поля');
      return;
    }
    onConfirm(fieldName.trim(), fieldType, forAllBuildings);
    setFieldName('');
    setFieldType('text');
    setForAllBuildings(false);
    onClose();
  };

  const handleClose = () => {
    setFieldName('');
    setFieldType('text');
    setForAllBuildings(false);
    onClose();
  };

  return (
    <div 
      className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-900/80 backdrop-blur-md animate-fade-in"
      onClick={handleClose}
    >
      <div 
        className="bg-white rounded-2xl w-full max-w-md shadow-2xl animate-slide-up"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Header */}
        <div className="p-6 border-b border-slate-200">
          <div className="flex items-start justify-between">
            <div className="flex items-center gap-3">
              <div className="p-2 bg-primary-50 rounded-lg">
                <Plus className="w-6 h-6 text-primary-500" />
              </div>
              <div>
                <h3 className="text-lg font-black text-slate-900">Добавить новое поле</h3>
                <p className="text-sm text-slate-500 mt-1">Укажите название и тип поля</p>
              </div>
            </div>
            <button
              onClick={handleClose}
              className="p-2 hover:bg-slate-100 rounded-full transition-colors"
            >
              <X className="w-5 h-5 text-slate-400" />
            </button>
          </div>
        </div>

        {/* Content */}
        <div className="p-6 space-y-4">
          <div>
            <label className="block text-xs font-bold text-slate-500 uppercase mb-2">
              Название поля
            </label>
            <input
              type="text"
              value={fieldName}
              onChange={(e) => setFieldName(e.target.value)}
              placeholder="Например: Материал кровли"
              className="w-full p-3 bg-white border border-slate-300 rounded-xl text-sm font-medium text-slate-800 outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
              autoFocus
              onKeyDown={(e) => {
                if (e.key === 'Enter') {
                  handleConfirm();
                }
              }}
            />
          </div>

          <div>
            <label className="block text-xs font-bold text-slate-500 uppercase mb-2">
              Тип поля
            </label>
            <div className="grid grid-cols-3 gap-2">
              <button
                onClick={() => setFieldType('text')}
                className={`p-3 rounded-xl border-2 transition-all font-bold text-sm ${
                  fieldType === 'text'
                    ? 'border-primary-500 bg-primary-50 text-primary-700'
                    : 'border-slate-200 bg-white text-slate-600 hover:border-slate-300'
                }`}
              >
                Текст
              </button>
              <button
                onClick={() => setFieldType('number')}
                className={`p-3 rounded-xl border-2 transition-all font-bold text-sm ${
                  fieldType === 'number'
                    ? 'border-primary-500 bg-primary-50 text-primary-700'
                    : 'border-slate-200 bg-white text-slate-600 hover:border-slate-300'
                }`}
              >
                Число
              </button>
              <button
                onClick={() => setFieldType('checkbox')}
                className={`p-3 rounded-xl border-2 transition-all font-bold text-sm ${
                  fieldType === 'checkbox'
                    ? 'border-primary-500 bg-primary-50 text-primary-700'
                    : 'border-slate-200 bg-white text-slate-600 hover:border-slate-300'
                }`}
              >
                Галочка
              </button>
            </div>
          </div>

          <div className="pt-4 border-t border-slate-200">
            <label className="flex items-center gap-3 cursor-pointer group">
              <input
                type="checkbox"
                checked={forAllBuildings}
                onChange={(e) => setForAllBuildings(e.target.checked)}
                className="w-5 h-5 accent-primary-600 cursor-pointer"
              />
              <div>
                <span className="text-sm font-bold text-slate-800 block">Для всех домов</span>
                <span className="text-xs text-slate-500">Поле будет отображаться в паспортах всех домов</span>
              </div>
            </label>
          </div>
        </div>

        {/* Footer */}
        <div className="p-6 border-t border-slate-200 flex gap-3">
          <button
            onClick={handleClose}
            className="flex-1 px-4 py-3 rounded-xl border border-slate-200 text-slate-700 font-bold hover:bg-slate-50 transition-colors"
          >
            Отмена
          </button>
          <button
            onClick={handleConfirm}
            className="flex-1 px-4 py-3 rounded-xl bg-primary-600 text-white font-bold hover:bg-primary-700 transition-colors flex items-center justify-center gap-2"
          >
            <Plus className="w-4 h-4" />
            Создать поле
          </button>
        </div>
      </div>
    </div>
  );
};