import React from "react";
import { Models } from "appwrite";
import TableActions from "./TableActions";

interface CatalogoProdutosListProps {
  produtos: Models.Document[];
  loading: boolean;
  isChangingPage?: boolean;
  totalProdutos: number;
  currentPage: number;
  pageSize: number;
  onEdit: (produto: Models.Document) => void;
  onDelete: (id: string) => void;
  onPrevPage: () => void;
  onNextPage: () => void;
  onRowClick?: (produto: Models.Document) => void;
}

const CatalogoProdutosList: React.FC<CatalogoProdutosListProps> = ({
  produtos,
  loading,
  isChangingPage = false,
  totalProdutos,
  currentPage,
  pageSize,
  onEdit,
  onDelete,
  onPrevPage,
  onNextPage,
  onRowClick,
}) => {
  const totalPages = Math.ceil(totalProdutos / pageSize);
  const startItem = (currentPage - 1) * pageSize + 1;
  const endItem = Math.min(currentPage * pageSize, totalProdutos);

  if (loading || isChangingPage) {
    return (
      <div className="laboratory-management-container">
        <div className="table-content-card backdrop-blur-sm bg-white/70 border border-gray-200/50">
          <div className="flex items-center justify-center p-8">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
            <span className="ml-2 text-gray-600">
              {isChangingPage
                ? "Carregando página..."
                : "Carregando produtos..."}
            </span>
          </div>
        </div>
      </div>
    );
  }

  if (produtos.length === 0) {
    return (
      <div className="laboratory-management-container">
        <div className="table-content-card backdrop-blur-sm bg-white/70 border border-gray-200/50">
          <div className="text-center py-8">
            <p className="text-gray-500">Nenhum produto encontrado</p>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="laboratory-management-container">
      <div className="table-content-card backdrop-blur-sm bg-white/70 border border-gray-200/50">
        <div className="overflow-x-auto">
          <table className="laboratory-table w-full">
            <thead>
              <tr>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50/50">
                  Código Interno
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50/50">
                  Código EAN
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50/50">
                  Descrição
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50/50">
                  Preço Original
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50/50">
                  Preço Atual
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50/50">
                  Quantidade
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50/50">
                  Ações
                </th>
              </tr>
            </thead>
            <tbody className="bg-white divide-y divide-gray-200">
              {produtos.map((produto) => {
                const catalogoProduto = (produto as any)["catalogo-produtos"];
                return (
                  <tr
                    key={produto.$id}
                    className="hover:bg-gray-50 cursor-pointer transition-colors duration-200"
                    onClick={() => onRowClick?.(produto)}
                  >
                    <td className="px-6 py-4 whitespace-nowrap">
                      <div className="font-medium text-gray-900">
                        {(produto as any)["codigo-interno"] ||
                          catalogoProduto?.["codigo-interno"] ||
                          "N/A"}
                      </div>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <div className="text-sm text-gray-700">
                        {(produto as any)["codigo-ean"] ||
                          catalogoProduto?.["codigo-ean"] ||
                          "N/A"}
                      </div>
                    </td>
                    <td className="px-6 py-4">
                      <div className="font-medium text-gray-900 line-clamp-2 max-w-xs">
                        {(produto as any).descricao ||
                          catalogoProduto?.descricao ||
                          "N/A"}
                      </div>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <div className="text-sm">
                        {(produto as any)["preco-original"] ? (
                          <span className="font-medium text-green-600">
                            R$ {(produto as any)["preco-original"].toFixed(2)}
                          </span>
                        ) : (
                          <span className="text-gray-400">N/A</span>
                        )}
                      </div>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <div className="text-sm">
                        {(produto as any)["preco-atual"] ? (
                          <span className="font-medium text-blue-600">
                            R$ {(produto as any)["preco-atual"].toFixed(2)}
                          </span>
                        ) : (
                          <span className="text-gray-400">N/A</span>
                        )}
                      </div>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <div className="text-sm">
                        {(produto as any).quantidade ? (
                          <span className="font-medium text-indigo-600">
                            {(produto as any).quantidade}
                          </span>
                        ) : (
                          <span className="text-gray-400">N/A</span>
                        )}
                      </div>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <TableActions
                        onEdit={() => onEdit(produto)}
                        onDelete={() => onDelete(produto.$id)}
                      />
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>

        {/* Paginação */}
        <div className="flex items-center justify-between px-6 py-3 bg-gray-50 border-t border-gray-200">
          <div className="flex items-center text-sm text-gray-700">
            <span>
              Exibindo {startItem} a {endItem} de {totalProdutos} produtos
            </span>
          </div>
          <div className="flex items-center space-x-2">
            <button
              onClick={onPrevPage}
              disabled={currentPage === 1}
              className={`px-3 py-1 rounded-md text-sm font-medium ${
                currentPage === 1
                  ? "bg-gray-100 text-gray-400 cursor-not-allowed"
                  : "bg-white text-gray-700 hover:bg-gray-50 border border-gray-300"
              }`}
            >
              Anterior
            </button>
            <span className="px-3 py-1 text-sm text-gray-700">
              Página {currentPage} de {totalPages}
            </span>
            <button
              onClick={onNextPage}
              disabled={currentPage === totalPages}
              className={`px-3 py-1 rounded-md text-sm font-medium ${
                currentPage === totalPages
                  ? "bg-gray-100 text-gray-400 cursor-not-allowed"
                  : "bg-white text-gray-700 hover:bg-gray-50 border border-gray-300"
              }`}
            >
              Próxima
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CatalogoProdutosList;
