"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import Header from "@/components/Header";
import {
  MagnifyingGlassIcon,
  ArrowPathIcon,
  PencilIcon,
  CalendarIcon,
  CurrencyDollarIcon,
  ArchiveBoxIcon,
  ExclamationTriangleIcon,
  XMarkIcon,
  CheckIcon,
  TrashIcon
} from '@heroicons/react/24/outline';

// Interface para produtos de venda
interface ProdutoVenda {
  id: string;
  catalogo_id: string;
  nome: string;
  preco_venda: number;
  qtdade_estoque: number;
  observacoes: string;
  data_validade: string;
  empresa_id: string;
  createdAt: string;
  updatedAt: string;
}

const GestaoProdutosVenda = () => {
  const router = useRouter();
  const [loading, setLoading] = useState(true);
  const [userData, setUserData] = useState<any>(null);
  const [produtos, setProdutos] = useState<ProdutoVenda[]>([]);
  const [produtosFiltrados, setProdutosFiltrados] = useState<ProdutoVenda[]>([]);
  const [loadingProdutos, setLoadingProdutos] = useState(true);
  const [error, setError] = useState<string | null>(null);

  // Estados para filtros e busca
  const [search, setSearch] = useState("");
  const [filtroEstoque, setFiltroEstoque] = useState<'todos' | 'baixo' | 'zerado'>('todos');

  // Estados para paginação
  const [currentPage, setCurrentPage] = useState(1);
  const [totalProdutos, setTotalProdutos] = useState(0);
  const pageSize = 20;

  // Estados para edição
  const [editingProduct, setEditingProduct] = useState<string | null>(null);
  const [editValues, setEditValues] = useState<{
    qtdade_estoque: number;
    preco_venda: number;
  }>({ qtdade_estoque: 0, preco_venda: 0 });
  const [savingProduct, setSavingProduct] = useState<string | null>(null);

  // Estados para exclusão
  const [deletingProduct, setDeletingProduct] = useState<string | null>(null);
  const [showDeleteModal, setShowDeleteModal] = useState<{
    show: boolean;
    product: ProdutoVenda | null;
  }>({ show: false, product: null });

  // Verificar autenticação e buscar dados do usuário
  useEffect(() => {
    const verificarAutenticacao = async () => {
      try {
        const storedToken = localStorage.getItem('access_token');

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

        // Buscar dados do usuário via BFF
        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) {
          localStorage.removeItem('access_token');
          router.push("/login");
          return;
        }

        const userResponse = await response.json();
        const user = userResponse.data || userResponse;
        setUserData(user);

      } catch (error) {
        console.error("Erro ao verificar autenticação:", error);
        router.push("/login");
      } finally {
        setLoading(false);
      }
    };

    verificarAutenticacao();
  }, [router]);

  // Buscar produtos de venda quando userData estiver disponível
  useEffect(() => {
    if (!loading && userData && userData.empresasDados && userData.empresasDados.length > 0) {
      buscarProdutosVenda();
    }
  }, [currentPage, loading, userData]);

  // Aplicar filtros
  useEffect(() => {
    aplicarFiltros();
  }, [search, filtroEstoque, produtos]);

  const aplicarFiltros = () => {
    if (!produtos || produtos.length === 0) {
      setProdutosFiltrados([]);
      return;
    }

    let filtrados = [...produtos];

    // Filtro por busca (nome do produto)
    if (search.trim()) {
      const termoBusca = search.toLowerCase();
      filtrados = filtrados.filter(produto =>
        produto.nome.toLowerCase().includes(termoBusca) ||
        produto.id.toLowerCase().includes(termoBusca) ||
        produto.observacoes.toLowerCase().includes(termoBusca)
      );
    }

    // Filtro por estoque
    if (filtroEstoque === 'baixo') {
      filtrados = filtrados.filter(produto =>
        produto.qtdade_estoque > 0 && produto.qtdade_estoque <= 10
      );
    } else if (filtroEstoque === 'zerado') {
      filtrados = filtrados.filter(produto =>
        produto.qtdade_estoque === 0
      );
    }

    setProdutosFiltrados(filtrados);
  };

  const buscarProdutosVenda = async () => {
    setLoadingProdutos(true);
    setError(null);

    try {
      const token = localStorage.getItem('access_token');
      if (!token) {
        throw new Error('Token de autenticação não encontrado');
      }

      // Usar o primeiro empresa_id do array empresasDados
      const empresaId = userData.empresasDados[0];

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

      if (!response.ok) {
        throw new Error(`Erro ${response.status}: ${response.statusText}`);
      }

      const data = await response.json();

      setProdutos(data.items || []);
      setTotalProdutos(data.total || 0);

    } catch (err: any) {
      const errorMessage = err.message || "Erro de conexão ao buscar produtos";
      setError(errorMessage);
      console.error("Erro ao buscar produtos:", err);
    } finally {
      setLoadingProdutos(false);
    }
  };

  const handleBuscar = () => {
    setCurrentPage(1);
    buscarProdutosVenda();
  };

  const formatarData = (dataString: string): string => {
    if (!dataString) return 'N/A';
    try {
      const data = new Date(dataString);
      return data.toLocaleDateString('pt-BR');
    } catch {
      return 'Data inválida';
    }
  };

  const formatarPreco = (preco: number): string => {
    return preco.toLocaleString('pt-BR', {
      style: 'currency',
      currency: 'BRL'
    });
  };

  const getStatusEstoque = (quantidade: number) => {
    if (quantidade === 0) {
      return {
        label: 'Esgotado',
        color: 'bg-red-100 text-red-800',
        icon: ExclamationTriangleIcon
      };
    } else if (quantidade <= 10) {
      return {
        label: 'Estoque Baixo',
        color: 'bg-yellow-100 text-yellow-800',
        icon: ExclamationTriangleIcon
      };
    } else {
      return {
        label: 'Em Estoque',
        color: 'bg-green-100 text-green-800',
        icon: ArchiveBoxIcon
      };
    }
  };

  const calcularTotalPages = () => {
    return Math.ceil(totalProdutos / pageSize);
  };

  const handleEditProduct = (produto: ProdutoVenda) => {
    setEditingProduct(produto.id);
    setEditValues({
      qtdade_estoque: produto.qtdade_estoque,
      preco_venda: produto.preco_venda
    });
  };

  const handleCancelEdit = () => {
    setEditingProduct(null);
    setEditValues({ qtdade_estoque: 0, preco_venda: 0 });
  };

  const handleSaveProduct = async (produtoId: string) => {
    setSavingProduct(produtoId);

    try {
      const token = localStorage.getItem('access_token');
      if (!token) {
        throw new Error('Token de autenticação não encontrado');
      }


      const response = await fetch(
        `${process.env.NEXT_PUBLIC_BFF_API_URL}/produtos-venda/${produtoId}`,
        {
          method: 'PUT',
          headers: {
            'accept': 'application/json',
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token}`,
          },
          body: JSON.stringify({
            qtdade_estoque: editValues.qtdade_estoque,
            preco_venda: editValues.preco_venda
          }),
        }
      );

      if (!response.ok) {
        throw new Error(`Erro ${response.status}: ${response.statusText}`);
      }


      // Atualizar a lista local
      setProdutos(prev => prev.map(produto =>
        produto.id === produtoId
          ? { ...produto, qtdade_estoque: editValues.qtdade_estoque, preco_venda: editValues.preco_venda }
          : produto
      ));

      // Cancelar edição
      handleCancelEdit();

    } catch (err: any) {
      console.error("Erro ao salvar produto:", err);
      setError(`Erro ao salvar produto: ${err.message}`);
    } finally {
      setSavingProduct(null);
    }
  };

  const handleDeleteProduct = (produto: ProdutoVenda) => {
    setShowDeleteModal({ show: true, product: produto });
  };

  const handleConfirmDelete = async () => {
    if (!showDeleteModal.product) return;

    const produtoId = showDeleteModal.product.id;
    setDeletingProduct(produtoId);

    try {
      const token = localStorage.getItem('access_token');
      if (!token) {
        throw new Error('Token de autenticação não encontrado');
      }


      const response = await fetch(
        `${process.env.NEXT_PUBLIC_BFF_API_URL}/produtos-venda/${produtoId}`,
        {
          method: 'DELETE',
          headers: {
            'accept': '*/*',
            'Authorization': `Bearer ${token}`,
          },
        }
      );

      if (!response.ok) {
        throw new Error(`Erro ${response.status}: ${response.statusText}`);
      }


      // Remover da lista local
      setProdutos(prev => prev.filter(produto => produto.id !== produtoId));
      setTotalProdutos(prev => prev - 1);

      // Fechar modal
      setShowDeleteModal({ show: false, product: null });

    } catch (err: any) {
      console.error("Erro ao excluir produto:", err);
      setError(`Erro ao excluir produto: ${err.message}`);
    } finally {
      setDeletingProduct(null);
    }
  };

  const handleCancelDelete = () => {
    setShowDeleteModal({ show: false, product: null });
  };

  if (loading) {
    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-gray-900 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={userData}
        title="Gestão de Produtos Venda"
        subtitle="Gerencie os produtos disponíveis para venda da sua empresa"
        showBackButton
      />

      <main className="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
        {/* Filtros e Busca */}
        <div className="bg-white rounded-lg shadow-sm border p-6 mb-6">
          <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-end">
            {/* Campo de busca */}
            <div className="flex-1 min-w-0">
              <label htmlFor="search" className="block text-sm font-medium text-gray-700 mb-2">
                Buscar Produtos
              </label>
              <div className="relative">
                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                  <MagnifyingGlassIcon className="h-5 w-5 text-gray-400" />
                </div>
                <input
                  type="text"
                  id="search"
                  value={search}
                  onChange={(e) => setSearch(e.target.value)}
                  className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
                  placeholder="Nome, ID ou observações do produto..."
                />
              </div>
            </div>

            {/* Filtro de estoque */}
            <div>
              <label htmlFor="filtro-estoque" className="block text-sm font-medium text-gray-700 mb-2">
                Filtrar por Estoque
              </label>
              <select
                id="filtro-estoque"
                value={filtroEstoque}
                onChange={(e) => setFiltroEstoque(e.target.value as any)}
                className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
              >
                <option value="todos">Todos os produtos</option>
                <option value="baixo">Estoque baixo</option>
                <option value="zerado">Estoque zerado</option>
              </select>
            </div>

            {/* Botão de buscar */}
            <button
              onClick={handleBuscar}
              disabled={loadingProdutos}
              className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50"
            >
              {loadingProdutos ? (
                <ArrowPathIcon className="h-4 w-4 animate-spin mr-2" />
              ) : (
                <MagnifyingGlassIcon className="h-4 w-4 mr-2" />
              )}
              Buscar
            </button>
          </div>
        </div>

        {/* Mensagem de erro */}
        {error && (
          <div className="bg-red-50 border border-red-200 rounded-md p-4 mb-6">
            <div className="flex">
              <ExclamationTriangleIcon className="h-5 w-5 text-red-400" />
              <div className="ml-3">
                <p className="text-sm text-red-800">{error}</p>
              </div>
            </div>
          </div>
        )}

        {/* Estatísticas rápidas */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
          <div className="bg-white overflow-hidden shadow rounded-lg">
            <div className="p-5">
              <div className="flex items-center">
                <div className="flex-shrink-0">
                  <ArchiveBoxIcon className="h-6 w-6 text-gray-400" />
                </div>
                <div className="ml-5 w-0 flex-1">
                  <dl>
                    <dt className="text-sm font-medium text-gray-500 truncate">
                      Total de Produtos
                    </dt>
                    <dd className="text-lg font-medium text-gray-900">
                      {totalProdutos}
                    </dd>
                  </dl>
                </div>
              </div>
            </div>
          </div>

          <div className="bg-white overflow-hidden shadow rounded-lg">
            <div className="p-5">
              <div className="flex items-center">
                <div className="flex-shrink-0">
                  <ExclamationTriangleIcon className="h-6 w-6 text-yellow-400" />
                </div>
                <div className="ml-5 w-0 flex-1">
                  <dl>
                    <dt className="text-sm font-medium text-gray-500 truncate">
                      Estoque Baixo
                    </dt>
                    <dd className="text-lg font-medium text-gray-900">
                      {produtos.filter(p => p.qtdade_estoque > 0 && p.qtdade_estoque <= 10).length}
                    </dd>
                  </dl>
                </div>
              </div>
            </div>
          </div>

          <div className="bg-white overflow-hidden shadow rounded-lg">
            <div className="p-5">
              <div className="flex items-center">
                <div className="flex-shrink-0">
                  <ExclamationTriangleIcon className="h-6 w-6 text-red-400" />
                </div>
                <div className="ml-5 w-0 flex-1">
                  <dl>
                    <dt className="text-sm font-medium text-gray-500 truncate">
                      Esgotados
                    </dt>
                    <dd className="text-lg font-medium text-gray-900">
                      {produtos.filter(p => p.qtdade_estoque === 0).length}
                    </dd>
                  </dl>
                </div>
              </div>
            </div>
          </div>

          <div className="bg-white overflow-hidden shadow rounded-lg">
            <div className="p-5">
              <div className="flex items-center">
                <div className="flex-shrink-0">
                  <CurrencyDollarIcon className="h-6 w-6 text-green-400" />
                </div>
                <div className="ml-5 w-0 flex-1">
                  <dl>
                    <dt className="text-sm font-medium text-gray-500 truncate">
                      Valor Total Estoque
                    </dt>
                    <dd className="text-lg font-medium text-gray-900">
                      {formatarPreco(
                        produtos.reduce((total, produto) =>
                          total + (produto.preco_venda * produto.qtdade_estoque), 0
                        )
                      )}
                    </dd>
                  </dl>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Lista de produtos */}
        <div className="bg-white shadow rounded-lg">
          <div className="px-4 py-5 sm:p-6">
            <h3 className="text-lg leading-6 font-medium text-gray-900 mb-4">
              Produtos de Venda ({produtosFiltrados.length})
            </h3>

            {loadingProdutos ? (
              <div className="text-center py-8">
                <ArrowPathIcon className="h-8 w-8 animate-spin mx-auto text-gray-400 mb-4" />
                <p className="text-gray-500">Carregando produtos...</p>
              </div>
            ) : produtosFiltrados.length === 0 ? (
              <div className="text-center py-8">
                <ArchiveBoxIcon className="h-12 w-12 mx-auto text-gray-400 mb-4" />
                <p className="text-gray-500">Nenhum produto encontrado.</p>
                {search && (
                  <p className="text-sm text-gray-400 mt-2">
                    Tente ajustar os filtros de busca.
                  </p>
                )}
              </div>
            ) : (
              <div className="space-y-4">
                {produtosFiltrados.map((produto) => {
                  const statusEstoque = getStatusEstoque(produto.qtdade_estoque);
                  const StatusIcon = statusEstoque.icon;
                  const isEditing = editingProduct === produto.id;
                  const isSaving = savingProduct === produto.id;

                  return (
                    <div key={produto.id} className={`bg-white border border-gray-200 rounded-lg p-6 hover:shadow-md transition-shadow ${isEditing ? 'ring-2 ring-blue-500 ring-opacity-50' : ''}`}>
                      <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
                        {/* Informações do Produto */}
                        <div className="flex-1 space-y-3">
                          <div className="flex items-start justify-between">
                            <div>
                              <h4 className="text-lg font-medium text-gray-900">{produto.nome}</h4>
                              <p className="text-sm text-gray-500">ID: {produto.id?.slice(-8)}</p>
                            </div>
                            <div className="flex gap-2">
                              {isEditing ? (
                                <>
                                  <button
                                    onClick={() => handleSaveProduct(produto.id)}
                                    disabled={isSaving}
                                    className="text-green-600 hover:text-green-900 p-2 hover:bg-green-50 rounded disabled:opacity-50"
                                    title="Salvar alterações"
                                  >
                                    {isSaving ? (
                                      <ArrowPathIcon className="w-5 h-5 animate-spin" />
                                    ) : (
                                      <CheckIcon className="w-5 h-5" />
                                    )}
                                  </button>
                                  <button
                                    onClick={handleCancelEdit}
                                    disabled={isSaving}
                                    className="text-red-600 hover:text-red-900 p-2 hover:bg-red-50 rounded disabled:opacity-50"
                                    title="Cancelar edição"
                                  >
                                    <XMarkIcon className="w-5 h-5" />
                                  </button>
                                </>
                              ) : (
                                <>
                                  <button
                                    onClick={() => handleEditProduct(produto)}
                                    className="text-blue-600 hover:text-blue-900 p-2 hover:bg-blue-50 rounded"
                                    title="Editar produto"
                                  >
                                    <PencilIcon className="w-5 h-5" />
                                  </button>
                                  <button
                                    onClick={() => handleDeleteProduct(produto)}
                                    className="text-red-600 hover:text-red-900 p-2 hover:bg-red-50 rounded"
                                    title="Excluir produto"
                                  >
                                    <TrashIcon className="w-5 h-5" />
                                  </button>
                                </>
                              )}
                            </div>
                          </div>

                          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                            {/* Preço de Venda */}
                            <div className="flex items-center gap-2">
                              <CurrencyDollarIcon className="w-5 h-5 text-green-500" />
                              <div>
                                <p className="text-xs text-gray-500 uppercase font-medium">Preço de Venda</p>
                                {isEditing ? (
                                  <input
                                    type="number"
                                    value={editValues.preco_venda}
                                    onChange={(e) => setEditValues(prev => ({
                                      ...prev,
                                      preco_venda: parseFloat(e.target.value) || 0
                                    }))}
                                    className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                                    step="0.01"
                                    min="0"
                                  />
                                ) : (
                                  <p className="text-lg font-medium text-gray-900">
                                    {formatarPreco(produto.preco_venda)}
                                  </p>
                                )}
                              </div>
                            </div>

                            {/* Estoque */}
                            <div className="flex items-center gap-2">
                              <StatusIcon className="w-5 h-5 text-gray-500" />
                              <div>
                                <p className="text-xs text-gray-500 uppercase font-medium">Estoque</p>
                                {isEditing ? (
                                  <div className="space-y-1">
                                    <input
                                      type="number"
                                      value={editValues.qtdade_estoque}
                                      onChange={(e) => setEditValues(prev => ({
                                        ...prev,
                                        qtdade_estoque: parseInt(e.target.value) || 0
                                      }))}
                                      className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                                      min="0"
                                    />
                                    <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium gap-1 ${getStatusEstoque(editValues.qtdade_estoque).color}`}>
                                      {getStatusEstoque(editValues.qtdade_estoque).label}
                                    </span>
                                  </div>
                                ) : (
                                  <div className="space-y-1">
                                    <p className="text-lg font-medium text-gray-900">
                                      {produto.qtdade_estoque}
                                    </p>
                                    <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium gap-1 ${statusEstoque.color}`}>
                                      {statusEstoque.label}
                                    </span>
                                  </div>
                                )}
                              </div>
                            </div>

                            {/* Validade */}
                            <div className="flex items-center gap-2">
                              <CalendarIcon className="w-5 h-5 text-blue-500" />
                              <div>
                                <p className="text-xs text-gray-500 uppercase font-medium">Validade</p>
                                <p className="text-sm font-medium text-gray-900">{formatarData(produto.data_validade)}</p>
                              </div>
                            </div>

                            {/* Data Cadastro */}
                            <div className="flex items-center gap-2">
                              <CalendarIcon className="w-5 h-5 text-gray-400" />
                              <div>
                                <p className="text-xs text-gray-500 uppercase font-medium">Data Cadastro</p>
                                <p className="text-sm font-medium text-gray-900">{formatarData(produto.createdAt)}</p>
                              </div>
                            </div>
                          </div>

                          {/* Observações (se existirem) */}
                          {produto.observacoes && (
                            <div className="pt-2 border-t border-gray-100">
                              <p className="text-xs text-gray-500 uppercase font-medium mb-1">Observações</p>
                              <p className="text-sm text-gray-700">{produto.observacoes}</p>
                            </div>
                          )}
                        </div>
                      </div>
                    </div>
                  );
                })}
              </div>
            )}

            {/* Paginação */}
            {!loadingProdutos && totalProdutos > pageSize && (
              <div className="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6 mt-4">
                <div className="flex-1 flex justify-between sm:hidden">
                  <button
                    onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))}
                    disabled={currentPage === 1}
                    className="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50"
                  >
                    Anterior
                  </button>
                  <button
                    onClick={() => setCurrentPage(prev => Math.min(prev + 1, calcularTotalPages()))}
                    disabled={currentPage === calcularTotalPages()}
                    className="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50"
                  >
                    Próximo
                  </button>
                </div>
                <div className="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                  <div>
                    <p className="text-sm text-gray-700">
                      Mostrando{' '}
                      <span className="font-medium">
                        {(currentPage - 1) * pageSize + 1}
                      </span>{' '}
                      até{' '}
                      <span className="font-medium">
                        {Math.min(currentPage * pageSize, totalProdutos)}
                      </span>{' '}
                      de{' '}
                      <span className="font-medium">{totalProdutos}</span> produtos
                    </p>
                  </div>
                  <div>
                    <nav className="relative z-0 inline-flex rounded-md shadow-sm -space-x-px">
                      <button
                        onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))}
                        disabled={currentPage === 1}
                        className="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50"
                      >
                        Anterior
                      </button>

                      {/* Números das páginas */}
                      {Array.from({ length: Math.min(5, calcularTotalPages()) }, (_, i) => {
                        const pageNum = i + 1;
                        return (
                          <button
                            key={pageNum}
                            onClick={() => setCurrentPage(pageNum)}
                            className={`relative inline-flex items-center px-4 py-2 border text-sm font-medium ${currentPage === pageNum
                                ? 'z-10 bg-blue-50 border-blue-500 text-blue-600'
                                : 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50'
                              }`}
                          >
                            {pageNum}
                          </button>
                        );
                      })}

                      <button
                        onClick={() => setCurrentPage(prev => Math.min(prev + 1, calcularTotalPages()))}
                        disabled={currentPage === calcularTotalPages()}
                        className="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50"
                      >
                        Próximo
                      </button>
                    </nav>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </main>

      {/* Modal de Confirmação de Exclusão */}
      {showDeleteModal.show && showDeleteModal.product && (
        <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
          <div className="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
            <div className="mt-3 text-center">
              <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100">
                <TrashIcon className="h-6 w-6 text-red-600" />
              </div>
              <h3 className="text-lg font-medium text-gray-900 mt-4">
                Confirmar Exclusão
              </h3>
              <div className="mt-4 px-7 py-3">
                <p className="text-sm text-gray-500">
                  Tem certeza que deseja excluir o produto{' '}
                  <span className="font-medium text-gray-900">
                    {showDeleteModal.product.nome}
                  </span>
                  ?
                </p>
                <p className="text-xs text-red-600 mt-2">
                  Esta ação não pode ser desfeita.
                </p>
              </div>
              <div className="flex gap-3 px-4 py-3">
                <button
                  onClick={handleCancelDelete}
                  disabled={deletingProduct !== null}
                  className="flex-1 px-4 py-2 bg-gray-300 text-gray-700 text-base font-medium rounded-md shadow-sm hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300 disabled:opacity-50"
                >
                  Cancelar
                </button>
                <button
                  onClick={handleConfirmDelete}
                  disabled={deletingProduct !== null}
                  className="flex-1 px-4 py-2 bg-red-600 text-white text-base font-medium rounded-md shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 disabled:opacity-50 flex items-center justify-center gap-2"
                >
                  {deletingProduct === showDeleteModal.product.id ? (
                    <>
                      <ArrowPathIcon className="h-4 w-4 animate-spin" />
                      Excluindo...
                    </>
                  ) : (
                    'Excluir'
                  )}
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default GestaoProdutosVenda;