'use client';

import React, { useEffect, useState } from 'react';
import { produtoService } from '@/services/produtoService';
import { Models } from 'appwrite';

export default function DebugProdutosTeste() {
  const [produtos, setProdutos] = useState<Models.Document[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const carregarProdutos = async () => {
      try {
        console.log('🔄 Carregando produtos de teste...');
        const response = await produtoService.listar(1, 20, '');
        console.log('✅ Resposta do serviço:', response);
        
        if (response.success) {
          setProdutos(response.documents);
          console.log('📋 Produtos carregados:', response.documents);
        } else {
          setError(response.error || 'Erro desconhecido');
        }
      } catch (err) {
        console.error('❌ Erro ao carregar produtos:', err);
        setError('Erro ao carregar produtos');
      } finally {
        setLoading(false);
      }
    };

    carregarProdutos();
  }, []);

  if (loading) {
    return (
      <div className="p-8">
        <h1 className="text-2xl font-bold mb-4">Debug - Produtos de Teste</h1>
        <p>Carregando produtos...</p>
      </div>
    );
  }

  if (error) {
    return (
      <div className="p-8">
        <h1 className="text-2xl font-bold mb-4">Debug - Produtos de Teste</h1>
        <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
          <strong>Erro:</strong> {error}
        </div>
      </div>
    );
  }

  return (
    <div className="p-8">
      <h1 className="text-2xl font-bold mb-4">Debug - Produtos de Teste</h1>
      
      <div className="mb-4">
        <p className="text-lg">
          <strong>Total de produtos encontrados:</strong> {produtos.length}
        </p>
      </div>

      {produtos.length === 0 ? (
        <div className="bg-yellow-100 border border-yellow-400 text-yellow-700 px-4 py-3 rounded">
          <p>Nenhum produto encontrado!</p>
        </div>
      ) : (
        <div className="grid gap-4">
          {produtos.map((produto, index) => (
            <div key={produto.$id || index} className="border border-gray-300 rounded-lg p-4 bg-white">
              <h3 className="text-lg font-semibold mb-2">
                {(produto as any).nome || (produto as any)['catalogo-produtos']?.descricao || 'Produto sem nome'}
              </h3>
              
              <div className="grid grid-cols-2 gap-4 text-sm">
                <div>
                  <strong>ID:</strong> {produto.$id}
                </div>
                <div>
                  <strong>Quantidade:</strong> {(produto as any).quantidade || 0}
                </div>
                <div>
                  <strong>Preço Atual:</strong> R$ {((produto as any)['preco-atual'] || 0).toFixed(2)}
                </div>
                <div>
                  <strong>Laboratório:</strong> {(produto as any)['catalogo-produtos']?.laboratorios?.nome || 'N/A'}
                </div>
              </div>

              <details className="mt-4">
                <summary className="cursor-pointer text-blue-600 hover:text-blue-800">
                  Ver dados completos (JSON)
                </summary>
                <pre className="mt-2 bg-gray-100 p-3 rounded text-xs overflow-auto">
                  {JSON.stringify(produto, null, 2)}
                </pre>
              </details>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}
