'use client';

import { useState } from 'react';

interface CollectionInfo {
  id: string;
  name: string;
  attributes?: any[];
  error?: string;
}

export default function DiagnosticoCollections() {
  const [collections, setCollections] = useState<CollectionInfo[]>([]);
  const [loading, setLoading] = useState(false);
  const [testResults, setTestResults] = useState<any>({});

  const collectionsToCheck = [
    { id: 'produtos-catalogo', name: 'Produtos Catálogo' },
    { id: 'produtos-venda', name: 'Produtos Venda' },
    { id: 'produtos-estoque', name: 'Produtos Estoque' }
  ];

  const verificarCollections = async () => {
    setLoading(true);
    const results: CollectionInfo[] = [];

    for (const collection of collectionsToCheck) {
      try {
        const response = await fetch(`/api/diagnostico-collections?collection=${collection.id}`);
        const data = await response.json();
        
        results.push({
          id: collection.id,
          name: collection.name,
          attributes: data.attributes || [],
          error: data.error
        });
      } catch (error) {
        results.push({
          id: collection.id,
          name: collection.name,
          error: `Erro de rede: ${error}`
        });
      }
    }

    setCollections(results);
    setLoading(false);
  };

  const testarCadastroSimples = async () => {
    setLoading(true);
    const results: any = {};

    // Teste Produtos Venda
    try {
      const responseVenda = await fetch('/api/produtos/venda', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          catalogo_id: 'test123',
          data_validade: '2025-12-31',
          preco_venda: 25.50,
          observacoes: 'Teste diagnóstico'
        })
      });
      results.venda = await responseVenda.json();
    } catch (error) {
      results.venda = { error: `Erro de rede: ${error}` };
    }

    // Teste Produtos Estoque
    try {
      const responseEstoque = await fetch('/api/produtos/estoque', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          catalogo_id: 'test123',
          venda_id: 'test456',
          quantidade: 100
        })
      });
      results.estoque = await responseEstoque.json();
    } catch (error) {
      results.estoque = { error: `Erro de rede: ${error}` };
    }

    setTestResults(results);
    setLoading(false);
  };

  return (
    <div className="container mx-auto p-6">
      <h1 className="text-3xl font-bold mb-6">Diagnóstico das Collections</h1>
      
      <div className="space-y-6">
        {/* Controles */}
        <div className="flex gap-4">
          <button
            onClick={verificarCollections}
            disabled={loading}
            className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 disabled:opacity-50"
          >
            {loading ? 'Verificando...' : 'Verificar Estrutura das Collections'}
          </button>
          
          <button
            onClick={testarCadastroSimples}
            disabled={loading}
            className="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 disabled:opacity-50"
          >
            {loading ? 'Testando...' : 'Testar Cadastro Simples'}
          </button>
        </div>

        {/* Resultados das Collections */}
        {collections.length > 0 && (
          <div>
            <h2 className="text-2xl font-semibold mb-4">Estrutura das Collections</h2>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              {collections.map((collection) => (
                <div key={collection.id} className="border rounded-lg p-4">
                  <h3 className="text-lg font-semibold mb-2">{collection.name}</h3>
                  <p className="text-sm text-black mb-2">ID: {collection.id}</p>
                  
                  {collection.error ? (
                    <div className="text-red-600 text-sm">
                      <p>Erro: {collection.error}</p>
                    </div>
                  ) : (
                    <div>
                      <p className="text-sm font-medium mb-2">Atributos ({collection.attributes?.length || 0}):</p>
                      <div className="space-y-1">
                        {collection.attributes?.map((attr, index) => (
                          <div key={index} className="text-xs bg-gray-100 p-2 rounded">
                            <p><strong>Nome:</strong> {attr.key}</p>
                            <p><strong>Tipo:</strong> {attr.type}</p>
                            <p><strong>Obrigatório:</strong> {attr.required ? 'Sim' : 'Não'}</p>
                          </div>
                        )) || <p className="text-sm text-black">Nenhum atributo encontrado</p>}
                      </div>
                    </div>
                  )}
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Resultados dos Testes */}
        {Object.keys(testResults).length > 0 && (
          <div>
            <h2 className="text-2xl font-semibold mb-4">Resultados dos Testes</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {Object.entries(testResults).map(([key, result]: [string, any]) => (
                <div key={key} className={`border rounded-lg p-4 ${result.success ? 'border-green-200 bg-green-50' : 'border-red-200 bg-red-50'}`}>
                  <h3 className="text-lg font-semibold mb-2">Teste {key}</h3>
                  <div className="text-sm">
                    {result.success ? (
                      <div className="text-green-600">
                        <p>✅ Sucesso!</p>
                        <p>ID criado: {result.data?.id}</p>
                      </div>
                    ) : (
                      <div className="text-red-600">
                        <p>❌ Erro: {result.error}</p>
                        {result.details && (
                          <div className="mt-2">
                            <p className="font-medium">Detalhes:</p>
                            <pre className="text-xs bg-white p-2 rounded mt-1 overflow-auto text-black">
                              {typeof result.details === 'string' ? result.details : JSON.stringify(result.details, null, 2)}
                            </pre>
                          </div>
                        )}
                      </div>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Instruções */}
        <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
          <h3 className="text-lg font-semibold mb-2">Atributos Necessários</h3>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
            <div>
              <h4 className="font-medium">produtos-catalogo ✅</h4>
              <ul className="list-disc list-inside text-xs space-y-1 mt-1">
                <li>codigo_ean (string, obrigatório)</li>
                <li>nome (string, obrigatório)</li>
                <li>preco_base (number, obrigatório)</li>
                <li>codigo_interno (string, opcional)</li>
                <li>descricao (string, opcional)</li>
                <li>preco_fabrica (number, opcional)</li>
                <li>pmc (number, opcional)</li>
                <li>desconto_comercial (number, opcional)</li>
                <li>valor_substituicao_tributaria (number, opcional)</li>
                <li>preco_nf (number, opcional)</li>
                <li>laboratorio (string, opcional)</li>
                <li>categoria (string, opcional)</li>
                <li>subcategoria (string, opcional)</li>
              </ul>
            </div>
            <div>
              <h4 className="font-medium">produtos-venda ❌</h4>
              <ul className="list-disc list-inside text-xs space-y-1 mt-1">
                <li>catalogo_id (string, obrigatório)</li>
                <li>data_validade (string, obrigatório)</li>
                <li>preco_venda (number, obrigatório)</li>
                <li>observacoes (string, opcional)</li>
              </ul>
            </div>
            <div>
              <h4 className="font-medium">produtos-estoque ❌</h4>
              <ul className="list-disc list-inside text-xs space-y-1 mt-1">
                <li>catalogo_id (string, obrigatório)</li>
                <li>venda_id (string, obrigatório)</li>
                <li>quantidade (number, obrigatório)</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}