"use client";

import React, { useState, useEffect } from "react";
import { catalogoProdutoService } from "@/services/catalogoProdutoService";
import { produtoService } from "@/services/produtoService";
import { useEmpresa } from "@/contexts/EmpresaContext";

const DebugCadastroProduto = () => {
  const { empresaId } = useEmpresa();
  const [catalogoProdutos, setCatalogoProdutos] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);
  const [resultado, setResultado] = useState("");
  const [produtos, setProdutos] = useState<any[]>([]);

  useEffect(() => {
    carregarCatalogoProdutos();
    carregarProdutos();
  }, []);

  const carregarCatalogoProdutos = async () => {
    try {
      const response = await catalogoProdutoService.listar();
      if (response.success) {
        setCatalogoProdutos(response.documents.slice(0, 5)); // Pegar apenas os primeiros 5
        console.log("📋 Produtos do catálogo:", response.documents);
      }
    } catch (error) {
      console.error("Erro ao carregar catálogo:", error);
    }
  };

  const carregarProdutos = async () => {
    try {
      if (empresaId) {
        const response = await produtoService.listarPorEmpresa(empresaId);
        setProdutos(response.documents);
        console.log("📦 Produtos da empresa:", response.documents);
      }
    } catch (error) {
      console.error("Erro ao carregar produtos:", error);
    }
  };

  const testarCadastro = async () => {
    if (!empresaId) {
      setResultado("❌ Empresa ID não encontrado");
      return;
    }

    if (catalogoProdutos.length === 0) {
      setResultado("❌ Nenhum produto no catálogo encontrado");
      return;
    }

    setLoading(true);
    setResultado("🔄 Testando cadastro...");

    try {
      const catalogoProdutoId = catalogoProdutos[0].$id;

      const produtoData = {
        "catalogo-produtos": catalogoProdutoId,
        empresas: empresaId,
        "preco-original": 25.5,
        "preco-atual": 22.9,
        quantidade: 50,
      };

      console.log("📤 Dados do produto para teste:", produtoData);

      const response = await produtoService.criar(produtoData);

      if (response.success) {
        setResultado(
          `✅ Produto criado com sucesso! ID: ${response.data?.$id}`
        );
        // Recarregar lista de produtos
        await carregarProdutos();
      } else {
        setResultado(`❌ Erro ao criar produto: ${response.error}`);
      }
    } catch (error) {
      setResultado(`💥 Erro: ${error}`);
      console.error("Erro no teste:", error);
    } finally {
      setLoading(false);
    }
  };

  const testarListagem = async () => {
    setLoading(true);
    setResultado("🔄 Testando listagem...");

    try {
      let response;
      if (empresaId) {
        response = await produtoService.listarPorEmpresa(empresaId);
      } else {
        response = await produtoService.listar();
      }

      setResultado(
        `📊 Encontrados ${response.total} produtos. ${response.documents.length} na página atual.`
      );
      setProdutos(response.documents);
      console.log("Produtos encontrados:", response.documents);
    } catch (error) {
      setResultado(`💥 Erro ao listar: ${error}`);
    } 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 - Cadastro de Produtos
        </h1>

        <div className="bg-white rounded-lg shadow p-6 mb-6">
          <h2 className="text-xl font-semibold mb-4">Informações do Sistema</h2>
          <div className="space-y-2">
            <p>
              <strong>Empresa ID:</strong> {empresaId || "Não encontrado"}
            </p>
            <p>
              <strong>Produtos no Catálogo:</strong> {catalogoProdutos.length}
            </p>
            <p>
              <strong>Produtos Cadastrados:</strong> {produtos.length}
            </p>
          </div>
        </div>

        <div className="bg-white rounded-lg shadow p-6 mb-6">
          <h2 className="text-xl font-semibold mb-4">Testes</h2>
          <div className="flex gap-4 mb-4">
            <button
              onClick={testarCadastro}
              disabled={loading || !empresaId || catalogoProdutos.length === 0}
              className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 disabled:opacity-50"
            >
              {loading ? "Testando..." : "Testar Cadastro"}
            </button>
            <button
              onClick={testarListagem}
              disabled={loading}
              className="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 disabled:opacity-50"
            >
              {loading ? "Carregando..." : "Testar Listagem"}
            </button>
            <button
              onClick={carregarProdutos}
              disabled={loading}
              className="bg-purple-600 text-white px-4 py-2 rounded hover:bg-purple-700 disabled:opacity-50"
            >
              Recarregar Lista
            </button>
          </div>

          {resultado && (
            <div className="bg-gray-100 p-4 rounded">
              <pre className="text-sm">{resultado}</pre>
            </div>
          )}
        </div>

        {catalogoProdutos.length > 0 && (
          <div className="bg-white rounded-lg shadow p-6 mb-6">
            <h2 className="text-xl font-semibold mb-4">
              Produtos do Catálogo (Primeiros 5)
            </h2>
            <div className="space-y-2">
              {catalogoProdutos.map((produto, index) => (
                <div key={produto.$id} className="p-2 bg-gray-50 rounded">
                  <p>
                    <strong>#{index + 1}:</strong>{" "}
                    {produto.descricao || produto.nome || "Sem nome"}
                  </p>
                  <p className="text-sm text-gray-600">ID: {produto.$id}</p>
                </div>
              ))}
            </div>
          </div>
        )}

        {produtos.length > 0 && (
          <div className="bg-white rounded-lg shadow p-6">
            <h2 className="text-xl font-semibold mb-4">Produtos Cadastrados</h2>
            <div className="space-y-2">
              {produtos.map((produto, index) => (
                <div key={produto.$id} className="p-2 bg-gray-50 rounded">
                  <p>
                    <strong>#{index + 1}:</strong>{" "}
                    {produto.nome ||
                      produto["catalogo-produtos"]?.descricao ||
                      "Sem nome"}
                  </p>
                  <p className="text-sm text-gray-600">ID: {produto.$id}</p>
                  <p className="text-sm text-gray-600">
                    Preço: R${" "}
                    {produto["preco-atual"] ||
                      produto["preco-original"] ||
                      "N/A"}
                  </p>
                  <p className="text-sm text-gray-600">
                    Quantidade: {produto.quantidade || "N/A"}
                  </p>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default DebugCadastroProduto;
