"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";

export default function CatalogoProdutosPage() {
  const {
    catalogoProdutos,
    loading,
    error,
    total,
    currentPage,
    pageSize,
    carregarCatalogoProdutos,
    criarCatalogoProduto,
    atualizarCatalogoProduto,
    deletarCatalogoProduto,
    handlePrevPage,
    handleNextPage
  } = useCatalogoProdutos();

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>

      <div className="mt-4 flex justify-between items-center">
        <div className="text-sm text-gray-600">
          {total > 0 ? (
            <>Mostrando {(currentPage - 1) * pageSize + 1} -{' '}
            {Math.min(currentPage * pageSize, total)} de {total} produtos</>
          ) : (
            'Total de produtos: 0'
          )}
        </div>
        {Math.ceil(total / pageSize) > 1 && (
          <div className="flex gap-2">
            <button
              onClick={handlePrevPage}
              disabled={currentPage <= 1}
              className="bg-gray-600 text-white px-3 py-1 rounded-md hover:bg-gray-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
            >
              ← Anterior
            </button>
            <span className="px-3 py-1 text-gray-700">
              Página {currentPage} de {Math.ceil(total / pageSize)}
            </span>
            <button
              onClick={handleNextPage}
              disabled={currentPage >= Math.ceil(total / pageSize)}
              className="bg-gray-600 text-white px-3 py-1 rounded-md hover:bg-gray-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
            >
              Próxima →
            </button>
          </div>
        )}
      </div>
    </div>
  );
};

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

export default CatalogoProdutosPage;
