<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);
  let busca = $state("");
  let filtroRole = $state("");

  function mostrarMensagem(tipo: "success" | "error", texto: string) {
    mensagem = { tipo, texto };
    setTimeout(() => {
      mensagem = null;
    }, 3000);
  }

  const dadosFiltrados = $derived.by(() => {
    if (!matrizQuery.data) return [];
    
    let resultado = matrizQuery.data;
    
    // Filtrar por role
    if (filtroRole) {
      resultado = resultado.filter(r => r.role._id === filtroRole);
    }
    
    // Filtrar por busca
    if (busca.trim()) {
      const buscaLower = busca.toLowerCase();
      resultado = resultado.map(roleData => ({
        ...roleData,
        permissoes: roleData.permissoes.filter(p => 
          p.menuNome.toLowerCase().includes(buscaLower) ||
          p.menuPath.toLowerCase().includes(buscaLower)
        )
      })).filter(roleData => roleData.permissoes.length > 0);
    }
    
    return resultado;
  });

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

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

      if (!permissaoAtual) {
        throw new Error("Permissão não encontrada");
      }

      // Inicializar com valores atuais
      let podeAcessar = permissaoAtual.podeAcessar;
      let podeConsultar = permissaoAtual.podeConsultar;
      let podeGravar = permissaoAtual.podeGravar;

      // Aplicar lógica de dependências baseada no campo alterado
      if (campo === "podeAcessar") {
        podeAcessar = valor;
        // Se desmarcou "Acessar", desmarcar tudo
        if (!valor) {
          podeConsultar = false;
          podeGravar = false;
        }
        // Se marcou "Acessar", manter os outros valores como estão
      } else if (campo === "podeConsultar") {
        podeConsultar = valor;
        // Se marcou "Consultar", marcar "Acessar" automaticamente
        if (valor) {
          podeAcessar = true;
        } else {
          // Se desmarcou "Consultar", desmarcar "Gravar"
          podeGravar = false;
        }
      } else if (campo === "podeGravar") {
        podeGravar = valor;
        // Se marcou "Gravar", marcar "Consultar" e "Acessar" automaticamente
        if (valor) {
          podeAcessar = true;
          podeConsultar = true;
        }
        // Se desmarcou "Gravar", manter os outros como estão
      }

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

      mostrarMensagem("success", "Permissão atualizada com sucesso!");
    } catch (e: any) {
      mostrarMensagem("error", 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 });
      mostrarMensagem("success", "Permissões inicializadas!");
    } catch (e: any) {
      mostrarMensagem("error", e.message || "Erro ao inicializar permissões");
    } finally {
      salvando = false;
    }
  }
</script>

<ProtectedRoute allowedRoles={["ti_master", "admin"]} 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}

  <!-- Filtros e Busca -->
  <div class="card bg-base-100 shadow-xl mb-6">
    <div class="card-body">
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <!-- Busca por menu -->
        <div class="form-control">
          <label class="label" for="busca">
            <span class="label-text font-semibold">Buscar Menu</span>
          </label>
          <div class="relative">
            <input
              id="busca"
              type="text"
              placeholder="Digite o nome ou caminho do menu..."
              class="input input-bordered w-full pr-10"
              bind:value={busca}
            />
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-5 w-5 absolute right-3 top-3.5 text-base-content/40"
              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>
          </div>
        </div>

        <!-- Filtro por perfil -->
        <div class="form-control">
          <label class="label" for="filtroRole">
            <span class="label-text font-semibold">Filtrar por Perfil</span>
          </label>
          <select
            id="filtroRole"
            class="select select-bordered w-full"
            bind:value={filtroRole}
          >
            <option value="">Todos os perfis</option>
            {#if matrizQuery.data}
              {#each matrizQuery.data as roleData}
                <option value={roleData.role._id}>
                  {roleData.role.descricao} ({roleData.role.nome})
                </option>
              {/each}
            {/if}
          </select>
        </div>
      </div>

      {#if busca || filtroRole}
        <div class="flex items-center gap-2 mt-2">
          <span class="text-sm text-base-content/60">Filtros ativos:</span>
          {#if busca}
            <div class="badge badge-primary gap-2">
              Busca: {busca}
              <button
                class="btn btn-ghost btn-xs"
                onclick={() => (busca = "")}
                aria-label="Limpar busca"
              >
                ✕
              </button>
            </div>
          {/if}
          {#if filtroRole}
            <div class="badge badge-secondary gap-2">
              Perfil filtrado
              <button
                class="btn btn-ghost btn-xs"
                onclick={() => (filtroRole = "")}
                aria-label="Limpar filtro"
              >
                ✕
              </button>
            </div>
          {/if}
        </div>
      {/if}
    </div>
  </div>

  <!-- Informações sobre o sistema de permissões -->
  <div class="alert alert-info mb-6 shadow-lg">
    <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 text-lg">Como funciona o sistema de permissões:</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-3 mt-3">
        <div>
          <h4 class="font-semibold text-sm">Tipos de Permissão:</h4>
          <ul class="text-sm mt-1 space-y-1">
            <li>• <strong>Acessar:</strong> Visualizar menu e acessar página</li>
            <li>• <strong>Consultar:</strong> Ver dados (requer "Acessar")</li>
            <li>• <strong>Gravar:</strong> Criar/editar/excluir (requer "Consultar")</li>
          </ul>
        </div>
        <div>
          <h4 class="font-semibold text-sm">Perfis Especiais:</h4>
          <ul class="text-sm mt-1 space-y-1">
            <li>• <strong>Admin e TI:</strong> Acesso total automático</li>
            <li>• <strong>Dashboard:</strong> Público para todos</li>
            <li>• <strong>Perfil Customizado:</strong> Permissões personalizadas</li>
          </ul>
        </div>
      </div>
    </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}
    {#if dadosFiltrados.length === 0}
      <div class="card bg-base-100 shadow-xl">
        <div class="card-body items-center text-center">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-16 w-16 text-base-content/30"
            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>
          <h3 class="text-xl font-bold mt-4">Nenhum resultado encontrado</h3>
          <p class="text-base-content/60">
            {busca ? `Não foram encontrados menus com "${busca}"` : "Nenhuma permissão corresponde aos filtros aplicados"}
          </p>
          <button
            class="btn btn-primary btn-sm mt-4"
            onclick={() => {
              busca = "";
              filtroRole = "";
            }}
          >
            Limpar Filtros
          </button>
        </div>
      </div>
    {/if}
    
    {#each dadosFiltrados 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 flex-wrap gap-4">
            <div class="flex-1 min-w-[200px]">
              <div class="flex items-center gap-3 mb-2">
                <h2 class="card-title text-2xl">{roleData.role.descricao}</h2>
                <div class="badge badge-lg badge-primary">Nível {roleData.role.nivel}</div>
                {#if roleData.role.nivel <= 1}
                  <div class="badge badge-lg badge-success 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    Acesso Total
                  </div>
                {/if}
              </div>
              <p class="text-sm text-base-content/60">
                <span class="font-mono bg-base-200 px-2 py-1 rounded">{roleData.role.nome}</span>
              </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 shadow-md">
              <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>
              <div>
                <h3 class="font-bold">Perfil Administrativo</h3>
                <div class="text-sm">Este perfil possui acesso total ao sistema automaticamente, sem necessidade de configuração manual.</div>
              </div>
            </div>
          {:else}
            <div class="stats stats-vertical lg:stats-horizontal shadow mb-4 w-full">
              <div class="stat">
                <div class="stat-title">Total de Menus</div>
                <div class="stat-value text-primary">{roleData.permissoes.length}</div>
              </div>
              <div class="stat">
                <div class="stat-title">Com Acesso</div>
                <div class="stat-value text-info">{roleData.permissoes.filter(p => p.podeAcessar).length}</div>
              </div>
              <div class="stat">
                <div class="stat-title">Pode Consultar</div>
                <div class="stat-value text-success">{roleData.permissoes.filter(p => p.podeConsultar).length}</div>
              </div>
              <div class="stat">
                <div class="stat-title">Pode Gravar</div>
                <div class="stat-value text-warning">{roleData.permissoes.filter(p => p.podeGravar).length}</div>
              </div>
            </div>
            
            <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>

