'use client';

import React, { useState } from 'react';

export default function DemoEstoqueProduto() {
  const [showForm, setShowForm] = useState(false);
  const [estoque, setEstoque] = useState(50);
  const [showNotification, setShowNotification] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const formData = new FormData(e.target as HTMLFormElement);
    const novoEstoque = parseInt(formData.get('quantidade') as string) || 0;
    setEstoque(novoEstoque);
    setShowForm(false);
    setShowNotification(true);
    setTimeout(() => setShowNotification(false), 3000);
  };

  return (
    <div className="min-h-screen bg-gray-50 p-6">
      {/* Notificação de sucesso */}
      {showNotification && (
        <div className="fixed top-4 right-4 z-50 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg flex items-center gap-2 animate-pulse">
          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
          </svg>
          <span>Estoque atualizado para {estoque} unidades!</span>
        </div>
      )}
      
      <div className="max-w-4xl mx-auto">
        {/* Header */}
        <div className="bg-white rounded-lg shadow-sm p-6 mb-6">
          <h1 className="text-3xl font-bold text-gray-900 mb-2">
            📦 Demonstração: Campo de Estoque na Edição de Produtos
          </h1>
          <p className="text-gray-600 mb-6">
            Esta demonstração mostra o novo campo de estoque/quantidade adicionado ao formulário de edição de produtos.
          </p>
        </div>

        {/* Exemplo de Produto */}
        <div className="bg-white rounded-lg shadow-sm p-6 mb-6">
          <h2 className="text-xl font-semibold text-gray-900 mb-4">📋 Produto de Exemplo</h2>
          
          <div className="grid md:grid-cols-2 gap-6">
            <div>
              <h3 className="font-medium text-gray-900 mb-3">Informações do Produto</h3>
              <div className="space-y-2 text-sm">
                <p><strong>Nome:</strong> Dipirona 500mg</p>
                <p><strong>Princípio Ativo:</strong> dipirona</p>
                <p><strong>Concentração:</strong> 20mg</p>
                <p><strong>Forma Farmacêutica:</strong> Comprimido</p>
                <p><strong>Laboratório:</strong> Ems</p>
                <p><strong>Código EAN:</strong> 52352532352535</p>
                <p><strong>Registro ANVISA:</strong> 23423434224</p>
              </div>
            </div>
            
            <div>
              <h3 className="font-medium text-gray-900 mb-3">Informações Comerciais</h3>
              <div className="space-y-2 text-sm">
                <p><strong>Categoria:</strong> Analgésico</p>
                <p><strong>Tipo de Prescrição:</strong> Venda Livre</p>
                <p><strong>Data de Vencimento:</strong> 22/02/2026</p>
                <p><strong>Lote:</strong> 24124</p>
                <p><strong>Preço Unitário:</strong> R$ 2,99</p>
                <p><strong>Preço de Venda:</strong> R$ 2,99</p>
                <p className="text-lg"><strong>Estoque Atual:</strong> 
                  <span className={`ml-2 px-2 py-1 rounded text-sm font-medium ${
                    estoque > 20 ? 'bg-green-100 text-green-800' : 
                    estoque > 5 ? 'bg-yellow-100 text-yellow-800' : 'bg-red-100 text-red-800'
                  }`}>
                    {estoque} unidades
                  </span>
                </p>
              </div>
            </div>
          </div>

          <div className="mt-6 pt-4 border-t border-gray-200">
            <button
              onClick={() => setShowForm(!showForm)}
              className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors"
            >
              ✏️ {showForm ? 'Cancelar Edição' : 'Editar Produto'}
            </button>
          </div>
        </div>

        {/* Formulário de Edição */}
        {showForm && (
          <div className="bg-white rounded-lg shadow-sm p-6">
            <h2 className="text-xl font-semibold text-gray-900 mb-6">✏️ Editar Produto</h2>
            
            <form onSubmit={handleSubmit} className="space-y-6">
              {/* Informações Básicas */}
              <div>
                <h3 className="text-lg font-medium text-gray-900 mb-4">Informações Básicas</h3>
                <div className="grid md:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Nome do Medicamento <span className="text-red-500">*</span>
                    </label>
                    <input
                      type="text"
                      defaultValue="Dipirona"
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                      required
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Princípio Ativo <span className="text-red-500">*</span>
                    </label>
                    <input
                      type="text"
                      defaultValue="dipirona"
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                      required
                    />
                  </div>
                </div>
              </div>

              {/* Informações Comerciais */}
              <div>
                <h3 className="text-lg font-medium text-gray-900 mb-4">Informações Comerciais</h3>
                <div className="grid md:grid-cols-3 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Preço Unitário (R$) <span className="text-red-500">*</span>
                    </label>
                    <input
                      type="number"
                      step="0.01"
                      defaultValue="2.99"
                      min="0"
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                      required
                    />
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Preço de Venda (R$) <span className="text-red-500">*</span>
                    </label>
                    <input
                      type="number"
                      step="0.01"
                      defaultValue="2.99"
                      min="0"
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                      required
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      <span className="flex items-center gap-2">
                        📦 Estoque/Quantidade
                        <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                          NOVO
                        </span>
                      </span>
                    </label>
                    <input
                      type="number"
                      name="quantidade"
                      step="1"
                      defaultValue={estoque}
                      min="0"
                      className="w-full px-3 py-2 border border-green-300 rounded-md focus:ring-2 focus:ring-green-500 focus:border-green-500 bg-green-50"
                      placeholder="Unidades em estoque"
                    />
                    <p className="mt-1 text-xs text-gray-600">
                      Campo recém-adicionado para controle de estoque
                    </p>
                  </div>
                </div>
              </div>

              {/* Observações */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Observações
                </label>
                <textarea
                  rows={3}
                  defaultValue="Informações adicionais sobre o medicamento..."
                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                  placeholder="Observações sobre o produto..."
                />
              </div>

              {/* Botões */}
              <div className="flex gap-4 pt-4">
                <button
                  type="submit"
                  className="bg-green-600 text-white px-6 py-2 rounded-lg hover:bg-green-700 transition-colors"
                >
                  💾 Salvar Medicamento
                </button>
                <button
                  type="button"
                  onClick={() => setShowForm(false)}
                  className="bg-gray-600 text-white px-6 py-2 rounded-lg hover:bg-gray-700 transition-colors"
                >
                  Cancelar
                </button>
              </div>
            </form>
          </div>
        )}

        {/* Informações Técnicas */}
        <div className="bg-white rounded-lg shadow-sm p-6 mt-6">
          <h3 className="text-lg font-semibold text-gray-900 mb-4">
            🔧 Implementação Técnica
          </h3>
          <div className="grid md:grid-cols-2 gap-6">
            <div>
              <h4 className="font-medium text-gray-900 mb-2">✅ Modificações Realizadas</h4>
              <ul className="text-sm text-gray-600 space-y-1">
                <li>• Interface <code>ProdutoFormData</code> atualizada</li>
                <li>• Campo <code>quantidade: number</code> adicionado</li>
                <li>• Formulário com 3 colunas (preços + estoque)</li>
                <li>• Modal de edição atualizado</li>
                <li>• Validação e tratamento de dados</li>
                <li>• TypeScript errors corrigidos</li>
              </ul>
            </div>
            <div>
              <h4 className="font-medium text-gray-900 mb-2">🎯 Funcionalidades</h4>
              <ul className="text-sm text-gray-600 space-y-1">
                <li>• Controle de estoque em unidades</li>
                <li>• Validação de números inteiros</li>
                <li>• Valor mínimo zero</li>
                <li>• Integração com API Appwrite</li>
                <li>• Interface responsiva</li>
                <li>• Feedback visual para usuário</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
