<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 Configuração de Email -->
    <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-secondary/20 rounded-lg">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-8 w-8 text-secondary"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
              />
            </svg>
          </div>
          <h2 class="card-title text-xl">Configuração de Email</h2>
        </div>
        <p class="text-base-content/70 mb-4">
          Configure o servidor SMTP para envio automático de notificações e emails do sistema.
        </p>
        <div class="card-actions justify-end">
          <a href="/ti/configuracoes-email" class="btn btn-secondary">
            Configurar SMTP
          </a>
        </div>
      </div>
    </div>

    <!-- Card Gerenciar Usuários -->
    <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-accent/20 rounded-lg">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-8 w-8 text-accent"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
              />
            </svg>
          </div>
          <h2 class="card-title text-xl">Gerenciar Usuários</h2>
        </div>
        <p class="text-base-content/70 mb-4">
          Criar, editar, bloquear e gerenciar usuários do sistema. Controle total sobre contas de acesso.
        </p>
        <div class="card-actions justify-end">
          <a href="/ti/usuarios" class="btn btn-accent">
            Gerenciar Usuários
          </a>
        </div>
      </div>
    </div>

    <!-- Card Gerenciar Perfis -->
    <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-warning/20 rounded-lg">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-8 w-8 text-warning"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
              />
            </svg>
          </div>
          <h2 class="card-title text-xl">Gerenciar Perfis</h2>
        </div>
        <p class="text-base-content/70 mb-4">
          Crie e gerencie perfis de acesso personalizados com permissões específicas para grupos de usuários.
        </p>
        <div class="card-actions justify-end">
          <a href="/ti/perfis" class="btn btn-warning">
            Gerenciar Perfis
          </a>
        </div>
      </div>
    </div>

    <!-- Card Notificações e Mensagens -->
    <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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
              />
            </svg>
          </div>
          <h2 class="card-title text-xl">Notificações e Mensagens</h2>
        </div>
        <p class="text-base-content/70 mb-4">
          Envie notificações para usuários do sistema via chat ou email. Configure templates de mensagens reutilizáveis.
        </p>
        <div class="card-actions justify-end">
          <a href="/ti/notificacoes" class="btn btn-info">
            Acessar Painel
          </a>
        </div>
      </div>
    </div>

    <!-- Card Monitorar SGSE -->
    <div class="card bg-gradient-to-br from-error/10 to-error/5 shadow-xl hover:shadow-2xl transition-all duration-300 hover:scale-105 border-2 border-error/20">
      <div class="card-body">
        <div class="flex items-center gap-4 mb-4">
          <div class="p-3 bg-gradient-to-br from-error/30 to-error/20 rounded-2xl shadow-lg">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-10 w-10 text-error"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"
              />
            </svg>
          </div>
          <h2 class="card-title text-xl text-error">Monitorar SGSE</h2>
        </div>
        <p class="text-base-content/70 mb-4">
          Monitore em tempo real as métricas técnicas do sistema: CPU, memória, rede, usuários online e muito mais. Configure alertas personalizados.
        </p>
        <div class="flex items-center gap-2 mb-4">
          <div class="badge badge-error badge-sm">Tempo Real</div>
          <div class="badge badge-outline badge-sm">Alertas</div>
          <div class="badge badge-outline badge-sm">Relatórios</div>
        </div>
        <div class="card-actions justify-end">
          <a href="/ti/monitoramento" class="btn btn-error shadow-lg hover:shadow-error/30">
            <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="M13 10V3L4 14h7v7l9-11h-7z" />
            </svg>
            Monitorar Sistema
          </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 type="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>

