<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 { maskCPF, maskCEP, maskPhone } from "$lib/utils/masks";
  import { documentos, getDocumentoDefinicao } from "$lib/utils/documentos";
  import { 
    SEXO_OPTIONS, ESTADO_CIVIL_OPTIONS, GRAU_INSTRUCAO_OPTIONS,
    GRUPO_SANGUINEO_OPTIONS, FATOR_RH_OPTIONS, APOSENTADO_OPTIONS
  } from "$lib/utils/constants";
  import PrintModal from "$lib/components/PrintModal.svelte";

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

  let funcionario = $state<any>(null);
  let simbolo = $state<any>(null);
  let cursos = $state<any[]>([]);
  let documentosUrls = $state<Record<string, string | null>>({});
  let loading = $state(true);
  let showPrintModal = $state(false);
  let showPrintFinanceiro = $state(false);

  async function load() {
    try {
      loading = true;
      const data = await client.query(api.funcionarios.getFichaCompleta, { 
        id: funcionarioId as any 
      });
      
      if (!data) {
        goto("/recursos-humanos/funcionarios");
        return;
      }
      
      funcionario = data;
      simbolo = data.simbolo;
      cursos = data.cursos || [];
      
      // Carregar URLs dos documentos
      try {
        documentosUrls = await client.query(api.documentos.getDocumentosUrls, {
          funcionarioId: funcionarioId as any
        });
      } catch (err) {
        console.error("Erro ao carregar documentos:", err);
      }
    } catch (err) {
      console.error("Erro ao carregar funcionário:", err);
      goto("/recursos-humanos/funcionarios");
    } finally {
      loading = false;
    }
  }

  function getLabelFromOptions(value: string | undefined, options: Array<{value: string, label: string}>): string {
    if (!value) return "-";
    return options.find(opt => opt.value === value)?.label || value;
  }

  function downloadDocumento(url: string, nomeDoc: string) {
    if (!url) return;
    const link = document.createElement('a');
    link.href = url;
    link.download = nomeDoc;
    link.target = '_blank';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }

  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>Detalhes</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-blue-500/20 rounded-xl">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
            </svg>
          </div>
          <div>
            <h1 class="text-3xl font-bold text-primary">{funcionario.nome}</h1>
            <p class="text-base-content/70">Matrícula: {funcionario.matricula}</p>
          </div>
        </div>

        <div class="flex flex-wrap gap-2">
          <button 
            class="btn btn-primary gap-2"
            onclick={() => goto(`/recursos-humanos/funcionarios/${funcionarioId}/editar`)}
          >
            <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="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>
            Editar
          </button>
          <button 
            class="btn btn-secondary gap-2"
            onclick={() => goto(`/recursos-humanos/funcionarios/${funcionarioId}/documentos`)}
          >
            <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="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>
            Ver Documentos
          </button>
          <button class="btn btn-accent gap-2" onclick={() => showPrintModal = true}>
            <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="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
            </svg>
            Imprimir Ficha
          </button>
          <button class="btn btn-info gap-2" onclick={() => showPrintFinanceiro = true}>
            <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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            Imprimir Dados Financeiros
          </button>
        </div>
      </div>
    </div>

    <!-- Dados Financeiros - Destaque -->
    {#if simbolo}
      <div class="card bg-gradient-to-br from-success/10 to-success/20 shadow-xl mb-6 border border-success/30">
        <div class="card-body">
          <h3 class="card-title text-xl border-b pb-3 mb-4">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            Dados Financeiros
          </h3>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="stat bg-base-100/50 rounded-lg p-4">
              <div class="stat-title text-xs">Símbolo</div>
              <div class="stat-value text-2xl">{simbolo.nome}</div>
              <div class="stat-desc text-xs">{simbolo.tipo === 'cargo_comissionado' ? 'Cargo Comissionado' : 'Função Gratificada'}</div>
            </div>
            {#if funcionario.simboloTipo === 'cargo_comissionado'}
              <div class="stat bg-base-100/50 rounded-lg p-4">
                <div class="stat-title text-xs">Vencimento</div>
                <div class="stat-value text-2xl text-info">R$ {simbolo.vencValor}</div>
                <div class="stat-desc text-xs">Valor base</div>
              </div>
              <div class="stat bg-base-100/50 rounded-lg p-4">
                <div class="stat-title text-xs">Representação</div>
                <div class="stat-value text-2xl text-warning">R$ {simbolo.repValor}</div>
                <div class="stat-desc text-xs">Adicional</div>
              </div>
            {/if}
            <div class="stat bg-success/20 rounded-lg p-4 border-2 border-success/40">
              <div class="stat-title text-xs font-bold">Total</div>
              <div class="stat-value text-3xl text-success">R$ {simbolo.valor}</div>
              <div class="stat-desc text-xs">Remuneração total</div>
            </div>
          </div>
        </div>
      </div>
    {/if}

    <!-- Status de Férias -->
    <div class="card bg-gradient-to-br from-purple-500/10 to-purple-600/20 shadow-xl mb-6 border border-purple-500/30">
      <div class="card-body">
        <div class="flex items-center justify-between">
          <div class="flex items-center gap-3">
            <div class="p-3 bg-purple-500/20 rounded-xl">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
              </svg>
            </div>
            <div>
              <h3 class="font-bold text-lg">Status Atual</h3>
              <div class="flex items-center gap-2 mt-1">
                {#if funcionario.statusFerias === "em_ferias"}
                  <div class="badge badge-warning badge-lg">🏖️ Em Férias</div>
                {:else}
                  <div class="badge badge-success badge-lg">✅ Ativo</div>
                {/if}
              </div>
            </div>
          </div>
          <a href="/recursos-humanos/ferias" class="btn btn-primary btn-sm gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
            </svg>
            Gerenciar Férias
          </a>
        </div>
      </div>
    </div>

    <!-- Grid de Cards -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
      <!-- Coluna 1: Dados Pessoais -->
      <div class="space-y-6">
        <!-- Informações Pessoais -->
        <div class="card bg-base-100 shadow-xl">
          <div class="card-body">
            <h3 class="card-title text-lg border-b pb-2 mb-3">Informações Pessoais</h3>
            <div class="space-y-2 text-sm">
              <div><span class="font-semibold">CPF:</span> {maskCPF(funcionario.cpf)}</div>
              <div><span class="font-semibold">RG:</span> {funcionario.rg}</div>
              {#if funcionario.rgOrgaoExpedidor}
                <div><span class="font-semibold">Órgão Expedidor:</span> {funcionario.rgOrgaoExpedidor}</div>
              {/if}
              {#if funcionario.rgDataEmissao}
                <div><span class="font-semibold">Data Emissão RG:</span> {funcionario.rgDataEmissao}</div>
              {/if}
              <div><span class="font-semibold">Data Nascimento:</span> {funcionario.nascimento}</div>
              {#if funcionario.sexo}
                <div><span class="font-semibold">Sexo:</span> {getLabelFromOptions(funcionario.sexo, SEXO_OPTIONS)}</div>
              {/if}
              {#if funcionario.estadoCivil}
                <div><span class="font-semibold">Estado Civil:</span> {getLabelFromOptions(funcionario.estadoCivil, ESTADO_CIVIL_OPTIONS)}</div>
              {/if}
              {#if funcionario.nacionalidade}
                <div><span class="font-semibold">Nacionalidade:</span> {funcionario.nacionalidade}</div>
              {/if}
            </div>
          </div>
        </div>

        <!-- Filiação -->
        {#if funcionario.nomePai || funcionario.nomeMae}
          <div class="card bg-base-100 shadow-xl">
            <div class="card-body">
              <h3 class="card-title text-lg border-b pb-2 mb-3">Filiação</h3>
              <div class="space-y-2 text-sm">
                {#if funcionario.nomePai}
                  <div><span class="font-semibold">Pai:</span> {funcionario.nomePai}</div>
                {/if}
                {#if funcionario.nomeMae}
                  <div><span class="font-semibold">Mãe:</span> {funcionario.nomeMae}</div>
                {/if}
              </div>
            </div>
          </div>
        {/if}

        <!-- Naturalidade -->
        {#if funcionario.naturalidade || funcionario.naturalidadeUF}
          <div class="card bg-base-100 shadow-xl">
            <div class="card-body">
              <h3 class="card-title text-lg border-b pb-2 mb-3">Naturalidade</h3>
              <div class="space-y-2 text-sm">
                {#if funcionario.naturalidade}
                  <div><span class="font-semibold">Cidade:</span> {funcionario.naturalidade}</div>
                {/if}
                {#if funcionario.naturalidadeUF}
                  <div><span class="font-semibold">UF:</span> {funcionario.naturalidadeUF}</div>
                {/if}
              </div>
            </div>
          </div>
        {/if}
      </div>

      <!-- Coluna 2: Cargo, Formação e Cursos -->
      <div class="space-y-6">
        <!-- Cargo e Vínculo -->
        <div class="card bg-base-100 shadow-xl">
          <div class="card-body">
            <h3 class="card-title text-lg border-b pb-2 mb-3">Cargo e Vínculo</h3>
            <div class="space-y-2 text-sm">
              <div><span class="font-semibold">Tipo:</span> {funcionario.simboloTipo === 'cargo_comissionado' ? 'Cargo Comissionado' : 'Função Gratificada'}</div>
              {#if simbolo}
                <div><span class="font-semibold">Símbolo:</span> {simbolo.nome}</div>
                <div class="text-xs text-base-content/70">{simbolo.descricao}</div>
              {/if}
              {#if funcionario.descricaoCargo}
                <div class="mt-2"><span class="font-semibold">Descrição:</span> {funcionario.descricaoCargo}</div>
              {/if}
              {#if funcionario.admissaoData}
                <div class="mt-2"><span class="font-semibold">Data Admissão:</span> {funcionario.admissaoData}</div>
              {/if}
              {#if funcionario.nomeacaoPortaria}
                <div><span class="font-semibold">Portaria:</span> {funcionario.nomeacaoPortaria}</div>
              {/if}
              {#if funcionario.nomeacaoData}
                <div><span class="font-semibold">Data Nomeação:</span> {funcionario.nomeacaoData}</div>
              {/if}
              {#if funcionario.nomeacaoDOE}
                <div><span class="font-semibold">DOE:</span> {funcionario.nomeacaoDOE}</div>
              {/if}
              {#if funcionario.pertenceOrgaoPublico}
                <div class="mt-2"><span class="font-semibold">Pertence Órgão Público:</span> Sim</div>
                {#if funcionario.orgaoOrigem}
                  <div><span class="font-semibold">Órgão Origem:</span> {funcionario.orgaoOrigem}</div>
                {/if}
              {/if}
              {#if funcionario.aposentado && funcionario.aposentado !== 'nao'}
                <div><span class="font-semibold">Aposentado:</span> {getLabelFromOptions(funcionario.aposentado, APOSENTADO_OPTIONS)}</div>
              {/if}
            </div>
          </div>
        </div>
        <!-- Documentos Pessoais -->
        <div class="card bg-base-100 shadow-xl">
          <div class="card-body">
            <h3 class="card-title text-lg border-b pb-2 mb-3">Documentos Pessoais</h3>
            <div class="space-y-2 text-sm">
              {#if funcionario.carteiraProfissionalNumero}
                <div><span class="font-semibold">Cart. Profissional:</span> {funcionario.carteiraProfissionalNumero}
                  {#if funcionario.carteiraProfissionalSerie}
                    - Série: {funcionario.carteiraProfissionalSerie}
                  {/if}
                </div>
              {/if}
              {#if funcionario.reservistaNumero}
                <div><span class="font-semibold">Reservista:</span> {funcionario.reservistaNumero}
                  {#if funcionario.reservistaSerie}
                    - Série: {funcionario.reservistaSerie}
                  {/if}
                </div>
              {/if}
              {#if funcionario.tituloEleitorNumero}
                <div><span class="font-semibold">Título Eleitor:</span> {funcionario.tituloEleitorNumero}</div>
                {#if funcionario.tituloEleitorZona || funcionario.tituloEleitorSecao}
                  <div class="ml-4 text-xs">
                    {#if funcionario.tituloEleitorZona}Zona: {funcionario.tituloEleitorZona}{/if}
                    {#if funcionario.tituloEleitorSecao} - Seção: {funcionario.tituloEleitorSecao}{/if}
                  </div>
                {/if}
              {/if}
              {#if funcionario.pisNumero}
                <div><span class="font-semibold">PIS/PASEP:</span> {funcionario.pisNumero}</div>
              {/if}
            </div>
          </div>
        </div>

        <!-- Formação -->
        {#if funcionario.grauInstrucao || funcionario.formacao}
          <div class="card bg-base-100 shadow-xl">
            <div class="card-body">
              <h3 class="card-title text-lg border-b pb-2 mb-3">Formação</h3>
              <div class="space-y-2 text-sm">
                {#if funcionario.grauInstrucao}
                  <div><span class="font-semibold">Grau Instrução:</span> {getLabelFromOptions(funcionario.grauInstrucao, GRAU_INSTRUCAO_OPTIONS)}</div>
                {/if}
                {#if funcionario.formacao}
                  <div><span class="font-semibold">Formação:</span> {funcionario.formacao}</div>
                {/if}
                {#if funcionario.formacaoRegistro}
                  <div><span class="font-semibold">Registro Nº:</span> {funcionario.formacaoRegistro}</div>
                {/if}
              </div>
            </div>
          </div>
        {/if}

        <!-- Cursos e Treinamentos -->
        {#if cursos && cursos.length > 0}
          <div class="card bg-base-100 shadow-xl">
            <div class="card-body">
              <h3 class="card-title text-lg border-b pb-2 mb-3">
                <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="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                </svg>
                Cursos e Treinamentos
              </h3>
              <div class="space-y-3">
                {#each cursos as curso}
                  <div class="flex items-start gap-3 p-3 bg-base-200 rounded-lg">
                    <div class="flex-1">
                      <p class="font-semibold text-sm">{curso.descricao}</p>
                      <p class="text-xs text-base-content/70 mt-1">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 inline mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                        </svg>
                        {curso.data}
                      </p>
                    </div>
                    {#if curso.certificadoUrl}
                      <a 
                        href={curso.certificadoUrl} 
                        target="_blank"
                        rel="noopener noreferrer"
                        class="btn btn-xs btn-primary gap-1"
                      >
                        <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="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>
                        Certificado
                      </a>
                    {/if}
                  </div>
                {/each}
              </div>
            </div>
          </div>
        {/if}

        <!-- Saúde -->
        {#if funcionario.grupoSanguineo || funcionario.fatorRH}
          <div class="card bg-base-100 shadow-xl">
            <div class="card-body">
              <h3 class="card-title text-lg border-b pb-2 mb-3">Saúde</h3>
              <div class="space-y-2 text-sm">
                {#if funcionario.grupoSanguineo}
                  <div><span class="font-semibold">Grupo Sanguíneo:</span> {funcionario.grupoSanguineo}</div>
                {/if}
                {#if funcionario.fatorRH}
                  <div><span class="font-semibold">Fator RH:</span> {getLabelFromOptions(funcionario.fatorRH, FATOR_RH_OPTIONS)}</div>
                {/if}
              </div>
            </div>
          </div>
        {/if}

        <!-- Contato -->
        <div class="card bg-base-100 shadow-xl">
          <div class="card-body">
            <h3 class="card-title text-lg border-b pb-2 mb-3">Contato</h3>
            <div class="space-y-2 text-sm">
              <div><span class="font-semibold">E-mail:</span> {funcionario.email}</div>
              <div><span class="font-semibold">Telefone:</span> {maskPhone(funcionario.telefone)}</div>
            </div>
          </div>
        </div>

        <!-- Endereço -->
        <div class="card bg-base-100 shadow-xl">
          <div class="card-body">
            <h3 class="card-title text-lg border-b pb-2 mb-3">Endereço</h3>
            <div class="space-y-2 text-sm">
              <div>{funcionario.endereco}</div>
              <div>{funcionario.cidade} - {funcionario.uf}</div>
              <div><span class="font-semibold">CEP:</span> {maskCEP(funcionario.cep)}</div>
            </div>
          </div>
        </div>

        <!-- Dados Bancários -->
        {#if funcionario.contaBradescoNumero}
          <div class="card bg-base-100 shadow-xl">
            <div class="card-body">
              <h3 class="card-title text-lg border-b pb-2 mb-3">Dados Bancários - Bradesco</h3>
              <div class="space-y-2 text-sm">
                <div><span class="font-semibold">Conta:</span> {funcionario.contaBradescoNumero}
                  {#if funcionario.contaBradescoDV}-{funcionario.contaBradescoDV}{/if}
                </div>
                {#if funcionario.contaBradescoAgencia}
                  <div><span class="font-semibold">Agência:</span> {funcionario.contaBradescoAgencia}</div>
                {/if}
              </div>
            </div>
          </div>
        {/if}
      </div>
    </div>

    <!-- Documentos Anexados -->
    <div class="card bg-base-100 shadow-xl">
      <div class="card-body">
        <h3 class="card-title text-xl border-b pb-3 mb-4">
          <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="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>
          Documentos Anexados
        </h3>

        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
          {#each documentos as doc}
            {@const temDocumento = documentosUrls[doc.campo]}
            <div 
              class="card bg-base-200 shadow-sm border-2"
              class:border-success={temDocumento}
              class:border-base-300={!temDocumento}
            >
              <div class="card-body p-3">
                <div class="flex items-start gap-2">
                  <div 
                    class={`w-8 h-8 rounded flex items-center justify-center flex-shrink-0 ${temDocumento ? 'bg-success/20' : 'bg-base-300'}`}
                  >
                    {#if temDocumento}
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                      </svg>
                    {:else}
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-base-content/40" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                      </svg>
                    {/if}
                  </div>
                  <div class="flex-1 min-w-0">
                    <p class="text-xs font-medium line-clamp-2">{doc.nome}</p>
                    <p class="text-xs text-base-content/60 mt-1">
                      {temDocumento ? 'Enviado' : 'Pendente'}
                    </p>
                    {#if temDocumento}
                      <button
                        class="btn btn-xs btn-ghost mt-2 gap-1"
                        onclick={() => downloadDocumento(documentosUrls[doc.campo] || '', doc.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
                      </button>
                    {/if}
                  </div>
                </div>
              </div>
            </div>
          {/each}
        </div>

        <div class="mt-4 text-center">
          <button 
            class="btn btn-primary btn-sm gap-2"
            onclick={() => goto(`/recursos-humanos/funcionarios/${funcionarioId}/documentos`)}
          >
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
            </svg>
            Gerenciar Documentos
          </button>
        </div>
      </div>
    </div>
  </main>

  <!-- Modal de Impressão -->
  {#if showPrintModal}
    <PrintModal 
      funcionario={funcionario} 
      onClose={() => showPrintModal = false} 
    />
  {/if}

  <!-- Modal de Impressão Dados Financeiros -->
  {#if showPrintFinanceiro && simbolo}
    <dialog class="modal modal-open">
      <div class="modal-box max-w-2xl">
        <h3 class="font-bold text-2xl mb-6 border-b pb-3">Dados Financeiros - {funcionario.nome}</h3>
        
        <div class="space-y-4 print:space-y-2" id="dados-financeiros-print">
          <!-- Informações Básicas -->
          <div class="grid grid-cols-2 gap-4">
            <div>
              <p class="text-sm font-semibold text-base-content/70">Nome</p>
              <p class="text-lg">{funcionario.nome}</p>
            </div>
            <div>
              <p class="text-sm font-semibold text-base-content/70">Matrícula</p>
              <p class="text-lg">{funcionario.matricula || 'N/A'}</p>
            </div>
            <div>
              <p class="text-sm font-semibold text-base-content/70">CPF</p>
              <p class="text-lg">{maskCPF(funcionario.cpf)}</p>
            </div>
            <div>
              <p class="text-sm font-semibold text-base-content/70">Data Admissão</p>
              <p class="text-lg">{funcionario.admissaoData || 'N/A'}</p>
            </div>
          </div>

          <div class="divider"></div>

          <!-- Dados Financeiros -->
          <div>
            <h4 class="font-bold text-lg mb-3">Remuneração</h4>
            <div class="space-y-2">
              <div class="flex justify-between p-2 bg-base-200 rounded">
                <span class="font-semibold">Símbolo:</span>
                <span>{simbolo.nome}</span>
              </div>
              <div class="flex justify-between p-2 bg-base-200 rounded">
                <span class="font-semibold">Tipo:</span>
                <span>{simbolo.tipo === 'cargo_comissionado' ? 'Cargo Comissionado' : 'Função Gratificada'}</span>
              </div>
              {#if funcionario.simboloTipo === 'cargo_comissionado'}
                <div class="flex justify-between p-2 bg-info/10 rounded">
                  <span class="font-semibold">Vencimento:</span>
                  <span class="text-info font-bold">R$ {simbolo.vencValor}</span>
                </div>
                <div class="flex justify-between p-2 bg-warning/10 rounded">
                  <span class="font-semibold">Representação:</span>
                  <span class="text-warning font-bold">R$ {simbolo.repValor}</span>
                </div>
              {/if}
              <div class="flex justify-between p-3 bg-success/20 rounded border-2 border-success/40">
                <span class="font-bold text-lg">TOTAL:</span>
                <span class="text-success font-bold text-2xl">R$ {simbolo.valor}</span>
              </div>
            </div>
          </div>

          {#if funcionario.contaBradescoNumero}
            <div class="divider"></div>
            <div>
              <h4 class="font-bold text-lg mb-3">Dados Bancários</h4>
              <div class="space-y-2">
                <div class="flex justify-between p-2 bg-base-200 rounded">
                  <span class="font-semibold">Banco:</span>
                  <span>Bradesco</span>
                </div>
                <div class="flex justify-between p-2 bg-base-200 rounded">
                  <span class="font-semibold">Agência:</span>
                  <span>{funcionario.contaBradescoAgencia || 'N/A'}</span>
                </div>
                <div class="flex justify-between p-2 bg-base-200 rounded">
                  <span class="font-semibold">Conta:</span>
                  <span>{funcionario.contaBradescoNumero}{funcionario.contaBradescoDV ? `-${funcionario.contaBradescoDV}` : ''}</span>
                </div>
              </div>
            </div>
          {/if}
        </div>

        <div class="modal-action">
          <button 
            class="btn btn-primary gap-2" 
            onclick={() => window.print()}
          >
            <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="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
            </svg>
            Imprimir
          </button>
          <button class="btn btn-ghost" onclick={() => showPrintFinanceiro = false}>Fechar</button>
        </div>
      </div>
      <form method="dialog" class="modal-backdrop">
        <button type="button" onclick={() => showPrintFinanceiro = false} aria-label="Fechar modal">Fechar</button>
      </form>
    </dialog>
  {/if}
{/if}
