sgse-app/apps/web/src/lib/components/ModelosDeclaracoes.svelte

<script lang="ts">
  import { modelosDeclaracoes } from "$lib/utils/modelosDeclaracoes";
  import {
    gerarDeclaracaoAcumulacaoCargo,
    gerarDeclaracaoDependentesIR,
    gerarDeclaracaoIdoneidade,
    gerarTermoNepotismo,
    gerarTermoOpcaoRemuneracao,
    downloadBlob,
  } from "$lib/utils/declaracoesGenerator";
  import { FileText, Info } from "lucide-svelte";

  interface Props {
    funcionario?: any;
    showPreencherButton?: boolean;
  }

  let { funcionario, showPreencherButton = false }: Props = $props();
  let generating = $state(false);

  function baixarModelo(arquivoUrl: string, nomeModelo: string) {
    const link = document.createElement("a");
    link.href = arquivoUrl;
    link.download = nomeModelo + ".pdf";
    link.target = "_blank";
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }

  async function gerarPreenchido(modeloId: string) {
    if (!funcionario) {
      alert("Dados do funcionário não disponíveis");
      return;
    }

    try {
      generating = true;
      let blob: Blob;
      let nomeArquivo: string;

      switch (modeloId) {
        case "acumulacao_cargo":
          blob = await gerarDeclaracaoAcumulacaoCargo(funcionario);
          nomeArquivo = `Declaracao_Acumulacao_Cargo_${funcionario.nome.replace(/ /g, "_")}_${Date.now()}.pdf`;
          break;

        case "dependentes_ir":
          blob = await gerarDeclaracaoDependentesIR(funcionario);
          nomeArquivo = `Declaracao_Dependentes_IR_${funcionario.nome.replace(/ /g, "_")}_${Date.now()}.pdf`;
          break;

        case "idoneidade":
          blob = await gerarDeclaracaoIdoneidade(funcionario);
          nomeArquivo = `Declaracao_Idoneidade_${funcionario.nome.replace(/ /g, "_")}_${Date.now()}.pdf`;
          break;

        case "nepotismo":
          blob = await gerarTermoNepotismo(funcionario);
          nomeArquivo = `Termo_Nepotismo_${funcionario.nome.replace(/ /g, "_")}_${Date.now()}.pdf`;
          break;

        case "opcao_remuneracao":
          blob = await gerarTermoOpcaoRemuneracao(funcionario);
          nomeArquivo = `Termo_Opcao_Remuneracao_${funcionario.nome.replace(/ /g, "_")}_${Date.now()}.pdf`;
          break;

        default:
          alert("Modelo não encontrado");
          return;
      }

      downloadBlob(blob, nomeArquivo);
    } catch (error) {
      console.error("Erro ao gerar declaração:", error);
      alert("Erro ao gerar declaração preenchida");
    } finally {
      generating = false;
    }
  }
</script>

<div class="card bg-base-100 shadow-xl">
  <div class="card-body">
    <h2 class="card-title text-xl border-b pb-3">
      <FileText class="h-5 w-5" strokeWidth={2} />
      Modelos de Declarações
    </h2>

    <div class="alert alert-info shadow-sm mb-4">
      <Info class="stroke-current shrink-0 h-5 w-5" strokeWidth={2} />
      <div class="text-sm">
        <p class="font-semibold">
          Baixe os modelos, preencha, assine e faça upload no sistema
        </p>
        <p class="text-xs opacity-80 mt-1">
          Estes documentos são necessários para completar o cadastro do
          funcionário
        </p>
      </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      {#each modelosDeclaracoes as modelo}
        <div
          class="card bg-base-200 shadow-sm hover:shadow-md transition-shadow"
        >
          <div class="card-body p-4">
            <div class="flex items-start gap-3">
              <!-- Ícone PDF -->
              <div
                class="shrink-0 w-12 h-12 bg-error/10 rounded-lg flex items-center justify-center"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="h-6 w-6 text-error"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
                  />
                </svg>
              </div>

              <!-- Conteúdo -->
              <div class="flex-1 min-w-0">
                <h3 class="font-semibold text-sm mb-1 line-clamp-2">
                  {modelo.nome}
                </h3>
                <p class="text-xs text-base-content/70 mb-3 line-clamp-2">
                  {modelo.descricao}
                </p>

                <!-- Ações -->
                <div class="flex flex-col gap-2">
                  <button
                    type="button"
                    class="btn btn-primary btn-xs gap-1"
                    onclick={() => baixarModelo(modelo.arquivo, modelo.nome)}
                  >
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      class="h-3 w-3"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
                      />
                    </svg>
                    Baixar Modelo
                  </button>

                  {#if showPreencherButton && modelo.podePreencherAutomaticamente && funcionario}
                    <button
                      type="button"
                      class="btn btn-outline btn-xs gap-1"
                      onclick={() => gerarPreenchido(modelo.id)}
                      disabled={generating}
                    >
                      {#if generating}
                        <span class="loading loading-spinner loading-xs"></span>
                        Gerando...
                      {:else}
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          class="h-3 w-3"
                          fill="none"
                          viewBox="0 0 24 24"
                          stroke="currentColor"
                        >
                          <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
                          />
                        </svg>
                        Gerar Preenchido
                      {/if}
                    </button>
                  {/if}
                </div>
              </div>
            </div>
          </div>
        </div>
      {/each}
    </div>

    <div class="mt-4 text-xs text-base-content/60 text-center">
      <p>
        💡 Dica: Após preencher e assinar os documentos, faça upload na seção
        "Documentação Anexa"
      </p>
    </div>
  </div>
</div>