import React, { useState, useEffect } from 'react';
import { Models } from '@/lib/appwrite';

interface CatalogoProdutoFormProps {
  onSubmit: (data: { descricao: string }) => Promise<boolean>;
  onCancel?: () => void;
  initialData?: Models.Document | null;
  loading?: boolean;
}

type CatalogoProdutoDocument = Models.Document & {
  descricao?: string;
};

const CatalogoProdutoForm: React.FC<CatalogoProdutoFormProps> = ({
  onSubmit,
  onCancel,
  initialData,
  loading = false,
}) => {
  const [formData, setFormData] = useState<{ descricao: string }>({ descricao: '' });
  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);

  useEffect(() => {
    if (initialData) {
      const document = initialData as CatalogoProdutoDocument;
      setFormData({ descricao: document.descricao || '' });
    } else {
      setFormData({ descricao: '' });
    }
  }, [initialData]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    const success = await onSubmit(formData);
    if (success) {
      setMessage({
        type: 'success',
        text: initialData ? '🔄 Catálogo de produto atualizado com sucesso!' : '🎉 Catálogo de produto cadastrado com sucesso!'
      });
      if (!initialData) {
        setFormData({ descricao: '' });
      }
      setTimeout(() => setMessage(null), 3000);
    } else {
      setMessage({ type: 'error', text: initialData ? 'Erro ao atualizar catálogo de produto' : 'Erro ao cadastrar catálogo de produto' });
    }
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
    if (message) setMessage(null);
  };

  return (
      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="bg-white rounded-lg shadow-md p-6">
          <div className="mb-6">
            <h2 className="text-2xl font-bold text-black mb-2">
              {initialData ? 'Editar Catálogo de Produto' : 'Novo Catálogo de Produto'}
            </h2>
            <p className="text-black">
              {initialData ? 'Atualize os dados do catálogo de produto.' : 'Cadastre um novo catálogo de produto na plataforma SaveInMed.'}
            </p>
          </div>

          {message && (
            <div className={`mb-4 p-4 rounded-md ${message.type === 'success' ? 'bg-green-50 text-green-700 border border-green-200' : 'bg-red-50 text-red-700 border border-red-200'}`}>
              {message.text}
            </div>
          )}

          <form onSubmit={handleSubmit} className="space-y-6">
            <div>
              <label htmlFor="descricao" className="block text-sm font-medium text-black mb-2">
                Descrição do Produto *
              </label>
              <input
                type="text"
                id="descricao"
                name="descricao"
                value={formData.descricao}
                onChange={handleChange}
                className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed text-gray-900 bg-white"
                disabled={loading}
                required
              />
            </div>
            <div className="flex gap-4">
              <button
                type="submit"
                disabled={loading}
                className="flex-1 bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors cursor-pointer"
              >
                {loading ? '⏳ Processando...' : initialData ? 'Atualizar' : 'Cadastrar'}
              </button>
              {onCancel && (
                <button
                  type="button"
                  onClick={onCancel}
                  disabled={loading}
                  className="flex-1 bg-black text-white py-2 px-4 rounded-md hover:bg-gray-700 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors cursor-pointer"
                >
                  Cancelar
                </button>
              )}
            </div>
          </form>
        </div>
      </main>
  );
};

export default CatalogoProdutoForm;