"use client";

import { useState } from "react";

export default function RelacionarCategoriasPage() {
  const [executando, setExecutando] = useState(false);
  const [resultado, setResultado] = useState<any>(null);
  const [erro, setErro] = useState("");

  const executarRelacionamento = async () => {
    setExecutando(true);
    setErro("");
    setResultado(null);

    try {
      console.log("🔗 Iniciando relacionamento...");

      const response = await fetch("/api/relacionar-categorias", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
      });

      const data = await response.json();

      if (response.ok) {
        setResultado(data);
        console.log("✅ Relacionamento concluído:", data);
      } else {
        setErro(data.mensagem || "Erro desconhecido");
        console.error("❌ Erro:", data);
      }
    } catch (error) {
      setErro("Erro de rede");
      console.error("❌ Erro de rede:", error);
    } finally {
      setExecutando(false);
    }
  };

  return (
    <div className="min-h-screen bg-gray-50 p-8">
      <div className="max-w-4xl mx-auto">
        <div className="bg-white rounded-lg shadow-md p-6">
          <h1 className="text-2xl font-bold text-gray-800 mb-6">
            🔗 Relacionar Produtos com Categorias
          </h1>

          <div className="mb-6">
            <p className="text-gray-600 mb-4">
              Este script irá relacionar automaticamente os produtos do catálogo
              com as categorias criadas.
            </p>

            <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
              <h3 className="font-semibold text-blue-800 mb-2">
                Como funciona:
              </h3>
              <ul className="text-blue-700 text-sm space-y-1">
                <li>• Busca todos os produtos no catálogo</li>
                <li>• Analisa o nome/descrição de cada produto</li>
                <li>• Relaciona com a categoria mais apropriada</li>
                <li>• Atualiza os produtos no banco de dados</li>
              </ul>
            </div>

            <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
              <h3 className="font-semibold text-yellow-800 mb-2">
                ⚠️ Categorias disponíveis:
              </h3>
              <div className="flex flex-wrap gap-2">
                {[
                  "Nutrição",
                  "Diabetes",
                  "Genérico",
                  "RX",
                  "OTC",
                  "HB",
                  "Dermo",
                ].map((cat) => (
                  <span
                    key={cat}
                    className="bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-sm"
                  >
                    {cat}
                  </span>
                ))}
              </div>
            </div>
          </div>

          <button
            onClick={executarRelacionamento}
            disabled={executando}
            className={`w-full py-3 px-6 rounded-lg font-semibold text-white transition-colors ${
              executando
                ? "bg-gray-400 cursor-not-allowed"
                : "bg-blue-600 hover:bg-blue-700"
            }`}
          >
            {executando ? "🔄 Executando..." : "🚀 Executar Relacionamento"}
          </button>

          {erro && (
            <div className="mt-6 bg-red-50 border border-red-200 rounded-lg p-4">
              <h3 className="font-semibold text-red-800 mb-2">❌ Erro:</h3>
              <p className="text-red-700">{erro}</p>
            </div>
          )}

          {resultado && (
            <div className="mt-6 bg-green-50 border border-green-200 rounded-lg p-4">
              <h3 className="font-semibold text-green-800 mb-4">
                ✅ Resultado:
              </h3>

              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                <div className="bg-white rounded-lg p-3 border">
                  <div className="text-2xl font-bold text-green-600">
                    {resultado.totalProdutos}
                  </div>
                  <div className="text-sm text-gray-600">Total de Produtos</div>
                </div>
                <div className="bg-white rounded-lg p-3 border">
                  <div className="text-2xl font-bold text-blue-600">
                    {resultado.resultados?.filter((r: any) => r.sucesso)
                      .length || 0}
                  </div>
                  <div className="text-sm text-gray-600">Sucessos</div>
                </div>
                <div className="bg-white rounded-lg p-3 border">
                  <div className="text-2xl font-bold text-red-600">
                    {resultado.resultados?.filter((r: any) => !r.sucesso)
                      .length || 0}
                  </div>
                  <div className="text-sm text-gray-600">Erros</div>
                </div>
              </div>

              {resultado.resultados && resultado.resultados.length > 0 && (
                <div className="max-h-96 overflow-y-auto">
                  <h4 className="font-semibold text-gray-800 mb-2">
                    Detalhes:
                  </h4>
                  <div className="space-y-2">
                    {resultado.resultados.map((item: any, index: number) => (
                      <div
                        key={index}
                        className={`p-3 rounded-lg border ${
                          item.sucesso
                            ? "bg-green-50 border-green-200"
                            : "bg-red-50 border-red-200"
                        }`}
                      >
                        <div className="flex justify-between items-start">
                          <div>
                            <div className="font-medium text-gray-800">
                              {item.descricao}
                            </div>
                            <div className="text-sm text-gray-600">
                              Categoria:{" "}
                              <span className="font-medium">
                                {item.categoria}
                              </span>
                            </div>
                          </div>
                          <div
                            className={`text-sm font-medium ${
                              item.sucesso ? "text-green-600" : "text-red-600"
                            }`}
                          >
                            {item.sucesso ? "✅" : "❌"}
                          </div>
                        </div>
                        {!item.sucesso && item.erro && (
                          <div className="text-sm text-red-600 mt-1">
                            Erro: {item.erro}
                          </div>
                        )}
                      </div>
                    ))}
                  </div>
                </div>
              )}

              <div className="mt-4 p-3 bg-blue-50 rounded-lg">
                <p className="text-blue-800 font-medium">
                  🎉 Processo concluído!
                </p>
                <p className="text-blue-700 text-sm mt-1">
                  Vá para{" "}
                  <a href="/produtos" className="underline font-medium">
                    /produtos
                  </a>{" "}
                  para verificar se as categorias estão aparecendo.
                </p>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}
