"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { toast } from "react-hot-toast";
import { Package, Layers, Search, ArrowLeft } from "lucide-react";
import Header from "@/components/Header";
import { getCurrentUserWithRetry } from "@/lib/auth";
import Modal from "../../components/Modal";

// Tipo para os produtos da API
interface ProdutoCatalogo {
  $id: string;
  $sequence: number;
  $databaseId: string;
  $collectionId: string;
  $createdAt: string;
  $updatedAt: string;
  $permissions: string[];
  codigo_ean: string;
  codigo_interno: string;
  nome: string;
  descricao: string | null;
  preco_base: number;
  preco_fabrica: number | null;
  pmc: number | null;
  desconto_comercial: number;
  valor_substituicao_tributaria: number | null;
  preco_nf: number | null;
  laboratorio: string | null;
  categoria: string | null;
  subcategoria: string | null;
}

interface ApiResponse {
  total: number;
  documents: ProdutoCatalogo[];
}

interface Laboratorio {
  $id: string;
  nome: string;
}

const CatalogoProdutosApi = () => {
  const router = useRouter();
  const [user, setUser] = useState<any>(null);
  const [produtos, setProdutos] = useState<ProdutoCatalogo[]>([]);
  const [total, setTotal] = useState(0);
  const [currentPage, setCurrentPage] = useState(1);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState("");
  const [laboratorios, setLaboratorios] = useState<Laboratorio[]>([]);
  const [laboratorioMap, setLaboratorioMap] = useState<{ [id: string]: string }>({});
  const [selectedProduto, setSelectedProduto] = useState<ProdutoCatalogo | null>(null);
  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);

  // Buscar laboratórios ao iniciar
  useEffect(() => {
    const fetchLaboratorios = async () => {
      try {
        const storedToken = localStorage.getItem('access_token');
        const response = await fetch(`${process.env.NEXT_PUBLIC_BFF_API_URL}/laboratorios?page=1`, {
          headers: {
            'accept': 'application/json',
            'Authorization': `Bearer ${storedToken}`,
          },
        });
        if (response.ok) {
          const data = await response.json();
          setLaboratorios(data.documents || []);
          // Montar mapa id -> nome
          const map: { [id: string]: string } = {};
          (data.items || data.documents || []).forEach((lab: any) => {
            map[lab.id] = lab.nome;
          });
          setLaboratorioMap(map);
        }
      } catch (e) {
        // Silencioso
      }
    };
    fetchLaboratorios();
  }, []);

  useEffect(() => {
    const initializeUser = async () => {
      try {
        // Verificar se há token armazenado
        const storedToken = localStorage.getItem('access_token');

        if (!storedToken) {
          router.push("/login");
          return;
        }


        // Buscar dados do usuário da API
        const response = await fetch(`${process.env.NEXT_PUBLIC_BFF_API_URL}/auth/me`, {
          method: "GET",
          headers: {
            "accept": "application/json",
            "Authorization": `Bearer ${storedToken}`,
          },
        });

        if (response.ok) {
          const userData = await response.json();
          setUser(userData);
          await loadProdutos();
        } else {
          localStorage.removeItem('access_token');
          router.push("/login");
          return;
        }
      } catch (error) {
        console.error("Erro ao verificar autenticação:", error);
        router.push("/login");
      }
    };

    initializeUser();
  }, []);

  useEffect(() => {
    if (user) {
      loadProdutos();
    }
  }, [currentPage, user]);

  const loadProdutos = async () => {
    try {
      setLoading(true);

      // Obter o token de autenticação
      const storedToken = localStorage.getItem('access_token');

      if (!storedToken) {
        router.push("/login");
        return;
      }

      const response = await fetch(`${process.env.NEXT_PUBLIC_BFF_API_URL}/produtos-catalogo?page=${currentPage}`, {
        method: 'GET',
        headers: {
          'accept': 'application/json',
          'Authorization': `Bearer ${storedToken}`,
        },
      });

      if (!response.ok) {
        if (response.status === 401) {
          localStorage.removeItem('access_token');
          router.push("/login");
          return;
        }
        throw new Error(`Erro ${response.status}: ${response.statusText}`);
      }

      const data: ApiResponse = await response.json();
      setProdutos(data.documents);
      setTotal(data.total);

    } catch (error) {
      console.error("❌ Erro ao carregar produtos:", error);
      toast.error("Erro ao carregar produtos do catálogo");
      setProdutos([]);
      setTotal(0);
    } finally {
      setLoading(false);
    }
  };

  const handleSearch = () => {
    if (searchTerm.trim()) {
      const filteredProdutos = produtos.filter(produto =>
        produto.nome.toLowerCase().includes(searchTerm.toLowerCase()) ||
        produto.codigo_ean.toLowerCase().includes(searchTerm.toLowerCase()) ||
        produto.codigo_interno.toLowerCase().includes(searchTerm.toLowerCase()) ||
        (produto.descricao && produto.descricao.toLowerCase().includes(searchTerm.toLowerCase()))
      );
      setProdutos(filteredProdutos);
    } else {
      loadProdutos();
    }
  };

  const clearSearch = () => {
    setSearchTerm("");
    loadProdutos();
  };

  const formatPrice = (price: number | null) => {
    return price ? `R$ ${price.toFixed(2).replace('.', ',')}` : 'N/A';
  };

  const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString('pt-BR');
  };

  const handleEdit = (produto: ProdutoCatalogo) => {
    setSelectedProduto(produto);
    setIsEditModalOpen(true);
  };

  const confirmEdit = async (updatedProduto: ProdutoCatalogo | null) => {
    if (!updatedProduto) return;
    try {
      const storedToken = localStorage.getItem("access_token");
      const response = await fetch(
        `${process.env.NEXT_PUBLIC_BFF_API_URL}/produtos-catalogo/${updatedProduto.$id}`,
        {
          method: "PATCH",
          headers: {
            accept: "application/json",
            "Content-Type": "application/json",
            Authorization: `Bearer ${storedToken}`,
          },
          body: JSON.stringify({ data: updatedProduto }),
        }
      );

      if (response.ok) {
        toast.success("Produto atualizado com sucesso!");
        loadProdutos();
      } else {
        toast.error("Erro ao atualizar produto.");
      }
    } catch (error) {
      toast.error("Erro ao atualizar produto.");
    } finally {
      setIsEditModalOpen(false);
    }
  };

  const handleEditChange = (field: keyof ProdutoCatalogo, value: any) => {
    if (selectedProduto) {
      setSelectedProduto({
        ...selectedProduto,
        [field]: value,
        $id: selectedProduto.$id || "", // Garantir que $id seja uma string válida
      } as ProdutoCatalogo);
    }
  };

  if (!user) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <div className="w-16 h-16 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
          <p className="text-gray-600">Carregando...</p>
        </div>
      </div>
    );
  }

  const totalPages = Math.ceil(total / 20); // Assumindo 20 itens por página baseado na API

  return (
    <div className="min-h-screen bg-gray-50">
      <Header user={user} />
      <main className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
        {/* Header com botão voltar */}
        <div className="mb-8 flex items-center justify-between">
          <div className="flex items-center space-x-4">
            <button
              onClick={() => router.push("/dashboard")}
              className="flex items-center text-gray-600 hover:text-gray-900 transition-colors"
            >
              <ArrowLeft className="w-5 h-5 mr-2" />
              Voltar ao Dashboard
            </button>
          </div>
        </div>

        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900">
            Catálogo de Produtos
          </h1>
          <p className="mt-2 text-gray-600">
            Consulte todos os produtos disponíveis no catálogo
          </p>
        </div>

        {/* Estatísticas */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
          <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-gray-600">Total de Produtos</p>
                <p className="text-2xl font-bold text-blue-600">{total}</p>
              </div>
              <div className="p-3 rounded-full bg-blue-100">
                <Package className="w-6 h-6 text-blue-600" />
              </div>
            </div>
          </div>

          <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-gray-600">Página Atual</p>
                <p className="text-2xl font-bold text-green-600">{currentPage} de {totalPages}</p>
              </div>
              <div className="p-3 rounded-full bg-green-100">
                <Layers className="w-6 h-6 text-green-600" />
              </div>
            </div>
          </div>

          <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-gray-600">Produtos Exibidos</p>
                <p className="text-2xl font-bold text-purple-600">{produtos.length}</p>
              </div>
              <div className="p-3 rounded-full bg-purple-100">
                <Package className="w-6 h-6 text-purple-600" />
              </div>
            </div>
          </div>
        </div>

        {/* Barra de Busca */}
        <div className="mb-6 flex flex-col sm:flex-row gap-4">
          <div className="flex-1">
            <div className="relative">
              <input
                type="text"
                placeholder="Buscar por nome, código EAN ou código interno..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                onKeyPress={(e) => e.key === "Enter" && handleSearch()}
                className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
              <Search className="absolute left-3 top-2.5 h-5 w-5 text-gray-400" />
            </div>
          </div>
          <div className="flex gap-2">
            <button
              onClick={handleSearch}
              disabled={loading}
              className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors flex items-center gap-2 disabled:opacity-50"
            >
              <Search className="w-4 h-4" />
              Buscar
            </button>
            <button
              onClick={clearSearch}
              disabled={loading}
              className="bg-gray-600 text-white px-4 py-2 rounded-lg hover:bg-gray-700 transition-colors disabled:opacity-50"
            >
              Limpar
            </button>
          </div>
        </div>

        {/* Loading State */}
        {loading && (
          <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
            <div className="flex items-center justify-center">
              <div className="w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mr-3"></div>
              <span className="text-gray-600">Carregando produtos...</span>
            </div>
          </div>
        )}

        {/* Lista de Produtos */}
        {!loading && (
          <div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
            {produtos.length === 0 ? (
              <div className="p-8 text-center">
                <Package className="mx-auto h-12 w-12 text-gray-400 mb-4" />
                <h3 className="text-lg font-medium text-gray-900 mb-2">Nenhum produto encontrado</h3>
                <p className="text-gray-500">Não há produtos disponíveis no catálogo.</p>
              </div>
            ) : (
              <>
                {/* Header da tabela */}
                <div className="px-6 py-3 bg-gray-50 border-b border-gray-200">
                  <div className="grid grid-cols-1 md:grid-cols-6 gap-4 text-xs font-medium text-gray-500 uppercase tracking-wider">
                    <div className="md:col-span-2">Produto</div>
                    <div>Códigos</div>
                    <div>Preços</div>
                    <div>Laboratório</div>
                    <div>Criado em</div>
                    <div>Ações</div>
                  </div>
                </div>

                {/* Lista de produtos */}
                <div className="divide-y divide-gray-200">
                  {produtos.map((produto) => (
                    <div key={produto.$id} className="p-6 hover:bg-gray-50 transition-colors">
                      <div className="grid grid-cols-1 md:grid-cols-6 gap-4">
                        {/* Nome e Descrição */}
                        <div className="md:col-span-2">
                          <h3 className="text-sm font-medium text-gray-900 mb-1">
                            {produto.nome}
                          </h3>
                          {produto.descricao && (
                            <p className="text-sm text-gray-500 line-clamp-2">
                              {produto.descricao}
                            </p>
                          )}
                          {produto.categoria && (
                            <span className="inline-block mt-2 px-2 py-1 text-xs bg-blue-100 text-blue-800 rounded-full">
                              {produto.categoria}
                            </span>
                          )}
                        </div>

                        {/* Códigos */}
                        <div className="space-y-1">
                          <div className="text-sm">
                            <span className="font-medium text-gray-500">EAN:</span>
                            <br />
                            <span className="text-gray-900">{produto.codigo_ean}</span>
                          </div>
                          <div className="text-sm">
                            <span className="font-medium text-gray-500">Interno:</span>
                            <br />
                            <span className="text-gray-900">{produto.codigo_interno}</span>
                          </div>
                        </div>

                        {/* Preços */}
                        <div className="space-y-1">
                          <div className="text-sm">
                            <span className="font-medium text-gray-500">Base:</span>
                            <br />
                            <span className="text-gray-900 font-medium">{formatPrice(produto.preco_base)}</span>
                          </div>
                          {produto.pmc && (
                            <div className="text-sm">
                              <span className="font-medium text-gray-500">PMC:</span>
                              <br />
                              <span className="text-gray-900">{formatPrice(produto.pmc)}</span>
                            </div>
                          )}
                        </div>

                        {/* Laboratório */}
                        <div className="text-sm">
                          <span className="text-gray-900">
                            {laboratorioMap[produto.laboratorio ?? ''] || 'N/A'}
                          </span>
                        </div>

                        {/* Data de Criação */}
                        <div className="text-sm text-gray-500">
                          {formatDate(produto.$createdAt)}
                        </div>

                        {/* Ações */}

                      </div>
                    </div>
                  ))}
                </div>
              </>
            )}
          </div>
        )}

        {/* Paginação */}
        {!loading && produtos.length > 0 && (
          <div className="mt-6 flex items-center justify-between">
            <div className="text-sm text-gray-700">
              Mostrando página {currentPage} de {totalPages} ({total} produtos no total)
            </div>
            <div className="flex space-x-2">
              <button
                onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))}
                disabled={currentPage === 1}
                className="px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
              >
                Anterior
              </button>
              <button
                onClick={() => setCurrentPage(prev => Math.min(prev + 1, totalPages))}
                disabled={currentPage === totalPages}
                className="px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
              >
                Próxima
              </button>
            </div>
          </div>
        )}
      </main>

      {/* Modais */}
      {isEditModalOpen && (
        <Modal
          title="Editar Produto"
          onClose={() => setIsEditModalOpen(false)}
          onConfirm={() => confirmEdit(selectedProduto)}
        >
          {/* Formulário de edição */}
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-gray-700">Nome</label>
              <input
                type="text"
                value={selectedProduto?.nome || ""}
                onChange={(e) => {
                  if (selectedProduto) {
                    setSelectedProduto({ ...selectedProduto, nome: e.target.value });
                  }
                }}
                placeholder="Nome do Produto"
                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700">Preço Base</label>
              <input
                type="text"
                value={selectedProduto?.preco_base?.toString() || ""}
                onChange={(e) => {
                  if (selectedProduto) {
                    setSelectedProduto({ ...selectedProduto, preco_base: parseFloat(e.target.value) });
                  }
                }}
                placeholder="Preço Base"
                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700">PMC</label>
              <input
                type="text"
                value={selectedProduto?.pmc?.toString() || ""}
                onChange={(e) => {
                  if (selectedProduto) {
                    setSelectedProduto({ ...selectedProduto, pmc: parseFloat(e.target.value) });
                  }
                }}
                placeholder="Preço de Mercado"
                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700">Descrição</label>
              <textarea
                value={selectedProduto?.descricao || ""}
                onChange={(e) => {
                  if (selectedProduto) {
                    setSelectedProduto({ ...selectedProduto, descricao: e.target.value });
                  }
                }}
                placeholder="Descrição do Produto"
                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700">Laboratório</label>
              <select
                value={selectedProduto?.laboratorio || ""}
                onChange={(e) => {
                  if (selectedProduto) {
                    setSelectedProduto({ ...selectedProduto, laboratorio: e.target.value });
                  }
                }}
                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
              >
                <option value="">Selecione um laboratório</option>
                {laboratorios.map((lab) => (
                  <option key={lab.$id} value={lab.$id}>
                    {lab.nome}
                  </option>
                ))}
              </select>
            </div>
          </div>
        </Modal>
      )}
    </div>
  );
};

export default CatalogoProdutosApi;