import React, { useState, useEffect } from 'react';
import { Models } from 'appwrite';
import { ShoppingCartIcon } from '@heroicons/react/24/outline';
import { useCatalogoProdutos } from '@/hooks/useCatalogoProdutos';

interface ItemCarrinho {
  produto: Models.Document;
  quantidade: number;
}

interface CatalogoComCarrinhoProps {
  onAdicionarAoCarrinho?: (item: ItemCarrinho) => void;
}

const CatalogoComCarrinho: React.FC<CatalogoComCarrinhoProps> = ({ onAdicionarAoCarrinho }) => {
  const { catalogoProdutos, loading, listarCatalogo, totalCatalogoProdutos, currentPage } = useCatalogoProdutos();
  const [carrinho, setCarrinho] = useState<ItemCarrinho[]>([]);
  const [termoBusca, setTermoBusca] = useState('');
  const [quantidades, setQuantidades] = useState<Record<string, number>>({});

  useEffect(() => {
    listarCatalogo(1, termoBusca);
  }, [termoBusca]);

  const adicionarAoCarrinho = (produto: Models.Document) => {
    const quantidade = quantidades[produto.$id] || 1;
    const itemExistente = carrinho.find(item => item.produto.$id === produto.$id);
    
    if (itemExistente) {
      const novoCarrinho = carrinho.map(item => 
        item.produto.$id === produto.$id 
          ? { ...item, quantidade: item.quantidade + quantidade }
          : item
      );
      setCarrinho(novoCarrinho);
    } else {
      const novoItem: ItemCarrinho = { produto, quantidade };
      setCarrinho([...carrinho, novoItem]);
    }
    
    // Reset quantidade para 1 após adicionar
    setQuantidades(prev => ({ ...prev, [produto.$id]: 1 }));
    
    if (onAdicionarAoCarrinho) {
      onAdicionarAoCarrinho({ produto, quantidade });
    }
  };



  const removerDoCarrinho = (produtoId: string) => {
    setCarrinho(carrinho.filter(item => item.produto.$id !== produtoId));
  };

  const calcularTotal = () => {
    return carrinho.reduce((total, item) => {
      const preco = item.produto.pmc || item.produto['preco-fabrica'] || 0;
      return total + (preco * item.quantidade);
    }, 0);
  };

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

  if (loading) {
    return (
      <div className="flex justify-center items-center h-64">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {/* Barra de Busca */}
      <div className="bg-white p-4 rounded-lg shadow">
        <div className="flex gap-4">
          <input
            type="text"
            placeholder="Buscar produtos..."
            value={termoBusca}
            onChange={(e) => setTermoBusca(e.target.value)}
            className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
          />
          <button className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
            Buscar
          </button>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Lista de Produtos */}
        <div className="lg:col-span-2">
          <div className="bg-white rounded-lg shadow">
            <div className="p-4 border-b border-gray-200">
              <h2 className="text-lg font-semibold text-gray-900">Catálogo de Produtos</h2>
              <p className="text-sm text-gray-500">{totalCatalogoProdutos} produtos encontrados</p>
            </div>
            
            <div className="divide-y divide-gray-200">
              {catalogoProdutos.map((produto) => {
                const preco = produto.pmc || produto['preco-fabrica'] || 0;
                const quantidade = quantidades[produto.$id] || 1;
                
                return (
                  <div key={produto.$id} className="p-4 hover:bg-gray-50 transition-colors">
                    <div className="flex items-center justify-between">
                      <div className="flex-1">
                        <h3 className="font-medium text-gray-900 mb-1">
                          {produto.descricao}
                        </h3>
                        <div className="flex items-center gap-4 text-sm text-gray-500">
                          <span>Código: {produto['codigo-interno']}</span>
                          {produto['codigo-ean'] && (
                            <span>EAN: {produto['codigo-ean']}</span>
                          )}
                          {produto.laboratorios?.length > 0 ? (
                            <span>Lab: {produto.laboratorios[0].nome || produto.laboratorios[0]}</span>
                          ) : produto.laboratorio && (
                            <span>Lab: {produto.laboratorio}</span>
                          )}
                          {produto.categorias ? (
                            <span>Cat: {produto.categorias.nome}</span>
                          ) : produto.categoria && (
                            <span>Cat: {produto.categoria}</span>
                          )}
                        </div>
                        <div className="mt-2">
                          <span className="text-lg font-bold text-green-600">
                            {formatarPreco(preco)}
                          </span>
                          {produto['preco-fabrica'] && produto.pmc && produto['preco-fabrica'] !== produto.pmc && (
                            <span className="ml-2 text-sm text-gray-500 line-through">
                              {formatarPreco(produto['preco-fabrica'])}
                            </span>
                          )}
                          {produto['desconto-comercial'] && produto['desconto-comercial'] > 0 && (
                            <div className="text-xs text-orange-600 mt-1">
                              Desconto: {formatarPreco(produto['desconto-comercial'])}
                            </div>
                          )}
                        </div>
                      </div>
                      
                      <div className="flex items-center gap-3">
                        {/* Quantidade */}
                        <div className="flex items-center border border-gray-300 rounded-lg px-3 py-1">
                          <span className="text-sm font-medium">Qtd: {quantidade}</span>
                        </div>
                        
                        {/* Botão Adicionar ao Carrinho */}
                        <button
                          onClick={() => adicionarAoCarrinho(produto)}
                          className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
                        >
                          <ShoppingCartIcon className="w-4 h-4" />
                          Adicionar
                        </button>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>

        {/* Carrinho */}
        <div className="lg:col-span-1">
          <div className="bg-white rounded-lg shadow sticky top-4">
            <div className="p-4 border-b border-gray-200">
              <h3 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
                <ShoppingCartIcon className="w-5 h-5" />
                Carrinho ({carrinho.length})
              </h3>
            </div>
            
            <div className="p-4">
              {carrinho.length === 0 ? (
                <p className="text-gray-500 text-center py-8">Carrinho vazio</p>
              ) : (
                <div className="space-y-3">
                  {carrinho.map((item) => {
                    const preco = item.produto.pmc || item.produto['preco-fabrica'] || 0;
                    return (
                      <div key={item.produto.$id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                        <div className="flex-1">
                          <h4 className="font-medium text-sm text-gray-900 line-clamp-2">
                            {item.produto.descricao}
                          </h4>
                          <p className="text-xs text-gray-500">
                            {formatarPreco(preco)} x {item.quantidade}
                          </p>
                        </div>
                        <div className="flex items-center gap-2">
                          <span className="font-medium text-green-600">
                            {formatarPreco(preco * item.quantidade)}
                          </span>
                          <button
                            onClick={() => removerDoCarrinho(item.produto.$id)}
                            className="text-red-500 hover:text-red-700 transition-colors"
                          >
                            <MinusIcon className="w-4 h-4" />
                          </button>
                        </div>
                      </div>
                    );
                  })}
                  
                  <div className="border-t border-gray-200 pt-3 mt-4">
                    <div className="flex justify-between items-center mb-4">
                      <span className="font-semibold text-gray-900">Total:</span>
                      <span className="font-bold text-lg text-green-600">
                        {formatarPreco(calcularTotal())}
                      </span>
                    </div>
                    
                    <button className="w-full bg-green-600 text-white py-3 rounded-lg hover:bg-green-700 transition-colors font-medium">
                      Finalizar Compra
                    </button>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CatalogoComCarrinho;