"use client";

import { useState, useEffect, Suspense } from "react";
import { Models } from "appwrite";
import { useRouter, useSearchParams } from "next/navigation";
import { toast } from "react-hot-toast";
import { PlusIcon, PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
import { Package, FileText, Layers, Search } from "lucide-react";

import { catalogoProdutoService } from "@/services/catalogoProdutoService";
import { produtoService } from "@/services/produtoService";
import { useEmpresa } from "@/contexts/EmpresaContext";
import { getCurrentUserWithRetry } from "@/lib/auth";
import Header from "@/components/Header";
import CatalogoProdutoForm from "@/components/CatalogoProdutoForm";
import CatalogoProdutosList from "@/components/CatalogoProdutosList";
import { DetalheProdutoModal } from "@/components/DetalheProdutoModal";
import { EditProdutoModal } from "@/components/EditProdutoModal";

interface StatCardProps {
  title: string;
  value: string | number;
  icon: React.ReactNode;
  color: string;
}

const StatCard = ({ title, value, icon, color }: StatCardProps) => (
  <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">{title}</p>
        <p className={`text-2xl font-bold ${color}`}>{value}</p>
      </div>
      <div
        className={`p-3 rounded-full ${color
          .replace("text-", "bg-")
          .replace("-600", "-100")}`}
      >
        {icon}
      </div>
    </div>
  </div>
);

const GestaoCatalogoProdutos = () => {
  const router = useRouter();
  const searchParams = useSearchParams();
  const { empresaId, loading: empresaLoading } = useEmpresa();
  const [user, setUser] = useState<Models.User<Models.Preferences> | null>(
    null
  );
  const [catalogoProdutos, setCatalogoProdutos] = useState<Models.Document[]>(
    []
  );
  const [totalCatalogoProdutos, setTotalCatalogoProdutos] = useState(0);
  const [loading, setLoading] = useState(true);
  const [isCreating, setIsCreating] = useState(false);
  const [isChangingPage, setIsChangingPage] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const [searchTerm, setSearchTerm] = useState("");
  const [activeTab, setActiveTab] = useState("lista");
  const [editingCatalogo, setEditingCatalogo] =
    useState<Models.Document | null>(null);
  const [modalOpen, setModalOpen] = useState(false);
  const [editModalOpen, setEditModalOpen] = useState(false);
  const [detalheProduto, setDetalheProduto] = useState<Models.Document | null>(
    null
  );

  useEffect(() => {
    const initializeUser = async () => {
      try {
        const currentUser = await getCurrentUserWithRetry();
        if (!currentUser) {
          router.push("/");
          return;
        }
        setUser(currentUser);
        await loadCatalogoProdutos();
      } catch (error) {
        console.error("Erro ao verificar autenticação:", error);
        router.push("/");
      }
    };

    initializeUser();
  }, []);

  useEffect(() => {
    const focusSearch = searchParams.get("focus");
    if (focusSearch === "search") {
      const searchInput = document.getElementById("search-input");
      if (searchInput) {
        searchInput.focus();
      }
    }
  }, [searchParams]);

  useEffect(() => {
    if (user && activeTab === "lista" && empresaId && !empresaLoading) {
      loadCatalogoProdutos();
    }
  }, [currentPage, searchTerm, activeTab, user, empresaId, empresaLoading]);

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

      // Aguardar que tenhamos o ID da empresa antes de fazer a requisição
      if (!empresaId) {
        console.log("⏳ Aguardando ID da empresa...");
        return;
      }

      console.log("🏢 Carregando produtos da empresa:", empresaId);

      // Usar o produtoService que já filtra por empresa
      const response = await produtoService.listarPorEmpresa(
        empresaId, // ID da empresa
        currentPage,
        10, // items per page
        searchTerm
      );

      if (response.success) {
        setCatalogoProdutos(response.documents);
        setTotalCatalogoProdutos(response.total);
        console.log(
          "✅ Produtos carregados:",
          response.documents.length,
          "de",
          response.total
        );
      } else {
        throw new Error(response.error || "Erro ao carregar produtos");
      }
    } catch (error) {
      console.error("❌ Erro ao carregar catálogo:", error);
      toast.error("Erro ao carregar catálogo de produtos");
      setCatalogoProdutos([]);
      setTotalCatalogoProdutos(0);
    } finally {
      setLoading(false);
    }
  };

  const handleFormSubmit = async (formData: any): Promise<boolean> => {
    try {
      setIsCreating(true);

      // Garantir que o empresaId esteja presente nos dados
      const produtoData = {
        ...formData,
        empresas: empresaId, // Associar à empresa do usuário
      };

      // Sempre criar um novo produto (não editar)
      const response = await produtoService.criar(produtoData);
      if (response.success) {
        toast.success("Produto adicionado com sucesso!");
        setActiveTab("lista");
        await loadCatalogoProdutos();
        return true;
      } else {
        throw new Error(response.error || "Erro ao criar produto");
      }
    } catch (error) {
      console.error("Erro ao salvar produto:", error);
      toast.error("Erro ao salvar produto");
      return false;
    } finally {
      setIsCreating(false);
    }
  };

  const handleEdit = (produto: Models.Document) => {
    setEditingCatalogo(produto);
    setEditModalOpen(true);
  };

  const handleSaveEdit = async (formData: any): Promise<boolean> => {
    try {
      if (!editingCatalogo) return false;

      // Garantir que o empresaId esteja presente nos dados
      const produtoData = {
        ...formData,
        empresas: empresaId, // Associar à empresa do usuário
      };

      const response = await produtoService.atualizar(
        editingCatalogo.$id,
        produtoData
      );

      if (response.success) {
        await loadCatalogoProdutos(); // Recarregar a lista
        setEditingCatalogo(null);
        setEditModalOpen(false);
        return true;
      } else {
        throw new Error(response.error || "Erro ao atualizar produto");
      }
    } catch (error) {
      console.error("Erro ao salvar produto:", error);
      return false;
    }
  };

  const handleCancelEdit = () => {
    setEditingCatalogo(null);
    setActiveTab("lista");
  };

  const deletarCatalogo = async (id: string) => {
    if (window.confirm("Tem certeza que deseja excluir este produto?")) {
      try {
        const response = await produtoService.deletar(id);
        if (response.success) {
          toast.success("Produto removido com sucesso!");
          await loadCatalogoProdutos();
        } else {
          throw new Error(response.error || "Erro ao deletar produto");
        }
      } catch (error) {
        console.error("Erro ao deletar produto:", error);
        toast.error("Erro ao remover produto");
      }
    }
  };

  const handleSearch = async () => {
    setCurrentPage(1);
    await loadCatalogoProdutos();
  };

  const handleNextPage = async () => {
    const totalPages = Math.ceil(totalCatalogoProdutos / 10);
    if (currentPage < totalPages) {
      setIsChangingPage(true);
      setCurrentPage((prev) => prev + 1);
      setIsChangingPage(false);
    }
  };

  const handlePrevPage = async () => {
    if (currentPage > 1) {
      setIsChangingPage(true);
      setCurrentPage((prev) => prev - 1);
      setIsChangingPage(false);
    }
  };

  const totalPages = Math.ceil(totalCatalogoProdutos / 10);

  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>
    );
  }

  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">
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900">
            Gestão de Catálogo de Produtos
          </h1>
          <p className="mt-2 text-gray-600">
            Gerencie o catálogo de produtos da sua farmácia
          </p>
        </div>

        {/* Estatísticas */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
          <StatCard
            title="Total de Produtos"
            value={totalCatalogoProdutos}
            icon={<Package className="w-6 h-6 text-black" />}
            color="text-blue-600"
          />
          <StatCard
            title="Página Atual"
            value={`${currentPage} de ${totalPages}`}
            icon={<FileText className="w-6 h-6 text-black" />}
            color="text-green-600"
          />
          <StatCard
            title="Produtos por Página"
            value="10"
            icon={<Layers className="w-6 h-6 text-black" />}
            color="text-purple-600"
          />
        </div>

        {/* Navegação por Abas */}
        <div className="mb-6">
          <nav className="flex space-x-8" aria-label="Tabs">
            <button
              onClick={() => setActiveTab("lista")}
              className={`whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm ${
                activeTab === "lista"
                  ? "border-blue-500 text-blue-600"
                  : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
              }`}
            >
              Lista de Produtos
            </button>
            <button
              onClick={() => setActiveTab("cadastro")}
              className={`whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm ${
                activeTab === "cadastro"
                  ? "border-blue-500 text-blue-600"
                  : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
              }`}
            >
              Cadastrar Produto
            </button>
          </nav>
        </div>

        {/* Barra de Busca */}
        {activeTab === "lista" && (
          <div className="mb-6 flex flex-col sm:flex-row gap-4">
            <div className="flex-1">
              <div className="relative">
                <input
                  id="search-input"
                  type="text"
                  placeholder="Buscar produtos no catálogo..."
                  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={() => {
                  setSearchTerm("");
                  setCurrentPage(1);
                  loadCatalogoProdutos();
                }}
                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>
        )}

        {activeTab === "lista" && (
          <CatalogoProdutosList
            produtos={catalogoProdutos}
            loading={loading}
            isChangingPage={isChangingPage}
            totalProdutos={totalCatalogoProdutos}
            currentPage={currentPage}
            pageSize={10}
            onView={(produto) => {
              setDetalheProduto(produto);
              setModalOpen(true);
            }}
            onEdit={handleEdit}
            onDelete={deletarCatalogo}
            onPrevPage={handlePrevPage}
            onNextPage={handleNextPage}
            onRowClick={undefined}
          />
        )}

        {activeTab === "cadastro" && (
          <CatalogoProdutoForm
            onSubmit={handleFormSubmit}
            onCancel={undefined} // Sem cancelar, apenas criar
            initialData={null} // Sempre vazio para cadastro
            loading={isCreating || loading}
          />
        )}

        <DetalheProdutoModal
          produto={detalheProduto}
          isOpen={modalOpen}
          onClose={() => setModalOpen(false)}
        />

        <EditProdutoModal
          produto={editingCatalogo}
          isOpen={editModalOpen}
          onClose={() => {
            setEditModalOpen(false);
            setEditingCatalogo(null);
          }}
          onSave={handleSaveEdit}
          loading={isCreating}
        />
      </main>
    </div>
  );
};

const CatalogoProdutosPage = () => (
  <Suspense>
    <GestaoCatalogoProdutos />
  </Suspense>
);

export default CatalogoProdutosPage;
