"use client";

import React, { useEffect, useMemo, useState } from "react";
import { useRouter } from "next/navigation";
import { Models } from "appwrite";
import { toast } from "react-hot-toast";
import { cadastroProdutoService } from "@/services/cadastroProdutoService";
import { laboratorioService } from "@/services/laboratorioService";
import { categoriaService } from "@/services/categoriaService";
import { useEmpresa } from "@/contexts/EmpresaContext";
import { getCurrentUserEmpresaId } from "@/utils/authUtils";
import { getEmpresaIdRobust } from "@/utils/robustEmpresaId";

interface StepDefinition {
  id: 1 | 2 | 3;
  title: string;
  description: string;
}

interface StepOneState {
  codigo_ean: string;
  codigo_interno: string;
  nome: string;
  descricao: string;
  preco_base: string;
  preco_fabrica: string;
  pmc: string;
  desconto_comercial: string;
  valor_substituicao_tributaria: string;
  preco_nf: string;
  laboratorio: string;
  categoria: string;
  subcategoria: string;
}

interface StepTwoState {
  qtdade_estoque: string;
  data_validade: string;
  preco_venda: string;
  observacoes: string;
}

interface StepThreeState {
  // Não será mais usado - tudo será feito na Etapa 2
}

const steps: StepDefinition[] = [
  {
    id: 1,
    title: "Etapa 1",
    description: "Dados do catalogo",
  },
  {
    id: 2,
    title: "Etapa 2",
    description: "Estoque e Venda",
  },
];

const initialStepOne: StepOneState = {
  codigo_ean: "",
  codigo_interno: "",
  nome: "",
  descricao: "",
  preco_base: "",
  preco_fabrica: "",
  pmc: "",
  desconto_comercial: "10",
  valor_substituicao_tributaria: "5.00",
  preco_nf: "",
  laboratorio: "",
  categoria: "",
  subcategoria: "",
};

const initialStepTwo: StepTwoState = {
  qtdade_estoque: "",
  data_validade: "",
  preco_venda: "",
  observacoes: "",
};

const initialStepThree: StepThreeState = {
  // Não será mais usado
};

const extractRelationId = (value: unknown): string => {
  if (!value) return "";
  if (typeof value === "string") return value;
  if (typeof value === "object") {
    if (Array.isArray(value) && value.length > 0) {
      return extractRelationId(value[0]);
    }
    const obj = value as Record<string, unknown>;
    if (typeof obj.$id === "string") {
      return obj.$id;
    }
  }
  return "";
};

const extractTextField = (value: unknown): string => {
  if (typeof value === "string") return value;
  if (typeof value === "number") return String(value);
  if (typeof value === "object" && value !== null) {
    const obj = value as Record<string, unknown>;
    if (typeof obj.nome === "string") return obj.nome;
    if (typeof obj.name === "string") return obj.name;
  }
  return "";
};

const extractNumericField = (value: unknown): string => {
  if (typeof value === "number") {
    return Number.isFinite(value) ? value.toString() : "";
  }
  if (typeof value === "string") {
    const normalized = value.replace(",", ".");
    return Number.isFinite(Number(normalized)) ? normalized : "";
  }
  return "";
};

const CadastroProdutoWizard: React.FC = () => {
  const router = useRouter();
  const { empresaId } = useEmpresa();

  // Debug: verificar empresaId
  useEffect(() => {

  }, [empresaId]);

  const [currentStep, setCurrentStep] = useState<1 | 2>(1);
  const [stepOne, setStepOne] = useState<StepOneState>(initialStepOne);
  const [stepTwo, setStepTwo] = useState<StepTwoState>(initialStepTwo);
  const [stepThree, setStepThree] = useState<StepThreeState>(initialStepThree);

  const [laboratorios, setLaboratorios] = useState<any[]>([]);
  const [categorias, setCategorias] = useState<any[]>([]);

  const [optionsLoading, setOptionsLoading] = useState(true);
  const [optionsError, setOptionsError] = useState<string | null>(null);

  const [formErrors, setFormErrors] = useState<Record<string, string>>({});
  const [submitting, setSubmitting] = useState(false);
  const [searchingCodigo, setSearchingCodigo] = useState(false);

  // Estados para laboratório com autocomplete
  const [laboratorioNome, setLaboratorioNome] = useState("");
  const [laboratoriosSugeridos, setLaboratoriosSugeridos] = useState<any[]>([]);
  const [showLaboratorioSuggestions, setShowLaboratorioSuggestions] = useState(false);
  const [searchingLaboratorio, setSearchingLaboratorio] = useState(false);
  const [criandoLaboratorio, setCriandoLaboratorio] = useState(false);

  // Estados para autocomplete de nome
  const [searchingNome, setSearchingNome] = useState(false);
  const [produtosSugeridos, setProdutosSugeridos] = useState<any[]>([]);
  const [showSuggestions, setShowSuggestions] = useState(false);
  const [searchTimeout, setSearchTimeout] = useState<NodeJS.Timeout | null>(null);

  // Cache de produtos do catálogo
  const [produtosCatalogo, setProdutosCatalogo] = useState<any[]>([]);
  const [catalogoCarregado, setCatalogoCarregado] = useState(false);
  const [carregandoCatalogo, setCarregandoCatalogo] = useState(false);

  const [catalogoEncontrado, setCatalogoEncontrado] = useState<any | null>(null);
  const [catalogoJaExistente, setCatalogoJaExistente] = useState(false);
  const [referenciaCatalogoId, setReferenciaCatalogoId] = useState<string | undefined>(undefined);
  const [referenciaVendaId, setReferenciaVendaId] = useState<string | undefined>(undefined);
  const [referenciaEstoqueId, setReferenciaEstoqueId] = useState<string | undefined>(undefined);

  const [finalizado, setFinalizado] = useState(false);

  // Cleanup do timeout quando componente for desmontado
  useEffect(() => {
    return () => {
      if (searchTimeout) {
        clearTimeout(searchTimeout);
      }
    };
  }, [searchTimeout]);

  useEffect(() => {
    const carregarOpcoes = async () => {
      setOptionsLoading(true);
      setOptionsError(null);

      try {
        const token = localStorage.getItem('access_token');

        if (!token) {
          setOptionsError("Token de acesso não encontrado. Faça login novamente.");
          setOptionsLoading(false);
          return;
        }

        const [labsResponse, catsResponse] = await Promise.all([
          fetch(`${process.env.NEXT_PUBLIC_BFF_API_URL}/laboratorios?page=1&limit=100`, {
            headers: {
              'Authorization': `Bearer ${token}`,
              'Accept': 'application/json',
            },
          }),
          fetch(`${process.env.NEXT_PUBLIC_BFF_API_URL}/categorias?page=1&limit=100`, {
            headers: {
              'Authorization': `Bearer ${token}`,
              'Accept': 'application/json',
            },
          }),
        ]);

        if (!labsResponse.ok || !catsResponse.ok) {
          console.error('Error status - Labs:', labsResponse.status, 'Cats:', catsResponse.status);
          if (labsResponse.status === 401 || catsResponse.status === 401) {
            setOptionsError("Token de autorização inválido ou expirado");
          } else {
            setOptionsError("Erro ao carregar dados auxiliares");
          }
          setOptionsLoading(false);
          return;
        }

        const [labsData, catsData] = await Promise.all([
          labsResponse.json(),
          catsResponse.json(),
        ]);



        // Tentar diferentes estruturas possíveis
        let laboratoriosArray = [];
        let categoriasArray = [];

        // Para laboratórios
        if (Array.isArray(labsData)) {
          laboratoriosArray = labsData;
        } else if (labsData.documents && Array.isArray(labsData.documents)) {
          laboratoriosArray = labsData.documents;
        } else if (labsData.data && Array.isArray(labsData.data)) {
          laboratoriosArray = labsData.data;
        } else if (labsData.items && Array.isArray(labsData.items)) {
          laboratoriosArray = labsData.items;
        }

        // Para categorias
        if (Array.isArray(catsData)) {
          categoriasArray = catsData;
        } else if (catsData.documents && Array.isArray(catsData.documents)) {
          categoriasArray = catsData.documents;
        } else if (catsData.data && Array.isArray(catsData.data)) {
          categoriasArray = catsData.data;
        } else if (catsData.items && Array.isArray(catsData.items)) {
          categoriasArray = catsData.items;
        }





        setLaboratorios(laboratoriosArray);
        setCategorias(categoriasArray);
      } catch (error) {
        console.error("[CadastroProdutoWizard] Falha ao buscar opcoes", error);
        setOptionsError("Erro ao carregar dados auxiliares. Usando dados locais.");

        // Fallback para dados mock
        setLaboratorios([
          { $id: "mock-1", id: "mock-1", nome: "Laboratório Exemplo 1" },
          { $id: "mock-2", id: "mock-2", nome: "Laboratório Exemplo 2" },
        ]);
        setCategorias([
          { $id: "mock-cat-1", id: "mock-cat-1", nome: "Categoria Exemplo 1" },
          { $id: "mock-cat-2", id: "mock-cat-2", nome: "Categoria Exemplo 2" },
        ]);
      } finally {
        setOptionsLoading(false);
      }
    };

    carregarOpcoes();
  }, []);

  // Carregar produtos do catálogo para cache
  useEffect(() => {
    const carregarCatalogoProdutos = async () => {
      if (catalogoCarregado || carregandoCatalogo) return;

      setCarregandoCatalogo(true);

      try {
        const token = localStorage.getItem('access_token');

        if (!token) {
          console.error("Token não encontrado para carregar catálogo");
          setCarregandoCatalogo(false);
          return;
        }


        // Fazer múltiplas requisições para pegar todos os produtos
        let todosProdutos: any[] = [];
        let page = 1;
        let hasMore = true;

        while (hasMore && page <= 10) { // Limitar a 10 páginas para evitar loop infinito
          const response = await fetch(
            `${process.env.NEXT_PUBLIC_BFF_API_URL}/produtos-catalogo?page=${page}&limit=100`,
            {
              headers: {
                'Authorization': `Bearer ${token}`,
                'Accept': 'application/json',
              },
            }
          );

          if (!response.ok) {
            console.error(`Erro ao carregar página ${page} do catálogo:`, response.status);
            break;
          }

          const data = await response.json();
          const produtos = data.documents || data.items || data.data || data || [];

          if (Array.isArray(produtos) && produtos.length > 0) {
            todosProdutos = [...todosProdutos, ...produtos];

            // Se retornou menos que o limite, não há mais páginas
            if (produtos.length < 100) {
              hasMore = false;
            } else {
              page++;
            }
          } else {

            hasMore = false;
          }
        }

        setProdutosCatalogo(todosProdutos);
        setCatalogoCarregado(true);

      } catch (error) {
        console.error("❌ Erro ao carregar catálogo para cache:", error);
      } finally {
        setCarregandoCatalogo(false);
      }
    };

    carregarCatalogoProdutos();
  }, [catalogoCarregado, carregandoCatalogo]);

  // Sincronizar nome do laboratório quando stepOne.laboratorio muda
  useEffect(() => {
    if (stepOne.laboratorio && laboratorios.length > 0) {
      const labSelecionado = laboratorios.find(lab => (lab.$id || lab.id) === stepOne.laboratorio);
      if (labSelecionado) {
        const nomeLabSelecionado = labSelecionado.nome || labSelecionado.name || "";
        setLaboratorioNome(nomeLabSelecionado);
      }
    } else if (!stepOne.laboratorio) {
      setLaboratorioNome("");
    }
  }, [stepOne.laboratorio, laboratorios]);

  const resetWizard = () => {
    setCurrentStep(1);
    setStepOne(initialStepOne);
    setStepTwo(initialStepTwo);
    setStepThree(initialStepThree);
    setFormErrors({});
    setCatalogoEncontrado(null);
    setCatalogoJaExistente(false);
    setReferenciaCatalogoId(undefined);
    setReferenciaVendaId(undefined);
    setReferenciaEstoqueId(undefined);
    setFinalizado(false);
  };

  const preencherComCatalogo = (documento: any) => {
    setStepOne((prev) => ({
      ...prev,
      codigo_ean: prev.codigo_ean || extractTextField((documento as any).codigo_ean) || extractTextField((documento as any)["codigo-ean"]) || extractTextField((documento as any).codigoBarras) || prev.codigo_ean,
      codigo_interno: extractTextField((documento as any).codigo_interno) || extractTextField((documento as any)["codigo-interno"]) || prev.codigo_interno,
      nome: extractTextField((documento as any).nome) || extractTextField((documento as any).descricao) || prev.nome,
      preco_base:
        extractNumericField((documento as any).preco_base) ||
        extractNumericField((documento as any)["preco-base"]) ||
        extractNumericField((documento as any).precoBase) ||
        extractNumericField((documento as any).preco) ||
        prev.preco_base,
      descricao: extractTextField((documento as any).descricao) || prev.descricao,
      preco_fabrica:
        extractNumericField((documento as any).preco_fabrica) ||
        extractNumericField((documento as any)["preco-fabrica"]) ||
        prev.preco_fabrica,
      pmc:
        extractNumericField((documento as any).pmc) ||
        extractNumericField((documento as any).PMC) ||
        prev.pmc,
      desconto_comercial:
        extractNumericField((documento as any).desconto_comercial) ||
        extractNumericField((documento as any)["desconto-comercial"]) ||
        prev.desconto_comercial,
      valor_substituicao_tributaria:
        extractNumericField((documento as any).valor_substituicao_tributaria) ||
        extractNumericField((documento as any)["valor-substituicao-tributaria"]) ||
        prev.valor_substituicao_tributaria,
      preco_nf:
        extractNumericField((documento as any).preco_nf) ||
        extractNumericField((documento as any)["preco-nf"]) ||
        prev.preco_nf,
      laboratorio:
        extractRelationId((documento as any).laboratorio) ||
        extractRelationId((documento as any).laboratorios) ||
        extractRelationId((documento as any)["laboratorio-id"]) ||
        prev.laboratorio,
      categoria:
        extractRelationId((documento as any).categoria) ||
        extractRelationId((documento as any).categorias) ||
        extractRelationId((documento as any)["categoria-id"]) ||
        prev.categoria,
      subcategoria:
        extractRelationId((documento as any).subcategoria) ||
        extractRelationId((documento as any).subcategorias) ||
        extractRelationId((documento as any)["subcategoria-id"]) ||
        prev.subcategoria,
    }));

    setReferenciaCatalogoId(documento.$id);
  };

  const validarEtapaUm = (): boolean => {
    const errors: Record<string, string> = {};

    if (!stepOne.codigo_ean.trim()) {
      errors.codigo_ean = "Informe o codigo EAN";
    }

    if (!catalogoJaExistente) {
      if (!stepOne.nome.trim()) {
        errors.nome = "Informe o nome";
      }

      // Remover validação de preço base já que está oculto
      // if (!stepOne.preco_base || Number(stepOne.preco_base) <= 0) {
      //   errors.preco_base = "Informe o preco base";
      // }

      // Verificar se laboratório foi selecionado ou se há nome para criar
      if (!stepOne.laboratorio && !laboratorioNome.trim()) {
        errors.laboratorio = "Selecione ou digite o nome do laboratorio";
      }

      if (!stepOne.categoria) {
        errors.categoria = "Selecione a categoria";
      }
    }

    setFormErrors(errors);
    return Object.keys(errors).length === 0;
  };

  const validarEtapaDois = (): boolean => {


    const errors: Record<string, string> = {};

    // Validar se o nome do produto da etapa 1 está presente
    if (!stepOne.nome || stepOne.nome.trim() === '') {
      errors.nome = "Nome do produto da etapa 1 é obrigatório. Volte para a etapa 1 e preencha o nome.";
    } else {
    }

    // Validar quantidade de estoque
    if (!stepTwo.qtdade_estoque || Number(stepTwo.qtdade_estoque) < 0) {
      errors.qtdade_estoque = "Informe a quantidade de estoque";
    }

    // Validar preço de venda
    if (!stepTwo.preco_venda || Number(stepTwo.preco_venda) <= 0) {
      errors.preco_venda = "Informe o preço de venda";
    }

    // Validar data de validade
    if (!stepTwo.data_validade) {
      errors.data_validade = "Informe a data de validade";
    }


    setFormErrors(errors);
    return Object.keys(errors).length === 0;
  };

  const validarEtapaTres = (): boolean => {
    const errors: Record<string, string> = {};



    setFormErrors(errors);
    return Object.keys(errors).length === 0;
  };

  const handleCodigoEanBlur = async () => {
    const codigo = stepOne.codigo_ean.trim();
    if (!codigo) {
      return;
    }

    setSearchingCodigo(true);

    try {
      // Buscar na API de produtos-catálogo do BFF
      const token = localStorage.getItem('access_token');

      if (!token) {
        toast.error("Token de acesso não encontrado");
        setSearchingCodigo(false);
        return;
      }

      const response = await fetch(`${process.env.NEXT_PUBLIC_BFF_API_URL}/produtos-catalogo/codigo-ean/${codigo}`, {
        headers: {
          'Authorization': `Bearer ${token}`,
          'Accept': 'application/json',
        },
      });

      if (!response.ok) {
        toast.error("Erro ao buscar produto no catálogo");
        setSearchingCodigo(false);
        return;
      }

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


        // A nova API retorna diretamente o produto encontrado
        if (data && data.codigo_ean === codigo) {
          // Extrair o ID do catálogo - pode estar em $id, id ou documentId
          const catalogoIdEncontrado = data.$id || data.id || data.documentId;



          // CRÍTICO: Definir o referenciaCatalogoId
          if (catalogoIdEncontrado) {
            setReferenciaCatalogoId(catalogoIdEncontrado);
          } else {
            console.error("❌ ERRO: Não foi possível extrair o ID do catálogo!");
            console.error("❌ Estrutura recebida:", JSON.stringify(data, null, 2));
          }

          // Produto com EAN exato encontrado, preencher os campos
          setStepOne(prev => ({
            ...prev,
            nome: data.nome || '',
            descricao: data.descricao || '',
            preco_base: data.preco_base?.toString() || '',
            preco_fabrica: data.preco_fabrica?.toString() || '',
            pmc: data.pmc?.toString() || '',
            desconto_comercial: data.desconto_comercial?.toString() || prev.desconto_comercial,
            valor_substituicao_tributaria: data.valor_substituicao_tributaria?.toString() || prev.valor_substituicao_tributaria,
            preco_nf: data.preco_nf?.toString() || '',
            codigo_interno: data.codigo_interno || codigo,
            laboratorio: data.laboratorio || '',
            categoria: data.categoria || '',
          }));

          setCatalogoEncontrado(data);
          setCatalogoJaExistente(true);

          toast.success("Produto encontrado no catálogo! Dados preenchidos automaticamente. Avançando para próxima etapa...");

          // Avançar para a próxima etapa após um breve delay
          setTimeout(() => {
            setCurrentStep(2);
          }, 1500);
        }
      }
      // Se response não é ok ou produto não encontrado, não faz nada (permanece silencioso)

    } catch (error) {
      console.error("Erro ao buscar produto:", error);
      toast.error("Erro ao consultar catálogo de produtos");
    } finally {
      setSearchingCodigo(false);
    }
  };

  const buscarProdutosPorNomeCache = (nome: string) => {
    if (!nome || nome.length < 3) {
      setProdutosSugeridos([]);
      setShowSuggestions(false);
      return;
    }

    // Se o catálogo ainda não foi carregado, aguardar
    if (!catalogoCarregado) {
      return;
    }

    setSearchingNome(true);

    try {


      const nomeMinusculo = nome.toLowerCase().trim();

      // Filtrar produtos localmente do cache
      const produtosFiltrados = produtosCatalogo.filter(produto => {
        if (!produto.nome) return false;

        const nomeProduct = produto.nome.toLowerCase();
        return nomeProduct.includes(nomeMinusculo);
      });


      if (produtosFiltrados.length > 0) {
        // Ordenar por relevância (produtos que começam com o termo primeiro)
        const produtosOrdenados = produtosFiltrados.sort((a, b) => {
          const nomeA = a.nome.toLowerCase();
          const nomeB = b.nome.toLowerCase();

          const aComeca = nomeA.startsWith(nomeMinusculo);
          const bComeca = nomeB.startsWith(nomeMinusculo);

          if (aComeca && !bComeca) return -1;
          if (!aComeca && bComeca) return 1;

          return nomeA.localeCompare(nomeB);
        });

        const limitados = produtosOrdenados.slice(0, 10); // Limitar a 10 resultados
        setProdutosSugeridos(limitados);
        setShowSuggestions(true);

      } else {
        setProdutosSugeridos([]);
        setShowSuggestions(false);
      }

    } catch (error) {
      console.error("❌ Erro ao filtrar produtos do cache:", error);
      setProdutosSugeridos([]);
      setShowSuggestions(false);
    } finally {
      setSearchingNome(false);
    }
  };

  const buscarProdutosPorNome = async (nome: string) => {
    if (!nome || nome.length < 3) {
      setProdutosSugeridos([]);
      setShowSuggestions(false);
      return;
    }

    setSearchingNome(true);

    try {
      const token = localStorage.getItem('access_token');

      if (!token) {
        setSearchingNome(false);
        return;
      }


      // Tentar buscar produtos no catálogo usando filtro de nome
      const response = await fetch(`${process.env.NEXT_PUBLIC_BFF_API_URL}/produtos-catalogo?page=1&limit=20`, {
        headers: {
          'Authorization': `Bearer ${token}`,
          'Accept': 'application/json',
        },
      });


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


        // A API pode retornar { items: [...] } ou direto um array
        let produtos = data.items || data.data || data || [];


        // Se for array, filtrar localmente por nome
        if (Array.isArray(produtos)) {
          const nomeMinusculo = nome.toLowerCase();
          const produtosFiltrados = produtos.filter(produto =>
            produto.nome && produto.nome.toLowerCase().includes(nomeMinusculo)
          );


          if (produtosFiltrados.length > 0) {
            setProdutosSugeridos(produtosFiltrados.slice(0, 10)); // Limitar a 10 resultados
            setShowSuggestions(true);
          } else {
            setProdutosSugeridos([]);
            setShowSuggestions(false);
          }
        } else {
          setProdutosSugeridos([]);
          setShowSuggestions(false);
        }
      } else {
        console.error("❌ Erro na resposta da API:", response.status, response.statusText);
        setProdutosSugeridos([]);
        setShowSuggestions(false);
      }

    } catch (error) {
      console.error("❌ Erro ao buscar produtos por nome:", error);
      setProdutosSugeridos([]);
      setShowSuggestions(false);
    } finally {
      setSearchingNome(false);
    }
  };

  const handleNomeChange = (value: string) => {
    setStepOne((prev) => ({ ...prev, nome: value }));

    // Limpar timeout anterior
    if (searchTimeout) {
      clearTimeout(searchTimeout);
    }

    // Se o valor tem menos de 3 caracteres, esconder sugestões
    if (value.length < 3) {
      setShowSuggestions(false);
      setProdutosSugeridos([]);
      return;
    }

    // Configurar novo timeout para busca
    const newTimeout = setTimeout(() => {
      buscarProdutosPorNomeCache(value); // Usar função de cache
    }, 300); // Reduzir para 300ms já que é busca local

    setSearchTimeout(newTimeout);
  };

  const selecionarProdutoSugerido = (produto: any) => {
    // Extrair o ID do catálogo - a API usa $id
    const catalogoIdEncontrado = produto.$id || produto.id || produto.documentId;

    if (catalogoIdEncontrado) {
      setReferenciaCatalogoId(catalogoIdEncontrado);
    }

    // Preencher todos os campos da etapa 1
    setStepOne((prev) => ({
      ...prev,
      codigo_ean: produto.codigo_ean || '',
      codigo_interno: produto.codigo_interno || '',
      nome: produto.nome || '',
      descricao: produto.descricao || '',
      preco_base: extractNumericField(produto.preco_base),
      preco_fabrica: extractNumericField(produto.preco_fabrica),
      pmc: extractNumericField(produto.pmc),
      desconto_comercial: extractNumericField(produto.desconto_comercial) || '10',
      valor_substituicao_tributaria: extractNumericField(produto.valor_substituicao_tributaria) || '5.00',
      preco_nf: extractNumericField(produto.preco_nf),
      laboratorio: produto.laboratorio || '',
      categoria: produto.categoria || '',
      subcategoria: produto.subcategoria || '',
    }));

    setCatalogoEncontrado(produto);
    setCatalogoJaExistente(true);
    setShowSuggestions(false);
    setProdutosSugeridos([]);

    toast.success("Produto selecionado! Dados preenchidos automaticamente.");
  };

  // Funções para lidar com laboratório com autocomplete
  const handleLaboratorioChange = (value: string) => {
    setLaboratorioNome(value);

    // Se está vazio, limpar seleção
    if (!value.trim()) {
      setStepOne((prev) => ({ ...prev, laboratorio: "" }));
      setShowLaboratorioSuggestions(false);
      setLaboratoriosSugeridos([]);
      return;
    }

    // Buscar laboratórios que contenham o texto digitado
    const sugestoes = laboratorios.filter(lab => {
      const nome = lab.nome || lab.name || "";
      return nome.toLowerCase().includes(value.toLowerCase());
    });

    setLaboratoriosSugeridos(sugestoes);
    setShowLaboratorioSuggestions(sugestoes.length > 0 || value.length >= 2);
  };

  const selecionarLaboratorio = (laboratorio: any) => {
    const labId = laboratorio.$id || laboratorio.id;
    const labNome = laboratorio.nome || laboratorio.name || "";

    setLaboratorioNome(labNome);
    setStepOne((prev) => ({ ...prev, laboratorio: labId }));
    setShowLaboratorioSuggestions(false);
    setLaboratoriosSugeridos([]);
  };

  const criarNovoLaboratorio = async () => {
    if (!laboratorioNome.trim()) {
      toast.error("Digite o nome do laboratório");
      return;
    }

    setCriandoLaboratorio(true);

    try {
      const token = localStorage.getItem('access_token');
      if (!token) {
        toast.error("Token de acesso não encontrado");
        setCriandoLaboratorio(false);
        return;
      }


      const response = await fetch(`${process.env.NEXT_PUBLIC_BFF_API_URL}/laboratorios`, {
        method: 'POST',
        headers: {
          'accept': 'application/json',
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token}`,
        },
        body: JSON.stringify({
          nome: laboratorioNome.trim()
        }),
      });

      if (!response.ok) {
        const errorData = await response.json().catch(() => ({}));
        toast.error(errorData.message || "Erro ao criar laboratório");
        setCriandoLaboratorio(false);
        return;
      }

      const novoLab = await response.json();

      // Adicionar à lista de laboratórios
      setLaboratorios((prev) => [...prev, novoLab]);

      // Selecionar o novo laboratório
      const labId = novoLab.$id || novoLab.id;
      setStepOne((prev) => ({ ...prev, laboratorio: labId }));
      setShowLaboratorioSuggestions(false);
      setLaboratoriosSugeridos([]);

      toast.success("Laboratório criado com sucesso!");

    } catch (error) {
      console.error("Erro ao criar laboratório:", error);
      toast.error("Erro ao criar laboratório");
    } finally {
      setCriandoLaboratorio(false);
    }
  };

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

    if (!validarEtapaUm()) {
      return;
    }

    if (catalogoJaExistente) {
      setCurrentStep(2);
      return;
    }

    setSubmitting(true);

    // Se não existe no catálogo, criar novo produto via BFF
    try {
      const token = localStorage.getItem('access_token');

      if (!token) {
        toast.error("Token de acesso não encontrado");
        setSubmitting(false);
        return;
      }

      // Primeiro, verificar se precisamos criar um novo laboratório
      let laboratorioId = stepOne.laboratorio;
      let labNome = "";

      if (!laboratorioId && laboratorioNome.trim()) {
        // Criar novo laboratório

        try {
          const labResponse = await fetch(`${process.env.NEXT_PUBLIC_BFF_API_URL}/laboratorios`, {
            method: 'POST',
            headers: {
              'accept': 'application/json',
              'Content-Type': 'application/json',
              'Authorization': `Bearer ${token}`,
            },
            body: JSON.stringify({
              nome: laboratorioNome.trim()
            }),
          });

          if (!labResponse.ok) {
            const errorData = await labResponse.json().catch(() => ({}));
            toast.error(errorData.message || "Erro ao criar laboratório");
            setSubmitting(false);
            return;
          }

          const novoLab = await labResponse.json();

          // Adicionar à lista de laboratórios
          setLaboratorios((prev) => [...prev, novoLab]);

          laboratorioId = novoLab.$id || novoLab.id;
          labNome = novoLab.nome || novoLab.name || laboratorioNome.trim();

          // Atualizar estado do stepOne
          setStepOne((prev) => ({ ...prev, laboratorio: laboratorioId }));

        } catch (error) {
          console.error("Erro ao criar laboratório:", error);
          toast.error("Erro ao criar laboratório");
          setSubmitting(false);
          return;
        }
      } else {
        // Buscar nome do laboratório existente
        const labSelecionado = laboratorios.find(lab => (lab.$id || lab.id) === laboratorioId);
        labNome = labSelecionado?.nome || labSelecionado?.name || '';
      }

      // Buscar os nomes de categoria
      const catSelecionada = categorias.find(cat => (cat.$id || cat.id) === stepOne.categoria);
      const catNome = catSelecionada?.nome || catSelecionada?.name || '';

      const payload = {
        documentId: "unique()",
        data: {
          codigo_ean: stepOne.codigo_ean.trim(),
          codigo_interno: stepOne.codigo_interno.trim() || stepOne.codigo_ean.trim(),
          nome: stepOne.nome.trim(),
          descricao: stepOne.descricao.trim() || "Descrição do produto",
          // Usar valores padrão para campos ocultos
          preco_base: Number(stepOne.preco_base) || 0,
          preco_fabrica: Number(stepOne.preco_fabrica) || 0,
          pmc: Number(stepOne.pmc) || 0,
          desconto_comercial: Number(stepOne.desconto_comercial) || 10,
          valor_substituicao_tributaria: Number(stepOne.valor_substituicao_tributaria) || 5.00,
          preco_nf: Number(stepOne.preco_nf) || 0,
          lab_nome: labNome,
          cat_nome: catNome,
        }
      };


      const response = await fetch(`${process.env.NEXT_PUBLIC_BFF_API_URL}/produtos-catalogo`, {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${token}`,
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(payload),
      });

      setSubmitting(false);

      if (!response.ok) {
        const errorData = await response.json().catch(() => ({}));
        toast.error(errorData.message || "Erro ao criar produto no catálogo");
        return;
      }

      const data = await response.json();

      const catalogoId = data.documentId || data.$id || data.id;

      if (catalogoId) {
        setReferenciaCatalogoId(catalogoId);
      } else {
        console.error("❌ ERRO: Não foi possível extrair o ID do catálogo após criação!");
        console.error("❌ Estrutura recebida:", JSON.stringify(data, null, 2));
      }

      toast.success("Produto criado no catálogo com sucesso!");
      setCurrentStep(2);

    } catch (error) {
      console.error("Erro ao criar produto no catálogo:", error);
      toast.error("Erro ao criar produto no catálogo");
      setSubmitting(false);
    }
  };

  const handleSubmitStepTwo = async (event: React.FormEvent<HTMLFormElement>) => {


    event.preventDefault();

    if (!validarEtapaDois()) {
      toast.error("Preencha todos os campos obrigatórios antes de avançar");
      return;
    }


    setSubmitting(true);

    try {
      const token = localStorage.getItem('access_token');

      if (!token) {
        toast.error("Token de acesso não encontrado");
        setSubmitting(false);
        return;
      }

      // Validar e converter preco_venda
      const qtdadeEstoque = Number(stepTwo.qtdade_estoque);


      if (isNaN(qtdadeEstoque) || qtdadeEstoque <= 0) {
        toast.error("Quantidade deve ser um número válido maior que zero");
        setSubmitting(false);
        return;
      }

      // Remover a validação empresaId para estoque - não é necessária
      if (!referenciaCatalogoId) {
        console.error("❌ ReferenciaCatalogoId não encontrado");
        toast.error("❌ ID do catálogo não encontrado. Volte para a Etapa 1 e salve o produto novamente.");
        setSubmitting(false);
        return;
      }


      // Buscar empresa_id do endpoint /me
      let empresaIdFromMe = await getCurrentUserEmpresaId();

      // Se falhou, tentar com função robusta
      if (!empresaIdFromMe) {
        empresaIdFromMe = await getEmpresaIdRobust();
      }

      if (!empresaIdFromMe) {
        console.error("❌ Não foi possível obter empresa_id do endpoint /me com nenhuma estratégia");
        empresaIdFromMe = empresaId || localStorage.getItem('empresaId');

        if (!empresaIdFromMe) {
          toast.error("❌ Erro ao obter dados da empresa. Tente novamente ou entre em contato com o suporte.");
          setSubmitting(false);
          return;
        }

      }


      // Não aplicar aumento — usar o preço informado diretamente
      const precoVendaOriginal = parseFloat(stepTwo.preco_venda);
      const precoVendaComAumento = Number.isFinite(precoVendaOriginal) ? precoVendaOriginal : 0;

      const payload = {
        documentId: "unique()",
        data: {
          catalogo_id: referenciaCatalogoId,
          nome: stepOne.nome,
          preco_venda: precoVendaComAumento,
          qtdade_estoque: qtdadeEstoque,
          observacoes: stepTwo.observacoes.trim() || "Produto cadastrado via sistema",
          data_validade: stepTwo.data_validade,
          empresa_id: empresaIdFromMe,
        },
      };

      const response = await fetch(`${process.env.NEXT_PUBLIC_BFF_API_URL}/produtos-venda`, {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${token}`,
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(payload),
      });

      if (!response.ok) {
        const errorText = await response.text();
        console.error("❌ Resposta de erro (texto bruto):", errorText);

        let errorData;
        try {
          errorData = JSON.parse(errorText);
        } catch {
          errorData = { message: errorText };
        }

        console.error("❌ Erro na resposta da API:", errorData);
        toast.error(errorData.message || `Erro ao criar produto de venda (${response.status})`);
        setSubmitting(false);
        return;
      }

      const responseText = await response.text();

      const data = responseText ? JSON.parse(responseText) : {};

      const vendaId = data.documentId || data.$id || data.id;

      if (vendaId) {
        setReferenciaVendaId(vendaId);
      }

      toast.success("Produto cadastrado com sucesso!");
      setFinalizado(true);

    } catch (error) {
      console.error("❌ Erro exception ao criar produto de venda:", error);
      if (error instanceof Error) {
        console.error("❌ Detalhes do erro:", {
          message: error.message,
          stack: error.stack
        });
      }
      toast.error(`Erro ao criar produto de venda: ${error instanceof Error ? error.message : 'Erro desconhecido'}`);
      setSubmitting(false);
    } finally {
      setSubmitting(false);
    }
  };



  const stepIndicator = useMemo(() => {
    return (
      <div className="flex flex-col gap-4">
        <div className="flex items-center justify-between">
          {steps.map((step) => {
            const isActive = currentStep === step.id;
            const isCompleted = currentStep > step.id || (step.id === 2 && finalizado);
            return (
              <div key={step.id} className="flex-1 flex flex-col items-center">
                <div
                  className={`flex h-10 w-10 items-center justify-center rounded-full border-2 text-sm font-semibold ${isCompleted
                      ? "border-green-500 bg-green-500 text-white"
                      : isActive
                        ? "border-blue-600 bg-blue-600 text-white"
                        : "border-gray-300 bg-white text-gray-500"
                    }`}
                >
                  {step.id}
                </div>
                <span className="mt-2 text-sm font-medium text-gray-700">{step.title}</span>
                <span className="text-xs text-gray-500">{step.description}</span>
              </div>
            );
          })}
        </div>
        <div className="h-1 rounded-full bg-gray-200">
          <div
            className="h-1 rounded-full bg-blue-600 transition-all duration-300"
            style={{ width: `${((currentStep - 1) / (steps.length - 1)) * 100}%` }}
          />
        </div>
      </div>
    );
  }, [currentStep, finalizado]);

  return (
    <div className="space-y-6">
      {stepIndicator}

      {optionsError && (
        <div className="rounded-md border border-yellow-300 bg-yellow-50 p-4 text-sm text-yellow-800">
          {optionsError}
        </div>
      )}

      {currentStep === 1 && (
        <form onSubmit={handleSubmitStepOne} className="space-y-6">
          <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
            <div className="md:col-span-1">
              <label className="mb-2 block text-sm font-medium text-gray-700">
                Codigo EAN/Barras
                <span className="text-red-600"> *</span>
              </label>
              <input
                type="text"
                value={stepOne.codigo_ean}
                onChange={(event) =>
                  setStepOne((prev) => ({ ...prev, codigo_ean: event.target.value }))
                }
                onBlur={handleCodigoEanBlur}
                className={`w-full rounded-md border px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 ${formErrors.codigo_ean ? "border-red-400" : "border-gray-300"
                  }`}
                placeholder="Digite o codigo EAN"
                autoComplete="off"
              />
              {formErrors.codigo_ean && (
                <p className="mt-2 text-sm text-red-600">{formErrors.codigo_ean}</p>
              )}
              {searchingCodigo && (
                <p className="mt-2 text-xs text-gray-500">Buscando codigo...</p>
              )}
            </div>

            {/* Campo Código Interno - OCULTO conforme solicitação */}
            {/* <div className="md:col-span-1">
              <label className="mb-2 block text-sm font-medium text-gray-700">
                Código Interno
              </label>
              <input
                type="text"
                value={stepOne.codigo_interno}
                onChange={(event) =>
                  setStepOne((prev) => ({ ...prev, codigo_interno: event.target.value }))
                }
                className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200"
                placeholder="Código interno (opcional)"
                disabled={catalogoJaExistente}
              />
            </div> */}

            <div className="md:col-span-1">
              <label className="mb-2 block text-sm font-medium text-gray-700">
                Nome
                {!catalogoJaExistente && <span className="text-red-600"> *</span>}
                {carregandoCatalogo && (
                  <span className="ml-2 text-xs text-blue-600">
                    (Carregando catálogo para autocomplete...)
                  </span>
                )}
              </label>
              <div className="relative">
                <input
                  type="text"
                  value={stepOne.nome}
                  onChange={(event) => handleNomeChange(event.target.value)}
                  onFocus={() => {
                    if (stepOne.nome.length >= 3 && produtosSugeridos.length > 0) {
                      setShowSuggestions(true);
                    }
                  }}
                  onBlur={() => {
                    // Delay para permitir clique nas sugestões
                    setTimeout(() => setShowSuggestions(false), 200);
                  }}
                  className={`w-full rounded-md border px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 ${formErrors.nome ? "border-red-400" : "border-gray-300"
                    }`}
                  placeholder="Digite o nome do produto (mín. 3 caracteres para sugestões)"
                  disabled={catalogoJaExistente}
                />


                {/* Loading indicator para busca de nome */}
                {searchingNome && (
                  <div className="absolute right-2 top-2">
                    <div className="w-5 h-5 border-2 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
                  </div>
                )}

                {/* Lista de sugestões */}
                {showSuggestions && produtosSugeridos.length > 0 && !catalogoJaExistente && (
                  <div className="absolute z-50 w-full mt-1 bg-white border-2 border-blue-300 rounded-lg shadow-2xl max-h-60 overflow-y-auto solid-dropdown">
                    <div className="px-4 py-2 text-sm font-semibold text-blue-800 bg-blue-100 border-b border-blue-200 rounded-t-lg">
                      📦 {produtosSugeridos.length} produto(s) encontrado(s) no catálogo
                    </div>
                    {produtosSugeridos.map((produto, index) => {
                      return (
                        <div
                          key={produto.$id || produto.id || index}
                          onClick={() => selecionarProdutoSugerido(produto)}
                          className="px-4 py-3 bg-white hover:bg-blue-50 cursor-pointer border-b border-gray-100 last:border-b-0 transition-colors duration-150"
                        >
                          <div className="text-sm font-semibold text-gray-900 mb-1">
                            {produto.nome || 'Nome não disponível'}
                          </div>
                          <div className="text-xs text-gray-600 mb-1">
                            📊 EAN: <span className="font-mono">{produto.codigo_ean || 'N/A'}</span> • 🏭 Lab: {produto.lab_nome || produto.laboratorio || 'N/A'}
                          </div>

                          {(produto.cat_nome || produto.categoria) && (
                            <div className="text-xs text-blue-700">
                              🏷️ Categoria: {produto.cat_nome || produto.categoria}
                            </div>
                          )}
                        </div>
                      );
                    })}
                  </div>
                )}

                {/* Mensagem quando nenhum produto for encontrado */}
                {showSuggestions && produtosSugeridos.length === 0 && !searchingNome && stepOne.nome.length >= 3 && (
                  <div className="absolute z-50 w-full mt-1 bg-white border-2 border-orange-300 rounded-lg shadow-2xl solid-dropdown">
                    <div className="px-4 py-3 text-sm text-orange-700 bg-white rounded-b-lg">
                      🔍 Nenhum produto encontrado no catálogo
                    </div>
                  </div>
                )}
              </div>
              {formErrors.nome && (
                <p className="mt-2 text-sm text-red-600">{formErrors.nome}</p>
              )}
            </div>

            {/* Campo Preço base - OCULTO conforme solicitação */}
            {/* <div>
              <label className="mb-2 block text-sm font-medium text-gray-700">
                Preco base (R$)
                {!catalogoJaExistente && <span className="text-red-600"> *</span>}
              </label>
              <input
                type="number"
                min="0"
                step="0.01"
                value={stepOne.preco_base}
                onChange={(event) =>
                  setStepOne((prev) => ({ ...prev, preco_base: event.target.value }))
                }
                className={`w-full rounded-md border px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 ${
                  formErrors.preco_base ? "border-red-400" : "border-gray-300"
                }`}
                placeholder="0.00"
                disabled={catalogoJaExistente}
              />
              {formErrors.preco_base && (
                <p className="mt-2 text-sm text-red-600">{formErrors.preco_base}</p>
              )}
            </div> */}

            {/* Campo Preço Fábrica - OCULTO conforme solicitação */}
            {/* <div>
              <label className="mb-2 block text-sm font-medium text-gray-700">
                Preço Fábrica
              </label>
              <input
                type="number"
                step="0.01"
                min="0"
                value={stepOne.preco_fabrica}
                onChange={(event) =>
                  setStepOne((prev) => ({ ...prev, preco_fabrica: event.target.value }))
                }
                className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200"
                placeholder="0.00"
                disabled={catalogoJaExistente}
              />
            </div> */}

            {/* Campo PMC - OCULTO conforme solicitação */}
            {/* <div>
              <label className="mb-2 block text-sm font-medium text-gray-700">
                PMC (Preço Máximo ao Consumidor)
              </label>
              <input
                type="number"
                step="0.01"
                min="0"
                value={stepOne.pmc}
                onChange={(event) =>
                  setStepOne((prev) => ({ ...prev, pmc: event.target.value }))
                }
                className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200"
                placeholder="0.00"
                disabled={catalogoJaExistente}
              />
            </div> */}

            {/* Campo Desconto Comercial - OCULTO conforme solicitação */}
            {/* <div>
              <label className="mb-2 block text-sm font-medium text-gray-700">
                Desconto Comercial (%)
              </label>
              <input
                type="number"
                step="0.01"
                min="0"
                max="100"
                value={stepOne.desconto_comercial}
                onChange={(event) =>
                  setStepOne((prev) => ({ ...prev, desconto_comercial: event.target.value }))
                }
                className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200"
                placeholder="10"
                disabled={catalogoJaExistente}
              />
            </div> */}

            {/* Campo Valor Substituição Tributária - OCULTO conforme solicitação */}
            {/* <div>
              <label className="mb-2 block text-sm font-medium text-gray-700">
                Valor Substituição Tributária
              </label>
              <input
                type="number"
                step="0.01"
                min="0"
                value={stepOne.valor_substituicao_tributaria}
                onChange={(event) =>
                  setStepOne((prev) => ({ ...prev, valor_substituicao_tributaria: event.target.value }))
                }
                className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200"
                placeholder="5.00"
                disabled={catalogoJaExistente}
              />
            </div> */}

            {/* Campo Preço NF - OCULTO conforme solicitação */}
            {/* <div>
              <label className="mb-2 block text-sm font-medium text-gray-700">
                Preço NF
              </label>
              <input
                type="number"
                step="0.01"
                min="0"
                value={stepOne.preco_nf}
                onChange={(event) =>
                  setStepOne((prev) => ({ ...prev, preco_nf: event.target.value }))
                }
                className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200"
                placeholder="0.00"
                disabled={catalogoJaExistente}
              />
            </div> */}

            <div>
              <label className="mb-2 block text-sm font-medium text-gray-700">
                Descrição
              </label>
              <textarea
                rows={3}
                value={stepOne.descricao}
                onChange={(event) =>
                  setStepOne((prev) => ({ ...prev, descricao: event.target.value }))
                }
                className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200"
                placeholder="Detalhes do produto"
                disabled={catalogoJaExistente}
              />
            </div>

            <div>
              <label className="mb-2 block text-sm font-medium text-gray-700">
                Laboratorio/Fabricante
                {!catalogoJaExistente && <span className="text-red-600"> *</span>}
              </label>
              <div className="relative">
                <input
                  type="text"
                  value={laboratorioNome}
                  onChange={(event) => handleLaboratorioChange(event.target.value)}
                  onFocus={() => {
                    if (laboratorioNome.length >= 2 && laboratoriosSugeridos.length > 0) {
                      setShowLaboratorioSuggestions(true);
                    }
                  }}
                  onBlur={() => {
                    // Delay para permitir clique nas sugestões
                    setTimeout(() => setShowLaboratorioSuggestions(false), 200);
                  }}
                  className={`w-full rounded-md border px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 ${formErrors.laboratorio ? "border-red-400" : "border-gray-300"
                    }`}
                  placeholder="Digite o nome do laboratório"
                  disabled={catalogoJaExistente || optionsLoading}
                  autoComplete="off"
                />

                {/* Lista de sugestões */}
                {showLaboratorioSuggestions && !catalogoJaExistente && (
                  <div className="absolute z-50 w-full mt-1 bg-white border-2 border-green-300 rounded-lg shadow-2xl max-h-48 overflow-y-auto solid-dropdown">
                    {laboratoriosSugeridos.length > 0 && (
                      <div className="px-4 py-2 text-sm font-semibold text-green-800 bg-green-100 border-b border-green-200 rounded-t-lg">
                        🧪 {laboratoriosSugeridos.length} laboratório(s) encontrado(s)
                      </div>
                    )}

                    {laboratoriosSugeridos.map((lab, index) => (
                      <div
                        key={lab.$id || lab.id || index}
                        onClick={() => selecionarLaboratorio(lab)}
                        className="px-4 py-3 bg-white hover:bg-green-50 cursor-pointer text-sm border-b border-gray-100 last:border-b-0 transition-colors duration-150"
                      >
                        <div className="font-semibold text-gray-900 flex items-center">
                          🏭 {lab.nome || lab.name || `Laboratório ${index + 1}`}
                        </div>
                      </div>
                    ))}

                    {/* Opção para criar novo laboratório */}
                    {laboratorioNome.trim() && laboratoriosSugeridos.length === 0 && (
                      <div
                        onClick={criarNovoLaboratorio}
                        className="px-4 py-3 hover:bg-blue-50 cursor-pointer text-sm text-blue-700 bg-white border-2 border-dashed border-blue-300 rounded-lg m-2 transition-colors duration-150"
                      >
                        {criandoLaboratorio ? (
                          <div className="flex items-center">
                            <div className="w-5 h-5 border-2 border-blue-600 border-t-transparent rounded-full animate-spin mr-3"></div>
                            <span className="font-medium">Criando laboratório...</span>
                          </div>
                        ) : (
                          <div className="flex items-center">
                            <svg className="w-5 h-5 mr-3 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                            </svg>
                            <div>
                              <div className="font-semibold">✨ Criar novo laboratório</div>
                              <div className="text-xs text-blue-600">"{laboratorioNome}"</div>
                            </div>
                          </div>
                        )}
                      </div>
                    )}
                  </div>
                )}
              </div>
              {formErrors.laboratorio && (
                <p className="mt-2 text-sm text-red-600">{formErrors.laboratorio}</p>
              )}
            </div>

            <div>
              <label className="mb-2 block text-sm font-medium text-gray-700">
                Categoria
                {!catalogoJaExistente && <span className="text-red-600"> *</span>}
              </label>
              <select
                value={stepOne.categoria}
                onChange={(event) =>
                  setStepOne((prev) => ({ ...prev, categoria: event.target.value }))
                }
                className={`w-full rounded-md border px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 ${formErrors.categoria ? "border-red-400" : "border-gray-300"
                  }`}
                disabled={catalogoJaExistente || optionsLoading}
              >
                <option value="">Selecione uma categoria</option>
                {categorias.map((categoria, index) => (
                  <option key={categoria.$id || categoria.id || index} value={categoria.$id || categoria.id}>
                    {categoria.nome || extractTextField((categoria as any).nome) || categoria.name || categoria.$id || categoria.id || `Categoria ${index + 1}`}
                  </option>
                ))}
              </select>
              {formErrors.categoria && (
                <p className="mt-2 text-sm text-red-600">{formErrors.categoria}</p>
              )}
            </div>

            <div>
              <label className="mb-2 block text-sm font-medium text-gray-700">
                Subcategoria
              </label>
              <input
                type="text"
                value={stepOne.subcategoria}
                onChange={(event) =>
                  setStepOne((prev) => ({ ...prev, subcategoria: event.target.value }))
                }
                className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200"
                placeholder="Subcategoria (opcional)"
                disabled={catalogoJaExistente}
              />
            </div>
          </div>

          {catalogoJaExistente && catalogoEncontrado && (
            <div className="rounded-md border border-blue-200 bg-blue-50 p-4 text-sm text-blue-800">
              Produto ja cadastrado no catalogo. Revise os dados e continue para completar as demais etapas.
            </div>
          )}

          <div className="flex justify-end gap-3">
            <button
              type="button"
              onClick={resetWizard}
              className="rounded-md border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50"
              disabled={submitting}
            >
              Limpar
            </button>
            <button
              type="submit"
              className="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-60"
              disabled={submitting}
            >
              {submitting ? "Salvando..." : "Avancar"}
            </button>
          </div>
        </form>
      )}

      {currentStep === 2 && !finalizado && (
        <form onSubmit={handleSubmitStepTwo} className="space-y-6">
          <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
            {/* Debug info - OCULTO */}
            {/* <div className="col-span-full bg-blue-100 p-4 rounded-lg text-xs space-y-1">
              <p className="font-bold text-blue-900 mb-2">🔍 Informações de Debug - Etapa 2 (ESTOQUE + VENDA)</p>
              <p><strong>CatalogoId:</strong> {referenciaCatalogoId || '❌ NÃO DEFINIDO'}</p>
              <p><strong>Nome do produto (etapa 1):</strong> {stepOne.nome || '❌ NÃO DEFINIDO'}</p>
              <p><strong>Quantidade estoque:</strong> {stepTwo.qtdade_estoque || '❌ NÃO DEFINIDO'}</p>
              <p><strong>Data de validade:</strong> {stepTwo.data_validade || '❌ NÃO DEFINIDO'}</p>
              <p><strong>Preço de venda:</strong> {stepTwo.preco_venda || '❌ NÃO DEFINIDO'}</p>
              <p><strong>EmpresaId (contexto):</strong> {empresaId || '❌ NÃO DEFINIDO'}</p>
              <p><strong>EmpresaId (localStorage):</strong> {localStorage.getItem('empresaId') || '❌ NÃO DEFINIDO'}</p>
              <p><strong>Submitting:</strong> {submitting ? '✅ SIM' : '❌ NÃO'}</p>
              <p className="text-orange-800"><strong>📡 ESTRATÉGIA:</strong></p>
              <p className="text-sm">1. Tenta extrair de /me com função padrão</p>
              <p className="text-sm">2. Se falhar, usa função robusta com múltiplas estratégias</p>
              <p className="text-sm">3. Como último recurso, usa contexto/localStorage</p>
              <p className="mt-2 text-blue-700">
                {referenciaCatalogoId && stepOne.nome && stepTwo.qtdade_estoque && stepTwo.data_validade && stepTwo.preco_venda
                  ? '✅ Todos os dados obrigatórios estão preenchidos'
                  : '⚠️ Alguns dados obrigatórios estão faltando'}
              </p>
            </div> */}

            {/* Mensagem de erro para nome do produto */}
            {formErrors.nome && (
              <div className="col-span-full bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
                <strong>❌ Erro:</strong> {formErrors.nome}
              </div>
            )}

            <div>
              <label className="mb-2 block text-sm font-medium text-gray-700">
                Quantidade em estoque
                <span className="text-red-600"> *</span>
              </label>
              <input
                type="number"
                min="0"
                step="1"
                value={stepTwo.qtdade_estoque}
                onChange={(event) =>
                  setStepTwo((prev) => ({ ...prev, qtdade_estoque: event.target.value }))
                }
                className={`w-full rounded-md border px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 ${formErrors.qtdade_estoque ? "border-red-400" : "border-gray-300"
                  }`}
                placeholder="Digite a quantidade disponível"
              />
              {formErrors.qtdade_estoque && (
                <p className="mt-2 text-sm text-red-600">{formErrors.qtdade_estoque}</p>
              )}
            </div>

            <div>
              <label className="mb-2 block text-sm font-medium text-gray-700">
                Preço de venda (R$)
                <span className="text-red-600"> *</span>
              </label>
              <input
                type="number"
                min="0"
                step="0.01"
                value={stepTwo.preco_venda}
                onChange={(event) =>
                  setStepTwo((prev) => ({ ...prev, preco_venda: event.target.value }))
                }
                className={`w-full rounded-md border px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 ${formErrors.preco_venda ? "border-red-400" : "border-gray-300"
                  }`}
                placeholder="0.00"
              />
              {formErrors.preco_venda && (
                <p className="mt-2 text-sm text-red-600">{formErrors.preco_venda}</p>
              )}
            </div>

            <div>
              <label className="mb-2 block text-sm font-medium text-gray-700">
                Data de validade
                <span className="text-red-600"> *</span>
              </label>
              <input
                type="date"
                min={new Date().toISOString().split('T')[0]}
                value={stepTwo.data_validade}
                onChange={(event) =>
                  setStepTwo((prev) => ({ ...prev, data_validade: event.target.value }))
                }
                className={`w-full rounded-md border px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 ${formErrors.data_validade ? "border-red-400" : "border-gray-300"
                  }`}
              />
              {formErrors.data_validade && (
                <p className="mt-2 text-sm text-red-600">{formErrors.data_validade}</p>
              )}
            </div>

            <div className="md:col-span-2">
              <label className="mb-2 block text-sm font-medium text-gray-700">
                Observações
              </label>
              <textarea
                rows={4}
                value={stepTwo.observacoes}
                onChange={(event) =>
                  setStepTwo((prev) => ({ ...prev, observacoes: event.target.value }))
                }
                className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200"
                placeholder="Informações adicionais sobre o produto"
              />
            </div>
          </div>

          <div className="flex justify-between gap-3">
            <button
              type="button"
              onClick={() => setCurrentStep(1)}
              className="rounded-md border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50"
              disabled={submitting}
            >
              Voltar
            </button>
            <div className="flex gap-3">
              <button
                type="button"
                onClick={resetWizard}
                className="rounded-md border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50"
                disabled={submitting}
              >
                Reiniciar
              </button>
              <button
                type="submit"
                className="rounded-md bg-green-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-60"
                disabled={submitting}
              >
                {submitting ? "Salvando..." : "Concluir cadastro"}
              </button>
            </div>
          </div>
        </form>
      )}



      {finalizado && (
        <div className="space-y-6 rounded-xl border border-green-200 bg-green-50 p-6">
          <div className="space-y-2">
            <h3 className="text-lg font-semibold text-green-800">Cadastro finalizado</h3>
            <p className="text-sm text-green-700">
              O produto foi cadastrado com sucesso! Confira os IDs gerados:
            </p>
          </div>

          <div className="space-y-3 rounded-lg bg-white p-4 border border-green-200">
            <h4 className="font-medium text-gray-800">Resumo dos registros criados:</h4>
            <div className="grid grid-cols-1 gap-2 text-sm">
              {referenciaCatalogoId && (
                <div className="flex justify-between">
                  <span className="text-gray-600">Catálogo ID:</span>
                  <span className="font-mono text-gray-800">{referenciaCatalogoId}</span>
                </div>
              )}
              {referenciaVendaId && (
                <div className="flex justify-between">
                  <span className="text-gray-600">Venda ID:</span>
                  <span className="font-mono text-gray-800">{referenciaVendaId}</span>
                </div>
              )}
              {referenciaEstoqueId && (
                <div className="flex justify-between">
                  <span className="text-gray-600">Estoque ID:</span>
                  <span className="font-mono text-gray-800">{referenciaEstoqueId}</span>
                </div>
              )}
              <div className="flex justify-between border-t pt-2">
                <span className="text-gray-600">Código EAN:</span>
                <span className="font-mono text-gray-800">{stepOne.codigo_ean}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-gray-600">Nome do Produto:</span>
                <span className="text-gray-800">{stepOne.nome}</span>
              </div>
            </div>
          </div>

          <div className="flex flex-wrap justify-end gap-3">
            <button
              type="button"
              onClick={() => router.push("/produtos")}
              className="rounded-md border border-green-400 px-4 py-2 text-sm font-medium text-green-700 transition-colors hover:bg-green-100"
            >
              Ir para lista de produtos
            </button>
            <button
              type="button"
              onClick={resetWizard}
              className="rounded-md bg-green-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700"
            >
              Cadastrar outro produto
            </button>
          </div>
        </div>
      )}
    </div>
  );
};

export default CadastroProdutoWizard;

