// @ts-check

import { gql } from "@apollo/client/core";
import { useApolloClient } from "@apollo/client/react/hooks/useApolloClient.js";
import { useMutation } from "@apollo/client/react/hooks/useMutation.js";
import { useState } from "react";
import { createElement as h } from "react";

const CRIAR_DOCUMENTO = gql`
  mutation CriarDocumento($arquivo: [Upload!]!, $input: CreateDocumentoInput!) {
    criarDocumento(arquivo: $arquivo, input: $input) {
      id
      situacao
      arquivoAtual
      chave
    }
  }
`;

export default function CriarDocumento() {
  const [multipleUploadMutation, { loading }] = useMutation(CRIAR_DOCUMENTO);
  const apolloClient = useApolloClient();
  const [selectedFiles, setSelectedFiles] = useState([]);

  /** @type {import("react").ChangeEventHandler<HTMLInputElement>} */
  function onChange({ target: { validity, files }, target }) {
    if (validity.valid && files && files.length > 0) {
      // Adiciona os novos arquivos aos já selecionados
      const newFiles = Array.from(files);
      setSelectedFiles((prevFiles) => [...prevFiles, ...newFiles]);

      // Limpa o input para permitir selecionar os mesmos arquivos novamente
      target.value = "";
    }
  }

  function removeFile(indexToRemove) {
    setSelectedFiles((prevFiles) =>
      prevFiles.filter((_, index) => index !== indexToRemove),
    );
  }

  function saveDocumentToStorage(document) {
    const existingDocs = JSON.parse(localStorage.getItem("documentos") || "[]");
    const updatedDocs = [
      ...existingDocs,
      { ...document, timestamp: new Date().toISOString() },
    ];
    localStorage.setItem("documentos", JSON.stringify(updatedDocs));
  }

  async function handleSubmit() {
    if (selectedFiles.length === 0) {
      alert("Selecione pelo menos um arquivo");
      return;
    }

    try {
      const result = await multipleUploadMutation({
        variables: {
          arquivo: selectedFiles,
          input: {
            modeloId: 26,
            fluxoId: 33,
          },
        },
      });

      // Salva o documento no localStorage
      if (result.data && result.data.criarDocumento) {
        saveDocumentToStorage(result.data.criarDocumento);
      }

      // Limpa os arquivos selecionados após o envio
      setSelectedFiles([]);

      // Reseta o store do Apollo
      apolloClient.resetStore();

      alert("Documentos enviados com sucesso!");

      // Dispara evento customizado para atualizar a tabela
      window.dispatchEvent(new CustomEvent("documentoCreated"));
    } catch (error) {
      console.error("Erro ao enviar documentos:", error);
      alert("Erro ao enviar documentos. Tente novamente.");
    }
  }

  return h("div", { style: { padding: "20px" } }, [
    // Input para selecionar arquivos
    h("div", { key: "input-section", style: { marginBottom: "20px" } }, [
      h(
        "label",
        { key: "label", style: { display: "block", marginBottom: "10px" } },
        "Selecionar Arquivos:",
      ),
      h("input", {
        key: "file-input",
        type: "file",
        multiple: true,
        onChange,
        style: { marginBottom: "10px" },
      }),
    ]),

    // Lista de arquivos selecionados
    selectedFiles.length > 0 &&
      h(
        "div",
        {
          key: "files-section",
          style: { marginBottom: "20px" },
        },
        [
          h(
            "h3",
            { key: "title" },
            `Arquivos selecionados (${selectedFiles.length}):`,
          ),
          h(
            "ul",
            { key: "files-list", style: { listStyle: "none", padding: 0 } },
            selectedFiles.map((file, index) =>
              h(
                "li",
                {
                  key: index,
                  style: {
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "center",
                    padding: "5px 0",
                    borderBottom: "1px solid #eee",
                  },
                },
                [
                  h("span", { key: "filename" }, file.name),
                  h(
                    "button",
                    {
                      key: "remove-btn",
                      onClick: () => removeFile(index),
                      style: {
                        background: "#ff4444",
                        color: "white",
                        border: "none",
                        borderRadius: "3px",
                        padding: "2px 8px",
                        cursor: "pointer",
                      },
                    },
                    "Remover",
                  ),
                ],
              ),
            ),
          ),
        ],
      ),

    // Botão de envio
    h(
      "button",
      {
        key: "submit-btn",
        onClick: handleSubmit,
        disabled: loading || selectedFiles.length === 0,
        style: {
          background: selectedFiles.length === 0 ? "#ccc" : "#007bff",
          color: "white",
          border: "none",
          borderRadius: "5px",
          padding: "10px 20px",
          fontSize: "16px",
          cursor: selectedFiles.length === 0 ? "not-allowed" : "pointer",
        },
      },
      loading ? "Enviando..." : "Enviar Documentos",
    ),
  ]);
}