import React, { useState, useEffect } from "react";
import { Models } from "appwrite";
import { XMarkIcon } from "@heroicons/react/24/outline";
import { toast } from "react-hot-toast";

interface EditProdutoModalProps {
  produto: Models.Document | null;
  isOpen: boolean;
  onClose: () => void;
  onSave: (produtoData: any) => Promise<boolean>;
  loading?: boolean;
}

export const EditProdutoModal: React.FC<EditProdutoModalProps> = ({
  produto,
  isOpen,
  onClose,
  onSave,
  loading = false,
}) => {
  const [formData, setFormData] = useState<any>({});
  const [isSaving, setIsSaving] = useState(false);

  useEffect(() => {
    if (produto) {
      // Preencher formulário com dados do produto
      const produtoData = produto as any;
      console.log("🔍 [EditModal] Dados do produto recebidos:", produtoData);

      // Extrair o nome do produto do catálogo
      let catalogoNome = "";
      if (produtoData.catalogoDescricao) {
        catalogoNome = produtoData.catalogoDescricao;
      } else if (produtoData["catalogo-produtos"]) {
        if (
          typeof produtoData["catalogo-produtos"] === "object" &&
          produtoData["catalogo-produtos"].nome
        ) {
          catalogoNome = produtoData["catalogo-produtos"].nome;
        } else if (typeof produtoData["catalogo-produtos"] === "string") {
          catalogoNome = produtoData["catalogo-produtos"];
        }
      }

      console.log("📝 [EditModal] Nome do produto extraído:", catalogoNome);

      // Extrair data de vencimento com múltiplos fallbacks
      let dataVencimento = "";
      if (produtoData["data-vencimento"]) {
        dataVencimento = produtoData["data-vencimento"];
      } else if (produtoData.dataVencimento) {
        dataVencimento = produtoData.dataVencimento;
      } else if (produtoData["data_vencimento"]) {
        dataVencimento = produtoData["data_vencimento"];
      }

      console.log(
        "📅 [EditModal] Data de vencimento extraída:",
        dataVencimento
      );

      const formDataToSet = {
        "catalogo-produtos": catalogoNome,
        "preco-original":
          produtoData["preco-original"] || produtoData.precoOriginal || "",
        "preco-atual":
          produtoData["preco-atual"] || produtoData.precoAtual || "",
        "preco-nf": produtoData["preco-nf"] || "",
        "valor-substituicao-tributaria":
          produtoData["valor-substituicao-tributaria"] || "",
        quantidade: produtoData.quantidade || "",
        "codigo-ean": produtoData["codigo-ean"] || produtoData.codigoEan || "",
        laboratorio: produtoData.laboratorio || "",
        categoria: produtoData.categoria || "",
        subcategoria: produtoData.subcategoria || "",
        "data-vencimento": dataVencimento,
        lote: produtoData.lote || "",
        "principio-ativo": produtoData["principio-ativo"] || "",
        concentracao: produtoData.concentracao || "",
        "forma-farmaceutica": produtoData["forma-farmaceutica"] || "",
        "registro-anvisa": produtoData["registro-anvisa"] || "",
        prescricao: produtoData.prescricao || "",
        observacoes: produtoData.observacoes || "",
      };

      console.log("📋 [EditModal] FormData preparado:", formDataToSet);
      setFormData(formDataToSet);
    }
  }, [produto]);

  const handleInputChange = (field: string, value: any) => {
    setFormData((prev: any) => ({
      ...prev,
      [field]: value,
    }));
  };

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

    if (!produto) return;

    console.log("💾 [EditModal] Iniciando salvamento...");
    console.log("📋 [EditModal] FormData atual:", formData);

    // Validação da data de vencimento
    const dataVencimento = formData["data-vencimento"];
    if (dataVencimento) {
      const hoje = new Date();
      hoje.setHours(0, 0, 0, 0);
      const dataVenc = new Date(dataVencimento);

      if (dataVenc < hoje) {
        toast.error("A data de vencimento não pode ser anterior à data atual");
        return;
      }
    }

    // Preparar dados para envio - removendo campos vazios/undefined e campos não editáveis
    const camposEditaveis = [
      "catalogo-produtos",
      "preco-original",
      "preco-atual",
      "preco-nf",
      "valor-substituicao-tributaria",
      "quantidade",
      "codigo-ean",
      "laboratorio",
      "categoria",
      "subcategoria",
      "data-vencimento",
      "lote",
      "principio-ativo",
      "concentracao",
      "forma-farmaceutica",
      "registro-anvisa",
      "prescricao",
      "observacoes",
    ];

    const dadosParaEnvio = Object.fromEntries(
      Object.entries(formData)
        .filter(([key, value]) => {
          // Filtrar apenas campos editáveis e com valores válidos
          return (
            camposEditaveis.includes(key) &&
            value !== "" &&
            value !== null &&
            value !== undefined
          );
        })
        .map(([key, value]) => {
          // Converter valores numéricos se necessário
          if (
            key.includes("preco") ||
            key.includes("valor") ||
            key === "quantidade"
          ) {
            return [
              key,
              typeof value === "string" ? parseFloat(value) || 0 : value,
            ];
          }
          return [key, value];
        })
    );

    console.log("📤 [EditModal] Dados preparados para envio:", dadosParaEnvio);

    setIsSaving(true);
    try {
      const success = await onSave(dadosParaEnvio);
      if (success) {
        toast.success("Produto atualizado com sucesso!");
        onClose();
      }
    } catch (error) {
      console.error("❌ [EditModal] Erro ao salvar produto:", error);
      toast.error("Erro ao atualizar produto");
    } finally {
      setIsSaving(false);
    }
  };

  if (!isOpen || !produto) return null;

  // Data mínima para validação (hoje)
  const hoje = new Date();
  const dataMinima = hoje.toISOString().split("T")[0];

  return (
    <div className="fixed inset-0 backdrop-blur-sm bg-gray-900/20 flex items-center justify-center z-50">
      <div className="bg-white rounded-lg shadow-xl max-w-4xl w-full mx-4 max-h-[90vh] overflow-y-auto">
        {/* Header */}
        <div className="flex items-center justify-between p-6 border-b border-gray-200">
          <h2 className="text-xl font-semibold text-gray-900">
            Editar Produto
          </h2>
          <button
            onClick={onClose}
            disabled={isSaving}
            className="p-2 hover:bg-gray-100 rounded-lg transition-colors disabled:opacity-50"
          >
            <XMarkIcon className="w-5 h-5 text-gray-500" />
          </button>
        </div>

        {/* Form */}
        <form onSubmit={handleSubmit} className="p-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {/* Produto do Catálogo */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Produto do Catálogo <span className="text-red-500">*</span>
              </label>
              <input
                type="text"
                value={formData["catalogo-produtos"] || ""}
                onChange={(e) =>
                  handleInputChange("catalogo-produtos", e.target.value)
                }
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                required
                disabled={isSaving}
              />
            </div>

            {/* Preço Original */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Preço Original <span className="text-red-500">*</span>
              </label>
              <input
                type="number"
                step="0.01"
                value={formData["preco-original"] || ""}
                onChange={(e) =>
                  handleInputChange(
                    "preco-original",
                    parseFloat(e.target.value) || 0
                  )
                }
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                required
                disabled={isSaving}
              />
            </div>

            {/* Preço Atual */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Preço Atual <span className="text-red-500">*</span>
              </label>
              <input
                type="number"
                step="0.01"
                value={formData["preco-atual"] || ""}
                onChange={(e) =>
                  handleInputChange(
                    "preco-atual",
                    parseFloat(e.target.value) || 0
                  )
                }
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                required
                disabled={isSaving}
              />
            </div>

            {/* Preço NF */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Preço NF
              </label>
              <input
                type="number"
                step="0.01"
                value={formData["preco-nf"] || ""}
                onChange={(e) =>
                  handleInputChange("preco-nf", parseFloat(e.target.value) || 0)
                }
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                disabled={isSaving}
              />
            </div>

            {/* Substituição Tributária */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Valor Substituição Tributária
              </label>
              <input
                type="number"
                step="0.01"
                value={formData["valor-substituicao-tributaria"] || ""}
                onChange={(e) =>
                  handleInputChange(
                    "valor-substituicao-tributaria",
                    parseFloat(e.target.value) || 0
                  )
                }
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                disabled={isSaving}
              />
            </div>

            {/* Quantidade */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Quantidade em Estoque <span className="text-red-500">*</span>
              </label>
              <input
                type="number"
                value={formData.quantidade || ""}
                onChange={(e) =>
                  handleInputChange("quantidade", parseInt(e.target.value) || 0)
                }
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                required
                disabled={isSaving}
              />
            </div>

            {/* Código EAN */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Código EAN <span className="text-red-500">*</span>
              </label>
              <input
                type="text"
                value={formData["codigo-ean"] || ""}
                onChange={(e) =>
                  handleInputChange("codigo-ean", e.target.value)
                }
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                required
                disabled={isSaving}
              />
            </div>

            {/* Laboratório */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Laboratório/Fabricante <span className="text-red-500">*</span>
              </label>
              <input
                type="text"
                value={formData.laboratorio || ""}
                onChange={(e) =>
                  handleInputChange("laboratorio", e.target.value)
                }
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                required
                disabled={isSaving}
              />
            </div>

            {/* Categoria */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Categoria <span className="text-red-500">*</span>
              </label>
              <input
                type="text"
                value={formData.categoria || ""}
                onChange={(e) => handleInputChange("categoria", e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                required
                disabled={isSaving}
              />
            </div>

            {/* Subcategoria */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Subcategoria
              </label>
              <input
                type="text"
                value={formData.subcategoria || ""}
                onChange={(e) =>
                  handleInputChange("subcategoria", e.target.value)
                }
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                disabled={isSaving}
              />
            </div>

            {/* Data de Vencimento */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Data de Vencimento <span className="text-red-500">*</span>
              </label>
              <input
                type="date"
                value={formData["data-vencimento"] || ""}
                onChange={(e) =>
                  handleInputChange("data-vencimento", e.target.value)
                }
                min={dataMinima}
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                required
                disabled={isSaving}
              />
            </div>

            {/* Lote */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Número do Lote <span className="text-red-500">*</span>
              </label>
              <input
                type="text"
                value={formData.lote || ""}
                onChange={(e) => handleInputChange("lote", e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                required
                disabled={isSaving}
              />
            </div>

            {/* Princípio Ativo */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Princípio Ativo <span className="text-red-500">*</span>
              </label>
              <input
                type="text"
                value={formData["principio-ativo"] || ""}
                onChange={(e) =>
                  handleInputChange("principio-ativo", e.target.value)
                }
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                required
                disabled={isSaving}
              />
            </div>

            {/* Concentração */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Concentração <span className="text-red-500">*</span>
              </label>
              <input
                type="text"
                value={formData.concentracao || ""}
                onChange={(e) =>
                  handleInputChange("concentracao", e.target.value)
                }
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                required
                disabled={isSaving}
              />
            </div>

            {/* Forma Farmacêutica */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Forma Farmacêutica <span className="text-red-500">*</span>
              </label>
              <input
                type="text"
                value={formData["forma-farmaceutica"] || ""}
                onChange={(e) =>
                  handleInputChange("forma-farmaceutica", e.target.value)
                }
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                required
                disabled={isSaving}
              />
            </div>

            {/* Registro ANVISA */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Registro ANVISA <span className="text-red-500">*</span>
              </label>
              <input
                type="text"
                value={formData["registro-anvisa"] || ""}
                onChange={(e) =>
                  handleInputChange("registro-anvisa", e.target.value)
                }
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                required
                disabled={isSaving}
              />
            </div>

            {/* Prescrição */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Prescrição <span className="text-red-500">*</span>
              </label>
              <select
                value={formData.prescricao || ""}
                onChange={(e) =>
                  handleInputChange("prescricao", e.target.value)
                }
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                required
                disabled={isSaving}
              >
                <option value="">Selecione...</option>
                <option value="com-receita">Com Receita</option>
                <option value="sem-receita">Sem Receita</option>
                <option value="controlado">Controlado</option>
              </select>
            </div>
          </div>

          {/* Observações */}
          <div className="mt-6">
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Observações
            </label>
            <textarea
              value={formData.observacoes || ""}
              onChange={(e) => handleInputChange("observacoes", e.target.value)}
              rows={3}
              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              disabled={isSaving}
            />
          </div>

          {/* Buttons */}
          <div className="flex items-center justify-end gap-3 mt-8 pt-6 border-t border-gray-200">
            <button
              type="button"
              onClick={onClose}
              disabled={isSaving}
              className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50"
            >
              Cancelar
            </button>
            <button
              type="submit"
              disabled={isSaving}
              className="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 flex items-center gap-2"
            >
              {isSaving ? (
                <>
                  <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
                  Atualizando...
                </>
              ) : (
                "Atualizar Produto"
              )}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};
