'use client';
import React, { useState } from 'react';
import { Models } from 'appwrite';
import { useCarrinho } from '@/contexts/CarrinhoContext';
import { ShoppingCartIcon, PlusIcon, CheckIcon } from '@heroicons/react/24/outline';

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

const CatalogoProdutosCompras: React.FC<CatalogoProdutosComprasProps> = ({
  produtos,
  loading,
  isChangingPage = false,
  totalProdutos,
  currentPage,
  pageSize,
  onPrevPage,
  onNextPage,
  onRowClick,
}) => {
  const { adicionarItem } = useCarrinho();
  const [produtosAdicionados, setProdutosAdicionados] = useState<Set<string>>(new Set());

  const formatarPreco = (preco: number) => {
    return new Intl.NumberFormat('pt-BR', {
      style: 'currency',
      currency: 'BRL'
    }).format(preco);
  };

  const obterPreco = (produto: Models.Document) => {
    return produto['preco-unitario'] || produto['preco-fabrica'] || produto.pmc || 0;
  };

  const obterQuantidadeDisponivel = (produto: Models.Document) => {
    // Usar quantidade real do produto ou retornar 0 se não informado
    return (produto as any).quantidade || (produto as any).estoque || 0;
  };

  const handleAdicionarAoCarrinho = (produto: Models.Document, event: React.MouseEvent) => {
    event.stopPropagation(); // Evita que o clique no botão dispare o onRowClick
    adicionarItem(produto, 1);
    
    // Adicionar feedback visual temporário
    setProdutosAdicionados(prev => new Set(prev).add(produto.$id));
    setTimeout(() => {
      setProdutosAdicionados(prev => {
        const newSet = new Set(prev);
        newSet.delete(produto.$id);
        return newSet;
      });
    }, 2000);
  };

  const totalPages = Math.ceil(totalProdutos / pageSize);
  const startItem = (currentPage - 1) * pageSize + 1;
  const endItem = Math.min(currentPage * pageSize, totalProdutos);

  if (loading) {
    return (
      <div className="bg-white rounded-lg shadow-sm p-8">
        <div className="flex items-center justify-center">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-green-600 mr-3"></div>
          <span className="text-gray-600">Carregando produtos...</span>
        </div>
      </div>
    );
  }

  return (
    <div className="bg-white rounded-lg shadow-sm">
      {/* Grid de Produtos */}
      <div className="p-6">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
          {produtos.map(produto => {
            const preco = obterPreco(produto);
            const quantidadeDisponivel = obterQuantidadeDisponivel(produto);
            const foiAdicionado = produtosAdicionados.has(produto.$id);
            const estoqueStatus = quantidadeDisponivel > 20 ? 'alto' : quantidadeDisponivel > 5 ? 'medio' : 'baixo';
            
            return (
              <div
                key={produto.$id}
                className={`bg-white border rounded-lg p-4 hover:shadow-md transition-all duration-200 cursor-pointer relative ${
                  estoqueStatus === 'baixo' 
                    ? 'border-red-200 bg-red-50/30' 
                    : estoqueStatus === 'medio' 
                    ? 'border-yellow-200 bg-yellow-50/30' 
                    : 'border-gray-200'
                }`}
                onClick={() => onRowClick && onRowClick(produto)}
              >
                {/* Indicador de Estoque Baixo */}
                {estoqueStatus === 'baixo' && (
                  <div className="absolute top-2 right-2">
                    <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">
                      Estoque Baixo
                    </span>
                  </div>
                )}
                {estoqueStatus === 'medio' && (
                  <div className="absolute top-2 right-2">
                    <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                      Estoque Médio
                    </span>
                  </div>
                )}
                {/* Header do Card */}
                <div className="flex items-start justify-between mb-3">
                  <div className={`flex-1 ${estoqueStatus !== 'alto' ? 'pr-20' : ''}`}>
                    <h3 className="text-sm font-semibold text-gray-900 line-clamp-2 mb-1">
                      {produto.descricao}
                    </h3>
                    <p className="text-xs text-gray-500">
                      Código: {produto['codigo-interno']}
                    </p>
                  </div>
                </div>

                {/* Informações do Produto */}
                <div className="space-y-3 mb-4">
                  {produto['codigo-ean'] && (
                    <p className="text-xs text-gray-500">
                      EAN: {produto['codigo-ean']}
                    </p>
                  )}
                  
                  {/* Laboratório */}
                  {produto.laboratorios?.length > 0 ? (
                    <div className="flex flex-wrap gap-1">
                      {produto.laboratorios.slice(0, 2).map((lab: any) => (
                        <span key={lab.$id} className="inline-block bg-gray-100 text-gray-700 px-2 py-1 rounded text-xs">
                          {lab.nome}
                        </span>
                      ))}
                      {produto.laboratorios.length > 2 && (
                        <span className="text-xs text-gray-500">+{produto.laboratorios.length - 2}</span>
                      )}
                    </div>
                  ) : (
                    <span className="text-xs text-gray-400">Sem laboratório</span>
                  )}

                  {/* Categoria */}
                  {produto.categorias && (
                    <span className="inline-block bg-blue-100 text-blue-700 px-2 py-1 rounded text-xs">
                      {produto.categorias.nome}
                    </span>
                  )}

                  {/* Quantidade Disponível */}
                  <div className="flex items-center justify-between text-xs">
                    <span className="text-gray-600">Disponível:</span>
                    <span className={`font-medium ${
                      estoqueStatus === 'alto' 
                        ? 'text-green-600' 
                        : estoqueStatus === 'medio' 
                        ? 'text-yellow-600' 
                        : 'text-red-600'
                    }`}>
                      {quantidadeDisponivel} unidades
                    </span>
                  </div>
                </div>

                {/* Seção de Preços */}
                <div className="space-y-2 mb-4">
                  {/* Preço Principal */}
                  <div className="flex items-center justify-between">
                    <span className="text-sm text-gray-600">Preço:</span>
                    {preco > 0 ? (
                      <span className="text-lg font-bold text-green-600">
                        {formatarPreco(preco)}
                      </span>
                    ) : (
                      <span className="text-sm text-gray-400">
                        Não informado
                      </span>
                    )}
                  </div>

                  {/* Preços Adicionais */}
                  <div className="grid grid-cols-2 gap-2 text-xs">
                    {produto['preco-fabrica'] && produto['preco-fabrica'] !== preco && (
                      <div className="text-center">
                        <span className="block text-gray-500">Fábrica</span>
                        <span className="font-medium text-gray-700">
                          {formatarPreco(produto['preco-fabrica'])}
                        </span>
                      </div>
                    )}
                    {produto.pmc && produto.pmc !== preco && (
                      <div className="text-center">
                        <span className="block text-gray-500">PMC</span>
                        <span className="font-medium text-gray-700">
                          {formatarPreco(produto.pmc)}
                        </span>
                      </div>
                    )}
                  </div>
                </div>

                {/* Botão de Ação */}
                <div className="flex justify-center">
                  <button
                    onClick={(e) => handleAdicionarAoCarrinho(produto, e)}
                    disabled={preco <= 0 || foiAdicionado}
                    className={`flex items-center space-x-2 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 w-full justify-center ${
                      foiAdicionado
                        ? 'bg-green-100 text-green-700 cursor-default'
                        : preco > 0
                        ? 'bg-green-600 text-white hover:bg-green-700 hover:shadow-md'
                        : 'bg-gray-300 text-gray-500 cursor-not-allowed'
                    }`}
                  >
                    {foiAdicionado ? (
                      <>
                        <CheckIcon className="w-4 h-4" />
                        <span>Adicionado</span>
                      </>
                    ) : (
                      <>
                        <ShoppingCartIcon className="w-4 h-4" />
                        <span>Adicionar ao Carrinho</span>
                      </>
                    )}
                  </button>
                </div>
              </div>
            );
          })}
        </div>

        {/* Mensagem quando não há produtos */}
        {produtos.length === 0 && (
          <div className="text-center py-12">
            <ShoppingCartIcon className="w-12 h-12 text-gray-300 mx-auto mb-4" />
            <h3 className="text-lg font-medium text-gray-900 mb-2">Nenhum produto encontrado</h3>
            <p className="text-gray-500">Tente ajustar os filtros de busca ou verifique se há produtos cadastrados.</p>
          </div>
        )}
      </div>

      {/* Paginação */}
      {produtos.length > 0 && (
        <div className="bg-gray-50 border-t border-gray-200 px-6 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-2">
              <button
                onClick={onPrevPage}
                disabled={currentPage === 1 || isChangingPage}
                className="px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200"
              >
                Anterior
              </button>
              <span className="px-3 py-2 text-sm text-gray-700 font-medium">
                Página {currentPage} de {totalPages}
              </span>
              <button
                onClick={onNextPage}
                disabled={currentPage >= totalPages || isChangingPage}
                className="px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200"
              >
                Próxima
              </button>
            </div>
            <div className="text-sm text-gray-700 font-medium">
              {startItem}-{endItem} de {totalProdutos} produtos
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default CatalogoProdutosCompras;