import React, { useState, useEffect } from 'react';
import { Models } from 'appwrite';
import { ProdutoFormData } from '@/hooks/useProdutos';

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

const ProdutoForm: React.FC<ProdutoFormProps> = ({ onSubmit, onCancel, initialData, loading = false }) => {
  const [formData, setFormData] = useState<ProdutoFormData>({
    'preco-original': 0,
    'preco-atual': 0,
    'catalogo-produto-id': '',
    'empresa-id': ''
  });
  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);

  useEffect(() => {
    if (initialData) {
      setFormData({
        'preco-original': initialData['preco-original'] || 0,
        'preco-atual': initialData['preco-atual'] || 0,
        'catalogo-produto-id': initialData['catalogo-produto-id'] || '',
        'empresa-id': initialData['empresa-id'] || ''
      });
    } else {
      setFormData({ 'preco-original': 0, 'preco-atual': 0, 'catalogo-produto-id': '', 'empresa-id': '' });
    }
  }, [initialData]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    const success = await onSubmit(formData);
    if (success) {
      setMessage({ type: 'success', text: initialData ? '🔄 Produto atualizado!' : '🎉 Produto cadastrado!' });
      if (!initialData) {
        setFormData({ 'preco-original': 0, 'preco-atual': 0, 'catalogo-produto-id': '', 'empresa-id': '' });
      }
      setTimeout(() => setMessage(null), 3000);
    } else {
      setMessage({ type: 'error', text: initialData ? 'Erro ao atualizar produto' : 'Erro ao cadastrar produto' });
    }
  };

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

  return (
    <div className="bg-white rounded-lg shadow-md p-6">
      <div className="mb-6">
        <h2 className="text-2xl font-bold text-gray-900 mb-2">
          {initialData ? '✏️ Editar Produto' : '➕ Novo Produto'}
        </h2>
        <p className="text-gray-600">
          {initialData ? 'Atualize os dados do produto.' : 'Cadastre um novo 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 className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label htmlFor="preco-original" className="block text-sm font-medium text-gray-700 mb-2">
              Preço Original *
            </label>
            <input
              type="number"
              step="0.01"
              id="preco-original"
              name="preco-original"
              value={formData['preco-original']}
              onChange={handleChange}
              required
              disabled={loading}
              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"
            />
          </div>
          <div>
            <label htmlFor="preco-atual" className="block text-sm font-medium text-gray-700 mb-2">
              Preço Atual *
            </label>
            <input
              type="number"
              step="0.01"
              id="preco-atual"
              name="preco-atual"
              value={formData['preco-atual']}
              onChange={handleChange}
              required
              disabled={loading}
              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"
            />
          </div>
        </div>
        <div>
          <label htmlFor="catalogo-produto-id" className="block text-sm font-medium text-gray-700 mb-2">
            ID do Catálogo de Produto *
          </label>
          <input
            type="text"
            id="catalogo-produto-id"
            name="catalogo-produto-id"
            value={formData['catalogo-produto-id']}
            onChange={handleChange}
            required
            disabled={loading}
            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"
          />
        </div>
        <div>
          <label htmlFor="empresa-id" className="block text-sm font-medium text-gray-700 mb-2">
            ID da Empresa *
          </label>
          <input
            type="text"
            id="empresa-id"
            name="empresa-id"
            value={formData['empresa-id']}
            onChange={handleChange}
            required
            disabled={loading}
            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"
          />
        </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"
          >
            {loading ? '⏳ Processando...' : initialData ? '🔄 Atualizar' : '➕ Cadastrar'}
          </button>

          {onCancel && (
            <button
              type="button"
              onClick={onCancel}
              disabled={loading}
              className="flex-1 bg-gray-600 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"
            >
              ❌ Cancelar
            </button>
          )}
        </div>
      </form>
    </div>
  );
};

export default ProdutoForm;
