<script lang="ts">
  import { useConvexClient } from "convex-svelte";
  import { api } from "@sgse-app/backend/convex/_generated/api";
  import { page } from "$app/stores";
  import { goto } from "$app/navigation";
  import FileUpload from "$lib/components/FileUpload.svelte";
  import ModelosDeclaracoes from "$lib/components/ModelosDeclaracoes.svelte";
  import { documentos, categoriasDocumentos, getDocumentosByCategoria } from "$lib/utils/documentos";

  const client = useConvexClient();
  
  let funcionarioId = $derived($page.params.funcionarioId as string);

  let funcionario = $state<any>(null);
  let documentosStorage = $state<Record<string, string | undefined>>({});
  let loading = $state(true);
  let filtro = $state<string>("todos"); // todos, enviados, pendentes

  async function load() {
    try {
      loading = true;
      
      // Carregar dados do funcionário
      const data = await client.query(api.funcionarios.getById, { 
        id: funcionarioId as any 
      });
      
      if (!data) {
        goto("/recursos-humanos/funcionarios");
        return;
      }
      
      funcionario = data;
      
      // Mapear storage IDs dos documentos
      documentos.forEach(doc => {
        if ((data as any)[doc.campo]) {
          documentosStorage[doc.campo] = (data as any)[doc.campo];
        }
      });
    } catch (err) {
      console.error("Erro ao carregar:", err);
      goto("/recursos-humanos/funcionarios");
    } finally {
      loading = false;
    }
  }

  async function handleDocumentoUpload(campo: string, file: File) {
    try {
      // Gerar URL de upload
      const uploadUrl = await client.mutation(api.documentos.generateUploadUrl, {});
      
      // Fazer upload do arquivo
      const result = await fetch(uploadUrl, {
        method: "POST",
        headers: { "Content-Type": file.type },
        body: file,
      });
      
      const { storageId } = await result.json();
      
      // Atualizar documento no funcionário
      await client.mutation(api.documentos.updateDocumento, {
        funcionarioId: funcionarioId as any,
        campo,
        storageId: storageId as any,
      });
      
      // Atualizar localmente
      documentosStorage[campo] = storageId;
      
      // Recarregar
      await load();
    } catch (err: any) {
      throw new Error(err?.message || "Erro ao fazer upload");
    }
  }

  async function handleDocumentoRemove(campo: string) {
    try {
      // Atualizar documento no funcionário (set to null)
      await client.mutation(api.documentos.updateDocumento, {
        funcionarioId: funcionarioId as any,
        campo,
        storageId: null,
      });
      
      // Atualizar localmente
      documentosStorage[campo] = undefined;
      
      // Recarregar
      await load();
    } catch (err: any) {
      alert("Erro ao remover documento: " + (err?.message || ""));
    }
  }

  function documentosFiltrados() {
    return documentos.filter(doc => {
      const temDocumento = !!documentosStorage[doc.campo];
      if (filtro === "enviados") return temDocumento;
      if (filtro === "pendentes") return !temDocumento;
      return true; // todos
    });
  }

  function contarDocumentos() {
    const total = documentos.length;
    const enviados = documentos.filter(doc => !!documentosStorage[doc.campo]).length;
    const pendentes = total - enviados;
    return { total, enviados, pendentes };
  }

  load();
</script>

{#if loading}
  <div class="flex items-center justify-center min-h-screen">
    <span class="loading loading-spinner loading-lg"></span>
  </div>
{:else if funcionario}
  <main class="container mx-auto px-4 py-4 max-w-7xl">
    <!-- Breadcrumb -->
    <div class="text-sm breadcrumbs mb-4">
      <ul>
        <li><a href="/recursos-humanos" class="text-primary hover:underline">Recursos Humanos</a></li>
        <li><a href="/recursos-humanos/funcionarios" class="text-primary hover:underline">Funcionários</a></li>
        <li><a href={`/recursos-humanos/funcionarios/${funcionarioId}`} class="text-primary hover:underline">{funcionario.nome}</a></li>
        <li>Documentos</li>
      </ul>
    </div>

    <!-- Cabeçalho -->
    <div class="mb-6">
      <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
        <div class="flex items-center gap-4">
          <div class="p-3 bg-purple-500/20 rounded-xl">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
            </svg>
          </div>
          <div>
            <h1 class="text-3xl font-bold text-primary">Gerenciar Documentos</h1>
            <p class="text-base-content/70">{funcionario.nome} - Matrícula: {funcionario.matricula}</p>
          </div>
        </div>

        <button 
          class="btn btn-ghost gap-2"
          onclick={() => goto(`/recursos-humanos/funcionarios/${funcionarioId}`)}
        >
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
          </svg>
          Voltar aos Detalhes
        </button>
      </div>
    </div>

    <!-- Estatísticas -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
      <div class="stats shadow">
        <div class="stat">
          <div class="stat-figure text-primary">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
            </svg>
          </div>
          <div class="stat-title">Total de Documentos</div>
          <div class="stat-value text-primary">{contarDocumentos().total}</div>
        </div>
      </div>

      <div class="stats shadow">
        <div class="stat">
          <div class="stat-figure text-success">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </div>
          <div class="stat-title">Documentos Enviados</div>
          <div class="stat-value text-success">{contarDocumentos().enviados}</div>
        </div>
      </div>

      <div class="stats shadow">
        <div class="stat">
          <div class="stat-figure text-warning">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </div>
          <div class="stat-title">Documentos Pendentes</div>
          <div class="stat-value text-warning">{contarDocumentos().pendentes}</div>
        </div>
      </div>
    </div>

    <!-- Modelos de Declarações -->
    <div class="mb-6">
      <ModelosDeclaracoes funcionario={funcionario} showPreencherButton={true} />
    </div>

    <!-- Filtros -->
    <div class="card bg-base-100 shadow-xl mb-6">
      <div class="card-body">
        <div class="flex flex-wrap gap-2">
          <button 
            class="btn btn-sm"
            class:btn-primary={filtro === "todos"}
            onclick={() => filtro = "todos"}
          >
            Todos ({contarDocumentos().total})
          </button>
          <button 
            class="btn btn-sm"
            class:btn-success={filtro === "enviados"}
            onclick={() => filtro = "enviados"}
          >
            Enviados ({contarDocumentos().enviados})
          </button>
          <button 
            class="btn btn-sm"
            class:btn-warning={filtro === "pendentes"}
            onclick={() => filtro = "pendentes"}
          >
            Pendentes ({contarDocumentos().pendentes})
          </button>
        </div>
      </div>
    </div>

    <!-- Documentos por Categoria -->
    {#each categoriasDocumentos as categoria}
      {@const docsCategoria = getDocumentosByCategoria(categoria).filter(doc => {
        const temDocumento = !!documentosStorage[doc.campo];
        if (filtro === "enviados") return temDocumento;
        if (filtro === "pendentes") return !temDocumento;
        return true;
      })}
      
      {#if docsCategoria.length > 0}
        <div class="card bg-base-100 shadow-xl mb-6">
          <div class="card-body">
            <h2 class="card-title text-xl border-b pb-3 mb-4">
              {categoria}
              <div class="badge badge-primary ml-2">{docsCategoria.length}</div>
            </h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              {#each docsCategoria as doc}
                <FileUpload
                  label={doc.nome}
                  helpUrl={doc.helpUrl}
                  value={documentosStorage[doc.campo]}
                  onUpload={(file) => handleDocumentoUpload(doc.campo, file)}
                  onRemove={() => handleDocumentoRemove(doc.campo)}
                />
              {/each}
            </div>
          </div>
        </div>
      {/if}
    {/each}

    {#if documentosFiltrados().length === 0}
      <div class="alert">
        <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        <span>Nenhum documento encontrado com o filtro selecionado.</span>
      </div>
    {/if}
  </main>
{/if}

