import React, { useState, useEffect, useRef } from "react";
import { produtoService } from "../services/produtoService";
  const eanTimeout = useRef<NodeJS.Timeout | null>(null);
  // Busca automática do EAN
  useEffect(() => {
    if (!formData.codigoEAN || formData.codigoEAN.length < 8) return;
    if (eanTimeout.current) clearTimeout(eanTimeout.current);
    eanTimeout.current = setTimeout(async () => {
      const res = await produtoService.buscar(formData.codigoEAN);
      if (res.success && res.documents.length > 0) {
        // Produto encontrado, avançar para próxima tela
        setMessage({ type: "success", text: "Produto já cadastrado! Avançando..." });
        // Aqui você pode chamar uma função de navegação ou callback para avançar
        // Exemplo: onAvancar(res.documents[0]);
      }
    }, 700);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [formData.codigoEAN]);
import { laboratorioService } from "../services/laboratorioService";
import React, { useState, useEffect } from "react";
import { laboratorioService } from "../services/laboratorioService";
import { categoriaService } from "../services/categoriaService";

interface ProdutoFormData {
  codigoEAN: string;
  nome: string;
  precoBase: number;
  descricao: string;
  laboratorio: string;
  categoria: string;
}

type Props = {
  onSubmit: (data: ProdutoFormData) => Promise<boolean>;
  onCancel?: () => void;
  loading?: boolean;
};

const ProdutoForm: React.FC<Props> = ({ onSubmit, onCancel, loading = false }) => {
  const [formData, setFormData] = useState<ProdutoFormData>({
    codigoEAN: "",
    nome: "",
    precoBase: 0,
    descricao: "",
    laboratorio: "",
    categoria: "",
  });
  const [laboratorios, setLaboratorios] = useState<any[]>([]);
  const [categorias, setCategorias] = useState<any[]>([]);
  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);

  useEffect(() => {
    const fetchLaboratorios = async () => {
      try {
        const res = await laboratorioService.listar(1, 50);
        if (res.success) setLaboratorios(res.documents);
      } catch (err) {
        setLaboratorios([]);
      }
    };
    const fetchCategorias = async () => {
      try {
        const res = await categoriaService.listar(1, 50);
        if (res.success) setCategorias(res.documents);
      } catch (err) {
        setCategorias([]);
      }
    };
    fetchLaboratorios();
    fetchCategorias();
  }, []);

  const handleInputChange = (field: keyof ProdutoFormData, value: string | number) => {
    setFormData((prev) => ({ ...prev, [field]: value }));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!formData.codigoEAN.trim() || !formData.nome.trim() || !formData.precoBase || !formData.laboratorio || !formData.categoria) {
      setMessage({ type: "error", text: "Preencha todos os campos obrigatórios." });
      return;
    }
    const success = await onSubmit(formData);
    if (success) {
      setMessage({ type: "success", text: "Produto cadastrado com sucesso!" });
      setFormData({ codigoEAN: "", nome: "", precoBase: 0, descricao: "", laboratorio: "", categoria: "" });
    } else {
      setMessage({ type: "error", text: "Erro ao cadastrar produto." });
    }
    setTimeout(() => setMessage(null), 3000);
  };

  return (
    <div className="bg-white rounded-lg shadow-md p-6">
      {message && (
        <div className={`mb-4 p-3 rounded-md ${message.type === "success" ? "bg-green-100 text-green-700" : "bg-red-100 text-red-700"}`}>{message.text}</div>
      )}
      <form onSubmit={handleSubmit} className="space-y-6">
        <div>
          <label htmlFor="codigoEAN" className="block text-sm font-medium text-gray-700 mb-2">Código EAN/Barras *</label>
          <input id="codigoEAN" type="text" value={formData.codigoEAN} onChange={e => handleInputChange("codigoEAN", e.target.value)} className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500" required placeholder="Ex: 7891234567890" />
        </div>
        <div>
          <label htmlFor="nome" className="block text-sm font-medium text-gray-700 mb-2">Nome *</label>
          <input id="nome" type="text" value={formData.nome} onChange={e => handleInputChange("nome", e.target.value)} className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500" required placeholder="Ex: Dipirona Sódica" />
        </div>
        <div>
          <label htmlFor="precoBase" className="block text-sm font-medium text-gray-700 mb-2">Preço base (R$) *</label>
          <input id="precoBase" type="number" value={formData.precoBase} onChange={e => handleInputChange("precoBase", parseFloat(e.target.value) || 0)} className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500" required placeholder="Ex: 15.90" min="0" step="0.01" />
        </div>
        <div>
          <label htmlFor="descricao" className="block text-sm font-medium text-gray-700 mb-2">Descrição</label>
          <textarea id="descricao" value={formData.descricao} onChange={e => handleInputChange("descricao", e.target.value)} className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500" rows={3} placeholder="Informações adicionais sobre o medicamento..." />
        </div>
        <div>
          <label htmlFor="laboratorio" className="block text-sm font-medium text-gray-700 mb-2">Laboratório/Fabricante *</label>
          <select id="laboratorio" value={formData.laboratorio} onChange={e => handleInputChange("laboratorio", e.target.value)} className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500" required>
            <option value="">Selecione um laboratório</option>
            {laboratorios.map((lab: any) => (
              <option key={lab.$id} value={lab.nome}>{lab.nome}</option>
            ))}
          </select>
        </div>
        <div>
          <label htmlFor="categoria" className="block text-sm font-medium text-gray-700 mb-2">Categoria *</label>
          <select id="categoria" value={formData.categoria} onChange={e => handleInputChange("categoria", e.target.value)} className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500" required>
            <option value="">Selecione uma categoria</option>
            {categorias.map((cat: any) => (
              <option key={cat.$id} value={cat.nome}>{cat.nome}</option>
            ))}
          </select>
        </div>
        <div className="flex gap-4">
          <button type="submit" className="flex-1 bg-blue-600 text-white h-10 rounded-md hover:bg-blue-700 focus:ring-2 focus:ring-blue-500">Salvar</button>
          {onCancel && (
            <button type="button" onClick={onCancel} className="flex-1 bg-gray-600 text-white h-10 rounded-md hover:bg-gray-700 focus:ring-2 focus:ring-gray-500">Cancelar</button>
          )}
        </div>
      </form>
    </div>
  );
};

export default ProdutoForm;
              setMessage({
                type: "error",
                text: "Usuário não autenticado. Faça login para continuar.",
              });
            } else {
              setMessage({
                type: "error",
                text: "Erro ao carregar dados do usuário. Tente novamente.",
              });
            }
          }
        }
      } catch (error) {
        console.error("Erro ao carregar dados:", error);
      }
    };

    loadData();
  }, [empresaId]);

  useEffect(() => {
    if (initialData) {
      console.log(
        "🔧 Preenchendo formulário com dados do produto:",
        initialData
      );

      // Extrair dados do produto e do catálogo-produtos se disponível
      const produtoData = initialData as any;
      const catalogoData = produtoData["catalogo-produtos"] || {};

      setFormData({
        nome:
          produtoData.nome || catalogoData.descricao || catalogoData.nome || "",
        "preco-original":
          produtoData["preco-original"] || produtoData["preco-unitario"] || 0,
        "preco-atual":
          produtoData["preco-atual"] || produtoData["preco-venda"] || 0,
        "catalogo-produtos":
          typeof produtoData["catalogo-produtos"] === "string"
            ? produtoData["catalogo-produtos"]
            : catalogoData.$id || "",
        empresas: produtoData["empresas"] || produtoData.empresas || "",
        selectedCatalogoProdutoId:
          typeof produtoData["catalogo-produtos"] === "string"
            ? produtoData["catalogo-produtos"]
            : catalogoData.$id || "",
        quantidade: produtoData.quantidade || produtoData.estoque || 0,
        // Campos adicionais obrigatórios
        "principio-ativo":
          produtoData["principio-ativo"] ||
          catalogoData["principio-ativo"] ||
          "",
        concentracao:
          produtoData.concentracao || catalogoData.concentracao || "",
        "forma-farmaceutica":
          produtoData["forma-farmaceutica"] ||
          catalogoData["forma-farmaceutica"] ||
          "",
        "registro-anvisa":
          produtoData["registro-anvisa"] ||
          catalogoData["registro-anvisa"] ||
          "",
        prescricao: produtoData.prescricao || catalogoData.prescricao || "",
        observacoes: produtoData.observacoes || catalogoData.observacoes || "",
        // Novos campos do mapeamento completo
        "codigo-ean":
          produtoData["codigo-ean"] || catalogoData["codigo-ean"] || "",
        laboratorio: produtoData.laboratorio || catalogoData.laboratorio || "",
        categoria: produtoData.categoria || catalogoData.categoria || "",
        "data-vencimento": produtoData["data-vencimento"] || "",
        lote: produtoData.lote || "",
      });

      console.log("✅ Formulário preenchido com todos os campos:", {
        nome: produtoData.nome || catalogoData.descricao,
        precoOriginal: produtoData["preco-original"],
        precoAtual: produtoData["preco-atual"],
        principioAtivo:
          produtoData["principio-ativo"] || catalogoData["principio-ativo"],
        concentracao: produtoData.concentracao || catalogoData.concentracao,
      });
    } else {
      setFormData({
        nome: "",
        "preco-original": 0,
        "preco-atual": 0,
        "catalogo-produtos": "",
        empresas: "",
        selectedCatalogoProdutoId: "",
        quantidade: 0,
        "principio-ativo": "",
        concentracao: "",
        "forma-farmaceutica": "",
        "registro-anvisa": "",
        prescricao: "",
        observacoes: "",
        // Novos campos do mapeamento completo
        "codigo-ean": "",
        laboratorio: "",
        categoria: "",
        "data-vencimento": "",
        lote: "",
      });
    }
  }, [initialData]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    // Validação adicional
    if (!formData.nome.trim()) {
      setMessage({ type: "error", text: "Nome é obrigatório" });
      return;
    }

    // Validação do produto do catálogo
    if (!formData["catalogo-produtos"]) {
      setMessage({
        type: "error",
        text: "Seleção de produto do catálogo é obrigatória",
      });
      return;
    }

    // Validação dos preços
    if (!formData["preco-original"] || formData["preco-original"] <= 0) {
      setMessage({
        type: "error",
        text: "Preço original deve ser maior que zero",
      });
      return;
    }

    if (!formData["preco-atual"] || formData["preco-atual"] <= 0) {
      setMessage({
        type: "error",
        text: "Preço atual deve ser maior que zero",
      });
      return;
    }

    // Validação dos campos obrigatórios do medicamento
    if (!formData["principio-ativo"].trim()) {
      setMessage({ type: "error", text: "Princípio ativo é obrigatório" });
      return;
    }

    if (!formData.concentracao.trim()) {
      setMessage({ type: "error", text: "Concentração é obrigatória" });
      return;
    }

    if (!formData["forma-farmaceutica"].trim()) {
      setMessage({ type: "error", text: "Forma farmacêutica é obrigatória" });
      return;
    }

    if (!formData["registro-anvisa"].trim()) {
      setMessage({ type: "error", text: "Registro ANVISA é obrigatório" });
      return;
    }

    if (!formData.prescricao.trim()) {
      setMessage({ type: "error", text: "Tipo de prescrição é obrigatório" });
      return;
    }

    // Validação da empresa (deve ser preenchida automaticamente)
    if (!formData["empresas"]) {
      setMessage({
        type: "error",
        text: "Erro: ID da empresa não foi carregado. Tente recarregar a página.",
      });
      return;
    }

    // Criar objeto com todos os campos
    const produtoData: ProdutoData = {
      "preco-original": formData["preco-original"],
      "preco-atual": formData["preco-atual"],
      "catalogo-produtos": formData["catalogo-produtos"],
      empresas: formData["empresas"],
      quantidade: formData.quantidade,
      "principio-ativo": formData["principio-ativo"],
      concentracao: formData.concentracao,
      "forma-farmaceutica": formData["forma-farmaceutica"],
      "registro-anvisa": formData["registro-anvisa"],
      prescricao: formData.prescricao,
      observacoes: formData.observacoes,
      // Novos campos incluídos
      "codigo-ean": formData["codigo-ean"],
      laboratorio: formData.laboratorio,
      categoria: formData.categoria,
      "data-vencimento": formData["data-vencimento"],
      lote: formData.lote,
    };

    const success = await onSubmit(produtoData);
    if (success) {
      setMessage({
        type: "success",
        text: initialData
          ? "🔄 Produto atualizado com sucesso!"
          : "🎉 Produto cadastrado com sucesso!",
      });
      if (!initialData) {
        setFormData({
          nome: "",
          "preco-original": 0,
          "preco-atual": 0,
          "catalogo-produtos": "",
          empresas: "",
          selectedCatalogoProdutoId: "",
          quantidade: 0,
          // Campos obrigatórios adicionais
          "principio-ativo": "",
          concentracao: "",
          "forma-farmaceutica": "",
          "registro-anvisa": "",
          prescricao: "",
          observacoes: "",
          // Novos campos do mapeamento completo
          "codigo-ean": "",
          laboratorio: "",
          categoria: "",
          "data-vencimento": "",
          lote: "",
        });
      }
      setTimeout(() => setMessage(null), 3000);
    } else {
      setMessage({
        type: "error",
        text: initialData
          ? "Erro ao atualizar produto"
          : "Erro ao cadastrar produto",
      });
    }
  };

  const handleInputChange = (
    field: keyof ProdutoFormData,
    value: string | number
  ) => {
    setFormData((prev) => ({ ...prev, [field]: value }));
  };

  // Função para lidar com o foco nos campos numéricos
  const handleNumericFocus = (e: React.FocusEvent<HTMLInputElement>) => {
    if (e.target.value === '0') {
      e.target.value = '';
    }
  };

  // Função para lidar com o blur nos campos numéricos  
  const handleNumericBlur = (e: React.FocusEvent<HTMLInputElement>, field: keyof ProdutoFormData) => {
    if (e.target.value === '') {
      e.target.value = '0';
      // Atualizar o estado
      if (field === 'quantidade') {
        handleInputChange(field, 0);
      } else {
        handleInputChange(field, 0);
      }
    }
  };

  const handleProdutoSelect = (catalogoProdutoId: string) => {
    const selectedProduto = catalogoProdutos.find(
      (p) => p.$id === catalogoProdutoId
    );
    if (selectedProduto) {
      setFormData((prev) => ({
        ...prev,
        nome:
          (selectedProduto as any).descricao ||
          (selectedProduto as any).nome ||
          "",
        "catalogo-produtos": catalogoProdutoId,
        selectedCatalogoProdutoId: catalogoProdutoId,
      }));
    }
  };

  return (
    <div className="bg-white rounded-lg shadow-md p-6">
      {message && (
        <div
          className={`mb-4 p-3 rounded-md ${
            message.type === "success"
              ? "bg-green-100 text-green-700"
              : "bg-red-100 text-red-700"
          }`}
      return (
        <div className="bg-white rounded-lg shadow-md p-6">
          {message && (
            <div className={`mb-4 p-3 rounded-md ${message.type === "success" ? "bg-green-100 text-green-700" : "bg-red-100 text-red-700"}`}>{message.text}</div>
          )}
          <form onSubmit={handleSubmit} className="space-y-6">
            <div>
              <label htmlFor="codigoEAN" className="block text-sm font-medium text-gray-700 mb-2">Código EAN/Barras *</label>
              <input id="codigoEAN" type="text" value={formData.codigoEAN} onChange={e => handleInputChange("codigoEAN", e.target.value)} className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500" required placeholder="Ex: 7891234567890" />
            </div>
            <div>
              <label htmlFor="nome" className="block text-sm font-medium text-gray-700 mb-2">Nome *</label>
              <input id="nome" type="text" value={formData.nome} onChange={e => handleInputChange("nome", e.target.value)} className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500" required placeholder="Ex: Dipirona Sódica" />
            </div>
            <div>
              <label htmlFor="precoBase" className="block text-sm font-medium text-gray-700 mb-2">Preço base (R$) *</label>
              <input id="precoBase" type="number" value={formData.precoBase} onChange={e => handleInputChange("precoBase", parseFloat(e.target.value) || 0)} className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500" required placeholder="Ex: 15.90" min="0" step="0.01" />
            </div>
            <div>
              <label htmlFor="descricao" className="block text-sm font-medium text-gray-700 mb-2">Descrição</label>
              <textarea id="descricao" value={formData.descricao} onChange={e => handleInputChange("descricao", e.target.value)} className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500" rows={3} placeholder="Informações adicionais sobre o medicamento..." />
            </div>
            <div>
              <label htmlFor="laboratorio" className="block text-sm font-medium text-gray-700 mb-2">Laboratório/Fabricante *</label>
              <select id="laboratorio" value={formData.laboratorio} onChange={e => handleInputChange("laboratorio", e.target.value)} className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500" required>
                <option value="">Selecione um laboratório</option>
                {laboratorios.map(lab => (
                  <option key={lab.$id} value={lab.nome}>{lab.nome}</option>
                ))}
              </select>
            </div>
            <div>
              <label htmlFor="categoria" className="block text-sm font-medium text-gray-700 mb-2">Categoria *</label>
              <select id="categoria" value={formData.categoria} onChange={e => handleInputChange("categoria", e.target.value)} className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500" required>
                <option value="">Selecione uma categoria</option>
                {categorias.map(cat => (
                  <option key={cat.$id} value={cat.nome}>{cat.nome}</option>
                ))}
              </select>
            </div>
            <div className="flex gap-4">
              <button type="submit" className="flex-1 bg-blue-600 text-white h-10 rounded-md hover:bg-blue-700 focus:ring-2 focus:ring-blue-500">Salvar</button>
              {onCancel && (
                <button type="button" onClick={onCancel} className="flex-1 bg-gray-600 text-white h-10 rounded-md hover:bg-gray-700 focus:ring-2 focus:ring-gray-500">Cancelar</button>
              )}
            </div>
          </form>
        </div>
      );
                className="block text-sm font-medium text-gray-700 mb-2"
              >
                Tipo de Prescrição *
              </label>
              <select
                id="prescricao"
                value={formData.prescricao}
                onChange={(e) =>
                  handleInputChange("prescricao", e.target.value)
                }
                className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500"
                disabled={loading}
                required
              >
                <option value="">Selecione o tipo</option>
                <option value="Isento">Isento de Prescrição</option>
                <option value="Simples">Prescrição Simples</option>
                <option value="Controlado">Medicamento Controlado</option>
                <option value="Antibiotico">Antibiótico</option>
              </select>
            </div>

            <div>
              <label
                htmlFor="observacoes"
                className="block text-sm font-medium text-gray-700 mb-2"
              >
                Observações
              </label>
              <textarea
                id="observacoes"
                value={formData.observacoes}
                onChange={(e) =>
                  handleInputChange("observacoes", e.target.value)
                }
                className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500"
                disabled={loading}
                rows={3}
                placeholder="Observações adicionais sobre o produto..."
              />
            </div>
          </div>
        </div>

        {/* Seção: Preços e Estoque */}
        <div className="border-t border-gray-200 pt-6">
          <h3 className="text-lg font-medium text-gray-900 mb-4">
            💰 Preços e Estoque
          </h3>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div>
            <label
              htmlFor="preco-original"
              className="block text-sm font-medium text-gray-700 mb-2"
            >
              Preço Original
            </label>
            <input
              id="preco-original"
              type="number"
              value={formData["preco-original"]}
              onChange={(e) =>
                handleInputChange(
                  "preco-original",
                  parseFloat(e.target.value) || 0
                )
              }
              onFocus={handleNumericFocus}
              onBlur={(e) => handleNumericBlur(e, "preco-original")}
              className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500"
              step="0.01"
              min="0"
              disabled={loading}
              required
            />
          </div>
          <div>
            <label
              htmlFor="preco-atual"
              className="block text-sm font-medium text-gray-700 mb-2"
            >
              Preço Atual
            </label>
            <input
              id="preco-atual"
              type="number"
              value={formData["preco-atual"]}
              onChange={(e) =>
                handleInputChange(
                  "preco-atual",
                  parseFloat(e.target.value) || 0
                )
              }
              onFocus={handleNumericFocus}
              onBlur={(e) => handleNumericBlur(e, "preco-atual")}
              className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500"
              step="0.01"
              min="0"
              disabled={loading}
              required
            />
          </div>
          <div>
            <label
              htmlFor="quantidade"
              className="block text-sm font-medium text-gray-700 mb-2"
            >
              Estoque/Quantidade
            </label>
            <input
              id="quantidade"
              type="number"
              value={formData.quantidade}
              onChange={(e) =>
                handleInputChange("quantidade", parseInt(e.target.value) || 0)
              }
              onFocus={handleNumericFocus}
              onBlur={(e) => handleNumericBlur(e, "quantidade")}
              className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500"
              min="0"
              step="1"
              disabled={loading}
              placeholder="Unidades em estoque"
            />
          </div>
        </div>

        <div className="flex gap-4">
          <button
            type="submit"
            disabled={loading}
            className="flex-1 bg-blue-600 text-white h-10 rounded-md hover:bg-blue-700 focus:ring-2 focus:ring-blue-500"
          >
            {loading ? "Salvando..." : "Salvar"}
          </button>
          {onCancel && (
            <button
              type="button"
              onClick={onCancel}
              disabled={loading}
              className="flex-1 bg-gray-600 text-white h-10 rounded-md hover:bg-gray-700 focus:ring-2 focus:ring-gray-500"
            >
              Cancelar
            </button>
          )}
        </div>
      </form>
    </div>
  );
};

export default ProdutoForm;
