<script lang="ts">
  import { useConvexClient } from "convex-svelte";
  import { api } from "@sgse-app/backend/convex/_generated/api";
  import { goto } from "$app/navigation";
  import type { SimboloTipo } from "@sgse-app/backend/convex/schema";
  import FileUpload from "$lib/components/FileUpload.svelte";
  import { 
    maskCPF, maskCEP, maskPhone, maskDate, maskUF, onlyDigits,
    validateCPF, validateDate 
  } from "$lib/utils/masks";
  import { 
    SEXO_OPTIONS, ESTADO_CIVIL_OPTIONS, GRAU_INSTRUCAO_OPTIONS,
    GRUPO_SANGUINEO_OPTIONS, FATOR_RH_OPTIONS, APOSENTADO_OPTIONS, UFS_BRASIL
  } from "$lib/utils/constants";
  import { documentos, categoriasDocumentos, getDocumentosByCategoria } from "$lib/utils/documentos";
  import ModelosDeclaracoes from "$lib/components/ModelosDeclaracoes.svelte";

  const client = useConvexClient();

  let simbolos: Array<{
    _id: string;
    nome: string;
    tipo: SimboloTipo;
    descricao: string;
  }> = $state([]);

  let tipo = $state<SimboloTipo>("cargo_comissionado");
  let loading = $state(false);
  let notice = $state<{ kind: "success" | "error"; text: string } | null>(null);
  
  // Campos obrigatórios
  let nome = $state("");
  let matricula = $state("");
  let cpf = $state("");
  let rg = $state("");
  let nascimento = $state("");
  let email = $state("");
  let telefone = $state("");
  let endereco = $state("");
  let cep = $state("");
  let cidade = $state("");
  let uf = $state("");
  let simboloId = $state("");
  let admissaoData = $state("");
  
  // Dados Pessoais Adicionais
  let nomePai = $state("");
  let nomeMae = $state("");
  let naturalidade = $state("");
  let naturalidadeUF = $state("");
  let sexo = $state("");
  let estadoCivil = $state("");
  let nacionalidade = $state("Brasileira");
  
  // Documentos Pessoais
  let rgOrgaoExpedidor = $state("");
  let rgDataEmissao = $state("");
  let carteiraProfissionalNumero = $state("");
  let carteiraProfissionalSerie = $state("");
  let carteiraProfissionalDataEmissao = $state("");
  let reservistaNumero = $state("");
  let reservistaSerie = $state("");
  let tituloEleitorNumero = $state("");
  let tituloEleitorZona = $state("");
  let tituloEleitorSecao = $state("");
  let pisNumero = $state("");
  
  // Formação e Saúde
  let grauInstrucao = $state("");
  let formacao = $state("");
  let formacaoRegistro = $state("");
  let grupoSanguineo = $state("");
  let fatorRH = $state("");
  
  // Cargo e Vínculo
  let descricaoCargo = $state("");
  let nomeacaoPortaria = $state("");
  let nomeacaoData = $state("");
  let nomeacaoDOE = $state("");
  let pertenceOrgaoPublico = $state(false);
  let orgaoOrigem = $state("");
  let aposentado = $state("nao");
  
  // Dados Bancários
  let contaBradescoNumero = $state("");
  let contaBradescoDV = $state("");
  let contaBradescoAgencia = $state("");
  
  // Documentos (Storage IDs)
  let documentosStorage: Record<string, string | undefined> = $state({});

  // Cursos e Treinamentos
  let cursos = $state<Array<{
    id: string;
    descricao: string;
    data: string;
    certificadoId?: string;
  }>>([]);
  let mostrarFormularioCurso = $state(false);
  let cursoAtual = $state({ descricao: "", data: "", arquivo: null as File | null });

  function adicionarCurso() {
    if (!cursoAtual.descricao.trim() || !cursoAtual.data.trim()) {
      alert("Preencha a descrição e a data do curso");
      return;
    }
    cursos.push({
      id: crypto.randomUUID(),
      descricao: cursoAtual.descricao,
      data: cursoAtual.data,
      certificadoId: undefined
    });
    cursoAtual = { descricao: "", data: "", arquivo: null };
  }

  function removerCurso(id: string) {
    cursos = cursos.filter(c => c.id !== id);
  }

  async function uploadCertificado(file: File): Promise<string> {
    const storageId = await client.mutation(api.documentos.generateUploadUrl, {});
    const uploadUrl = await client.mutation(api.documentos.generateUploadUrl, {});
    const response = await fetch(uploadUrl, {
      method: "POST",
      headers: { "Content-Type": file.type },
      body: file,
    });
    const result = await response.json();
    return result.storageId;
  }

  async function loadSimbolos() {
    const list = await client.query(api.simbolos.getAll, {} as any);
    simbolos = list.map((s: any) => ({ 
      _id: s._id, 
      nome: s.nome, 
      tipo: s.tipo, 
      descricao: s.descricao 
    }));
  }

  async function fillFromCEP(cepValue: string) {
    const cepDigits = onlyDigits(cepValue);
    if (cepDigits.length !== 8) return;
    
    try {
      const res = await fetch(`https://viacep.com.br/ws/${cepDigits}/json/`);
      const data = await res.json();
      if (!data || data.erro) return;
      
      const enderecoFull = [data.logradouro, data.bairro].filter(Boolean).join(", ");
      endereco = enderecoFull;
      cidade = data.localidade || "";
      uf = data.uf || "";
    } catch {}
  }

  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();
      documentosStorage[campo] = storageId;
    } catch (err: any) {
      throw new Error(err?.message || "Erro ao fazer upload");
    }
  }

  async function handleDocumentoRemove(campo: string) {
    documentosStorage[campo] = undefined;
  }

  async function handleSubmit() {
    // Validação básica
    if (!nome || !cpf || !rg || !nascimento || !email || !telefone) {
      notice = { kind: "error", text: "Preencha todos os campos obrigatórios" };
      return;
    }
    
    if (!validateCPF(cpf)) {
      notice = { kind: "error", text: "CPF inválido" };
      return;
    }
    
    if (!validateDate(nascimento)) {
      notice = { kind: "error", text: "Data de nascimento inválida" };
      return;
    }
    
    if (!simboloId) {
      notice = { kind: "error", text: "Selecione um símbolo" };
      return;
    }

    try {
      loading = true;
      
      const payload = {
        nome,
        matricula: matricula.trim() || undefined,
        cpf: onlyDigits(cpf),
        rg: onlyDigits(rg),
        nascimento,
        email,
        telefone: onlyDigits(telefone),
        endereco,
        cep: onlyDigits(cep),
        cidade,
        uf: uf.toUpperCase(),
        simboloId: simboloId as any,
        simboloTipo: tipo,
        admissaoData: admissaoData || undefined,
        desligamentoData: undefined,
        
        // Dados Pessoais Adicionais
        nomePai: nomePai || undefined,
        nomeMae: nomeMae || undefined,
        naturalidade: naturalidade || undefined,
        naturalidadeUF: naturalidadeUF ? naturalidadeUF.toUpperCase() : undefined,
        sexo: sexo || undefined,
        estadoCivil: estadoCivil || undefined,
        nacionalidade: nacionalidade || undefined,
        
        // Documentos Pessoais
        rgOrgaoExpedidor: rgOrgaoExpedidor || undefined,
        rgDataEmissao: rgDataEmissao || undefined,
        carteiraProfissionalNumero: carteiraProfissionalNumero || undefined,
        carteiraProfissionalSerie: carteiraProfissionalSerie || undefined,
        carteiraProfissionalDataEmissao: carteiraProfissionalDataEmissao || undefined,
        reservistaNumero: reservistaNumero || undefined,
        reservistaSerie: reservistaSerie || undefined,
        tituloEleitorNumero: tituloEleitorNumero || undefined,
        tituloEleitorZona: tituloEleitorZona || undefined,
        tituloEleitorSecao: tituloEleitorSecao || undefined,
        pisNumero: pisNumero || undefined,
        
        // Formação e Saúde
        grauInstrucao: grauInstrucao || undefined,
        formacao: formacao || undefined,
        formacaoRegistro: formacaoRegistro || undefined,
        grupoSanguineo: grupoSanguineo || undefined,
        fatorRH: fatorRH || undefined,
        
        // Cargo e Vínculo
        descricaoCargo: descricaoCargo || undefined,
        nomeacaoPortaria: nomeacaoPortaria || undefined,
        nomeacaoData: nomeacaoData || undefined,
        nomeacaoDOE: nomeacaoDOE || undefined,
        pertenceOrgaoPublico: pertenceOrgaoPublico || undefined,
        orgaoOrigem: orgaoOrigem || undefined,
        aposentado: aposentado || undefined,
        
        // Dados Bancários
        contaBradescoNumero: contaBradescoNumero || undefined,
        contaBradescoDV: contaBradescoDV || undefined,
        contaBradescoAgencia: contaBradescoAgencia || undefined,
        
        // Documentos
        ...Object.fromEntries(
          Object.entries(documentosStorage).map(([key, value]) => [key, value as any])
        ),
      };

      const novoFuncionarioId = await client.mutation(api.funcionarios.create, payload as any);
      
      // Salvar cursos, se houver
      for (const curso of cursos) {
        let certificadoId = curso.certificadoId;
        // Se houver arquivo para upload, fazer o upload
        if (cursoAtual.arquivo && curso.id === cursos[cursos.length - 1].id) {
          try {
            certificadoId = await uploadCertificado(cursoAtual.arquivo);
          } catch (err) {
            console.error("Erro ao fazer upload do certificado:", err);
          }
        }
        
        await client.mutation(api.cursos.criar, {
          funcionarioId: novoFuncionarioId,
          descricao: curso.descricao,
          data: curso.data,
          certificadoId: certificadoId as any,
        });
      }
      
      notice = { kind: "success", text: "Funcionário cadastrado com sucesso!" };
      setTimeout(() => goto("/recursos-humanos/funcionarios"), 600);
    } catch (e: any) {
      const msg = e?.message || String(e);
      if (/CPF j[aá] cadastrado/i.test(msg)) {
        notice = { kind: "error", text: "CPF já cadastrado." };
      } else if (/Matr[ií]cula j[aá] cadastrada/i.test(msg)) {
        notice = { kind: "error", text: "Matrícula já cadastrada." };
      } else {
        notice = { kind: "error", text: "Erro ao cadastrar funcionário." };
      }
    } finally {
      loading = false;
    }
  }

  $effect(() => {
    loadSimbolos();
  });

  // Resetar simboloId quando tipo mudar
  $effect(() => {
    tipo; // track tipo
    simboloId = ""; // reset selection when tipo changes
  });
</script>

<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>Cadastrar</li>
    </ul>
  </div>

  <!-- Cabeçalho -->
  <div class="mb-6">
    <div class="flex items-center gap-4 mb-2">
      <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="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" />
        </svg>
      </div>
      <div>
        <h1 class="text-3xl font-bold text-primary">Cadastro de Funcionário</h1>
        <p class="text-base-content/70">Preencha os campos abaixo para cadastrar um novo funcionário</p>
      </div>
    </div>
  </div>

  <!-- Alertas -->
  {#if notice}
    <div class="alert mb-6 shadow-lg" class:alert-success={notice.kind === "success"} class:alert-error={notice.kind === "error"}>
      <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
        {#if notice.kind === "success"}
          <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" />
        {:else}
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
        {/if}
      </svg>
      <span>{notice.text}</span>
    </div>
  {/if}

  <!-- Formulário -->
  <form class="space-y-6" onsubmit={(e) => { e.preventDefault(); handleSubmit(); }}>
    
    <!-- Card 1: Informações Pessoais -->
    <div class="card bg-base-100 shadow-xl">
      <div class="card-body space-y-4">
        <h2 class="card-title text-xl border-b pb-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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
          </svg>
          Informações Pessoais
        </h2>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          <!-- Nome -->
          <div class="form-control lg:col-span-2">
            <label class="label" for="nome">
              <span class="label-text font-medium">Nome Completo <span class="text-error">*</span></span>
            </label>
            <input 
              id="nome" 
              type="text" 
              class="input input-bordered w-full" 
              bind:value={nome}
              required 
            />
          </div>

          <!-- Matrícula -->
          <div class="form-control">
            <label class="label" for="matricula">
              <span class="label-text font-medium">Matrícula <span class="text-base-content/50 text-xs">(opcional)</span></span>
            </label>
            <input 
              id="matricula" 
              type="text" 
              class="input input-bordered w-full" 
              bind:value={matricula}
              placeholder="Deixe em branco se não tiver"
            />
          </div>

          <!-- CPF -->
          <div class="form-control">
            <label class="label" for="cpf">
              <span class="label-text font-medium">CPF <span class="text-error">*</span></span>
            </label>
            <input 
              id="cpf" 
              type="text" 
              inputmode="numeric"
              class="input input-bordered w-full" 
              value={cpf}
              oninput={(e) => { 
                const target = e.target as HTMLInputElement;
                cpf = maskCPF(target.value);
                target.value = cpf;
              }}
              required 
            />
          </div>

          <!-- RG -->
          <div class="form-control">
            <label class="label" for="rg">
              <span class="label-text font-medium">RG <span class="text-error">*</span></span>
            </label>
            <input 
              id="rg" 
              type="text" 
              inputmode="numeric"
              class="input input-bordered w-full" 
              value={rg}
              oninput={(e) => { 
                const target = e.target as HTMLInputElement;
                rg = onlyDigits(target.value);
                target.value = rg;
              }}
              required 
            />
          </div>

          <!-- Órgão Expedidor -->
          <div class="form-control">
            <label class="label" for="rgOrgaoExpedidor">
              <span class="label-text font-medium">Órgão Expedidor</span>
            </label>
            <input 
              id="rgOrgaoExpedidor" 
              type="text" 
              class="input input-bordered w-full" 
              bind:value={rgOrgaoExpedidor}
              placeholder="Ex: SDS/PE"
            />
          </div>

          <!-- Data Emissão RG -->
          <div class="form-control">
            <label class="label" for="rgDataEmissao">
              <span class="label-text font-medium">Data Emissão RG</span>
            </label>
            <input 
              id="rgDataEmissao" 
              type="text" 
              inputmode="numeric"
              placeholder="dd/mm/aaaa"
              class="input input-bordered w-full" 
              value={rgDataEmissao}
              oninput={(e) => { 
                const target = e.target as HTMLInputElement;
                rgDataEmissao = maskDate(target.value);
                target.value = rgDataEmissao;
              }}
            />
          </div>

          <!-- Nome do Pai -->
          <div class="form-control lg:col-span-2">
            <label class="label" for="nomePai">
              <span class="label-text font-medium">Nome do Pai</span>
            </label>
            <input 
              id="nomePai" 
              type="text" 
              class="input input-bordered w-full" 
              bind:value={nomePai}
            />
          </div>

          <!-- Nome da Mãe -->
          <div class="form-control lg:col-span-2">
            <label class="label" for="nomeMae">
              <span class="label-text font-medium">Nome da Mãe</span>
            </label>
            <input 
              id="nomeMae" 
              type="text" 
              class="input input-bordered w-full" 
              bind:value={nomeMae}
            />
          </div>

          <!-- Data de Nascimento -->
          <div class="form-control">
            <label class="label" for="nascimento">
              <span class="label-text font-medium">Data de Nascimento <span class="text-error">*</span></span>
            </label>
            <input 
              id="nascimento" 
              type="text" 
              inputmode="numeric"
              placeholder="dd/mm/aaaa"
              class="input input-bordered w-full" 
              value={nascimento}
              oninput={(e) => { 
                const target = e.target as HTMLInputElement;
                nascimento = maskDate(target.value);
                target.value = nascimento;
              }}
              required 
            />
          </div>

          <!-- Naturalidade -->
          <div class="form-control">
            <label class="label" for="naturalidade">
              <span class="label-text font-medium">Naturalidade</span>
            </label>
            <input 
              id="naturalidade" 
              type="text" 
              class="input input-bordered w-full" 
              bind:value={naturalidade}
              placeholder="Cidade de nascimento"
            />
          </div>

          <!-- Naturalidade UF -->
          <div class="form-control">
            <label class="label" for="naturalidadeUF">
              <span class="label-text font-medium">UF Naturalidade</span>
            </label>
            <select 
              id="naturalidadeUF" 
              class="select select-bordered w-full" 
              bind:value={naturalidadeUF}
            >
              <option value="">Selecione...</option>
              {#each UFS_BRASIL as ufOption}
                <option value={ufOption}>{ufOption}</option>
              {/each}
            </select>
          </div>

          <!-- Sexo -->
          <div class="form-control">
            <label class="label" for="sexo">
              <span class="label-text font-medium">Sexo</span>
            </label>
            <select 
              id="sexo" 
              class="select select-bordered w-full" 
              bind:value={sexo}
            >
              <option value="">Selecione...</option>
              {#each SEXO_OPTIONS as option}
                <option value={option.value}>{option.label}</option>
              {/each}
            </select>
          </div>

          <!-- Estado Civil -->
          <div class="form-control">
            <label class="label" for="estadoCivil">
              <span class="label-text font-medium">Estado Civil</span>
            </label>
            <select 
              id="estadoCivil" 
              class="select select-bordered w-full" 
              bind:value={estadoCivil}
            >
              <option value="">Selecione...</option>
              {#each ESTADO_CIVIL_OPTIONS as option}
                <option value={option.value}>{option.label}</option>
              {/each}
            </select>
          </div>

          <!-- Nacionalidade -->
          <div class="form-control">
            <label class="label" for="nacionalidade">
              <span class="label-text font-medium">Nacionalidade</span>
            </label>
            <input 
              id="nacionalidade" 
              type="text" 
              class="input input-bordered w-full" 
              bind:value={nacionalidade}
            />
          </div>
        </div>
      </div>
    </div>

    <!-- Card 2: Documentos Pessoais -->
    <div class="card bg-base-100 shadow-xl">
      <div class="card-body space-y-4">
        <h2 class="card-title text-xl border-b pb-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="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2" />
          </svg>
          Documentos Pessoais
        </h2>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          <!-- Carteira Profissional -->
          <div class="form-control">
            <label class="label" for="carteiraProfissionalNumero">
              <span class="label-text font-medium">Carteira Profissional Nº</span>
            </label>
            <input 
              id="carteiraProfissionalNumero" 
              type="text" 
              class="input input-bordered w-full" 
              bind:value={carteiraProfissionalNumero}
            />
          </div>

          <div class="form-control">
            <label class="label" for="carteiraProfissionalSerie">
              <span class="label-text font-medium">Série</span>
            </label>
            <input 
              id="carteiraProfissionalSerie" 
              type="text" 
              class="input input-bordered w-full" 
              bind:value={carteiraProfissionalSerie}
            />
          </div>

          <div class="form-control">
            <label class="label" for="carteiraProfissionalDataEmissao">
              <span class="label-text font-medium">Data Emissão</span>
            </label>
            <input 
              id="carteiraProfissionalDataEmissao" 
              type="text" 
              inputmode="numeric"
              placeholder="dd/mm/aaaa"
              class="input input-bordered w-full" 
              value={carteiraProfissionalDataEmissao}
              oninput={(e) => { 
                const target = e.target as HTMLInputElement;
                carteiraProfissionalDataEmissao = maskDate(target.value);
                target.value = carteiraProfissionalDataEmissao;
              }}
            />
          </div>

          <!-- Reservista -->
          <div class="form-control">
            <label class="label" for="reservistaNumero">
              <span class="label-text font-medium">Reservista Nº</span>
            </label>
            <input 
              id="reservistaNumero" 
              type="text" 
              class="input input-bordered w-full" 
              bind:value={reservistaNumero}
            />
          </div>

          <div class="form-control">
            <label class="label" for="reservistaSerie">
              <span class="label-text font-medium">Série</span>
            </label>
            <input 
              id="reservistaSerie" 
              type="text" 
              class="input input-bordered w-full" 
              bind:value={reservistaSerie}
            />
          </div>

          <!-- Título de Eleitor -->
          <div class="form-control">
            <label class="label" for="tituloEleitorNumero">
              <span class="label-text font-medium">Título de Eleitor Nº</span>
            </label>
            <input 
              id="tituloEleitorNumero" 
              type="text" 
              class="input input-bordered w-full" 
              bind:value={tituloEleitorNumero}
            />
          </div>

          <div class="form-control">
            <label class="label" for="tituloEleitorZona">
              <span class="label-text font-medium">Zona</span>
            </label>
            <input 
              id="tituloEleitorZona" 
              type="text" 
              inputmode="numeric"
              class="input input-bordered w-full" 
              bind:value={tituloEleitorZona}
            />
          </div>

          <div class="form-control">
            <label class="label" for="tituloEleitorSecao">
              <span class="label-text font-medium">Seção</span>
            </label>
            <input 
              id="tituloEleitorSecao" 
              type="text" 
              inputmode="numeric"
              class="input input-bordered w-full" 
              bind:value={tituloEleitorSecao}
            />
          </div>

          <!-- PIS/PASEP -->
          <div class="form-control">
            <label class="label" for="pisNumero">
              <span class="label-text font-medium">PIS/PASEP Nº</span>
            </label>
            <input 
              id="pisNumero" 
              type="text" 
              class="input input-bordered w-full" 
              bind:value={pisNumero}
            />
          </div>
        </div>
      </div>
    </div>

    <!-- Card 3: Formação e Saúde -->
    <div class="card bg-base-100 shadow-xl">
      <div class="card-body space-y-4">
        <h2 class="card-title text-xl border-b pb-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>
          Formação e Saúde
        </h2>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          <!-- Grau de Instrução -->
          <div class="form-control">
            <label class="label" for="grauInstrucao">
              <span class="label-text font-medium">Grau de Instrução</span>
            </label>
            <select 
              id="grauInstrucao" 
              class="select select-bordered w-full" 
              bind:value={grauInstrucao}
            >
              <option value="">Selecione...</option>
              {#each GRAU_INSTRUCAO_OPTIONS as option}
                <option value={option.value}>{option.label}</option>
              {/each}
            </select>
          </div>

          <!-- Formação -->
          <div class="form-control">
            <label class="label" for="formacao">
              <span class="label-text font-medium">Formação/Curso</span>
            </label>
            <input 
              id="formacao" 
              type="text" 
              class="input input-bordered w-full" 
              bind:value={formacao}
              placeholder="Ex: Administração"
            />
          </div>

          <!-- Registro Nº -->
          <div class="form-control">
            <label class="label" for="formacaoRegistro">
              <span class="label-text font-medium">Registro Nº</span>
            </label>
            <input 
              id="formacaoRegistro" 
              type="text" 
              class="input input-bordered w-full" 
              bind:value={formacaoRegistro}
              placeholder="Nº do registro profissional"
            />
          </div>

          <!-- Grupo Sanguíneo -->
          <div class="form-control">
            <label class="label" for="grupoSanguineo">
              <span class="label-text font-medium">Grupo Sanguíneo</span>
            </label>
            <select 
              id="grupoSanguineo" 
              class="select select-bordered w-full" 
              bind:value={grupoSanguineo}
            >
              <option value="">Selecione...</option>
              {#each GRUPO_SANGUINEO_OPTIONS as option}
                <option value={option.value}>{option.label}</option>
              {/each}
            </select>
          </div>

          <!-- Fator RH -->
          <div class="form-control">
            <label class="label" for="fatorRH">
              <span class="label-text font-medium">Fator RH</span>
            </label>
            <select 
              id="fatorRH" 
              class="select select-bordered w-full" 
              bind:value={fatorRH}
            >
              <option value="">Selecione...</option>
              {#each FATOR_RH_OPTIONS as option}
                <option value={option.value}>{option.label}</option>
              {/each}
            </select>
          </div>
        </div>
      </div>
    </div>

    <!-- Card 3.5: Cursos e Treinamentos -->
    <div class="card bg-base-100 shadow-xl">
      <div class="card-body space-y-4">
        <h2 class="card-title text-xl border-b pb-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
        </h2>

        <p class="text-sm text-base-content/70">
          Adicione até 7 cursos ou treinamentos realizados pelo funcionário (opcional)
        </p>

        <!-- Lista de cursos adicionados -->
        {#if cursos.length > 0}
          <div class="space-y-2">
            <h3 class="font-semibold text-sm">Cursos adicionados ({cursos.length}/7)</h3>
            {#each cursos as curso}
              <div class="flex items-center 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">{curso.data}</p>
                </div>
                <button 
                  type="button"
                  class="btn btn-sm btn-error btn-square"
                  aria-label="Remover curso"
                  onclick={() => removerCurso(curso.id)}
                >
                  <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="M6 18L18 6M6 6l12 12" />
                  </svg>
                </button>
              </div>
            {/each}
          </div>
        {/if}

        <!-- Formulário para adicionar curso -->
        {#if cursos.length < 7}
          <div class="collapse collapse-arrow border border-base-300 bg-base-200">
            <input type="checkbox" bind:checked={mostrarFormularioCurso} />
            <div class="collapse-title font-medium">
              Adicionar Curso/Treinamento
            </div>
            <div class="collapse-content">
              <div class="space-y-3 pt-2">
                <div class="form-control">
                  <label class="label" for="curso-descricao">
                    <span class="label-text font-medium">Descrição do Curso</span>
                  </label>
                  <input 
                    id="curso-descricao"
                    type="text" 
                    class="input input-bordered w-full" 
                    bind:value={cursoAtual.descricao}
                    placeholder="Ex: Gestão de Projetos"
                  />
                </div>

                <div class="form-control">
                  <label class="label" for="curso-data">
                    <span class="label-text font-medium">Data de Conclusão</span>
                  </label>
                  <input 
                    id="curso-data"
                    type="text" 
                    class="input input-bordered w-full" 
                    bind:value={cursoAtual.data}
                    placeholder="Ex: 01/2024"
                    onchange={(e) => cursoAtual.data = maskDate(e.currentTarget.value)}
                  />
                </div>

                <div class="form-control">
                  <label class="label" for="curso-certificado">
                    <span class="label-text font-medium">Certificado/Diploma (opcional)</span>
                  </label>
                  <input 
                    id="curso-certificado"
                    type="file" 
                    class="file-input file-input-bordered w-full" 
                    accept=".pdf,.jpg,.jpeg,.png"
                    onchange={(e) => {
                      const file = e.currentTarget.files?.[0];
                      if (file) cursoAtual.arquivo = file;
                    }}
                  />
                </div>

                <button 
                  type="button"
                  class="btn btn-primary btn-sm gap-2 mt-2"
                  onclick={adicionarCurso}
                >
                  <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>
                  Adicionar à Lista
                </button>
              </div>
            </div>
          </div>
        {:else}
          <div class="alert alert-info">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6">
              <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"></path>
            </svg>
            <span>Limite de 7 cursos atingido</span>
          </div>
        {/if}
      </div>
    </div>

    <!-- Card 4: Endereço e Contato -->
    <div class="card bg-base-100 shadow-xl">
      <div class="card-body space-y-4">
        <h2 class="card-title text-xl border-b pb-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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
          </svg>
          Endereço e Contato
        </h2>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          <!-- CEP -->
          <div class="form-control">
            <label class="label" for="cep">
              <span class="label-text font-medium">CEP <span class="text-error">*</span></span>
            </label>
            <input 
              id="cep" 
              type="text" 
              inputmode="numeric"
              class="input input-bordered w-full" 
              value={cep}
              oninput={(e) => { 
                const target = e.target as HTMLInputElement;
                cep = maskCEP(target.value);
                target.value = cep;
              }}
              onblur={() => fillFromCEP(cep)}
              required 
            />
          </div>

          <!-- Cidade -->
          <div class="form-control lg:col-span-2">
            <label class="label" for="cidade">
              <span class="label-text font-medium">Cidade <span class="text-error">*</span></span>
            </label>
            <input 
              id="cidade" 
              type="text" 
              class="input input-bordered w-full" 
              bind:value={cidade}
              required 
            />
          </div>

          <!-- UF -->
          <div class="form-control">
            <label class="label" for="uf">
              <span class="label-text font-medium">UF <span class="text-error">*</span></span>
            </label>
            <select 
              id="uf" 
              class="select select-bordered w-full" 
              bind:value={uf}
              required
            >
              <option value="">Selecione...</option>
              {#each UFS_BRASIL as ufOption}
                <option value={ufOption}>{ufOption}</option>
              {/each}
            </select>
          </div>

          <!-- Endereço -->
          <div class="form-control lg:col-span-4">
            <label class="label" for="endereco">
              <span class="label-text font-medium">Endereço <span class="text-error">*</span></span>
            </label>
            <input 
              id="endereco" 
              type="text" 
              class="input input-bordered w-full" 
              bind:value={endereco}
              required 
            />
          </div>

          <!-- E-mail -->
          <div class="form-control lg:col-span-2">
            <label class="label" for="email">
              <span class="label-text font-medium">E-mail <span class="text-error">*</span></span>
            </label>
            <input 
              id="email" 
              type="email" 
              class="input input-bordered w-full" 
              bind:value={email}
              required 
            />
          </div>

          <!-- Telefone -->
          <div class="form-control lg:col-span-2">
            <label class="label" for="telefone">
              <span class="label-text font-medium">Telefone <span class="text-error">*</span></span>
            </label>
            <input 
              id="telefone" 
              type="text" 
              inputmode="numeric"
              class="input input-bordered w-full" 
              value={telefone}
              oninput={(e) => { 
                const target = e.target as HTMLInputElement;
                telefone = maskPhone(target.value);
                target.value = telefone;
              }}
              required 
            />
          </div>
        </div>
      </div>
    </div>

    <!-- Card 5: Cargo e Vínculo -->
    <div class="card bg-base-100 shadow-xl">
      <div class="card-body space-y-4">
        <h2 class="card-title text-xl border-b pb-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="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
          </svg>
          Cargo e Vínculo
        </h2>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          <!-- Símbolo Tipo -->
          <div class="form-control">
            <label class="label" for="simboloTipo">
              <span class="label-text font-medium">Símbolo Tipo <span class="text-error">*</span></span>
            </label>
            <select 
              id="simboloTipo" 
              class="select select-bordered w-full" 
              bind:value={tipo}
              required
            >
              <option value="cargo_comissionado">Cargo Comissionado</option>
              <option value="funcao_gratificada">Função Gratificada</option>
            </select>
          </div>

          <!-- Símbolo -->
          <div class="form-control">
            <label class="label" for="simboloId">
              <span class="label-text font-medium">Símbolo <span class="text-error">*</span></span>
            </label>
            <select 
              id="simboloId" 
              class="select select-bordered w-full" 
              bind:value={simboloId}
              required
            >
              <option value="">Selecione...</option>
              {#each simbolos.filter((s) => s.tipo === tipo) as s}
                <option value={s._id}>{s.nome} — {s.descricao}</option>
              {/each}
            </select>
          </div>

          <!-- Descrição Cargo/Função -->
          <div class="form-control lg:col-span-3">
            <label class="label" for="descricaoCargo">
              <span class="label-text font-medium">Descrição Cargo/Função</span>
            </label>
            <input 
              id="descricaoCargo" 
              type="text" 
              class="input input-bordered w-full" 
              bind:value={descricaoCargo}
              placeholder="Descreva as atribuições do cargo"
            />
          </div>

          <!-- Nomeação/Portaria -->
          <div class="form-control">
            <label class="label" for="nomeacaoPortaria">
              <span class="label-text font-medium">Nomeação/Portaria Nº</span>
            </label>
            <input 
              id="nomeacaoPortaria" 
              type="text" 
              class="input input-bordered w-full" 
              bind:value={nomeacaoPortaria}
            />
          </div>

          <div class="form-control">
            <label class="label" for="nomeacaoData">
              <span class="label-text font-medium">Data</span>
            </label>
            <input 
              id="nomeacaoData" 
              type="text" 
              inputmode="numeric"
              placeholder="dd/mm/aaaa"
              class="input input-bordered w-full" 
              value={nomeacaoData}
              oninput={(e) => { 
                const target = e.target as HTMLInputElement;
                nomeacaoData = maskDate(target.value);
                target.value = nomeacaoData;
              }}
            />
          </div>

          <div class="form-control">
            <label class="label" for="nomeacaoDOE">
              <span class="label-text font-medium">DOE</span>
            </label>
            <input 
              id="nomeacaoDOE" 
              type="text" 
              inputmode="numeric"
              placeholder="dd/mm/aaaa"
              class="input input-bordered w-full" 
              value={nomeacaoDOE}
              oninput={(e) => { 
                const target = e.target as HTMLInputElement;
                nomeacaoDOE = maskDate(target.value);
                target.value = nomeacaoDOE;
              }}
            />
          </div>

          <!-- Data Admissão -->
          <div class="form-control">
            <label class="label" for="admissaoData">
              <span class="label-text font-medium">Data Admissão</span>
            </label>
            <input 
              id="admissaoData" 
              type="text" 
              inputmode="numeric"
              placeholder="dd/mm/aaaa"
              class="input input-bordered w-full" 
              value={admissaoData}
              oninput={(e) => { 
                const target = e.target as HTMLInputElement;
                admissaoData = maskDate(target.value);
                target.value = admissaoData;
              }}
            />
          </div>

          <!-- Pertence a Órgão Público -->
          <div class="form-control lg:col-span-3">
            <label class="label cursor-pointer justify-start gap-4">
              <input 
                type="checkbox" 
                class="checkbox checkbox-primary" 
                bind:checked={pertenceOrgaoPublico}
              />
              <span class="label-text font-medium">Pertence a Órgão Público Federal, Estadual ou Municipal?</span>
            </label>
          </div>

          <!-- Órgão de Origem -->
          {#if pertenceOrgaoPublico}
            <div class="form-control lg:col-span-2">
              <label class="label" for="orgaoOrigem">
                <span class="label-text font-medium">Órgão de Origem (para servidor extra-quadro)</span>
              </label>
              <input 
                id="orgaoOrigem" 
                type="text" 
                class="input input-bordered w-full" 
                bind:value={orgaoOrigem}
              />
            </div>
          {/if}

          <!-- Aposentado -->
          <div class="form-control">
            <label class="label" for="aposentado">
              <span class="label-text font-medium">Se Aposentado</span>
            </label>
            <select 
              id="aposentado" 
              class="select select-bordered w-full" 
              bind:value={aposentado}
            >
              {#each APOSENTADO_OPTIONS as option}
                <option value={option.value}>{option.label}</option>
              {/each}
            </select>
          </div>
        </div>
      </div>
    </div>

    <!-- Card 6: Dados Bancários -->
    <div class="card bg-base-100 shadow-xl">
      <div class="card-body space-y-4">
        <h2 class="card-title text-xl border-b pb-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="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
          </svg>
          Dados Bancários - Bradesco
        </h2>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
          <!-- Conta Corrente -->
          <div class="form-control">
            <label class="label" for="contaBradescoNumero">
              <span class="label-text font-medium">Conta Corrente Nº</span>
            </label>
            <input 
              id="contaBradescoNumero" 
              type="text" 
              inputmode="numeric"
              class="input input-bordered w-full" 
              bind:value={contaBradescoNumero}
            />
          </div>

          <!-- DV -->
          <div class="form-control">
            <label class="label" for="contaBradescoDV">
              <span class="label-text font-medium">DV</span>
            </label>
            <input 
              id="contaBradescoDV" 
              type="text" 
              maxlength="2"
              class="input input-bordered w-full" 
              bind:value={contaBradescoDV}
            />
          </div>

          <!-- Agência -->
          <div class="form-control">
            <label class="label" for="contaBradescoAgencia">
              <span class="label-text font-medium">Agência</span>
            </label>
            <input 
              id="contaBradescoAgencia" 
              type="text" 
              inputmode="numeric"
              class="input input-bordered w-full" 
              bind:value={contaBradescoAgencia}
            />
          </div>
        </div>
      </div>
    </div>

    <!-- Modelos de Declarações -->
    <ModelosDeclaracoes />

    <!-- Card 7: Documentação Anexa -->
    <div class="card bg-base-100 shadow-xl">
      <div class="card-body space-y-6">
        <h2 class="card-title text-xl border-b pb-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="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>
          Documentação Anexa
        </h2>

        <p class="text-sm text-base-content/70">
          Anexe os documentos necessários em formato PDF ou imagem (máximo 10MB cada)
        </p>

        {#each categoriasDocumentos as categoria}
          <div class="space-y-3">
            <h3 class="text-lg font-semibold text-primary">{categoria}</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              {#each getDocumentosByCategoria(categoria) as doc}
                <FileUpload
                  label={doc.nome}
                  helpUrl={doc.helpUrl}
                  value={documentosStorage[doc.campo]}
                  onUpload={(file) => handleDocumentoUpload(doc.campo, file)}
                  onRemove={() => handleDocumentoRemove(doc.campo)}
                  disabled={loading}
                />
              {/each}
            </div>
          </div>
        {/each}
      </div>
    </div>

    <!-- Card 8: Ações -->
    <div class="card bg-base-100 shadow-xl">
      <div class="card-body">
        <div class="flex flex-col sm:flex-row gap-3 justify-end">
          <button 
            type="button" 
            class="btn btn-ghost btn-lg" 
            disabled={loading}
            onclick={() => goto("/recursos-humanos/funcionarios")}
          >
            <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="M6 18L18 6M6 6l12 12" />
            </svg>
            Cancelar
          </button>
          <button 
            type="submit" 
            class="btn btn-primary btn-lg" 
            disabled={loading}
          >
            {#if loading}
              <span class="loading loading-spinner"></span>
              Cadastrando...
            {:else}
              <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="M5 13l4 4L19 7" />
              </svg>
              Cadastrar Funcionário
            {/if}
          </button>
        </div>
      </div>
    </div>
  </form>
</main>
