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

  import { goto } from "$app/navigation";

  const client = useConvexClient();
  const usuarios = useQuery(api.usuarios.listar, {});
  
  let filtroNome = $state("");
  let filtroStatus = $state<"todos" | "ativo" | "bloqueado" | "inativo">("todos");
  let usuarioSelecionado = $state<any>(null);
  let modalAberto = $state(false);
  let modalAcao = $state<"bloquear" | "desbloquear" | "reset" | "associar">("bloquear");
  let motivo = $state("");
  let processando = $state(false);
  
  // Modal de associar funcionário
  let modalAssociarAberto = $state(false);
  let usuarioParaAssociar = $state<any>(null);
  let funcionarioSelecionadoId = $state<string>("");
  let buscaFuncionario = $state("");
  
  // Query de funcionários
  const funcionarios = useQuery(api.funcionarios.list, {});

  // Usuários filtrados
  const usuariosFiltrados = $derived.by(() => {
    if (!usuarios?.data || !Array.isArray(usuarios.data)) return [];
    
    return usuarios.data.filter(u => {
      const matchNome = !filtroNome || 
        u.nome.toLowerCase().includes(filtroNome.toLowerCase()) ||
        u.matricula.includes(filtroNome) ||
        u.email?.toLowerCase().includes(filtroNome.toLowerCase());
      
      const matchStatus = filtroStatus === "todos" ||
        (filtroStatus === "ativo" && u.ativo && !u.bloqueado) ||
        (filtroStatus === "bloqueado" && u.bloqueado) ||
        (filtroStatus === "inativo" && !u.ativo);
      
      return matchNome && matchStatus;
    });
  });
  
  // Funcionários filtrados (sem associação ou disponíveis)
  const funcionariosFiltrados = $derived.by(() => {
    if (!funcionarios?.data || !Array.isArray(funcionarios.data)) return [];
    
    return funcionarios.data.filter(f => {
      // Filtro por busca
      const matchBusca = !buscaFuncionario ||
        f.nome.toLowerCase().includes(buscaFuncionario.toLowerCase()) ||
        f.cpf?.includes(buscaFuncionario) ||
        f.matricula?.includes(buscaFuncionario);
      
      return matchBusca;
    }).sort((a, b) => a.nome.localeCompare(b.nome));
  });

  const stats = $derived.by(() => {
    if (!usuarios?.data || !Array.isArray(usuarios.data)) return null;
    return {
      total: usuarios.data.length,
      ativos: usuarios.data.filter(u => u.ativo && !u.bloqueado).length,
      bloqueados: usuarios.data.filter(u => u.bloqueado).length,
      inativos: usuarios.data.filter(u => !u.ativo).length
    };
  });

  function abrirModal(usuario: any, acao: typeof modalAcao) {
    usuarioSelecionado = usuario;
    modalAcao = acao;
    motivo = "";
    modalAberto = true;
  }

  function fecharModal() {
    modalAberto = false;
    usuarioSelecionado = null;
    motivo = "";
  }
  
  function abrirModalAssociar(usuario: any) {
    usuarioParaAssociar = usuario;
    funcionarioSelecionadoId = usuario.funcionarioId || "";
    buscaFuncionario = "";
    modalAssociarAberto = true;
  }
  
  function fecharModalAssociar() {
    modalAssociarAberto = false;
    usuarioParaAssociar = null;
    funcionarioSelecionadoId = "";
    buscaFuncionario = "";
  }
  
  async function associarFuncionario() {
    if (!usuarioParaAssociar || !funcionarioSelecionadoId) return;
    
    processando = true;
    try {
      await client.mutation(api.usuarios.associarFuncionario, {
        usuarioId: usuarioParaAssociar._id as Id<"usuarios">,
        funcionarioId: funcionarioSelecionadoId as Id<"funcionarios">
      });
      
      alert("Funcionário associado com sucesso!");
      fecharModalAssociar();
    } catch (error: any) {
      alert("Erro ao associar funcionário: " + error.message);
    } finally {
      processando = false;
    }
  }
  
  async function desassociarFuncionario() {
    if (!usuarioParaAssociar) return;
    
    if (!confirm("Deseja realmente desassociar o funcionário deste usuário?")) return;
    
    processando = true;
    try {
      await client.mutation(api.usuarios.desassociarFuncionario, {
        usuarioId: usuarioParaAssociar._id as Id<"usuarios">
      });
      
      alert("Funcionário desassociado com sucesso!");
      fecharModalAssociar();
    } catch (error: any) {
      alert("Erro ao desassociar funcionário: " + error.message);
    } finally {
      processando = false;
    }
  }

  async function executarAcao() {
    if (!usuarioSelecionado) return;
    
    if (!authStore.usuario) {
      alert("Usuário não autenticado");
      return;
    }
    
    processando = true;
    try {
      if (modalAcao === "bloquear") {
        await client.mutation(api.usuarios.bloquearUsuario, {
          usuarioId: usuarioSelecionado._id as Id<"usuarios">,
          motivo,
          bloqueadoPorId: authStore.usuario._id as Id<"usuarios">
        });
      } else if (modalAcao === "desbloquear") {
        await client.mutation(api.usuarios.desbloquearUsuario, {
          usuarioId: usuarioSelecionado._id as Id<"usuarios">,
          desbloqueadoPorId: authStore.usuario._id as Id<"usuarios">
        });
      } else if (modalAcao === "reset") {
        await client.mutation(api.usuarios.resetarSenhaUsuario, {
          usuarioId: usuarioSelecionado._id as Id<"usuarios">,
          resetadoPorId: authStore.usuario._id as Id<"usuarios">
        });
      }
      
      fecharModal();
    } catch (error) {
      console.error("Erro ao executar ação:", error);
      alert("Erro ao executar ação. Veja o console.");
    } finally {
      processando = false;
    }
  }
</script>

<div class="container mx-auto px-4 py-6 max-w-7xl">
  <!-- Header -->
  <div class="flex items-center justify-between mb-6">
    <div>
      <h1 class="text-3xl font-bold text-base-content">Gestão de Usuários</h1>
      <p class="text-base-content/60 mt-1">Gerenciar usuários do sistema</p>
    </div>
    <a href="/ti/usuarios/criar" class="btn btn-primary">
      <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="M12 4v16m8-8H4" />
      </svg>
      Criar Usuário
    </a>
  </div>

  <!-- Stats -->
  {#if stats}
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
      <div class="stat bg-base-100 shadow rounded-lg">
        <div class="stat-title">Total</div>
        <div class="stat-value text-primary">{stats.total}</div>
      </div>
      <div class="stat bg-base-100 shadow rounded-lg">
        <div class="stat-title">Ativos</div>
        <div class="stat-value text-success">{stats.ativos}</div>
      </div>
      <div class="stat bg-base-100 shadow rounded-lg">
        <div class="stat-title">Bloqueados</div>
        <div class="stat-value text-error">{stats.bloqueados}</div>
      </div>
      <div class="stat bg-base-100 shadow rounded-lg">
        <div class="stat-title">Inativos</div>
        <div class="stat-value text-warning">{stats.inativos}</div>
      </div>
    </div>
  {/if}

  <!-- Filtros -->
  <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">
        <div class="form-control">
          <label class="label" for="buscar-usuario-input">
            <span class="label-text">Buscar por nome, matrícula ou email</span>
          </label>
          <input 
            id="buscar-usuario-input"
            type="text" 
            bind:value={filtroNome}
            placeholder="Digite para buscar..." 
            class="input input-bordered"
          />
        </div>
        
        <div class="form-control">
          <label class="label" for="filtro-status-select">
            <span class="label-text">Filtrar por status</span>
          </label>
          <select id="filtro-status-select" bind:value={filtroStatus} class="select select-bordered">
            <option value="todos">Todos</option>
            <option value="ativo">Ativos</option>
            <option value="bloqueado">Bloqueados</option>
            <option value="inativo">Inativos</option>
          </select>
        </div>
      </div>
    </div>
  </div>

  <!-- Tabela -->
  <div class="card bg-base-100 shadow-xl">
    <div class="card-body">
      <h2 class="card-title mb-4">
        Usuários ({usuariosFiltrados.length})
      </h2>
      
      <div class="overflow-x-auto">
        <table class="table table-zebra">
          <thead>
            <tr>
              <th>Matrícula</th>
              <th>Nome</th>
              <th>Email</th>
              <th>Funcionário</th>
              <th>Status</th>
              <th>Ações</th>
            </tr>
          </thead>
          <tbody>
            {#each usuariosFiltrados as usuario}
              <tr>
                <td class="font-mono">{usuario.matricula}</td>
                <td>{usuario.nome}</td>
                <td>{usuario.email || "-"}</td>
                <td>
                  {#if usuario.funcionarioId}
                    <div class="badge badge-success gap-2">
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                      </svg>
                      Associado
                    </div>
                  {:else}
                    <div class="badge badge-warning gap-2">
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                      </svg>
                      Não associado
                    </div>
                  {/if}
                </td>
                <td>
                  <UserStatusBadge ativo={usuario.ativo} bloqueado={usuario.bloqueado} />
                </td>
                <td>
                  <div class="flex gap-2 flex-wrap">
                    <!-- Botão Associar Funcionário -->
                    <button 
                      class="btn btn-sm btn-info"
                      onclick={() => abrirModalAssociar(usuario)}
                      title={usuario.funcionarioId ? "Alterar funcionário associado" : "Associar funcionário"}
                    >
                      <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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                      </svg>
                      {usuario.funcionarioId ? "Alterar" : "Associar"}
                    </button>
                    
                    {#if usuario.bloqueado}
                      <button 
                        class="btn btn-sm btn-success"
                        onclick={() => abrirModal(usuario, "desbloquear")}
                      >
                        <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="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z" />
                        </svg>
                        Desbloquear
                      </button>
                    {:else}
                      <button 
                        class="btn btn-sm btn-error"
                        onclick={() => abrirModal(usuario, "bloquear")}
                      >
                        <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="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                        </svg>
                        Bloquear
                      </button>
                    {/if}
                    
                    <button 
                      class="btn btn-sm btn-warning"
                      onclick={() => abrirModal(usuario, "reset")}
                    >
                      <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 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
                      </svg>
                      Reset Senha
                    </button>
                  </div>
                </td>
              </tr>
            {:else}
              <tr>
                <td colspan="5" class="text-center py-8 text-base-content/60">
                  Nenhum usuário encontrado
                </td>
              </tr>
            {/each}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<!-- Modal -->
{#if modalAberto}
  <div class="modal modal-open">
    <div class="modal-box">
      <h3 class="font-bold text-lg mb-4">
        {modalAcao === "bloquear" ? "Bloquear Usuário" : 
         modalAcao === "desbloquear" ? "Desbloquear Usuário" : 
         "Resetar Senha"}
      </h3>
      
      <div class="mb-4">
        <p class="text-base-content/80">
          <strong>Usuário:</strong> {usuarioSelecionado?.nome} ({usuarioSelecionado?.matricula})
        </p>
      </div>

      {#if modalAcao === "bloquear"}
        <div class="form-control mb-4">
          <label class="label" for="motivo-bloqueio-textarea">
            <span class="label-text">Motivo do bloqueio *</span>
          </label>
          <textarea 
            id="motivo-bloqueio-textarea"
            bind:value={motivo}
            class="textarea textarea-bordered" 
            placeholder="Digite o motivo..."
            rows="3"
          ></textarea>
        </div>
      {/if}

      {#if modalAcao === "reset"}
        <div class="alert alert-info mb-4">
          <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>
          <span>Uma senha temporária será gerada automaticamente.</span>
        </div>
      {/if}

      <div class="modal-action">
        <button 
          class="btn btn-ghost" 
          onclick={fecharModal}
          disabled={processando}
        >
          Cancelar
        </button>
        <button 
          class="btn btn-primary"
          onclick={executarAcao}
          disabled={processando || (modalAcao === "bloquear" && !motivo.trim())}
        >
          {#if processando}
            <span class="loading loading-spinner loading-sm"></span>
          {/if}
          Confirmar
        </button>
      </div>
    </div>
    <!-- svelte-ignore a11y_click_events_have_key_events -->
    <!-- svelte-ignore a11y_no_static_element_interactions -->
    <div class="modal-backdrop" onclick={fecharModal}></div>
  </div>
{/if}

<!-- Modal Associar Funcionário -->
{#if modalAssociarAberto && usuarioParaAssociar}
  <div class="modal modal-open">
    <div class="modal-box max-w-2xl">
      <h3 class="font-bold text-lg mb-4">
        Associar Funcionário ao Usuário
      </h3>
      
      <div class="mb-6">
        <p class="text-base-content/80 mb-2">
          <strong>Usuário:</strong> {usuarioParaAssociar.nome} ({usuarioParaAssociar.matricula})
        </p>
        
        {#if usuarioParaAssociar.funcionarioId}
          <div class="alert alert-info">
            <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>
            <span>Este usuário já possui um funcionário associado. Você pode alterá-lo ou desassociá-lo.</span>
          </div>
        {/if}
      </div>

      <!-- Busca de Funcionários -->
      <div class="form-control mb-4">
        <label for="busca-funcionario" class="label">
          <span class="label-text">Buscar Funcionário</span>
        </label>
        <input 
          id="busca-funcionario"
          type="text" 
          bind:value={buscaFuncionario}
          placeholder="Digite nome, CPF ou matrícula..." 
          class="input input-bordered"
        />
      </div>

      <!-- Lista de Funcionários -->
      <div class="form-control mb-6">
        <div class="label">
          <span class="label-text">Selecione o Funcionário *</span>
        </div>
        
        <div class="border rounded-lg max-h-96 overflow-y-auto">
          {#if funcionariosFiltrados.length === 0}
            <div class="p-4 text-center text-base-content/60">
              {buscaFuncionario ? "Nenhum funcionário encontrado com esse critério" : "Carregando funcionários..."}
            </div>
          {:else}
            {#each funcionariosFiltrados as func}
              <label class="flex items-center gap-3 p-3 hover:bg-base-200 cursor-pointer border-b last:border-b-0">
                <input 
                  type="radio" 
                  name="funcionario" 
                  value={func._id}
                  bind:group={funcionarioSelecionadoId}
                  class="radio radio-primary" 
                />
                <div class="flex-1">
                  <div class="font-semibold">{func.nome}</div>
                  <div class="text-sm text-base-content/70">
                    CPF: {func.cpf || "N/A"}
                    {#if func.matricula}
                      | Matrícula: {func.matricula}
                    {/if}
                  </div>
                  {#if func.descricaoCargo}
                    <div class="text-xs text-base-content/60">{func.descricaoCargo}</div>
                  {/if}
                </div>
              </label>
            {/each}
          {/if}
        </div>
      </div>

      <!-- Ações -->
      <div class="modal-action">
        <button 
          class="btn btn-ghost" 
          onclick={fecharModalAssociar}
          disabled={processando}
        >
          Cancelar
        </button>
        
        {#if usuarioParaAssociar.funcionarioId}
          <button 
            class="btn btn-error"
            onclick={desassociarFuncionario}
            disabled={processando}
          >
            {#if processando}
              <span class="loading loading-spinner loading-sm"></span>
            {/if}
            Desassociar
          </button>
        {/if}
        
        <button 
          class="btn btn-primary"
          onclick={associarFuncionario}
          disabled={processando || !funcionarioSelecionadoId}
        >
          {#if processando}
            <span class="loading loading-spinner loading-sm"></span>
          {/if}
          {usuarioParaAssociar.funcionarioId ? "Alterar" : "Associar"}
        </button>
      </div>
    </div>
    <!-- svelte-ignore a11y_click_events_have_key_events -->
    <!-- svelte-ignore a11y_no_static_element_interactions -->
    <div class="modal-backdrop" onclick={fecharModalAssociar}></div>
  </div>
{/if}

