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

  const client = useConvexClient();
  const roles = useQuery(api.roles.listar, {});
  const funcionarios = useQuery(api.funcionarios.getAll, {});

  // Debug - Remover após teste
  $effect(() => {
    console.log("=== DEBUG PERFIS ===");
    console.log("roles:", roles);
    console.log("roles?.data:", roles?.data);
    console.log("É array?", Array.isArray(roles?.data));
    if (roles?.data) {
      console.log("Quantidade de perfis:", roles.data.length);
      console.log("Perfis:", roles.data);
    }
  });

  // Estados do formulário
  let matricula = $state("");
  let nome = $state("");
  let email = $state("");
  let roleId = $state("");
  let funcionarioId = $state("");
  let senhaInicial = $state("");
  let confirmarSenha = $state("");
  let processando = $state(false);
  let mensagem = $state<{ tipo: "success" | "error"; texto: string } | null>(null);

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

  async function handleSubmit(e: Event) {
    e.preventDefault();

    // Validações
    const matriculaStr = String(matricula).trim();
    if (!matriculaStr || !nome.trim() || !email.trim() || !roleId || !senhaInicial) {
      mostrarMensagem("error", "Preencha todos os campos obrigatórios");
      return;
    }

    if (senhaInicial !== confirmarSenha) {
      mostrarMensagem("error", "As senhas não conferem");
      return;
    }

    if (senhaInicial.length < 8) {
      mostrarMensagem("error", "A senha deve ter no mínimo 8 caracteres");
      return;
    }

    processando = true;

    try {
      const resultado = await client.mutation(api.usuarios.criar, {
        matricula: matriculaStr,
        nome: nome.trim(),
        email: email.trim(),
        roleId: roleId as Id<"roles">,
        funcionarioId: funcionarioId ? (funcionarioId as Id<"funcionarios">) : undefined,
        senhaInicial: senhaInicial,
      });

      if (resultado.sucesso) {
        if (senhaGerada) {
          mostrarMensagem(
            "success",
            `Usuário criado! SENHA TEMPORÁRIA: ${senhaGerada} - Anote esta senha, ela não será exibida novamente!`
          );
          setTimeout(() => {
            goto("/ti/usuarios");
          }, 5000);
        } else {
          mostrarMensagem("success", "Usuário criado com sucesso!");
          setTimeout(() => {
            goto("/ti/usuarios");
          }, 2000);
        }
      } else {
        mostrarMensagem("error", resultado.erro);
      }
    } catch (error: any) {
      mostrarMensagem("error", error.message || "Erro ao criar usuário");
    } finally {
      processando = false;
    }
  }

  let senhaGerada = $state("");
  let mostrarSenha = $state(false);

  // Auto-completar ao selecionar funcionário
  $effect(() => {
    if (funcionarioId && funcionarios?.data) {
      const funcSelecionado = funcionarios.data.find((f: any) => f._id === funcionarioId);
      if (funcSelecionado) {
        email = funcSelecionado.email || email;
        nome = funcSelecionado.nome || nome;
        matricula = funcSelecionado.matricula || matricula;
      }
    }
  });

  function gerarSenhaAleatoria() {
    const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@#$!";
    let senha = "";
    for (let i = 0; i < 12; i++) {
      senha += chars.charAt(Math.floor(Math.random() * chars.length));
    }
    senhaInicial = senha;
    confirmarSenha = senha;
    senhaGerada = senha;
    mostrarSenha = true;
  }

  function copiarSenha() {
    if (senhaGerada) {
      navigator.clipboard.writeText(senhaGerada);
      mostrarMensagem("success", "Senha copiada para área de transferência!");
    }
  }
</script>

<ProtectedRoute allowedRoles={["ti_master", "admin"]} maxLevel={1}>
  <div class="container mx-auto px-4 py-6 max-w-4xl">
    <!-- Header -->
    <div class="mb-8">
      <div class="flex items-center justify-between mb-4">
        <div class="flex items-center gap-4">
          <div class="p-3 bg-primary/10 rounded-xl">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-10 w-10 text-primary"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"
              />
            </svg>
          </div>
          <div>
            <h1 class="text-3xl font-bold text-base-content">Criar Novo Usuário</h1>
            <p class="text-base-content/60 mt-1">Cadastre um novo usuário no sistema</p>
          </div>
        </div>
        <a href="/ti/usuarios" class="btn btn-outline btn-primary gap-2">
          <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 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>
          Voltar para Usuários
        </a>
      </div>
    </div>

    <!-- Breadcrumbs -->
    <div class="text-sm breadcrumbs mb-6">
      <ul>
        <li><a href="/ti/painel-administrativo">Dashboard TI</a></li>
        <li><a href="/ti/usuarios">Usuários</a></li>
        <li>Criar Usuário</li>
      </ul>
    </div>

    <!-- Mensagens -->
    {#if mensagem}
      <div
        class="alert mb-6"
        class:alert-success={mensagem.tipo === "success"}
        class:alert-error={mensagem.tipo === "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"
        >
          {#if mensagem.tipo === "success"}
            <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"
            />
          {:else}
            <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"
            />
          {/if}
        </svg>
        <span>{mensagem.texto}</span>
      </div>
    {/if}

    <!-- Formulário -->
    <div class="card bg-base-100 shadow-2xl border border-base-300">
      <div class="card-body">
        <div class="flex items-center gap-3 mb-6">
          <div class="p-2 bg-primary/10 rounded-lg">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-6 w-6 text-primary"
              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-2xl">Informações do Usuário</h2>
        </div>

        <form onsubmit={handleSubmit}>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- Funcionário (primeiro) -->
            <div class="form-control md:col-span-2">
              <label class="label" for="funcionario">
                <span class="label-text font-semibold">Vincular Funcionário (Opcional)</span>
              </label>
              <select
                id="funcionario"
                class="select select-bordered"
                bind:value={funcionarioId}
                disabled={processando || !funcionarios?.data}
              >
                <option value="">Selecione um funcionário para auto-completar dados</option>
                {#if funcionarios?.data}
                  {#each funcionarios.data as func}
                    <option value={func._id}>{func.nome} - Mat: {func.matricula}</option>
                  {/each}
                {/if}
              </select>
              <div class="label">
                <span class="label-text-alt">Ao selecionar, os campos serão preenchidos automaticamente</span>
              </div>
            </div>

            <!-- Matrícula -->
            <div class="form-control">
              <label class="label" for="matricula">
                <span class="label-text font-semibold">Matrícula *</span>
              </label>
              <input
                id="matricula"
                type="number"
                placeholder="Ex: 12345"
                class="input input-bordered"
                bind:value={matricula}
                required
                disabled={processando}
              />
            </div>

            <!-- Nome -->
            <div class="form-control">
              <label class="label" for="nome">
                <span class="label-text font-semibold">Nome Completo *</span>
              </label>
              <input
                id="nome"
                type="text"
                placeholder="Ex: João da Silva"
                class="input input-bordered"
                bind:value={nome}
                required
                disabled={processando}
              />
            </div>

            <!-- Email -->
            <div class="form-control md:col-span-2">
              <label class="label" for="email">
                <span class="label-text font-semibold">E-mail *</span>
              </label>
              <input
                id="email"
                type="email"
                placeholder="usuario@sgse.pe.gov.br"
                class="input input-bordered"
                bind:value={email}
                required
                disabled={processando}
              />
            </div>

            <!-- Perfil/Role -->
            <div class="form-control">
              <label class="label" for="role">
                <span class="label-text font-semibold">Perfil de Acesso *</span>
              </label>
              <select
                id="role"
                class="select select-bordered"
                bind:value={roleId}
                required
                disabled={processando || !roles?.data}
              >
                <option value="">Selecione um perfil</option>
                {#if roles?.data && Array.isArray(roles.data)}
                  {#each roles.data as role}
                    <option value={role._id}>
                      {role.descricao} ({role.nome})
                    </option>
                  {/each}
                {:else}
                  <option disabled>Carregando perfis...</option>
                {/if}
              </select>
              {#if !roles?.data || !Array.isArray(roles.data)}
                <div class="label">
                  <span class="label-text-alt text-warning">Carregando perfis disponíveis...</span>
                </div>
              {/if}
            </div>

            <div class="divider md:col-span-2 mt-4">
              <div class="flex items-center gap-2">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="h-5 w-5 text-primary"
                  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>
                Senha Inicial
              </div>
            </div>

            <!-- Senha -->
            <div class="form-control">
              <label class="label" for="senha">
                <span class="label-text font-semibold">Senha Inicial *</span>
              </label>
              <input
                id="senha"
                type="password"
                placeholder="Mínimo 8 caracteres"
                class="input input-bordered"
                bind:value={senhaInicial}
                required
                minlength="8"
                disabled={processando}
              />
              <div class="label">
                <span class="label-text-alt">Mínimo 8 caracteres</span>
              </div>
            </div>

            <!-- Confirmar Senha -->
            <div class="form-control">
              <label class="label" for="confirmar-senha">
                <span class="label-text font-semibold">Confirmar Senha *</span>
              </label>
              <input
                id="confirmar-senha"
                type="password"
                placeholder="Digite novamente"
                class="input input-bordered"
                bind:value={confirmarSenha}
                required
                minlength="8"
                disabled={processando}
              />
            </div>

            <!-- Botão Gerar Senha e Visualização -->
            <div class="md:col-span-2">
              <button
                type="button"
                class="btn btn-sm btn-outline btn-info"
                onclick={gerarSenhaAleatoria}
                disabled={processando}
              >
                <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>
                Gerar Senha Forte Aleatória
              </button>

              {#if mostrarSenha && senhaGerada}
                <div class="alert alert-warning mt-4">
                  <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="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>
                  <div class="flex-1">
                    <h3 class="font-bold">Senha Gerada:</h3>
                    <div class="flex items-center gap-2 mt-2">
                      <code class="bg-base-300 px-3 py-2 rounded text-lg font-mono select-all">
                        {senhaGerada}
                      </code>
                      <button
                        type="button"
                        class="btn btn-sm btn-ghost"
                        onclick={copiarSenha}
                        title="Copiar senha"
                      >
                        <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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
                          />
                        </svg>
                        Copiar
                      </button>
                    </div>
                    <p class="text-sm mt-2">
                      ⚠️ <strong>IMPORTANTE:</strong> Anote esta senha! Você precisará repassá-la
                      manualmente ao usuário até que o SMTP seja configurado.
                    </p>
                  </div>
                </div>
              {/if}
            </div>
          </div>

          <div class="alert alert-info mt-6">
            <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">Informações Importantes</h3>
              <ul class="text-sm list-disc list-inside mt-2 space-y-1">
                <li>O usuário deverá alterar a senha no primeiro acesso</li>
                <li>As credenciais devem ser repassadas manualmente (por enquanto)</li>
                <li>
                  Configure o SMTP em <a href="/ti/configuracoes-email" class="link"
                    >Configurações de Email</a
                  > para envio automático
                </li>
              </ul>
            </div>
          </div>

          <div class="card-actions justify-end mt-8 pt-6 border-t border-base-300">
            <a href="/ti/usuarios" class="btn btn-ghost gap-2" class:btn-disabled={processando}>
              <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="M6 18L18 6M6 6l12 12"
                />
              </svg>
              Cancelar
            </a>
            <button type="submit" class="btn btn-primary gap-2" disabled={processando}>
              {#if processando}
                <span class="loading loading-spinner loading-sm"></span>
                Criando Usuário...
              {:else}
                <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="M5 13l4 4L19 7"
                  />
                </svg>
                Criar Usuário
              {/if}
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</ProtectedRoute>

