'use client';

import React, { useState } from 'react';

const DebugProdutosPage = () => {
  const [resultado, setResultado] = useState<any>(null);
  const [loading, setLoading] = useState(false);

  const testarCriacaoSimples = async () => {
    setLoading(true);
    try {
      // Teste 1: Criar produto com estrutura mínima
      const produtoMinimo = {
        documentId: 'unique()',
        data: {
          'catalogo-produtos': '66d90d3900338816f1ab', // ID de teste
          'empresas': '66d90a0b0032117c21e5' // ID de teste
        }
      };

      console.log('🧪 Testando criação com estrutura mínima:', produtoMinimo);

      const response = await fetch('/api/produtos', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(produtoMinimo)
      });

      const result = await response.json();
      console.log('📥 Resposta do teste:', result);

      setResultado({
        teste: 'Produto Mínimo',
        sucesso: response.ok,
        status: response.status,
        dados: result
      });

    } catch (error) {
      console.error('❌ Erro no teste:', error);
      setResultado({
        teste: 'Produto Mínimo',
        sucesso: false,
        erro: error instanceof Error ? error.message : 'Erro desconhecido'
      });
    } finally {
      setLoading(false);
    }
  };

  const testarCriacaoComPrecos = async () => {
    setLoading(true);
    try {
      // Teste 2: Criar produto com preços
      const produtoComPrecos = {
        documentId: 'unique()',
        data: {
          'catalogo-produtos': '66d90d3900338816f1ab',
          'empresas': '66d90a0b0032117c21e5',
          'preco-original': 10.50,
          'preco-atual': 9.99
        }
      };

      console.log('🧪 Testando criação com preços:', produtoComPrecos);

      const response = await fetch('/api/produtos', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(produtoComPrecos)
      });

      const result = await response.json();
      console.log('📥 Resposta do teste:', result);

      setResultado({
        teste: 'Produto com Preços',
        sucesso: response.ok,
        status: response.status,
        dados: result
      });

    } catch (error) {
      console.error('❌ Erro no teste:', error);
      setResultado({
        teste: 'Produto com Preços',
        sucesso: false,
        erro: error instanceof Error ? error.message : 'Erro desconhecido'
      });
    } finally {
      setLoading(false);
    }
  };

  const verificarEstruturaCatalogo = async () => {
    setLoading(true);
    try {
      const response = await fetch('/api/catalogo-produtos?limit=1');
      const result = await response.json();
      
      console.log('📋 Estrutura do catálogo:', result);
      
      setResultado({
        teste: 'Estrutura Catálogo',
        sucesso: response.ok,
        status: response.status,
        dados: result
      });

    } catch (error) {
      console.error('❌ Erro ao verificar catálogo:', error);
      setResultado({
        teste: 'Estrutura Catálogo',
        sucesso: false,
        erro: error instanceof Error ? error.message : 'Erro desconhecido'
      });
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="min-h-screen bg-gray-50 p-8">
      <div className="max-w-4xl mx-auto">
        <h1 className="text-3xl font-bold text-gray-900 mb-8">
          🔬 Debug - Teste de Criação de Produtos
        </h1>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
          <button
            onClick={testarCriacaoSimples}
            disabled={loading}
            className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 disabled:opacity-50"
          >
            {loading ? 'Testando...' : '🧪 Teste Produto Mínimo'}
          </button>

          <button
            onClick={testarCriacaoComPrecos}
            disabled={loading}
            className="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 disabled:opacity-50"
          >
            {loading ? 'Testando...' : '💰 Teste com Preços'}
          </button>

          <button
            onClick={verificarEstruturaCatalogo}
            disabled={loading}
            className="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 disabled:opacity-50"
          >
            {loading ? 'Verificando...' : '📋 Ver Catálogo'}
          </button>
        </div>

        {resultado && (
          <div className="bg-white rounded-lg shadow-sm p-6">
            <h2 className="text-xl font-semibold mb-4">
              📊 Resultado do Teste: {resultado.teste}
            </h2>
            
            <div className={`p-4 rounded-lg mb-4 ${
              resultado.sucesso ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
            }`}>
              <strong>Status:</strong> {resultado.sucesso ? '✅ Sucesso' : '❌ Erro'}
              {resultado.status && ` (${resultado.status})`}
            </div>

            {resultado.erro && (
              <div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-4">
                <strong>Erro:</strong> {resultado.erro}
              </div>
            )}

            {resultado.dados && (
              <div className="bg-gray-50 rounded-lg p-4">
                <strong>Dados de Resposta:</strong>
                <pre className="mt-2 text-sm overflow-auto">
                  {JSON.stringify(resultado.dados, null, 2)}
                </pre>
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
};

export default DebugProdutosPage;
