'use client';

import React, { useEffect, useState } from 'react';
import { useEmpresa } from '@/contexts/EmpresaContext';

const DebugEstruturaProdutos = () => {
  const [produtos, setProdutos] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const { empresaId } = useEmpresa();

  useEffect(() => {
    const carregarProdutos = async () => {
      try {
        const response = await fetch('/api/produtos?limit=5');
        const data = await response.json();
        console.log('🔍 Dados brutos dos produtos:', data);
        setProdutos(data.documents || []);
      } catch (error) {
        console.error('Erro ao carregar produtos:', error);
      } finally {
        setLoading(false);
      }
    };

    carregarProdutos();
  }, []);

  const analisarEstruturaCatalogo = async () => {
    try {
      const response = await fetch('/api/catalogo-produtos?limit=3');
      const data = await response.json();
      console.log('📚 Estrutura do catálogo:', data);
      
      if (data.documents && data.documents.length > 0) {
        console.log('📋 Primeiro item do catálogo:', {
          id: data.documents[0].$id,
          campos: Object.keys(data.documents[0]),
          dados: data.documents[0]
        });
      }
    } catch (error) {
      console.error('Erro ao analisar catálogo:', error);
    }
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-gray-50 p-8">
        <div className="max-w-6xl mx-auto">
          <h1 className="text-3xl font-bold text-gray-900 mb-8">
            🔍 Debug - Estrutura de Produtos
          </h1>
          <div className="text-center">Carregando...</div>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50 p-8">
      <div className="max-w-6xl mx-auto">
        <h1 className="text-3xl font-bold text-gray-900 mb-8">
          🔍 Debug - Estrutura de Produtos
        </h1>

        <div className="mb-6">
          <button
            onClick={analisarEstruturaCatalogo}
            className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700"
          >
            📚 Analisar Catálogo
          </button>
          <p className="text-sm text-gray-600 mt-2">
            Empresa ID atual: {empresaId || 'Não definido'}
          </p>
        </div>

        <div className="space-y-6">
          <h2 className="text-xl font-semibold">
            📦 Produtos Encontrados: {produtos.length}
          </h2>

          {produtos.map((produto, index) => (
            <div key={produto.$id || index} className="bg-white rounded-lg shadow-sm p-6">
              <h3 className="text-lg font-medium mb-4">
                🏷️ Produto #{index + 1} - ID: {produto.$id}
              </h3>
              
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                {/* Dados Básicos */}
                <div>
                  <h4 className="font-medium text-gray-900 mb-2">📋 Dados Básicos</h4>
                  <div className="bg-gray-50 p-3 rounded text-sm space-y-1">
                    <div><strong>ID:</strong> {produto.$id}</div>
                    <div><strong>Created:</strong> {produto.$createdAt}</div>
                    <div><strong>Updated:</strong> {produto.$updatedAt}</div>
                    <div><strong>Empresa ID:</strong> {produto.empresas || 'N/A'}</div>
                    <div><strong>Catálogo ID:</strong> {produto['catalogo-produtos'] || 'N/A'}</div>
                  </div>
                </div>

                {/* Dados do Catálogo */}
                <div>
                  <h4 className="font-medium text-gray-900 mb-2">📚 Dados do Catálogo</h4>
                  <div className="bg-gray-50 p-3 rounded text-sm">
                    {typeof produto['catalogo-produtos'] === 'object' && produto['catalogo-produtos'] ? (
                      <div className="space-y-1">
                        <div><strong>Descrição:</strong> {produto['catalogo-produtos'].descricao || 'N/A'}</div>
                        <div><strong>Código Interno:</strong> {produto['catalogo-produtos']['codigo-interno'] || 'N/A'}</div>
                        <div><strong>Código EAN:</strong> {produto['catalogo-produtos']['codigo-ean'] || 'N/A'}</div>
                        <div><strong>Laboratórios:</strong> {produto['catalogo-produtos'].laboratorios?.length || 0}</div>
                      </div>
                    ) : (
                      <div className="text-red-600">
                        ❌ Dados do catálogo não expandidos. Tipo: {typeof produto['catalogo-produtos']}
                        <br />Valor: {JSON.stringify(produto['catalogo-produtos'])}
                      </div>
                    )}
                  </div>
                </div>

                {/* Preços */}
                <div>
                  <h4 className="font-medium text-gray-900 mb-2">💰 Preços</h4>
                  <div className="bg-gray-50 p-3 rounded text-sm space-y-1">
                    <div><strong>Preço Original:</strong> {produto['preco-original'] || 'N/A'}</div>
                    <div><strong>Preço Atual:</strong> {produto['preco-atual'] || 'N/A'}</div>
                    <div><strong>Preço Fábrica:</strong> {produto['preco-fabrica'] || 'N/A'}</div>
                    <div><strong>PMC:</strong> {produto.pmc || 'N/A'}</div>
                  </div>
                </div>

                {/* Estoque */}
                <div>
                  <h4 className="font-medium text-gray-900 mb-2">📦 Estoque</h4>
                  <div className="bg-gray-50 p-3 rounded text-sm space-y-1">
                    <div><strong>Quantidade:</strong> {produto.quantidade || 'N/A'}</div>
                    <div><strong>Estoque:</strong> {produto.estoque || 'N/A'}</div>
                  </div>
                </div>
              </div>

              {/* Estrutura Completa */}
              <div className="mt-4">
                <h4 className="font-medium text-gray-900 mb-2">🔧 Estrutura Completa</h4>
                <details className="bg-gray-50 p-3 rounded">
                  <summary className="cursor-pointer text-sm font-medium">Ver JSON completo</summary>
                  <pre className="mt-2 text-xs overflow-auto max-h-60">
                    {JSON.stringify(produto, null, 2)}
                  </pre>
                </details>
              </div>
            </div>
          ))}

          {produtos.length === 0 && (
            <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
              <p className="text-yellow-800">
                ⚠️ Nenhum produto encontrado. Verifique se há produtos cadastrados.
              </p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default DebugEstruturaProdutos;
