<script lang="ts">
  import { goto } from "$app/navigation";
</script>

<main class="container mx-auto px-4 py-6 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>Atestados & Licenças</li>
    </ul>
  </div>

  <!-- Header -->
  <div class="mb-6">
    <div class="flex items-center justify-between">
      <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">Atestados & Licenças</h1>
          <p class="text-base-content/70">Registro de atestados médicos e licenças</p>
        </div>
      </div>
      <button class="btn btn-ghost gap-2" onclick={() => goto("/recursos-humanos")}>
        <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
      </button>
    </div>
  </div>

  <!-- Alert de desenvolvimento -->
  <div class="alert alert-info shadow-lg">
    <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>
    <div>
      <h3 class="font-bold">Módulo em Desenvolvimento</h3>
      <div class="text-sm">Esta funcionalidade está em desenvolvimento e estará disponível em breve.</div>
    </div>
  </div>

  <!-- Preview do que virá -->
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6 opacity-60">
    <div class="card bg-base-100 shadow-xl">
      <div class="card-body">
        <h2 class="card-title">Registrar Atestado</h2>
        <p class="text-sm text-base-content/70">Cadastre atestados médicos</p>
        <div class="card-actions justify-end mt-4">
          <button class="btn btn-sm btn-disabled">Em breve</button>
        </div>
      </div>
    </div>

    <div class="card bg-base-100 shadow-xl">
      <div class="card-body">
        <h2 class="card-title">Registrar Licença</h2>
        <p class="text-sm text-base-content/70">Cadastre licenças e afastamentos</p>
        <div class="card-actions justify-end mt-4">
          <button class="btn btn-sm btn-disabled">Em breve</button>
        </div>
      </div>
    </div>

    <div class="card bg-base-100 shadow-xl">
      <div class="card-body">
        <h2 class="card-title">Histórico</h2>
        <p class="text-sm text-base-content/70">Consulte histórico de atestados e licenças</p>
        <div class="card-actions justify-end mt-4">
          <button class="btn btn-sm btn-disabled">Em breve</button>
        </div>
      </div>
    </div>

    <div class="card bg-base-100 shadow-xl">
      <div class="card-body">
        <h2 class="card-title">Estatísticas</h2>
        <p class="text-sm text-base-content/70">Visualize estatísticas e relatórios</p>
        <div class="card-actions justify-end mt-4">
          <button class="btn btn-sm btn-disabled">Em breve</button>
        </div>
      </div>
    </div>
  </div>
</main>

