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

<main class="container mx-auto px-4 py-4">
  <h1 class="text-3xl font-bold text-primary mb-6">Tecnologia da Informação</h1>

  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Card Painel Administrativo -->
    <div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow">
      <div class="card-body">
        <div class="flex items-center gap-4 mb-4">
          <div class="p-3 bg-primary/20 rounded-lg">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-8 w-8 text-primary"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
              />
            </svg>
          </div>
          <h2 class="card-title text-xl">Painel Administrativo</h2>
        </div>
        <p class="text-base-content/70 mb-4">
          Acesso restrito para gerenciamento de solicitações de acesso ao sistema e outras configurações administrativas.
        </p>
        <div class="card-actions justify-end">
          <a href="/ti/painel-administrativo" class="btn btn-primary">
            Acessar Painel
          </a>
        </div>
      </div>
    </div>

    <!-- Card Suporte Técnico -->
    <div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow">
      <div class="card-body">
        <div class="flex items-center gap-4 mb-4">
          <div class="p-3 bg-primary/20 rounded-lg">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-8 w-8 text-primary"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"
              />
            </svg>
          </div>
          <h2 class="card-title text-xl">Suporte Técnico</h2>
        </div>
        <p class="text-base-content/70 mb-4">
          Central de atendimento para resolução de problemas técnicos e dúvidas sobre o sistema.
        </p>
        <div class="card-actions justify-end">
          <button class="btn btn-primary" disabled>
            Em breve
          </button>
        </div>
      </div>
    </div>

    <!-- Card Gerenciar Permissões -->
    <div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow">
      <div class="card-body">
        <div class="flex items-center gap-4 mb-4">
          <div class="p-3 bg-success/20 rounded-lg">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-8 w-8 text-success"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
              />
            </svg>
          </div>
          <h2 class="card-title text-xl">Gerenciar Permissões</h2>
        </div>
        <p class="text-base-content/70 mb-4">
          Configure as permissões de acesso aos menus do sistema por função. Controle quem pode acessar, consultar e gravar dados.
        </p>
        <div class="card-actions justify-end">
          <a href="/ti/painel-permissoes" class="btn btn-success">
            Configurar Permissões
          </a>
        </div>
      </div>
    </div>

    <!-- Card Personalizar por Matrícula -->
    <div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow">
      <div class="card-body">
        <div class="flex items-center gap-4 mb-4">
          <div class="p-3 bg-info/20 rounded-lg">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-8 w-8 text-info"
              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>
          <h2 class="card-title text-xl">Personalizar por Matrícula</h2>
        </div>
        <p class="text-base-content/70 mb-4">
          Configure permissões específicas para usuários individuais por matrícula, sobrepondo as permissões da função.
        </p>
        <div class="card-actions justify-end">
          <a href="/ti/personalizar-permissoes" class="btn btn-info">
            Personalizar Acessos
          </a>
        </div>
      </div>
    </div>

    <!-- Card Documentação -->
    <div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow">
      <div class="card-body">
        <div class="flex items-center gap-4 mb-4">
          <div class="p-3 bg-primary/20 rounded-lg">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-8 w-8 text-primary"
              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>
          <h2 class="card-title text-xl">Documentação</h2>
        </div>
        <p class="text-base-content/70 mb-4">
          Manuais, guias e documentação técnica do sistema para usuários e administradores.
        </p>
        <div class="card-actions justify-end">
          <button class="btn btn-primary" disabled>
            Em breve
          </button>
        </div>
      </div>
    </div>
  </div>

  <div class="alert alert-info mt-8">
    <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">Área Restrita</h3>
      <div class="text-sm">
        Esta é uma área de acesso restrito. Apenas usuários autorizados pela equipe de TI podem acessar o Painel Administrativo.
      </div>
    </div>
  </div>
</main>

