<script lang="ts">
  import { useQuery, useConvexClient } from "convex-svelte";
  import { api } from "@sgse-app/backend/convex/_generated/api";

  const client = useConvexClient();
  const templates = useQuery(api.templatesMensagens.listarTemplates, {});
  const usuarios = useQuery(api.usuarios.listar, {});
  
  let destinatarioId = $state("");
  let canal = $state<"chat" | "email" | "ambos">("chat");
  let templateId = $state("");
  let mensagemPersonalizada = $state("");
  let usarTemplate = $state(true);
  let processando = $state(false);

  const templateSelecionado = $derived(
    templates?.data?.find(t => t._id === templateId)
  );

  async function enviarNotificacao() {
    if (!destinatarioId) {
      alert("Selecione um destinatário");
      return;
    }

    if (usarTemplate && !templateId) {
      alert("Selecione um template");
      return;
    }

    if (!usarTemplate && !mensagemPersonalizada.trim()) {
      alert("Digite uma mensagem");
      return;
    }

    processando = true;
    try {
      const destinatario = usuarios?.data?.find(u => u._id === destinatarioId);
      
      if (!destinatario) {
        alert("Destinatário não encontrado");
        return;
      }

      let resultadoChat = null;
      let resultadoEmail = null;

      // ENVIAR PARA CHAT
      if (canal === "chat" || canal === "ambos") {
        const conversaResult = await client.mutation(
          api.chat.criarOuBuscarConversaIndividual,
          { outroUsuarioId: destinatarioId as any }
        );

        if (conversaResult.conversaId) {
          const mensagem = usarTemplate 
            ? templateSelecionado?.corpo || ""
            : mensagemPersonalizada;

          resultadoChat = await client.mutation(api.chat.enviarMensagem, {
            conversaId: conversaResult.conversaId,
            conteudo: mensagem,
            tipo: "texto", // Tipo de mensagem
            permitirNotificacaoParaSiMesmo: true, // ✅ Permite notificação para si mesmo via painel admin
          });
        }
      }

      // ENVIAR PARA EMAIL
      if (canal === "email" || canal === "ambos") {
        if (!destinatario.email) {
          alert("Destinatário não possui email cadastrado");
          processando = false;
          return;
        }

        if (usarTemplate && templateId) {
          // Usar template
          const template = templateSelecionado;
          if (template) {
            resultadoEmail = await client.mutation(api.email.enviarEmailComTemplate, {
              destinatario: destinatario.email,
              destinatarioId: destinatario._id as any,
              templateCodigo: template.codigo,
              variaveis: {
                nome: destinatario.nome,
                matricula: destinatario.matricula,
              },
              enviadoPorId: destinatario._id as any, // TODO: Pegar usuário logado
            });
          }
        } else {
          // Mensagem personalizada
          resultadoEmail = await client.mutation(api.email.enfileirarEmail, {
            destinatario: destinatario.email,
            destinatarioId: destinatario._id as any,
            assunto: "Notificação do Sistema",
            corpo: mensagemPersonalizada,
            enviadoPorId: destinatario._id as any, // TODO: Pegar usuário logado
          });
        }
      }

      // Feedback de sucesso
      let mensagem = "Notificação enviada com sucesso!";
      if (canal === "ambos") {
        if (resultadoChat && resultadoEmail) {
          mensagem = "✅ Notificação enviada para Chat e Email!";
        } else if (resultadoChat) {
          mensagem = "✅ Notificação enviada para Chat. Email falhou.";
        } else if (resultadoEmail) {
          mensagem = "✅ Notificação enviada para Email. Chat falhou.";
        }
      } else if (canal === "chat" && resultadoChat) {
        mensagem = "✅ Mensagem enviada no Chat!";
      } else if (canal === "email" && resultadoEmail) {
        mensagem = "✅ Email enfileirado para envio!";
      }

      alert(mensagem);
      
      // Limpar form
      destinatarioId = "";
      templateId = "";
      mensagemPersonalizada = "";
    } catch (error: any) {
      console.error("Erro ao enviar notificação:", error);
      alert("Erro ao enviar notificação: " + (error.message || "Erro desconhecido"));
    } 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 class="flex items-center gap-4">
      <div class="p-3 bg-info/10 rounded-xl">
        <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>
      <div>
        <h1 class="text-3xl font-bold text-base-content">Notificações e Mensagens</h1>
        <p class="text-base-content/60 mt-1">Enviar notificações para usuários do sistema</p>
      </div>
    </div>
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <!-- Formulário -->
    <div class="card bg-base-100 shadow-xl">
      <div class="card-body">
        <h2 class="card-title mb-4">Enviar Notificação</h2>
        
        <!-- Destinatário -->
        <div class="form-control mb-4">
          <label class="label" for="destinatario-select">
            <span class="label-text font-medium">Destinatário *</span>
          </label>
          <select id="destinatario-select" bind:value={destinatarioId} class="select select-bordered">
            <option value="">Selecione um usuário</option>
            {#if usuarios?.data}
              {#each usuarios.data as usuario}
                <option value={usuario._id}>
                  {usuario.nome} ({usuario.matricula})
                </option>
              {/each}
            {/if}
          </select>
        </div>

        <!-- Canal -->
        <div class="form-control mb-4">
          <div class="label">
            <span class="label-text font-medium">Canal de Envio *</span>
          </div>
          <div class="flex gap-4">
            <label class="label cursor-pointer">
              <input 
                type="radio" 
                value="chat" 
                bind:group={canal}
                class="radio radio-primary" 
              />
              <span class="label-text ml-2">Chat</span>
            </label>
            <label class="label cursor-pointer">
              <input 
                type="radio" 
                value="email" 
                bind:group={canal}
                class="radio radio-primary" 
              />
              <span class="label-text ml-2">Email</span>
            </label>
            <label class="label cursor-pointer">
              <input 
                type="radio" 
                value="ambos" 
                bind:group={canal}
                class="radio radio-primary" 
              />
              <span class="label-text ml-2">Ambos</span>
            </label>
          </div>
        </div>

        <!-- Tipo de Mensagem -->
        <div class="form-control mb-4">
          <div class="label">
            <span class="label-text font-medium">Tipo de Mensagem</span>
          </div>
          <div class="flex gap-4">
            <label class="label cursor-pointer">
              <input 
                type="radio" 
                checked={usarTemplate}
                onchange={() => usarTemplate = true}
                class="radio radio-secondary" 
              />
              <span class="label-text ml-2">Usar Template</span>
            </label>
            <label class="label cursor-pointer">
              <input 
                type="radio" 
                checked={!usarTemplate}
                onchange={() => usarTemplate = false}
                class="radio radio-secondary" 
              />
              <span class="label-text ml-2">Mensagem Personalizada</span>
            </label>
          </div>
        </div>

        {#if usarTemplate}
          <!-- Template -->
          <div class="form-control mb-4">
            <label class="label" for="template-select">
              <span class="label-text font-medium">Template *</span>
            </label>
            <select id="template-select" bind:value={templateId} class="select select-bordered">
              <option value="">Selecione um template</option>
              {#if templates?.data}
                {#each templates.data as template}
                  <option value={template._id}>
                    {template.nome}
                  </option>
                {/each}
              {/if}
            </select>
          </div>

          {#if templateSelecionado}
            <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>
              <div>
                <div class="font-bold">{templateSelecionado.titulo}</div>
                <div class="text-sm mt-1">{templateSelecionado.corpo}</div>
              </div>
            </div>
          {/if}
        {:else}
          <!-- Mensagem Personalizada -->
          <div class="form-control mb-4">
            <label class="label" for="mensagem-textarea">
              <span class="label-text font-medium">Mensagem *</span>
            </label>
            <textarea 
              id="mensagem-textarea"
              bind:value={mensagemPersonalizada}
              class="textarea textarea-bordered h-32" 
              placeholder="Digite sua mensagem personalizada..."
            ></textarea>
          </div>
        {/if}

        <!-- Botão Enviar -->
        <div class="card-actions justify-end mt-4">
          <button 
            class="btn btn-primary btn-block"
            onclick={enviarNotificacao}
            disabled={processando}
          >
            {#if processando}
              <span class="loading loading-spinner loading-sm"></span>
            {: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="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
              </svg>
            {/if}
            Enviar Notificação
          </button>
        </div>
      </div>
    </div>

    <!-- Lista de Templates -->
    <div class="card bg-base-100 shadow-xl">
      <div class="card-body">
        <div class="flex items-center justify-between mb-4">
          <h2 class="card-title">Templates Disponíveis</h2>
          <button class="btn btn-sm btn-outline btn-primary">
            <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 4v16m8-8H4" />
            </svg>
            Novo Template
          </button>
        </div>

        {#if !templates?.data}
          <div class="flex justify-center py-10">
            <span class="loading loading-spinner loading-lg"></span>
          </div>
        {:else if templates.data.length === 0}
          <div class="text-center py-10 text-base-content/60">
            Nenhum template disponível
          </div>
        {:else}
          <div class="space-y-3 max-h-[600px] overflow-y-auto">
            {#each templates.data as template}
              <div class="card bg-base-200 compact">
                <div class="card-body">
                  <div class="flex items-start justify-between">
                    <div class="flex-1">
                      <h3 class="font-bold text-sm">{template.nome}</h3>
                      <p class="text-xs opacity-70 mt-1">{template.titulo}</p>
                      <p class="text-xs mt-2 line-clamp-2">{template.corpo}</p>
                      <div class="flex gap-2 mt-2">
                        <span class="badge badge-sm {template.tipo === 'sistema' ? 'badge-primary' : 'badge-secondary'}">
                          {template.tipo}
                        </span>
                        {#if template.variaveis && template.variaveis.length > 0}
                          <span class="badge badge-sm badge-outline">
                            {template.variaveis.length} variáveis
                          </span>
                        {/if}
                      </div>
                    </div>
                    {#if template.tipo !== "sistema"}
                      <div class="dropdown dropdown-end">
                        <button type="button" tabindex="0" class="btn btn-ghost btn-xs" aria-label="Opções do template">
                          <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 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
                          </svg>
                        </button>
                        <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
                        <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-32">
                          <li><button type="button">Editar</button></li>
                          <li><button type="button" class="text-error">Excluir</button></li>
                        </ul>
                      </div>
                    {/if}
                  </div>
                </div>
              </div>
            {/each}
          </div>
        {/if}
      </div>
    </div>
  </div>

  <!-- Info -->
  <div class="alert alert-warning 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="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"></path>
    </svg>
    <span>Para enviar emails, certifique-se de configurar o SMTP em Configurações de Email.</span>
  </div>
</div>

