"use client";

import React, { useEffect, useState, useRef } from "react";
import { useRouter } from "next/navigation";
import { toast } from "react-hot-toast";
import Header from "@/components/Header";
import ProdutoForm from "@/components/ProdutoForm";
import ProdutoList from "@/components/ProdutoList";
import TableContainer from "@/components/TableContainer";
import StandardButton from "@/components/StandardButton";
import {
  MagnifyingGlassIcon,
  ArrowPathIcon,
  ShoppingCartIcon,
  TrashIcon,
  CubeIcon,
} from "@heroicons/react/24/outline";
import { ProdutoData } from "@/services/produtoService";
import { catalogoProdutoService } from "@/services/catalogoProdutoService";
import { produtoService } from "@/services/produtoService";
import { produtosVendaService, ProdutoCompleto } from "@/services/produtosVendaService";
import { useCarrinho } from "@/contexts/CarrinhoContext";
import { useEmpresa } from "@/contexts/EmpresaContext";
import { pedidoApiService } from "@/services/pedidoApiService";
import "@/styles/table-alignment.css";

// Componente para exibir produto com opção de compra
const ProdutoComCompra = ({ produto }: { produto: ProdutoCompleto }) => {
  const carrinho = useCarrinho();
  const [quantidade, setQuantidade] = useState(0);
  const [adicionando, setAdicionando] = useState(false);
  const [produtoAdicionado, setProdutoAdicionado] = useState(false);

  // Função para obter o preço do produto de forma consistente
  const obterPreco = (produto: ProdutoCompleto): number => {
    const produtoData = produto as any;
    // Retorna apenas o preco_final, se não existir retorna 0
    return produtoData.preco_final || 0;
  };

  // Função para verificar se o produto tem preço final válido
  const temPrecoFinalValido = (produto: ProdutoCompleto): boolean => {
    const produtoData = produto as any;
    return produtoData.preco_final && produtoData.preco_final > 0;
  };

  // Função para verificar se o produto está vencido
  const isProdutoVencido = (produto: ProdutoCompleto): boolean => {
    const produtoData = produto as any;
    if (!produtoData.data_validade) return false;

    const dataValidade = new Date(produtoData.data_validade);
    const hoje = new Date();
    hoje.setHours(0, 0, 0, 0); // Zerar horas para comparar apenas a data

    return dataValidade < hoje;
  };

  // Função para obter a quantidade disponível em estoque
  const obterEstoque = (produto: ProdutoCompleto): number => {
    return produto.quantidade_estoque || 0;
  };

  // Função para extrair nome de categoria - agora usa cat_nome diretamente da API
  const obterNomeCategoria = (produto: ProdutoCompleto): string => {
    const produtoData = produto as any;



    // Prioridade 1: campo cat_nome retornado pela API
    if (produtoData.cat_nome) {
      return produtoData.cat_nome;
    }

    // Fallback: outras variações (mantido para compatibilidade)
    if (produtoData.categoria_nome) return produtoData.categoria_nome;
    if (produtoData.categoriaNome) return produtoData.categoriaNome;

    // Se categoria é um objeto, extrair o nome
    if (typeof produtoData.categoria === 'object' && produtoData.categoria !== null) {
      const cat = produtoData.categoria;
      if (Array.isArray(cat) && cat.length > 0) {
        const firstCat = cat[0];
        if (typeof firstCat === 'object') {
          return firstCat.nome || firstCat.name || '';
        }
        return String(firstCat);
      }
      return cat.nome || cat.name || '';
    }

    // Se é string e não parece ID, retornar
    if (typeof produtoData.categoria === 'string') {
      if (produtoData.categoria.length < 30 && !/^[a-f0-9]{15,}$/i.test(produtoData.categoria)) {
        return produtoData.categoria;
      }
    }

    return '';
  };

  // Função para extrair nome de laboratório - agora usa lab_nome diretamente da API
  const obterNomeLaboratorio = (produto: ProdutoCompleto): string => {
    const produtoData = produto as any;



    // Prioridade 1: campo lab_nome retornado pela API
    if (produtoData.lab_nome) {
      return produtoData.lab_nome;
    }

    // Fallback: outras variações (mantido para compatibilidade)
    if (produtoData.laboratorio_nome) return produtoData.laboratorio_nome;
    if (produtoData.laboratorioNome) return produtoData.laboratorioNome;
    if (produtoData.fabricante) return produtoData.fabricante;

    // Se laboratorio é um objeto, extrair o nome
    if (typeof produtoData.laboratorio === 'object' && produtoData.laboratorio !== null) {
      const lab = produtoData.laboratorio;
      if (Array.isArray(lab) && lab.length > 0) {
        const firstLab = lab[0];
        if (typeof firstLab === 'object') {
          return firstLab.nome || firstLab.name || '';
        }
        return String(firstLab);
      }
      return lab.nome || lab.name || '';
    }

    // Se é string e não parece ID, retornar
    if (typeof produtoData.laboratorio === 'string') {
      if (produtoData.laboratorio.length < 30 && !/^[a-f0-9]{15,}$/i.test(produtoData.laboratorio)) {
        return produtoData.laboratorio;
      }
    }

    return '';
  };

  const preco = obterPreco(produto);
  const produtoData = produto as any;
  const precoOriginal = produtoData.preco_original || produtoData["preco-original"] || produtoData["preco-fabrica"];
  const temDesconto = precoOriginal && precoOriginal > preco;
  const estoqueDisponivel = obterEstoque(produto);

  const handleAdicionarCarrinho = async () => {
    if (quantidade === 0) return;

    // Validar se há estoque suficiente
    if (quantidade > estoqueDisponivel) {
      toast.error(
        `Estoque insuficiente! Disponível: ${estoqueDisponivel} unidades`
      );
      return;
    }

    try {
      setAdicionando(true);
      await carrinho.adicionarItem(produto, quantidade);
      setProdutoAdicionado(true);
      // Não resetar automaticamente - manter estado fixo
      // Permitir adicionar mais unidades mantendo a quantidade atual
    } catch (error) {
      toast.error("Erro ao adicionar produto ao carrinho");
    } finally {
      setAdicionando(false);
    }
  };

  const handleQuantidadeChange = (novaQuantidade: string) => {
    const valor = parseInt(novaQuantidade) || 0;
    const quantidadeMaxima = Math.min(valor, estoqueDisponivel);

    if (valor > estoqueDisponivel) {
      toast.error(
        `Quantidade máxima disponível: ${estoqueDisponivel} unidades`
      );
    }

    setQuantidade(Math.max(0, quantidadeMaxima));
    // Só resetar se a quantidade for zerada manualmente
    if (quantidadeMaxima === 0) {
      setProdutoAdicionado(false);
    }
  };

  const aumentarQuantidade = () => {
    if (quantidade >= estoqueDisponivel) {
      toast.error(`Estoque máximo atingido: ${estoqueDisponivel} unidades`);
      return;
    }
    setQuantidade((prev) => prev + 1);
    // Não resetar o estado ao aumentar quantidade
  };

  const diminuirQuantidade = () => {
    const novaQuantidade = Math.max(0, quantidade - 1);
    setQuantidade(novaQuantidade);
    // Só resetar se a quantidade chegar a zero
    if (novaQuantidade === 0) {
      setProdutoAdicionado(false);
    }
  };

  return (
    <div className={`relative border border-gray-200 rounded-lg p-4 hover:shadow-md hover:border-blue-300 transition-all duration-300 bg-white group w-full ${estoqueDisponivel === 0 ? 'opacity-60 bg-gray-50' : ''
      }`}>
      {/* Indicador de produto esgotado */}
      {estoqueDisponivel === 0 && (
        <div className="absolute top-2 right-2 bg-red-500 text-white px-2 py-1 rounded-full text-xs font-bold z-10">
          ESGOTADO
        </div>
      )}

      <div className="flex flex-col sm:flex-row gap-3 sm:gap-4">
        {/* Informações do Produto - Lado Esquerdo */}
        <div className="flex-1 min-w-0">
          <h4 className="font-semibold text-gray-900 text-base mb-2 line-clamp-1 group-hover:text-blue-600 transition-colors">
            {produto.nome || "Produto sem nome"}
          </h4>

          {/* Descrição do produto */}
          {produto.descricao && (
            <div className="text-xs text-gray-500 mb-2">
              <p className="line-clamp-1">
                {produto.descricao}
              </p>
            </div>
          )}

          {/* Estoque, Preço e Validade - Linha 2 */}
          <div className="flex items-center gap-2 mb-2 flex-wrap text-sm">
            {/* Informações de Estoque */}
            <div className="flex items-center gap-1">
              <span className="text-xs font-medium text-gray-700">Estoque:</span>
              <span
                className={`font-bold text-xs ${estoqueDisponivel > 20
                    ? "text-green-600"
                    : estoqueDisponivel > 5
                      ? "text-yellow-600"
                      : "text-red-600"
                  }`}
              >
                {estoqueDisponivel} un.
              </span>
            </div>

            <span className="text-gray-400">|</span>

            {/* Preços */}
            <div className="flex items-center gap-2">
              <span className="text-lg font-bold text-green-600">
                R$ {preco.toFixed(2).replace(".", ",")}
              </span>
              {temDesconto && (
                <div className="flex items-center gap-1">
                  <span className="text-xs text-gray-500 line-through">
                    R$ {precoOriginal.toFixed(2).replace(".", ",")}
                  </span>
                  <span className="text-xs bg-red-100 text-red-800 px-1 py-0.5 rounded">
                    -{Math.round(((precoOriginal - preco) / precoOriginal) * 100)}%
                  </span>
                </div>
              )}
            </div>

            {/* Data de Vencimento */}
            {produto.data_validade && (
              <>
                <span className="text-gray-400">|</span>
                <div className="flex items-center gap-1">
                  <span className="text-xs font-medium text-purple-700">Validade:</span>
                  <span className="font-semibold text-xs text-purple-900">
                    {new Date(produto.data_validade).toLocaleDateString('pt-BR')}
                  </span>
                </div>
              </>
            )}
          </div>

          {/* Alertas de estoque e validade */}
          <div className="flex gap-2 mb-2 flex-wrap">
            {estoqueDisponivel <= 5 && estoqueDisponivel > 0 && (
              <div className="text-xs text-yellow-800 bg-yellow-50 px-2 py-1 rounded">
                ⚠️ Estoque baixo!
              </div>
            )}
            {estoqueDisponivel === 0 && (
              <div className="text-xs text-red-800 bg-red-50 px-2 py-1 rounded">
                ❌ Esgotado!
              </div>
            )}
            {produto.data_validade && (() => {
              const dataValidade = new Date(produto.data_validade);
              const hoje = new Date();
              const diasParaVencer = Math.ceil((dataValidade.getTime() - hoje.getTime()) / (1000 * 60 * 60 * 24));

              if (diasParaVencer < 0) {
                return (
                  <div className="text-xs text-red-800 bg-red-100 px-2 py-1 rounded font-semibold">
                    🚨 VENCIDO
                  </div>
                );
              } else if (diasParaVencer <= 30) {
                return (
                  <div className="text-xs text-orange-800 bg-orange-100 px-2 py-1 rounded font-semibold">
                    ⏰ Vence em {diasParaVencer} dia(s)
                  </div>
                );
              } else if (diasParaVencer <= 60) {
                return (
                  <div className="text-xs text-yellow-700 bg-yellow-100 px-2 py-1 rounded">
                    ⚠️ Vence em {diasParaVencer} dias
                  </div>
                );
              }
              return null;
            })()}
          </div>

          {/* Informações básicas - Linha 3: EAN | Categoria | Laboratório */}
          <div className="flex items-center gap-2 text-xs text-gray-600">
            {produto.codigo_ean && (
              <>
                <span className="font-mono text-gray-800">
                  {produto.codigo_ean}
                </span>
                {(obterNomeCategoria(produto) || obterNomeLaboratorio(produto) || process.env.NODE_ENV === 'development') && (
                  <span className="text-gray-400">|</span>
                )}
              </>
            )}
            {obterNomeCategoria(produto) ? (
              <>
                <span className="text-blue-700 font-medium">
                  {obterNomeCategoria(produto)}
                </span>
                {obterNomeLaboratorio(produto) && (
                  <span className="text-gray-400">|</span>
                )}
              </>
            ) : process.env.NODE_ENV === 'development' ? (
              <>
                <span className="text-gray-400 italic text-xs">
                  (sem categoria)
                </span>
                {obterNomeLaboratorio(produto) && (
                  <span className="text-gray-400">|</span>
                )}
              </>
            ) : null}
            {obterNomeLaboratorio(produto) ? (
              <span className="text-gray-700 font-medium">
                {obterNomeLaboratorio(produto)}
              </span>
            ) : process.env.NODE_ENV === 'development' ? (
              <span className="text-gray-400 italic text-xs">
                (sem laboratório)
              </span>
            ) : null}
          </div>
        </div>



        {/* Controles de Compra - Lado Direito */}
        <div className="flex flex-col sm:flex-row items-center gap-2 sm:gap-3 sm:flex-shrink-0 sm:min-w-[280px]">
          {/* Controles de Quantidade */}
          <div className="flex items-center gap-1 bg-white border border-gray-200 rounded p-1 shadow-sm">
            <button
              onClick={diminuirQuantidade}
              disabled={quantidade === 0 || estoqueDisponivel === 0}
              className="w-6 h-6 rounded bg-red-500 text-white flex items-center justify-center hover:bg-red-600 disabled:bg-gray-300 disabled:cursor-not-allowed transition-all"
            >
              <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M20 12H4" />
              </svg>
            </button>

            <div className="flex items-center min-w-[35px] bg-gray-50 rounded px-2 py-1 border">
              <span className="text-sm font-bold text-gray-900">
                {quantidade}
              </span>
            </div>

            <button
              onClick={aumentarQuantidade}
              disabled={quantidade >= estoqueDisponivel || estoqueDisponivel === 0}
              className="w-6 h-6 rounded bg-green-500 text-white flex items-center justify-center hover:bg-green-600 disabled:bg-gray-300 disabled:cursor-not-allowed transition-all"
            >
              <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
              </svg>
            </button>
          </div>

          {/* Valor Total - Responsivo */}
          <div className="w-full sm:w-[70px] text-center">
            {quantidade > 0 ? (
              <div className="bg-blue-50 border border-blue-200 rounded-lg p-1.5">
                <div className="text-xs text-blue-600 font-medium">TOTAL</div>
                <div className="text-sm font-bold text-blue-700">
                  R$ {(preco * quantidade).toFixed(2).replace(".", ",")}
                </div>
              </div>
            ) : (
              <div className="h-[52px]"></div> // Espaço reservado para manter layout
            )}
          </div>

          {/* Botão Principal - Responsivo */}
          <button
            onClick={handleAdicionarCarrinho}
            disabled={
              adicionando ||
              preco <= 0 ||
              quantidade === 0 ||
              estoqueDisponivel === 0
            }
            className={`w-full sm:w-[100px] h-[36px] rounded-lg font-bold text-sm transition-colors flex items-center justify-center gap-1 shadow hover:shadow-md ${produtoAdicionado && quantidade > 0
                ? "bg-green-500 text-white hover:bg-green-600"
                : estoqueDisponivel === 0
                  ? "bg-gray-300 text-gray-600 cursor-not-allowed"
                  : quantidade === 0
                    ? "bg-gray-300 text-gray-600 cursor-not-allowed"
                    : adicionando
                      ? "bg-blue-400 text-white cursor-wait"
                      : "bg-blue-600 text-white hover:bg-blue-700"
              }`}
          >
            {adicionando ? (
              <>
                <div className="animate-spin rounded-full h-3 w-3 border-b-2 border-white"></div>
                <span>Carregando</span>
              </>
            ) : produtoAdicionado && quantidade > 0 ? (
              <>
                <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                </svg>
                <span>Adicionar</span>
              </>
            ) : produtoAdicionado && quantidade === 0 ? (
              <>
                <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                </svg>
                <span>Adicionado</span>
              </>
            ) : estoqueDisponivel === 0 ? (
              <>
                <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
                <span>Esgotado</span>
              </>
            ) : quantidade === 0 ? (
              <>
                <ShoppingCartIcon className="w-3 h-3" />
                <span>Selecionar</span>
              </>
            ) : (
              <>
                <ShoppingCartIcon className="w-3 h-3" />
                <span>Adicionar</span>
              </>
            )}
          </button>
        </div>
      </div>
    </div>
  );
};

// Componente do Carrinho Lateral
const CarrinhoLateral = () => {
  const carrinho = useCarrinho();
  const router = useRouter();
  const [finalizando, setFinalizando] = useState(false);

  // Função para obter o preço do produto de forma consistente
  const obterPreco = (produto: ProdutoCompleto): number => {
    const produtoData = produto as any;
    // Retorna apenas o preco_final, se não existir retorna 0
    return produtoData.preco_final || 0;
  };

  // Função para verificar se o produto tem preço final válido
  const temPrecoFinalValido = (produto: ProdutoCompleto): boolean => {
    const produtoData = produto as any;
    return produtoData.preco_final && produtoData.preco_final > 0;
  };

  const handleFinalizarCompra = async (event?: React.MouseEvent) => {
    // Prevenir propagação e comportamento padrão
    if (event) {
      event.preventDefault();
      event.stopPropagation();
    }



    // Verificar carrinho novamente no momento do clique
    const itensAtual = carrinho.itens;
    if (!itensAtual || itensAtual.length === 0) {
      toast.error("Adicione produtos ao carrinho antes de finalizar a compra");
      return;
    }

    try {
      setFinalizando(true);


      let pedidoId: string | null = null;

      // 1. Verificar se já existe um pedido pendente para este carrinho
      if (carrinho.carrinhoId) {
        const pedidoExistente = await pedidoApiService.buscarPendentePorCarrinho(carrinho.carrinhoId);

        if (pedidoExistente.success && pedidoExistente.data) {
          pedidoId = pedidoExistente.data.$id || pedidoExistente.data.id;
          if (pedidoId) {
            toast.success(`Continuando pedido em andamento! ID: ${pedidoId.substring(0, 8)}...`);
          }
        }
      }

      // 2. Se não existe pedido pendente, criar um novo
      if (!pedidoId) {

        // Aguardar um pequeno delay para garantir sincronização do estado
        await new Promise(resolve => setTimeout(resolve, 100));

        // Criar pedido na API BFF
        const response = await pedidoApiService.criar(itensAtual, carrinho.carrinhoId || undefined);

        if (response.success) {
          pedidoId = response.data?.$id || response.data?.id;

          if (pedidoId) {
            toast.success(`Pedido criado com sucesso! ID: ${pedidoId.substring(0, 8)}...`);
          }
        } else {
          console.error('❌ Erro ao criar pedido:', response.error);
          toast.error(`Erro ao criar pedido: ${response.error}`);
          return;
        }
      }

      // 3. Redirecionar para checkout
      if (pedidoId) {
        // Aguardar um momento antes do redirecionamento
        await new Promise(resolve => setTimeout(resolve, 500));


        // Usar window.location como fallback mais robusto
        try {
          await router.push(`/checkout?pedido=${pedidoId}`);
        } catch (routerError) {
          console.warn('⚠️ Router falhou, usando window.location:', routerError);
          window.location.href = `/checkout?pedido=${pedidoId}`;
        }
      } else {
        console.error('❌ Não foi possível obter ID do pedido');
        toast.error('Erro ao obter dados do pedido');
        router.push("/checkout");
      }

    } catch (error) {
      console.error('💥 Erro na finalização da compra:', error);
      toast.error("Erro ao finalizar compra. Tente novamente.");
    } finally {
      // Aguardar um momento antes de liberar o botão
      setTimeout(() => {
        setFinalizando(false);
      }, 1000);
    }
  };

  const handleRemoverItem = async (produtoId: string) => {
    await carrinho.removerItem(produtoId);
  };

  const handleAtualizarQuantidade = async (
    produtoId: string,
    novaQuantidade: number
  ) => {
    if (novaQuantidade <= 0) {
      await handleRemoverItem(produtoId);
      return;
    }
    await carrinho.atualizarQuantidade(produtoId, novaQuantidade);
  };

  return (
    <div className="bg-gray-50 rounded-lg border border-gray-200 min-h-[65px]">
      {/* Header do Carrinho */}
      <div className="p-4 border-b border-gray-200 bg-white rounded-t-lg">
        <h3 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
          <ShoppingCartIcon className="w-5 h-5 text-blue-600" />
          Carrinho de Compras
          {carrinho.totalItens > 0 && (
            <span className="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white bg-blue-600 rounded-full">
              {carrinho.totalItens}
            </span>
          )}
          {carrinho.sincronizandoApi && (
            <span className="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-orange-600 bg-orange-100 rounded-full animate-pulse">
              Sincronizando...
            </span>
          )}
        </h3>

      </div>

      <div className="p-4">
        {carrinho.itens.length === 0 ? (
          <div className="text-center py-8">
            <div className="text-gray-400 mb-3">
              <ShoppingCartIcon className="w-12 h-12 mx-auto" />
            </div>
            <p className="text-gray-600 text-sm mb-2">
              Seu carrinho está vazio
            </p>
            <p className="text-gray-500 text-xs">
              Adicione produtos para começar sua compra
            </p>
          </div>
        ) : (
          <>
            {/* Lista de Itens */}
            <div className="space-y-3 mb-4 max-h-96 overflow-y-auto">
              {carrinho.itens.map((item) => {
                const preco = obterPreco(item.produto);
                const produtoData = item.produto as any;

                const precoOriginal =
                  produtoData["preco-original"] ||
                  produtoData.preco_original ||
                  produtoData["preco-fabrica"];
                const temDesconto = precoOriginal && precoOriginal > preco;

                return (
                  <div
                    key={item.produto.id}
                    className="bg-white rounded-lg p-3 border border-gray-200"
                  >
                    <div className="flex justify-between items-start mb-2">
                      <h4 className="font-medium text-sm text-gray-900 line-clamp-2 flex-1 mr-2">
                        {item.produto.nome || item.produto.descricao}
                      </h4>
                      <button
                        onClick={() => handleRemoverItem(item.produto.id)}
                        className="text-red-500 hover:text-red-700 p-1"
                        title="Remover item"
                      >
                        <TrashIcon className="w-4 h-4" />
                      </button>
                    </div>

                    {/* Laboratório */}
                    {item.produto.laboratorio && (
                      <p className="text-xs text-gray-600 mb-2">
                        Lab: {item.produto.lab_nome}
                      </p>
                    )}

                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-3">
                        {/* Controles de Quantidade */}
                        <div className="flex items-center border border-gray-300 rounded-lg">
                          <button
                            onClick={() => handleAtualizarQuantidade(item.produto.id, item.quantidade - 1)}
                            className="px-2 py-1 text-gray-600 hover:text-gray-800 hover:bg-gray-100 rounded-l-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent"
                            disabled={item.quantidade <= 1}
                            title={item.quantidade <= 1 ? "Quantidade mínima atingida" : "Diminuir quantidade"}
                          >
                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 12H4" />
                            </svg>
                          </button>
                          <input
                            type="number"
                            min="1"
                            max={item.produto.quantidade_estoque || 999}
                            value={item.quantidade}
                            onChange={(e) => {
                              const newQty = parseInt(e.target.value) || 1;
                              const maxQty = item.produto.quantidade_estoque || 999;
                              if (newQty >= 1 && newQty <= maxQty) {
                                handleAtualizarQuantidade(item.produto.id, newQty);
                              }
                            }}
                            className="px-3 py-1 text-sm font-medium text-gray-900 bg-gray-50 border-x border-gray-300 min-w-[50px] text-center focus:outline-none focus:bg-white focus:border-blue-500"
                          />
                          <button
                            onClick={() => handleAtualizarQuantidade(item.produto.id, item.quantidade + 1)}
                            className="px-2 py-1 text-gray-600 hover:text-gray-800 hover:bg-gray-100 rounded-r-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent"
                            disabled={item.quantidade >= (item.produto.quantidade_estoque || 0)}
                            title={item.quantidade >= (item.produto.quantidade_estoque || 0) ? "Estoque máximo atingido" : "Aumentar quantidade"}
                          >
                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                            </svg>
                          </button>
                        </div>

                        {/* Estoque disponível */}
                        <span className="text-xs text-gray-500">
                          Estoque: {item.produto.quantidade_estoque || 0}
                        </span>
                      </div>
                      <div className="text-right">
                        <div className="text-sm font-semibold text-gray-900">
                          R${" "}
                          {(preco * item.quantidade)
                            .toFixed(2)
                            .replace(".", ",")}
                        </div>
                        <div className="text-xs text-gray-500 flex items-center gap-1">
                          {preco > 0 ? (
                            <>
                              R$ {preco.toFixed(2).replace(".", ",")} cada
                              {temDesconto && (
                                <span className="text-xs bg-red-100 text-red-800 px-1 py-0.5 rounded">
                                  -
                                  {Math.round(
                                    ((precoOriginal - preco) / precoOriginal) * 100
                                  )}
                                  %
                                </span>
                              )}
                            </>
                          ) : (
                            <span className="text-red-500">Preço não definido</span>
                          )}
                        </div>
                        {temDesconto && preco > 0 && (
                          <div className="text-xs text-gray-400 line-through">
                            R$ {precoOriginal.toFixed(2).replace(".", ",")} cada
                          </div>
                        )}
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>

            {/* Resumo do Carrinho */}
            <div className="border-t border-gray-200 pt-4 space-y-2">
              <div className="flex justify-between items-center text-sm">
                <span className="text-gray-600">Total de itens:</span>
                <span className="font-medium">{carrinho.totalItens}</span>
              </div>

              <div className="flex justify-between items-center">
                <span className="text-lg font-semibold text-gray-900">
                  Total:
                </span>
                <span className="text-xl font-bold text-green-600">
                  R$ {carrinho.valorTotal.toFixed(2).replace(".", ",")}
                </span>
              </div>
            </div>

            {/* Botões de Ação */}
            <div className="mt-4 space-y-2">
              <button
                onClick={handleFinalizarCompra}
                disabled={finalizando || carrinho.itens.length === 0}
                data-testid="finalizar-compra"
                className="w-full bg-green-600 text-white py-3 rounded-lg hover:bg-green-700 transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
                style={{ userSelect: 'none' }}
              >
                {finalizando ? (
                  <>
                    <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
                    <span>Finalizando...</span>
                  </>
                ) : (
                  <>
                    <span>Finalizar Compra</span>
                    <svg
                      className="w-4 h-4"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M9 5l7 7-7 7"
                      />
                    </svg>
                  </>
                )}
              </button>

              <button
                onClick={() => carrinho.limparCarrinho(true)}
                className="w-full bg-gray-200 text-black py-2 rounded-lg hover:bg-gray-300 transition-colors text-sm font-medium"
              >
                Limpar Carrinho
              </button>
            </div>
          </>
        )}
      </div>
    </div>
  );
};

const GestaoProdutos = () => {
  const router = useRouter();
  const { empresaId, loading: empresaLoading } = useEmpresa();
  const [searchTerm, setSearchTerm] = useState("");
  const [user, setUser] = useState<any>(null);
  const isInitialMount = useRef(true);

  // Estados para o modal de edição
  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
  const [editingProduct, setEditingProduct] = useState<ProdutoCompleto | null>(
    null
  );
  const [isUpdating, setIsUpdating] = useState(false);
  const [formErrors, setFormErrors] = useState<{ [key: string]: string }>({});

  // Função para validar data de vencimento
  const validateExpirationDate = (dateString: string): string | null => {
    if (!dateString) return "Data de vencimento é obrigatória";

    const selectedDate = new Date(dateString);
    const today = new Date();
    const thirtyDaysAgo = new Date();
    thirtyDaysAgo.setDate(today.getDate() - 30);

    // Remove time component for comparison
    today.setHours(0, 0, 0, 0);
    selectedDate.setHours(0, 0, 0, 0);
    thirtyDaysAgo.setHours(0, 0, 0, 0);

    if (selectedDate < thirtyDaysAgo) {
      return "Data de vencimento não pode ser anterior a 30 dias da data atual";
    }

    if (selectedDate < today) {
      return "Atenção: Produto com data de vencimento já passou. Confirme se está correto.";
    }

    return null;
  };

  // Função para validar campos obrigatórios
  const validateForm = (formData: FormData): { [key: string]: string } => {
    const errors: { [key: string]: string } = {};

    // Informações Básicas (obrigatórias)
    const nome = formData.get("nome") as string;
    const principioAtivo = formData.get("principio-ativo") as string;
    const concentracao = formData.get("concentracao") as string;
    const formaFarmaceutica = formData.get("forma-farmaceutica") as string;
    const laboratorio = formData.get("laboratorio") as string;
    const codigoBarras = formData.get("codigo-barras") as string;
    const registroAnvisa = formData.get("registro-anvisa") as string;

    // Informações Comerciais (obrigatórias)
    const categoria = formData.get("categoria") as string;
    const tipoPrescricao = formData.get("tipo-prescricao") as string;
    const dataVencimento = formData.get("data-vencimento") as string;
    const lote = formData.get("lote") as string;
    // const quantidadeEstoque = formData.get('estoque') as string;
    const precoUnitario = formData.get("preco-unitario") as string;
    const precoVenda = formData.get("preco-venda") as string;

    // Validações das Informações Básicas
    if (!nome?.trim()) {
      errors.nome = "Nome do medicamento é obrigatório";
    }

    if (!principioAtivo?.trim()) {
      errors["principio-ativo"] = "Princípio ativo é obrigatório";
    }

    if (!concentracao?.trim()) {
      errors.concentracao = "Concentração é obrigatória";
    }

    if (!formaFarmaceutica?.trim()) {
      errors["forma-farmaceutica"] = "Forma farmacêutica é obrigatória";
    }

    if (!laboratorio?.trim()) {
      errors.laboratorio = "Laboratório/Fabricante é obrigatório";
    }

    if (!codigoBarras?.trim()) {
      errors["codigo-barras"] = "Código EAN/Barras é obrigatório";
    }

    if (!registroAnvisa?.trim()) {
      errors["registro-anvisa"] = "Registro ANVISA é obrigatório";
    }

    // Validações das Informações Comerciais
    if (!categoria?.trim()) {
      errors.categoria = "Categoria é obrigatória";
    }

    if (!tipoPrescricao?.trim()) {
      errors["tipo-prescricao"] = "Tipo de prescrição é obrigatório";
    }

    const dateError = validateExpirationDate(dataVencimento);
    if (dateError) {
      errors["data-vencimento"] = dateError;
    }

    if (!lote?.trim()) {
      errors.lote = "Lote é obrigatório";
    }

    // if (!quantidadeEstoque || parseInt(quantidadeEstoque) < 0) {
    //   errors.estoque = 'Quantidade em estoque é obrigatória e não pode ser negativa';
    // }

    if (!precoUnitario || parseFloat(precoUnitario) <= 0) {
      errors["preco-unitario"] =
        "Preço unitário é obrigatório e deve ser maior que zero";
    }

    if (!precoVenda || parseFloat(precoVenda) <= 0) {
      errors["preco-venda"] =
        "Preço de venda é obrigatório e deve ser maior que zero";
    }

    if (
      precoUnitario &&
      precoVenda &&
      parseFloat(precoVenda) < parseFloat(precoUnitario)
    ) {
      errors["preco-venda"] =
        "Preço de venda não pode ser menor que o preço unitário";
    }

    // Observações são opcionais - não há validação para este campo

    return errors;
  };

  // Estados para produtos de compras (usando produtos em vez de catálogo)
  const [produtosCompras, setProdutosCompras] = useState<ProdutoCompleto[]>([]);
  const [loadingCompras, setLoadingCompras] = useState(false);
  const [totalProdutosCompras, setTotalProdutosCompras] = useState(0);
  const [comprasSearchTerm, setComprasSearchTerm] = useState("");
  const [showEsgotados, setShowEsgotados] = useState(true); // Filtro para produtos esgotados

  // Estados para produtos da lista (usando produtoService)
  const [produtos, setProdutos] = useState<ProdutoCompleto[]>([]);
  const [loading, setLoading] = useState(false);
  const [isChangingPage, setIsChangingPage] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [totalProdutos, setTotalProdutos] = useState(0);
  const [currentPage, setCurrentPage] = useState(1);

  // Função para verificar se o produto está vencido
  const isProdutoVencido = (produto: ProdutoCompleto): boolean => {
    const produtoData = produto as any;
    if (!produtoData.data_validade) return false;

    const dataValidade = new Date(produtoData.data_validade);
    const hoje = new Date();
    hoje.setHours(0, 0, 0, 0); // Zerar horas para comparar apenas a data

    return dataValidade < hoje;
  };

  // Função para verificar se o produto tem preço final válido
  const temPrecoFinalValido = (produto: ProdutoCompleto): boolean => {
    const produtoData = produto as any;
    return produtoData.preco_final && produtoData.preco_final > 0;
  };

  // Carregar produtos quando houver empresa
  useEffect(() => {
    // Verificar se está autenticado antes de carregar produtos
    const token = localStorage.getItem('access_token');
    if (!token) {
      toast.error("É necessário fazer login para acessar os produtos");
      router.push("/login");
      return;
    }

    if (empresaId) {
      listarProdutos();
    }
  }, [empresaId]);

  // Carregar usuário do localStorage
  useEffect(() => {

    const carregarUsuario = async () => {
      try {
        const userStorage = localStorage.getItem('user');

        if (userStorage) {
          const userData = JSON.parse(userStorage);
          setUser(userData);
        } else {

          // Verificar se há token mas não há usuário
          const token = localStorage.getItem('access_token');
          if (token) {

            try {
              // Buscar dados do usuário via endpoint /me
              const response = await fetch(`${process.env.NEXT_PUBLIC_BFF_API_URL}/auth/me`, {
                method: "GET",
                headers: {
                  "accept": "application/json",
                  "Authorization": `Bearer ${token}`,
                },
              });

              if (response.ok) {
                const userData = await response.json();

                // Salvar no localStorage para uso futuro
                localStorage.setItem('user', JSON.stringify(userData));
                setUser(userData);
              } else {
                // Se falhou, pode ser que o token seja inválido
                if (response.status === 401) {
                  localStorage.removeItem('access_token');
                  router.push('/login');
                }
              }
            } catch (error) {
              console.error("❌ Erro na chamada /me:", error);
            }
          }
        }
      } catch (error) {
        console.error("❌ Erro ao carregar usuário:", error);
      }
    };

    carregarUsuario();
  }, [router]);

  // Carregar produtos de teste
  const carregarProdutosDeTeste = async () => {
    try {
      setLoading(true);
      const response = await produtosVendaService.buscarProdutosCompletosParaCompra();
      if (response && response.length > 0) {
        setProdutos(response);
        setTotalProdutos(response.length);
        toast.success(`${response.length} produtos carregados!`);
      } else {
        toast.error("Nenhum produto encontrado");
      }
    } catch (error: any) {
      console.error("Erro ao carregar produtos:", error);
      if (error.message?.includes("Não autorizado")) {
        toast.error("Sessão expirada. Por favor, faça login novamente.");
        router.push("/login");
      } else {
        toast.error("Erro ao carregar produtos");
      }
    } finally {
      setLoading(false);
    }
  };

  // Carregar produtos do catálogo com preços mocados
  const carregarProdutosCatalogo = async () => {
    try {
      setLoading(true);

      const response = await catalogoProdutoService.listar();

      if (response.success && response.documents.length > 0) {
        // Converter produtos do catálogo para formato de produtos com preços mocados
        const produtosCatalogo = response.documents.map(
          (catalogo: any, index) => {
            // Gerar preços mocados baseados no índice para variedade
            const precoBase = 15 + index * 5 + Math.random() * 30; // Entre R$ 15 e R$ 65
            const precoComDesconto = precoBase * (0.8 + Math.random() * 0.15); // 80-95% do preço base
            const estoque = Math.floor(Math.random() * 150) + 20; // Entre 20 e 170 unidades

            return {
              $id: catalogo.$id,
              nome: catalogo.descricao || "Produto sem nome",
              descricao: catalogo.descricao || "Descrição não disponível",
              "codigo-interno":
                catalogo["codigo-interno"] ||
                `CAT${String(index + 1).padStart(3, "0")}`,
              "codigo-ean":
                catalogo["codigo-ean"] ||
                `789${String(Math.floor(Math.random() * 9999999999)).padStart(
                  10,
                  "0"
                )}`,
              "principio-ativo":
                catalogo["principio-ativo"] || "Princípio ativo não informado",
              concentracao:
                catalogo.concentracao || "Concentração não informada",
              "forma-farmaceutica":
                catalogo["forma-farmaceutica"] ||
                "Forma farmacêutica não informada",
              "preco-atual": parseFloat(precoComDesconto.toFixed(2)),
              "preco-original": parseFloat(precoBase.toFixed(2)),
              "preco-unitario": parseFloat(precoComDesconto.toFixed(2)),
              "preco-fabrica": parseFloat((precoBase * 0.7).toFixed(2)), // 70% do preço base
              pmc: parseFloat((precoBase * 1.3).toFixed(2)), // PMC 30% acima do preço base
              quantidade: estoque,
              estoque: estoque,
              "categoria-id": `cat-${(index % 8) + 1}`, // Distribuir em 8 categorias
              categoria: [
                "Medicamentos Genéricos",
                "Medicamentos Similares",
                "Medicamentos de Referência",
                "Suplementos Alimentares",
                "Produtos de Higiene",
                "Cosméticos e Beleza",
                "Equipamentos Médicos",
                "Produtos Infantis",
              ][index % 8],
              "laboratorio-id":
                catalogo.laboratorios?.$id || `lab-${(index % 5) + 1}`,
              laboratorio:
                catalogo.laboratorios?.nome ||
                [
                  "Laboratório EMS",
                  "Laboratório Eurofarma",
                  "Laboratório Medley",
                  "Laboratório Neo Química",
                  "Laboratório Germed",
                ][index % 5],
              ativo: true,
              "data-cadastro": new Date().toISOString(),
              "catalogo-produtos": catalogo, // Manter referência ao produto original do catálogo
              // Campos específicos para exibição
              precos: [
                {
                  preco: parseFloat(precoComDesconto.toFixed(2)),
                  tipo: "unitario",
                },
              ],
              // Metadados para identificar como produto do catálogo
              _origem: "catalogo",
              _precoMocado: true,
              // Campos adicionais para compatibilidade
              $collectionId: "catalogo-produtos",
              $databaseId: "marketplace",
              $createdAt: new Date().toISOString(),
              $updatedAt: new Date().toISOString(),
              $permissions: [],
            };
          }
        );

        setProdutos(produtosCatalogo as any);
        setTotalProdutos(produtosCatalogo.length);

        toast.success(
          `${produtosCatalogo.length} produtos do catálogo carregados com preços!`
        );
      } else {
        console.warn("⚠️ Nenhum produto encontrado no catálogo");
        toast.error("Nenhum produto encontrado no catálogo");
      }
    } catch (error) {
      console.error("❌ Erro ao carregar produtos do catálogo:", error);
      toast.error("Erro ao carregar produtos do catálogo");
    } finally {
      setLoading(false);
    }
  };

  // Carregar produtos da lista
  const listarProdutos = async (page = 1) => {

    try {
      setLoading(true);
      setError(null);

      let response;
      const produtos = await produtosVendaService.buscarProdutosCompletosParaCompra();

      response = {
        success: true,
        documents: produtos || [],
        total: produtos?.length || 0
      };

      ;

      if (response.success) {
        // Filtrar produtos vencidos e sem preço final válido
        const produtosValidos = response.documents.filter(produto => !isProdutoVencido(produto) && temPrecoFinalValido(produto));
        setProdutos(produtosValidos);
        setTotalProdutos(produtosValidos.length);

      } else {
        console.error("❌ Erro na resposta: falha na chamada da API");
        setError("Erro ao carregar produtos");
      }
    } catch (error: any) {
      console.error("❌ Erro ao carregar produtos:", error);
      if (error.message?.includes("Não autorizado")) {
        toast.error("Sessão expirada. Por favor, faça login novamente.");
        router.push("/login");
        setError("Sessão expirada");
      } else {
        setError("Erro ao carregar produtos");
        toast.error("Erro ao carregar produtos");
      }
    } finally {
      setLoading(false);
    }
  };

  // Buscar produtos da lista
  const buscarProdutos = async (searchTerm: string, page = 1) => {
    try {
      setLoading(true);
      setError(null);

      let response;
      const produtos = await produtosVendaService.buscarProdutosCompletosParaCompra();

      // Filtrar produtos por termo de busca se fornecido
      const produtosFiltrados = searchTerm
        ? produtos.filter(p =>
          p.nome?.toLowerCase().includes(searchTerm.toLowerCase()) ||
          p.descricao?.toLowerCase().includes(searchTerm.toLowerCase()) ||
          p.codigo_ean?.toLowerCase().includes(searchTerm.toLowerCase())
        )
        : produtos;

      // Filtrar produtos vencidos e sem preço final válido
      const produtosValidos = produtosFiltrados.filter(produto => !isProdutoVencido(produto) && temPrecoFinalValido(produto));

      response = {
        success: true,
        documents: produtosValidos || [],
        total: produtosValidos?.length || 0
      };

      setProdutos(response.documents);
      setTotalProdutos(response.total);
    } catch (error: any) {
      console.error("Erro ao buscar produtos:", error);
      if (error.message?.includes("Não autorizado")) {
        toast.error("Sessão expirada. Por favor, faça login novamente.");
        router.push("/login");
        setError("Sessão expirada");
      } else {
        setError("Erro ao buscar produtos");
        toast.error("Erro ao buscar produtos");
      }
    } finally {
      setLoading(false);
    }
  };

  // Atualizar produto
  const atualizarProduto = async (
    id: string,
    formData: ProdutoData
  ): Promise<boolean> => {
    try {
      setIsUpdating(true);
      setError(null);
      await produtoService.atualizar(id, formData);
      toast.success("Produto atualizado com sucesso!");
      await listarProdutos(currentPage);
      return true;
    } catch (error) {
      console.error("Erro ao atualizar produto:", error);
      setError("Erro ao atualizar produto");
      toast.error("Erro ao atualizar produto");
      return false;
    } finally {
      setIsUpdating(false);
    }
  };

  // Deletar produto
  const deletarProduto = async (id: string) => {
    try {
      setLoading(true);
      setError(null);
      await produtoService.deletar(id);
      toast.success("Produto excluído com sucesso!");
      await listarProdutos(currentPage);
    } catch (error) {
      console.error("Erro ao deletar produto:", error);
      setError("Erro ao deletar produto");
      toast.error("Erro ao deletar produto");
    } finally {
      setLoading(false);
    }
  };

  // Carregar produtos para compras - TODOS OS PRODUTOS SEM PAGINAÇÃO
  const carregarProdutosCompras = async (search = "") => {
    ({
      search,
    });

    try {
      setLoadingCompras(true);
      let todosProdutos: ProdutoCompleto[] = [];

      if (search.trim()) {
        // Buscar todos os produtos e filtrar pelo termo
        const produtos = await produtosVendaService.buscarTodosProdutosCompletos();
        const termoBusca = search.toLowerCase().trim();
        todosProdutos = produtos.filter(produto => {
          // Filtrar produtos vencidos
          if (isProdutoVencido(produto)) return false;

          // Filtrar produtos sem preço final válido
          if (!temPrecoFinalValido(produto)) return false;

          // Aplicar filtro de busca
          return produto.nome?.toLowerCase().includes(termoBusca) ||
            produto.descricao?.toLowerCase().includes(termoBusca) ||
            produto.codigo_ean?.toLowerCase().includes(termoBusca) ||
            produto.codigo_interno?.toLowerCase().includes(termoBusca);
        });
      } else {
        // Usar a nova função que busca todos os produtos de uma vez
        const produtos = await produtosVendaService.buscarTodosProdutosCompletos();



        // Filtrar produtos não vencidos e com preço final válido
        todosProdutos = produtos.filter(produto => !isProdutoVencido(produto) && temPrecoFinalValido(produto));


      }



      setProdutosCompras(todosProdutos);
      setTotalProdutosCompras(todosProdutos.length);
    } catch (error) {
      console.error("❌ Erro ao carregar produtos para compras:", error);
      toast.error("Erro ao carregar produtos para compra");
      setProdutosCompras([]);
      setTotalProdutosCompras(0);
    } finally {
      setLoadingCompras(false);
    }
  };

  // Carregar produtos quando houver mudança na busca
  useEffect(() => {
    if (empresaId) {
      carregarProdutosCompras(comprasSearchTerm);
    }
  }, [comprasSearchTerm, empresaId]);

  // Recarregar dados quando empresaId mudar
  useEffect(() => {
    if (empresaId) {
      carregarProdutosCompras("");
    }
  }, [empresaId]);

  // Tela de carregamento durante carregamento da empresa
  if (empresaLoading) {
    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-black">
            Carregando dados da empresa...
          </p>
        </div>
      </div>
    );
  }

  const handleFormSubmit = async (formData: ProdutoData): Promise<boolean> => {
    // Esta função será removida pois não há mais formulários nesta página
    return false;
  };

  // Helper para acessar propriedades de produto de forma typesafe
  const getProdutoField = (field: string) => {
    if (!editingProduct) return "";
    const produto = editingProduct as any;
    const valor = produto[field] || produto["catalogo-produtos"]?.[field] || "";

    return valor;
  };

  const handleEdit = (produto: ProdutoCompleto) => {
    setEditingProduct(produto);
    setIsEditModalOpen(true);
  };

  const handleEditFormSubmit = async (
    formData: ProdutoData
  ): Promise<boolean> => {
    if (!editingProduct) return false;

    const success = await atualizarProduto(editingProduct.id, formData);
    if (success) {
      setIsEditModalOpen(false);
      setEditingProduct(null);
      setFormErrors({});
    }
    return success;
  };

  const handleModalFormSubmit = async (
    event: React.FormEvent<HTMLFormElement>
  ) => {
    event.preventDefault();

    const formData = new FormData(event.currentTarget);
    const errors = validateForm(formData);

    if (Object.keys(errors).length > 0) {
      setFormErrors(errors);
      return;
    }

    setFormErrors({});
    setIsUpdating(true);

    try {
      // Criar objeto com os dados do formulário
      const productData: ProdutoData = {
        "preco_original":
          parseFloat(formData.get("preco-unitario") as string) || 0,
        "preco_atual": parseFloat(formData.get("preco-venda") as string) || 0,
        "catalogo-produtos": editingProduct?.id || "",
        empresas: empresaId || "",
      };

      const success = await handleEditFormSubmit(productData);
      if (success) {
        toast.success("Produto atualizado com sucesso!");
      }
    } catch (error) {
      toast.error("Erro ao salvar produto");
    } finally {
      setIsUpdating(false);
    }
  };

  const handleCloseEditModal = () => {
    setIsEditModalOpen(false);
    setEditingProduct(null);
    setFormErrors({});
  };

  const handleDelete = async (id: string): Promise<boolean> => {
    if (window.confirm("Tem certeza que deseja excluir este produto?")) {
      await deletarProduto(id);
      return true;
    }
    return false;
  };

  const handleSearch = async () => {
    await carregarProdutosCompras(comprasSearchTerm);
  };

  const handleRefresh = async () => {
    await carregarProdutosCompras(comprasSearchTerm);
  };

  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-black">Compra de Produtos</h1>
          <p className="mt-2 text-black">
            Navegue pelo catálogo e adicione produtos ao carrinho
          </p>
        </div>

        {/* Barra de Busca */}
        <div className="mb-6 flex flex-col gap-4">
          <div className="flex flex-col sm:flex-row gap-3">
            <div className="flex-1">
              <div className="relative">
                <input
                  type="text"
                  placeholder="Buscar produtos para compra..."
                  value={comprasSearchTerm}
                  onChange={(e) => setComprasSearchTerm(e.target.value)}
                  onKeyPress={(e) => e.key === "Enter" && handleSearch()}
                  className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent placeholder-gray-500 text-sm"
                />
                <MagnifyingGlassIcon className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
              </div>
            </div>
            <div className="flex gap-2">
              <button
                onClick={handleSearch}
                disabled={loadingCompras}
                className="flex items-center gap-1 bg-blue-600 text-white hover:bg-blue-700 px-3 py-2 rounded-lg transition-colors disabled:opacity-50 text-sm"
              >
                <MagnifyingGlassIcon className="w-4 h-4" />
                Buscar
              </button>
              <button
                onClick={handleRefresh}
                disabled={loadingCompras}
                className="flex items-center gap-1 bg-green-600 text-white hover:bg-green-700 px-3 py-2 rounded-lg transition-colors disabled:opacity-50 text-sm"
              >
                <ArrowPathIcon className="w-4 h-4" />
                Recarregar
              </button>
            </div>
          </div>

          {/* Filtros */}
          <div className="flex flex-col sm:flex-row sm:items-center gap-4">
            <label className="flex items-center gap-2 text-sm text-gray-700">
              <input
                type="checkbox"
                checked={showEsgotados}
                onChange={(e) => setShowEsgotados(e.target.checked)}
                className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
              />
              Mostrar produtos esgotados
            </label>
          </div>
        </div>


        {/* Conteúdo de Compras */}
        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
          <div className="flex items-center gap-2 mb-6">
            <CubeIcon className="w-6 h-6 text-blue-600" />
            <h2 className="text-xl font-semibold text-gray-900">
              Produtos para Compras
            </h2>
          </div>

          {loadingCompras ? (
            <div className="flex items-center justify-center py-12">
              <div className="text-center">
                <div className="w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
                <p className="text-gray-600">Carregando produtos...</p>
              </div>
            </div>
          ) : (
            <div className="w-full">
              {/* Lista de Produtos para Compra */}
              <div className="w-full">
                <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6">
                  <h3 className="text-lg font-medium text-gray-900 mb-2 sm:mb-0">
                    Produtos Disponíveis
                  </h3>
                  <div className="text-sm text-gray-600">
                    {(() => {
                      const produtosFiltrados = produtosCompras.filter(produto => {
                        if (!showEsgotados && produto.quantidade_estoque === 0) {
                          return false;
                        }
                        return true;
                      });
                      const esgotados = produtosCompras.filter(p => p.quantidade_estoque === 0).length;
                      return `${produtosFiltrados.length} produto(s) exibido(s)${!showEsgotados && esgotados > 0 ? ` (${esgotados} esgotado(s) oculto(s))` : ''}`;
                    })()}
                  </div>
                </div>
                {/* Lista de Produtos - Responsiva */}
                {!empresaId ? (
                  <div className="text-center py-12">
                    <div className="text-gray-400 mb-4">
                      <svg
                        className="mx-auto h-12 w-12"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          strokeWidth={2}
                          d="M19 21V5a2 2 0 00-2-2H6a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
                        />
                      </svg>
                    </div>
                    <h3 className="text-lg font-medium text-black mb-2">
                      Empresa não configurada
                    </h3>
                    <p className="text-gray-600 mb-4">
                      Você precisa configurar uma empresa para visualizar
                      produtos.
                    </p>
                    <button
                      onClick={() => router.push("/dashboard")}
                      className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
                    >
                      Ir para Dashboard
                    </button>
                  </div>
                ) : produtosCompras.length === 0 ? (
                  <div className="text-center py-12">
                    <div className="text-gray-400 mb-4">
                      <svg
                        className="mx-auto h-12 w-12"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          strokeWidth={2}
                          d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2 2m16-7H4m16 0l-2-2m2 2l-2 2M4 13l2-2m-2 2l2 2"
                        />
                      </svg>
                    </div>
                    <h3 className="text-lg font-medium text-black mb-2">
                      Nenhum produto cadastrado
                    </h3>
                    <p className="text-gray-600 mb-4">
                      Você ainda não cadastrou produtos para sua empresa.
                    </p>
                    <button
                      onClick={() =>
                        router.push("/dashboard/cadastrar-medicamentos")
                      }
                      className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
                    >
                      Cadastrar Produtos
                    </button>
                  </div>
                ) : (
                  <div className="flex flex-col lg:flex-row gap-6">
                    {/* Área dos produtos - 100% em mobile, 60% em desktop */}
                    <div className="w-full lg:w-[60%]">
                      <div className="space-y-4">
                        {produtosCompras
                          .filter(produto => {
                            // Aplicar filtro de produtos esgotados
                            if (!showEsgotados && produto.quantidade_estoque === 0) {
                              return false;
                            }
                            return true;
                          })
                          .map((produto) => (
                            <ProdutoComCompra key={produto.id} produto={produto} />
                          ))}
                      </div>
                    </div>

                    {/* Carrinho - 100% em mobile, 40% em desktop */}
                    <div className="w-full lg:w-[40%]">
                      <CarrinhoLateral />
                    </div>
                  </div>
                )}{" "}
              </div>
            </div>
          )}
        </div>
        {/* Modal de Edição de Produto */}
        {isEditModalOpen && editingProduct && (
          <div
            className="fixed inset-0 flex items-center justify-center z-50 p-4"
            style={{
              backgroundColor: "rgba(0, 0, 0, 0.1)",
              backdropFilter: "blur(8px)",
              WebkitBackdropFilter: "blur(8px)",
            }}
          >
            <div className="bg-white rounded-lg shadow-xl max-w-6xl w-full max-h-[95vh] overflow-y-auto">
              <div className="p-6 border-b border-gray-200">
                <div className="flex items-center justify-between">
                  <div>
                    <h2 className="text-xl font-semibold text-gray-900">
                      Editar Produto
                    </h2>
                    <p className="text-gray-600 mt-1">
                      Altere as informações do produto selecionado
                    </p>
                  </div>
                  <button
                    onClick={handleCloseEditModal}
                    className="text-gray-400 hover:text-gray-600 text-2xl font-bold w-8 h-8 flex items-center justify-center"
                    aria-label="Fechar modal"
                  >
                    ×
                  </button>
                </div>
              </div>

              <div className="p-6">
                <form onSubmit={handleModalFormSubmit} className="space-y-6">
                  {/* Nota sobre campos obrigatórios */}
                  <div className="bg-blue-50 border border-blue-200 rounded-md p-4">
                    <div className="flex">
                      <div className="flex-shrink-0">
                        <svg
                          className="h-5 w-5 text-blue-400"
                          viewBox="0 0 20 20"
                          fill="currentColor"
                        >
                          <path
                            fillRule="evenodd"
                            d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
                            clipRule="evenodd"
                          />
                        </svg>
                      </div>
                      <div className="ml-3">
                        <h3 className="text-sm font-medium text-blue-800">
                          Preenchimento do Formulário
                        </h3>
                        <div className="mt-2 text-sm text-blue-700">
                          <p>
                            Campos marcados com{" "}
                            <span className="text-red-500 font-semibold">
                              *
                            </span>{" "}
                            são obrigatórios. As "Observações" são opcionais e
                            podem ser preenchidas com informações adicionais
                            sobre o medicamento.
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>

                  {/* Mensagem de erro geral */}
                  {Object.keys(formErrors).length > 0 && (
                    <div className="bg-red-50 border border-red-200 rounded-md p-4">
                      <div className="flex">
                        <div className="ml-3">
                          <h3 className="text-sm font-medium text-red-800">
                            Corrija os seguintes erros:
                          </h3>
                          <div className="mt-2 text-sm text-red-700">
                            <ul className="list-disc list-inside space-y-1">
                              {Object.values(formErrors).map((error, index) => (
                                <li key={index}>{error}</li>
                              ))}
                            </ul>
                          </div>
                        </div>
                      </div>
                    </div>
                  )}

                  {/* Informações Básicas */}
                  <div>
                    <h3 className="text-lg font-medium text-gray-900 mb-4">
                      Informações Básicas
                    </h3>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-2">
                          Nome do Medicamento{" "}
                          <span className="text-red-500">*</span>
                        </label>
                        <input
                          type="text"
                          name="nome"
                          placeholder="Ex: Dipirona Sódica"
                          className={`w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${formErrors.nome
                              ? "border-red-300 bg-red-50"
                              : "border-gray-300"
                            }`}
                          defaultValue={
                            getProdutoField("nome") ||
                            getProdutoField("descricao")
                          }
                          required
                        />
                        {formErrors.nome && (
                          <p className="mt-1 text-sm text-red-600">
                            {formErrors.nome}
                          </p>
                        )}
                      </div>

                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-2">
                          Princípio Ativo{" "}
                          <span className="text-red-500">*</span>
                        </label>
                        <input
                          type="text"
                          name="principio-ativo"
                          placeholder="Ex: Dipirona Sódica"
                          className={`w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${formErrors["principio-ativo"]
                              ? "border-red-300 bg-red-50"
                              : "border-gray-300"
                            }`}
                          defaultValue={getProdutoField("principio-ativo")}
                          required
                        />
                        {formErrors["principio-ativo"] && (
                          <p className="mt-1 text-sm text-red-600">
                            {formErrors["principio-ativo"]}
                          </p>
                        )}
                      </div>

                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-2">
                          Concentração <span className="text-red-500">*</span>
                        </label>
                        <input
                          type="text"
                          name="concentracao"
                          placeholder="Ex: 500mg"
                          className={`w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${formErrors.concentracao
                              ? "border-red-300 bg-red-50"
                              : "border-gray-300"
                            }`}
                          defaultValue={getProdutoField("concentracao")}
                          required
                        />
                        {formErrors.concentracao && (
                          <p className="mt-1 text-sm text-red-600">
                            {formErrors.concentracao}
                          </p>
                        )}
                      </div>

                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-2">
                          Forma Farmacêutica{" "}
                          <span className="text-red-500">*</span>
                        </label>
                        <select
                          name="forma-farmaceutica"
                          className={`w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${formErrors["forma-farmaceutica"]
                              ? "border-red-300 bg-red-50"
                              : "border-gray-300"
                            }`}
                          defaultValue={getProdutoField("forma-farmaceutica")}
                          required
                        >
                          <option value="">Selecione</option>
                          <option value="comprimido">Comprimido</option>
                          <option value="capsula">Cápsula</option>
                          <option value="solucao">Solução</option>
                          <option value="suspensao">Suspensão</option>
                          <option value="pomada">Pomada</option>
                          <option value="gel">Gel</option>
                          <option value="creme">Creme</option>
                          <option value="injecao">Injeção</option>
                        </select>
                        {formErrors["forma-farmaceutica"] && (
                          <p className="mt-1 text-sm text-red-600">
                            {formErrors["forma-farmaceutica"]}
                          </p>
                        )}
                      </div>

                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-2">
                          Laboratório/Fabricante{" "}
                          <span className="text-red-500">*</span>
                        </label>
                        <input
                          type="text"
                          name="laboratorio"
                          placeholder="Ex: EMS, Medley, Eurofarma"
                          className={`w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${formErrors.laboratorio
                              ? "border-red-300 bg-red-50"
                              : "border-gray-300"
                            }`}
                          defaultValue={
                            getProdutoField("laboratorio") ||
                            (editingProduct as any)?.["catalogo-produtos"]
                              ?.laboratorios?.nome ||
                            ""
                          }
                          required
                        />
                        {formErrors.laboratorio && (
                          <p className="mt-1 text-sm text-red-600">
                            {formErrors.laboratorio}
                          </p>
                        )}
                      </div>

                      <div className="grid grid-cols-2 gap-4">
                        <div>
                          <label className="block text-sm font-medium text-gray-700 mb-2">
                            Código EAN/Barras{" "}
                            <span className="text-red-500">*</span>
                          </label>
                          <input
                            type="text"
                            name="codigo-barras"
                            placeholder="Ex: 7891234567890"
                            className={`w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${formErrors["codigo-barras"]
                                ? "border-red-300 bg-red-50"
                                : "border-gray-300"
                              }`}
                            defaultValue={
                              getProdutoField("codigo-barras") ||
                              getProdutoField("codigo-ean")
                            }
                            required
                          />
                          {formErrors["codigo-barras"] && (
                            <p className="mt-1 text-sm text-red-600">
                              {formErrors["codigo-barras"]}
                            </p>
                          )}
                        </div>

                        <div>
                          <label className="block text-sm font-medium text-gray-700 mb-2">
                            Registro ANVISA{" "}
                            <span className="text-red-500">*</span>
                          </label>
                          <input
                            type="text"
                            name="registro-anvisa"
                            placeholder="Ex: 1.0000.0000.000-0"
                            className={`w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${formErrors["registro-anvisa"]
                                ? "border-red-300 bg-red-50"
                                : "border-gray-300"
                              }`}
                            defaultValue={getProdutoField("registro-anvisa")}
                            required
                          />
                          {formErrors["registro-anvisa"] && (
                            <p className="mt-1 text-sm text-red-600">
                              {formErrors["registro-anvisa"]}
                            </p>
                          )}
                        </div>
                      </div>
                    </div>
                  </div>

                  {/* Informações Comerciais */}
                  <div>
                    <h3 className="text-lg font-medium text-gray-900 mb-4">
                      Informações Comerciais
                    </h3>
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-2">
                          Categoria <span className="text-red-500">*</span>
                        </label>
                        <select
                          name="categoria"
                          className={`w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${formErrors.categoria
                              ? "border-red-300 bg-red-50"
                              : "border-gray-300"
                            }`}
                          defaultValue={getProdutoField("categoria")}
                          required
                        >
                          <option value="">Selecione</option>
                          <option value="analgesico">Analgésico</option>
                          <option value="antibiotico">Antibiótico</option>
                          <option value="anti-inflamatorio">
                            Anti-inflamatório
                          </option>
                          <option value="vitamina">Vitamina</option>
                          <option value="suplemento">Suplemento</option>
                        </select>
                        {formErrors.categoria && (
                          <p className="mt-1 text-sm text-red-600">
                            {formErrors.categoria}
                          </p>
                        )}
                      </div>

                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-2">
                          Tipo de Prescrição{" "}
                          <span className="text-red-500">*</span>
                        </label>
                        <select
                          name="tipo-prescricao"
                          className={`w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${formErrors["tipo-prescricao"]
                              ? "border-red-300 bg-red-50"
                              : "border-gray-300"
                            }`}
                          defaultValue={
                            getProdutoField("tipo-prescricao") ||
                            getProdutoField("prescricao")
                          }
                          required
                        >
                          <option value="">Selecione</option>
                          <option value="venda-livre">Venda Livre</option>
                          <option value="prescricao-simples">
                            Prescrição Simples
                          </option>
                          <option value="prescricao-especial">
                            Prescrição Especial
                          </option>
                          <option value="controlado">Controlado</option>
                        </select>
                        {formErrors["tipo-prescricao"] && (
                          <p className="mt-1 text-sm text-red-600">
                            {formErrors["tipo-prescricao"]}
                          </p>
                        )}
                      </div>

                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-2">
                          Data de Vencimento{" "}
                          <span className="text-red-500">*</span>
                        </label>
                        <input
                          type="date"
                          name="data-vencimento"
                          min={
                            new Date(Date.now() - 30 * 24 * 60 * 60 * 1000)
                              .toISOString()
                              .split("T")[0]
                          } // 30 dias atrás
                          className={`w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${formErrors["data-vencimento"]
                              ? "border-red-300 bg-red-50"
                              : "border-gray-300"
                            }`}
                          defaultValue={getProdutoField("data-vencimento")}
                          required
                          onChange={(e) => {
                            const error = validateExpirationDate(
                              e.target.value
                            );
                            if (error) {
                              setFormErrors((prev) => ({
                                ...prev,
                                "data-vencimento": error,
                              }));
                            } else {
                              setFormErrors((prev) => {
                                const newErrors = { ...prev };
                                delete newErrors["data-vencimento"];
                                return newErrors;
                              });
                            }
                          }}
                        />
                        {formErrors["data-vencimento"] && (
                          <p
                            className={`mt-1 text-sm ${formErrors["data-vencimento"].includes("Atenção")
                                ? "text-yellow-600"
                                : "text-red-600"
                              }`}
                          >
                            {formErrors["data-vencimento"]}
                          </p>
                        )}
                      </div>

                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-2">
                          Lote <span className="text-red-500">*</span>
                        </label>
                        <input
                          type="text"
                          name="lote"
                          placeholder="Ex: L123456"
                          className={`w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${formErrors.lote
                              ? "border-red-300 bg-red-50"
                              : "border-gray-300"
                            }`}
                          defaultValue={getProdutoField("lote")}
                          required
                        />
                        {formErrors.lote && (
                          <p className="mt-1 text-sm text-red-600">
                            {formErrors.lote}
                          </p>
                        )}
                      </div>

                      {/* Comentado temporariamente até definir estrutura de estoque
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-2">
                          Quantidade em Estoque <span className="text-red-500">*</span>
                        </label>
                        <input
                          type="number"
                          name="estoque"
                          placeholder="0"
                          min="0"
                          className={`w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${
                            formErrors.estoque ? 'border-red-300 bg-red-50' : 'border-gray-300'
                          }`}
                          defaultValue={editingProduct?.estoque || ''}
                          required
                        />
                        {formErrors.estoque && (
                          <p className="mt-1 text-sm text-red-600">{formErrors.estoque}</p>
                        )}
                      </div>
                      */}

                      <div className="grid grid-cols-3 gap-4">
                        <div>
                          <label className="block text-sm font-medium text-gray-700 mb-2">
                            Preço Unitário (R$){" "}
                            <span className="text-red-500">*</span>
                          </label>
                          <input
                            type="number"
                            name="preco-unitario"
                            step="0.01"
                            placeholder="0"
                            min="0"
                            className={`w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${formErrors["preco-unitario"]
                                ? "border-red-300 bg-red-50"
                                : "border-gray-300"
                              }`}
                            defaultValue={
                              (editingProduct as any)?.preco_original ||
                              (editingProduct as any)?.["preco-original"] ||
                              (editingProduct as any)?.preco_atual ||
                              (editingProduct as any)?.["preco-atual"] ||
                              ""
                            }
                            onFocus={(e) => {
                              if (e.target.value === "0") {
                                e.target.value = "";
                              }
                            }}
                            onBlur={(e) => {
                              if (e.target.value === "") {
                                e.target.value = "0";
                              }
                            }}
                            required
                          />
                          {formErrors["preco-unitario"] && (
                            <p className="mt-1 text-sm text-red-600">
                              {formErrors["preco-unitario"]}
                            </p>
                          )}
                        </div>

                        <div>
                          <label className="block text-sm font-medium text-gray-700 mb-2">
                            Preço de Venda (R$){" "}
                            <span className="text-red-500">*</span>
                          </label>
                          <input
                            type="number"
                            name="preco-venda"
                            step="0.01"
                            placeholder="0"
                            min="0"
                            className={`w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${formErrors["preco-venda"]
                                ? "border-red-300 bg-red-50"
                                : "border-gray-300"
                              }`}
                            defaultValue={
                              (editingProduct as any)?.preco_atual ||
                              (editingProduct as any)?.["preco-atual"] || ""
                            }
                            onFocus={(e) => {
                              if (e.target.value === "0") {
                                e.target.value = "";
                              }
                            }}
                            onBlur={(e) => {
                              if (e.target.value === "") {
                                e.target.value = "0";
                              }
                            }}
                            required
                          />
                          {formErrors["preco-venda"] && (
                            <p className="mt-1 text-sm text-red-600">
                              {formErrors["preco-venda"]}
                            </p>
                          )}
                        </div>

                        <div>
                          <label className="block text-sm font-medium text-gray-700 mb-2">
                            Estoque/Quantidade
                          </label>
                          <input
                            type="number"
                            name="quantidade"
                            step="1"
                            placeholder="0"
                            min="0"
                            className={`w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${formErrors["quantidade"]
                                ? "border-red-300 bg-red-50"
                                : "border-gray-300"
                              }`}
                            defaultValue={
                              (editingProduct as any)?.quantidade ||
                              (editingProduct as any)?.estoque ||
                              ""
                            }
                            onFocus={(e) => {
                              if (e.target.value === "0") {
                                e.target.value = "";
                              }
                            }}
                            onBlur={(e) => {
                              if (e.target.value === "") {
                                e.target.value = "0";
                              }
                            }}
                          />
                          {formErrors["quantidade"] && (
                            <p className="mt-1 text-sm text-red-600">
                              {formErrors["quantidade"]}
                            </p>
                          )}
                        </div>
                      </div>
                    </div>
                  </div>

                  {/* Observações */}
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Observações
                    </label>
                    <textarea
                      rows={4}
                      placeholder="Informações adicionais sobre o medicamento..."
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                      defaultValue={
                        getProdutoField("observacoes") ||
                        getProdutoField("descricao")
                      }
                    />
                  </div>

                  {/* Botões de Ação */}
                  <div className="flex justify-end gap-4 pt-6 border-t border-gray-200">
                    <button
                      type="button"
                      onClick={handleCloseEditModal}
                      disabled={isUpdating}
                      className="px-6 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 focus:ring-2 focus:ring-gray-500"
                    >
                      Cancelar
                    </button>
                    <button
                      type="submit"
                      disabled={isUpdating}
                      className="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 disabled:opacity-50 flex items-center gap-2"
                    >
                      {isUpdating ? (
                        <>
                          <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
                          Salvando...
                        </>
                      ) : (
                        "+ Salvar Medicamento"
                      )}
                    </button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        )}

        {error && (
          <div className="mt-4 bg-red-50 border border-red-200 rounded-md p-4">
            <div className="flex">
              <div className="ml-3">
                <h3 className="text-sm font-medium text-red-800">Erro</h3>
                <div className="mt-2 text-sm text-red-700">
                  <p>{error}</p>
                </div>
              </div>
            </div>
          </div>
        )}
      </main>
    </div>
  );
};

export default GestaoProdutos;
