<script lang="ts">
  import { useQuery, useConvexClient } from "convex-svelte";
  import { api } from "@sgse-app/backend/convex/_generated/api";
  import ProtectedRoute from "$lib/components/ProtectedRoute.svelte";
  import { goto } from "$app/navigation";
  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";

  const client = useConvexClient();

  // Buscar matriz de permissões
  const matrizQuery = useQuery(api.menuPermissoes.obterMatrizPermissoes, {});

  let salvando = $state(false);
  let mensagem = $state<{ tipo: "success" | "error"; texto: string } | null>(null);

  async function atualizarPermissao(
    roleId: Id<"roles">,
    menuPath: string,
    campo: "podeAcessar" | "podeConsultar" | "podeGravar",
    valor: boolean
  ) {
    try {
      salvando = true;

      // Se está marcando podeGravar, deve marcar podeConsultar e podeAcessar também
      let podeAcessar = valor;
      let podeConsultar = valor;
      let podeGravar = campo === "podeGravar" ? valor : false;

      if (campo === "podeConsultar") {
        podeConsultar = valor;
        podeGravar = false; // Desmarcar gravar se desmarcou consultar
      }

      if (campo === "podeAcessar") {
        podeAcessar = valor;
        if (!valor) {
          podeConsultar = false;
          podeGravar = false;
        }
      }

      // Buscar a permissão atual para aplicar lógica correta
      const roleData = matrizQuery.data?.find((r) => r.role._id === roleId);
      const permissaoAtual = roleData?.permissoes.find((p) => p.menuPath === menuPath);

      if (permissaoAtual) {
        // Aplicar lógica de dependências
        if (campo === "podeGravar" && valor) {
          podeAcessar = true;
          podeConsultar = true;
          podeGravar = true;
        } else if (campo === "podeConsultar" && valor) {
          podeAcessar = true;
          podeConsultar = true;
          podeGravar = permissaoAtual.podeGravar;
        } else if (campo === "podeAcessar" && !valor) {
          podeAcessar = false;
          podeConsultar = false;
          podeGravar = false;
        } else if (campo === "podeConsultar" && !valor) {
          podeAcessar = permissaoAtual.podeAcessar;
          podeConsultar = false;
          podeGravar = false;
        } else if (campo === "podeGravar" && !valor) {
          podeAcessar = permissaoAtual.podeAcessar;
          podeConsultar = permissaoAtual.podeConsultar;
          podeGravar = false;
        } else {
          podeAcessar = permissaoAtual.podeAcessar;
          podeConsultar = permissaoAtual.podeConsultar;
          podeGravar = permissaoAtual.podeGravar;
        }
      }

      await client.mutation(api.menuPermissoes.atualizarPermissao, {
        roleId,
        menuPath,
        podeAcessar,
        podeConsultar,
        podeGravar,
      });

      mensagem = { tipo: "success", texto: "Permissão atualizada com sucesso!" };
      setTimeout(() => {
        mensagem = null;
      }, 3000);
    } catch (e: any) {
      mensagem = { tipo: "error", texto: e.message || "Erro ao atualizar permissão" };
    } finally {
      salvando = false;
    }
  }

  async function inicializarPermissoes(roleId: Id<"roles">) {
    try {
      salvando = true;
      await client.mutation(api.menuPermissoes.inicializarPermissoesRole, { roleId });
      mensagem = { tipo: "success", texto: "Permissões inicializadas!" };
      setTimeout(() => {
        mensagem = null;
      }, 3000);
    } catch (e: any) {
      mensagem = { tipo: "error", texto: e.message || "Erro ao inicializar permissões" };
    } finally {
      salvando = false;
    }
  }
</script>

<ProtectedRoute allowedRoles={["admin", "ti"]} maxLevel={1}>
  <!-- Breadcrumb -->
  <div class="text-sm breadcrumbs mb-4">
    <ul>
      <li>
        <a href="/" class="text-primary hover:text-primary-focus">
          <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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
          </svg>
          Dashboard
        </a>
      </li>
      <li>
        <a href="/ti" class="text-primary hover:text-primary-focus">TI</a>
      </li>
      <li class="font-semibold">Gerenciar Permissões</li>
    </ul>
  </div>

  <!-- Header -->
  <div class="mb-6">
    <div class="flex items-center gap-3 mb-2">
      <div class="p-3 bg-primary/10 rounded-xl">
        <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 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>
      <div class="flex-1">
        <h1 class="text-3xl font-bold text-base-content">Gerenciar Permissões de Acesso</h1>
        <p class="text-base-content/60 mt-1">Configure as permissões de acesso aos menus do sistema por função</p>
      </div>
      <button class="btn btn-ghost gap-2" onclick={() => goto("/ti")}>
        <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>

  <!-- Alertas -->
  {#if mensagem}
    <div class="alert mb-6 shadow-lg" class:alert-success={mensagem.tipo === "success"} class:alert-error={mensagem.tipo === "error"}>
      {#if mensagem.tipo === "success"}
        <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
          <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" />
        </svg>
      {:else}
        <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
          <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" />
        </svg>
      {/if}
      <span class="font-semibold">{mensagem.texto}</span>
    </div>
  {/if}

  <!-- Informações sobre o sistema de permissões -->
  <div class="alert alert-info mb-6">
    <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
      <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" />
    </svg>
    <div>
      <h3 class="font-bold">Como funciona:</h3>
      <ul class="text-sm mt-2 space-y-1">
        <li>• <strong>Acessar:</strong> Permite visualizar o menu e entrar na página</li>
        <li>• <strong>Consultar:</strong> Permite visualizar dados (requer "Acessar")</li>
        <li>• <strong>Gravar:</strong> Permite criar, editar e excluir dados (requer "Consultar")</li>
        <li>• <strong>Admin e TI:</strong> Têm acesso total automático a todos os recursos</li>
        <li>• <strong>Dashboard e Solicitar Acesso:</strong> São públicos para todos os usuários</li>
      </ul>
    </div>
  </div>

  <!-- Matriz de Permissões -->
  {#if matrizQuery.isLoading}
    <div class="flex justify-center items-center py-12">
      <span class="loading loading-spinner loading-lg text-primary"></span>
    </div>
  {:else if matrizQuery.error}
    <div class="alert alert-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">
        <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" />
      </svg>
      <span>Erro ao carregar permissões: {matrizQuery.error.message}</span>
    </div>
  {:else if matrizQuery.data}
    {#each matrizQuery.data as roleData}
      <div class="card bg-base-100 shadow-xl mb-6">
        <div class="card-body">
          <div class="flex items-center justify-between mb-4">
            <div>
              <h2 class="card-title text-xl">
                {roleData.role.nome}
                <div class="badge badge-primary">Nível {roleData.role.nivel}</div>
                {#if roleData.role.nivel <= 1}
                  <div class="badge badge-success">Acesso Total</div>
                {/if}
              </h2>
              <p class="text-sm text-base-content/60 mt-1">{roleData.role.descricao}</p>
            </div>
            
            {#if roleData.role.nivel > 1}
              <button
                class="btn btn-sm btn-outline btn-primary"
                onclick={() => inicializarPermissoes(roleData.role._id)}
                disabled={salvando}
              >
                <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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                </svg>
                Inicializar Permissões
              </button>
            {/if}
          </div>

          {#if roleData.role.nivel <= 1}
            <div class="alert alert-success">
              <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
                <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" />
              </svg>
              <span>Esta função possui acesso total ao sistema automaticamente.</span>
            </div>
          {:else}
            <div class="overflow-x-auto">
              <table class="table table-zebra table-sm">
                <thead class="bg-base-200">
                  <tr>
                    <th class="w-1/3">Menu</th>
                    <th class="text-center">
                      <div class="flex items-center justify-center gap-1">
                        <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                        </svg>
                        Acessar
                      </div>
                    </th>
                    <th class="text-center">
                      <div class="flex items-center justify-center gap-1">
                        <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                        </svg>
                        Consultar
                      </div>
                    </th>
                    <th class="text-center">
                      <div class="flex items-center justify-center gap-1">
                        <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="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>
                        Gravar
                      </div>
                    </th>
                  </tr>
                </thead>
                <tbody>
                  {#each roleData.permissoes as permissao}
                    <tr class="hover">
                      <td>
                        <div class="flex flex-col">
                          <span class="font-semibold">{permissao.menuNome}</span>
                          <span class="text-xs text-base-content/60">{permissao.menuPath}</span>
                        </div>
                      </td>
                      <td class="text-center">
                        <input
                          type="checkbox"
                          class="checkbox checkbox-primary"
                          checked={permissao.podeAcessar}
                          disabled={salvando}
                          onchange={(e) =>
                            atualizarPermissao(
                              roleData.role._id,
                              permissao.menuPath,
                              "podeAcessar",
                              e.currentTarget.checked
                            )}
                        />
                      </td>
                      <td class="text-center">
                        <input
                          type="checkbox"
                          class="checkbox checkbox-info"
                          checked={permissao.podeConsultar}
                          disabled={salvando || !permissao.podeAcessar}
                          onchange={(e) =>
                            atualizarPermissao(
                              roleData.role._id,
                              permissao.menuPath,
                              "podeConsultar",
                              e.currentTarget.checked
                            )}
                        />
                      </td>
                      <td class="text-center">
                        <input
                          type="checkbox"
                          class="checkbox checkbox-success"
                          checked={permissao.podeGravar}
                          disabled={salvando || !permissao.podeConsultar}
                          onchange={(e) =>
                            atualizarPermissao(
                              roleData.role._id,
                              permissao.menuPath,
                              "podeGravar",
                              e.currentTarget.checked
                            )}
                        />
                      </td>
                    </tr>
                  {/each}
                </tbody>
              </table>
            </div>
          {/if}
        </div>
      </div>
    {/each}
  {/if}
</ProtectedRoute>

