<script lang="ts">
  import { useQuery, useConvexClient } from "convex-svelte";
  import { api } from "@sgse-app/backend/convex/_generated/api";
  import { format } from "date-fns";
  import { ptBR } from "date-fns/locale";
  import { authStore } from "$lib/stores/auth.svelte";
  import type { Id, Doc } from "@sgse-app/backend/convex/_generated/dataModel";

  // Tipos para agendamentos
  type TipoAgendamento = "email" | "chat";
  type StatusAgendamento = "agendado" | "enviado" | "cancelado";

  interface AgendamentoEmail {
    _id: Id<"notificacoesEmail">;
    _creationTime: number;
    destinatario: string;
    destinatarioId: Id<"usuarios"> | undefined;
    assunto: string;
    corpo: string;
    templateId: Id<"templatesMensagens"> | undefined;
    status: "pendente" | "enviando" | "enviado" | "falha";
    agendadaPara: number | undefined;
    enviadoPor: Id<"usuarios">;
    criadoEm: number;
    enviadoEm: number | undefined;
    destinatarioInfo: Doc<"usuarios"> | null;
    templateInfo: Doc<"templatesMensagens"> | null;
  }

  interface AgendamentoChat {
    _id: Id<"mensagens">;
    _creationTime: number;
    conversaId: Id<"conversas">;
    remetenteId: Id<"usuarios">;
    conteudo: string;
    agendadaPara: number | undefined;
    enviadaEm: number;
    conversaInfo: Doc<"conversas"> | null;
    destinatarioInfo: Doc<"usuarios"> | null;
  }

  type Agendamento =
    | { tipo: "email"; dados: AgendamentoEmail }
    | { tipo: "chat"; dados: AgendamentoChat };

  const client = useConvexClient();

  // Queries
  const templatesQuery = useQuery(api.templatesMensagens.listarTemplates, {});
  const usuariosQuery = useQuery(api.usuarios.listar, {});

  // Mapa de emailIds para rastrear status
  let emailIdsRastreados = $state<Set<string>>(new Set());

  // Query para buscar status dos emails
  const emailIdsArray = $derived(
    Array.from(emailIdsRastreados).map((id) => id as Id<"notificacoesEmail">),
  );
  const emailsStatusQuery = useQuery(
    api.email.buscarEmailsPorIds,
    emailIdsArray.length > 0 ? { emailIds: emailIdsArray } : undefined,
  );

  // Queries para agendamentos
  const agendamentosEmailQuery = useQuery(
    api.email.listarAgendamentosEmail,
    {},
  );
  const agendamentosChatQuery = useQuery(api.chat.listarAgendamentosChat, {});

  // Filtro de agendamentos
  type FiltroAgendamento = "todos" | "agendados" | "enviados";
  let filtroAgendamento = $state<FiltroAgendamento>("todos");

  // Extrair dados das queries de forma robusta
  const templates = $derived.by(() => {
    if (templatesQuery === undefined || templatesQuery === null) {
      return [];
    }
    if ("data" in templatesQuery && templatesQuery.data !== undefined) {
      return Array.isArray(templatesQuery.data) ? templatesQuery.data : [];
    }
    if (Array.isArray(templatesQuery)) {
      return templatesQuery;
    }
    return [];
  });

  const usuarios = $derived.by(() => {
    if (usuariosQuery === undefined || usuariosQuery === null) {
      return [];
    }
    if ("data" in usuariosQuery && usuariosQuery.data !== undefined) {
      return Array.isArray(usuariosQuery.data) ? usuariosQuery.data : [];
    }
    if (Array.isArray(usuariosQuery)) {
      return usuariosQuery;
    }
    return [];
  });

  // Estados de carregamento e erro
  const carregandoTemplates = $derived(
    templatesQuery === undefined || templatesQuery === null,
  );
  const carregandoUsuarios = $derived(
    usuariosQuery === undefined || usuariosQuery === null,
  );

  // Verificar erros de forma mais robusta
  const erroTemplates = $derived.by(() => {
    if (templatesQuery === undefined || templatesQuery === null) return false;
    // Verificar se é um objeto com propriedade error
    if (typeof templatesQuery === "object" && "error" in templatesQuery) {
      return (
        templatesQuery.error !== undefined && templatesQuery.error !== null
      );
    }
    return false;
  });

  const erroUsuarios = $derived.by(() => {
    if (usuariosQuery === undefined || usuariosQuery === null) return false;
    if (typeof usuariosQuery === "object" && "error" in usuariosQuery) {
      return usuariosQuery.error !== undefined && usuariosQuery.error !== null;
    }
    return false;
  });

  // Log para debug (remover depois se necessário)
  $effect(() => {
    if (templatesQuery !== undefined && templatesQuery !== null) {
      console.log("Templates Query:", templatesQuery);
      console.log("Templates Extraídos:", templates);
    }
  });

  let destinatarioId = $state("");
  let enviarParaTodos = $state(false);
  let canal = $state<"chat" | "email" | "ambos">("chat");
  let templateId = $state("");
  let mensagemPersonalizada = $state("");
  let usarTemplate = $state(true);
  let processando = $state(false);
  let criandoTemplates = $state(false);
  let progressoEnvio = $state({ total: 0, enviados: 0, falhas: 0 });

  // Estrutura de dados para logs de envio
  type StatusLog = "sucesso" | "erro" | "fila" | "info" | "enviando";
  type TipoLog = "chat" | "email";
  type LogEnvio = {
    timestamp: number;
    tipo: TipoLog;
    destinatario: string;
    status: StatusLog;
    mensagem: string;
    emailId?: string; // Para emails, guardar o ID para rastrear status
  };

  let logsEnvio = $state<LogEnvio[]>([]);
  let terminalScrollRef: HTMLDivElement | null = $state(null);

  // Estados para agendamento
  let agendarEnvio = $state(false);
  let dataAgendamento = $state("");
  let horaAgendamento = $state("");

  // Calcular data/hora mínimas
  const now = new Date();
  const minDate = format(now, "yyyy-MM-dd");

  // Hora mínima recalculada baseada na data selecionada
  const horaMinima = $derived.by(() => {
    if (!dataAgendamento) return format(now, "HH:mm");
    const hoje = format(now, "yyyy-MM-dd");
    if (dataAgendamento === hoje) {
      return format(now, "HH:mm");
    }
    return undefined; // Sem restrição se for data futura
  });

  function getPreviewAgendamento(): string {
    if (!agendarEnvio || !dataAgendamento || !horaAgendamento) return "";
    try {
      const dataHora = new Date(`${dataAgendamento}T${horaAgendamento}`);
      return `Será enviada em ${format(dataHora, "dd/MM/yyyy 'às' HH:mm", { locale: ptBR })}`;
    } catch {
      return "";
    }
  }

  // Estados para modal de novo template
  let modalNovoTemplateAberto = $state(false);
  let codigoTemplate = $state("");
  let nomeTemplate = $state("");
  let tituloTemplate = $state("");
  let corpoTemplate = $state("");
  let variaveisTemplate = $state("");
  let criandoNovoTemplate = $state(false);

  // Estado para mensagens de feedback
  let mensagem = $state<{
    tipo: "success" | "error" | "info";
    texto: string;
  } | null>(null);

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

  // Função para mostrar mensagens
  function mostrarMensagem(tipo: "success" | "error" | "info", texto: string) {
    mensagem = { tipo, texto };
    setTimeout(() => {
      mensagem = null;
    }, 5000);
  }

  // Função para adicionar log ao terminal
  function adicionarLog(
    tipo: TipoLog,
    destinatario: string,
    status: StatusLog,
    mensagem: string,
    emailId?: string,
  ) {
    logsEnvio = [
      ...logsEnvio,
      {
        timestamp: Date.now(),
        tipo,
        destinatario,
        status,
        mensagem,
        emailId,
      },
    ];

    // Adicionar emailId ao rastreamento se fornecido
    if (emailId) {
      emailIdsRastreados = new Set([...emailIdsRastreados, emailId]);
    }

    // Auto-scroll para o final
    setTimeout(() => {
      if (terminalScrollRef) {
        terminalScrollRef.scrollTop = terminalScrollRef.scrollHeight;
      }
    }, 10);
  }

  // Atualizar logs quando status dos emails mudar
  $effect(() => {
    if (!emailsStatusQuery || emailsStatusQuery === undefined) return;

    // Extrair dados da query
    const emails = Array.isArray(emailsStatusQuery)
      ? emailsStatusQuery
      : "data" in emailsStatusQuery && Array.isArray(emailsStatusQuery.data)
        ? emailsStatusQuery.data
        : [];

    if (emails.length === 0) return;

    for (const email of emails) {
      if (!email) continue;

      // Encontrar logs relacionados a este email
      const logsRelacionados = logsEnvio.filter(
        (log) => log.emailId === email._id,
      );

      for (const log of logsRelacionados) {
        // Verificar se o status mudou
        const novoStatus: StatusLog =
          email.status === "enviado"
            ? "sucesso"
            : email.status === "falha"
              ? "erro"
              : email.status === "enviando"
                ? "enviando"
                : email.status === "pendente"
                  ? "fila"
                  : "info";

        // Se o status mudou, atualizar o log
        if (log.status !== novoStatus) {
          const indice = logsEnvio.findIndex((l) => l === log);
          if (indice !== -1) {
            const novaMensagem =
              email.status === "enviado"
                ? "Email enviado com sucesso"
                : email.status === "falha"
                  ? `Falha ao enviar: ${email.erroDetalhes || "Erro desconhecido"}`
                  : email.status === "enviando"
                    ? "Enviando email..."
                    : email.status === "pendente"
                      ? "Email em fila de envio"
                      : log.mensagem;

            logsEnvio = logsEnvio.map((l, i) =>
              i === indice
                ? { ...l, status: novoStatus, mensagem: novaMensagem }
                : l,
            );
          }
        }
      }
    }
  });

  // Função para limpar logs
  function limparLogs() {
    logsEnvio = [];
    emailIdsRastreados = new Set();
  }

  // Extrair e processar agendamentos
  const agendamentosEmail = $derived.by(() => {
    if (!agendamentosEmailQuery || agendamentosEmailQuery === undefined)
      return [];
    const dados = Array.isArray(agendamentosEmailQuery)
      ? agendamentosEmailQuery
      : "data" in agendamentosEmailQuery &&
          Array.isArray(agendamentosEmailQuery.data)
        ? agendamentosEmailQuery.data
        : [];
    return dados as AgendamentoEmail[];
  });

  const agendamentosChat = $derived.by(() => {
    if (!agendamentosChatQuery || agendamentosChatQuery === undefined)
      return [];
    const dados = Array.isArray(agendamentosChatQuery)
      ? agendamentosChatQuery
      : "data" in agendamentosChatQuery &&
          Array.isArray(agendamentosChatQuery.data)
        ? agendamentosChatQuery.data
        : [];
    return dados as AgendamentoChat[];
  });

  // Combinar e processar agendamentos
  const todosAgendamentos = $derived.by(() => {
    const agendamentos: Agendamento[] = [];

    for (const email of agendamentosEmail) {
      if (email.agendadaPara) {
        agendamentos.push({
          tipo: "email",
          dados: email,
        });
      }
    }

    for (const chat of agendamentosChat) {
      if (chat.agendadaPara) {
        agendamentos.push({
          tipo: "chat",
          dados: chat,
        });
      }
    }

    // Ordenar: futuros primeiro (mais próximos primeiro), depois passados (mais recentes primeiro)
    return agendamentos.sort((a, b) => {
      const timestampA =
        a.tipo === "email"
          ? (a.dados.agendadaPara ?? 0)
          : (a.dados.agendadaPara ?? 0);
      const timestampB =
        b.tipo === "email"
          ? (b.dados.agendadaPara ?? 0)
          : (b.dados.agendadaPara ?? 0);
      const agora = Date.now();

      const aFuturo = timestampA > agora;
      const bFuturo = timestampB > agora;

      // Futuros primeiro
      if (aFuturo && !bFuturo) return -1;
      if (!aFuturo && bFuturo) return 1;

      // Dentro do mesmo grupo, ordenar por timestamp
      if (aFuturo) {
        // Futuros: mais próximos primeiro
        return timestampA - timestampB;
      } else {
        // Passados: mais recentes primeiro
        return timestampB - timestampA;
      }
    });
  });

  // Filtrar agendamentos
  const agendamentosFiltrados = $derived.by(() => {
    if (filtroAgendamento === "todos") return todosAgendamentos;

    return todosAgendamentos.filter((ag) => {
      const status = obterStatusAgendamento(ag);
      if (filtroAgendamento === "agendados") return status === "agendado";
      if (filtroAgendamento === "enviados") return status === "enviado";
      return true;
    });
  });

  // Função para obter status do agendamento
  function obterStatusAgendamento(agendamento: Agendamento): StatusAgendamento {
    if (agendamento.tipo === "email") {
      const email = agendamento.dados;
      if (email.status === "enviado") return "enviado";
      if (email.agendadaPara && email.agendadaPara <= Date.now())
        return "enviado";
      return "agendado";
    } else {
      const chat = agendamento.dados;
      if (chat.agendadaPara && chat.agendadaPara <= Date.now())
        return "enviado";
      return "agendado";
    }
  }

  // Função para cancelar agendamento
  async function cancelarAgendamento(agendamento: Agendamento) {
    if (!confirm("Tem certeza que deseja cancelar este agendamento?")) {
      return;
    }

    try {
      if (agendamento.tipo === "email") {
        const resultado = await client.mutation(
          api.email.cancelarAgendamentoEmail,
          {
            emailId: agendamento.dados._id,
          },
        );
        if (resultado.sucesso) {
          mostrarMensagem(
            "success",
            "Agendamento de email cancelado com sucesso!",
          );
        } else {
          mostrarMensagem(
            "error",
            resultado.erro || "Erro ao cancelar agendamento",
          );
        }
      } else {
        const resultado = await client.mutation(
          api.chat.cancelarMensagemAgendada,
          {
            mensagemId: agendamento.dados._id,
          },
        );
        if (resultado.sucesso) {
          mostrarMensagem(
            "success",
            "Agendamento de chat cancelado com sucesso!",
          );
        } else {
          mostrarMensagem(
            "error",
            resultado.erro || "Erro ao cancelar agendamento",
          );
        }
      }
    } catch (error) {
      const erro = error instanceof Error ? error.message : "Erro desconhecido";
      mostrarMensagem("error", `Erro ao cancelar agendamento: ${erro}`);
    }
  }

  // Função para obter nome do destinatário
  function obterNomeDestinatario(agendamento: Agendamento): string {
    if (agendamento.tipo === "email") {
      return (
        agendamento.dados.destinatarioInfo?.nome ||
        agendamento.dados.destinatario ||
        "Usuário"
      );
    } else {
      return agendamento.dados.destinatarioInfo?.nome || "Usuário";
    }
  }

  // Função para formatar data/hora do agendamento
  function formatarDataAgendamento(agendamento: Agendamento): string {
    const timestamp =
      agendamento.tipo === "email"
        ? agendamento.dados.agendadaPara
        : agendamento.dados.agendadaPara;

    if (!timestamp) return "N/A";

    return format(new Date(timestamp), "dd/MM/yyyy 'às' HH:mm", {
      locale: ptBR,
    });
  }

  // Função para formatar timestamp
  function formatarTimestamp(timestamp: number): string {
    return format(new Date(timestamp), "HH:mm:ss", { locale: ptBR });
  }

  // Função para obter cor do status
  function obterCorStatus(status: StatusLog): string {
    switch (status) {
      case "sucesso":
        return "text-success";
      case "erro":
        return "text-error";
      case "fila":
        return "text-warning";
      case "enviando":
        return "text-info";
      case "info":
        return "text-info";
      default:
        return "text-base-content";
    }
  }

  async function criarTemplatesPadrao() {
    if (criandoTemplates) return;

    criandoTemplates = true;
    try {
      const resultado = await client.mutation(
        api.templatesMensagens.criarTemplatesPadrao,
        {},
      );
      if (resultado.sucesso) {
        mostrarMensagem(
          "success",
          "Templates padrão criados com sucesso! A página será recarregada.",
        );
        setTimeout(() => {
          window.location.reload();
        }, 2000);
      } else {
        mostrarMensagem("error", "Erro ao criar templates padrão.");
      }
    } catch (error) {
      const erro = error instanceof Error ? error.message : "Erro desconhecido";
      console.error("Erro ao criar templates:", error);
      mostrarMensagem("error", "Erro ao criar templates: " + erro);
    } finally {
      criandoTemplates = false;
    }
  }

  function abrirModalNovoTemplate() {
    modalNovoTemplateAberto = true;
    // Limpar campos
    codigoTemplate = "";
    nomeTemplate = "";
    tituloTemplate = "";
    corpoTemplate = "";
    variaveisTemplate = "";
  }

  function fecharModalNovoTemplate() {
    modalNovoTemplateAberto = false;
  }

  async function salvarNovoTemplate() {
    if (!authStore.usuario) {
      mostrarMensagem(
        "error",
        "Você precisa estar autenticado para criar templates.",
      );
      return;
    }

    // Validações
    if (!codigoTemplate.trim()) {
      mostrarMensagem("error", "O código do template é obrigatório.");
      return;
    }
    if (!nomeTemplate.trim()) {
      mostrarMensagem("error", "O nome do template é obrigatório.");
      return;
    }
    if (!tituloTemplate.trim()) {
      mostrarMensagem("error", "O título do template é obrigatório.");
      return;
    }
    if (!corpoTemplate.trim()) {
      mostrarMensagem("error", "O corpo do template é obrigatório.");
      return;
    }

    // Processar variáveis (separadas por vírgula ou espaço)
    const variaveis = variaveisTemplate
      .split(/[,;\s]+/)
      .map((v) => v.trim())
      .filter((v) => v.length > 0);

    criandoNovoTemplate = true;
    try {
      const resultado = await client.mutation(
        api.templatesMensagens.criarTemplate,
        {
          codigo: codigoTemplate.trim().toUpperCase().replace(/\s+/g, "_"),
          nome: nomeTemplate.trim(),
          titulo: tituloTemplate.trim(),
          corpo: corpoTemplate.trim(),
          variaveis: variaveis.length > 0 ? variaveis : undefined,
          criadoPorId: authStore.usuario._id as Id<"usuarios">,
        },
      );

      if (resultado.sucesso) {
        mostrarMensagem("success", "Template criado com sucesso!");
        fecharModalNovoTemplate();
        // Recarregar a página para atualizar a lista
        setTimeout(() => {
          window.location.reload();
        }, 1500);
      } else {
        mostrarMensagem(
          "error",
          "Erro ao criar template: " + (resultado.erro || "Erro desconhecido"),
        );
      }
    } catch (error) {
      const erro = error instanceof Error ? error.message : "Erro desconhecido";
      console.error("Erro ao criar template:", error);
      mostrarMensagem("error", "Erro ao criar template: " + erro);
    } finally {
      criandoNovoTemplate = false;
    }
  }

  async function enviarNotificacao() {
    if (!enviarParaTodos && !destinatarioId) {
      mostrarMensagem(
        "error",
        "Selecione um destinatário ou marque 'Enviar para todos'",
      );
      return;
    }

    if (usarTemplate && !templateId) {
      mostrarMensagem("error", "Selecione um template");
      return;
    }

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

    // Validar agendamento se marcado
    let agendadaPara: number | undefined = undefined;
    if (agendarEnvio) {
      if (!dataAgendamento || !horaAgendamento) {
        mostrarMensagem("error", "Preencha a data e hora para agendamento");
        return;
      }

      try {
        const dataHora = new Date(`${dataAgendamento}T${horaAgendamento}`);
        if (dataHora.getTime() <= Date.now()) {
          mostrarMensagem("error", "A data e hora devem ser futuras");
          return;
        }
        agendadaPara = dataHora.getTime();
      } catch (error) {
        mostrarMensagem("error", "Data ou hora inválida");
        return;
      }
    }

    processando = true;
    progressoEnvio = { total: 0, enviados: 0, falhas: 0 };

    // Limpar logs anteriores quando iniciar novo envio
    logsEnvio = [];
    emailIdsRastreados = new Set();

    try {
      // Obter lista de destinatários
      const destinatarios: typeof usuarios = enviarParaTodos
        ? usuarios
        : usuarios.filter((u) => u._id === destinatarioId);

      if (destinatarios.length === 0) {
        adicionarLog(
          "email",
          "Sistema",
          "erro",
          "Nenhum destinatário encontrado",
        );
        mostrarMensagem("error", "Nenhum destinatário encontrado");
        return;
      }

      progressoEnvio.total = destinatarios.length;

      // Log inicial
      const tipoMensagem = usarTemplate
        ? `Template: ${templateSelecionado?.nome || ""}`
        : "Mensagem personalizada";
      const destinatariosText = enviarParaTodos
        ? `Todos os usuários (${destinatarios.length})`
        : destinatarios.map((d) => d.nome).join(", ");
      adicionarLog(
        "email",
        "Sistema",
        "info",
        `Iniciando envio de notificação via ${canal} para ${destinatariosText} - ${tipoMensagem}`,
      );

      // Se for envio para um único usuário
      if (destinatarios.length === 1) {
        const destinatario = destinatarios[0];
        let resultadoChat = null;
        let resultadoEmail = null;

        // ENVIAR PARA CHAT
        if (canal === "chat" || canal === "ambos") {
          try {
            adicionarLog(
              "chat",
              destinatario.nome,
              "enviando",
              "Criando/buscando conversa...",
            );
            const conversaResult = await client.mutation(
              api.chat.criarOuBuscarConversaIndividual,
              { outroUsuarioId: destinatario._id as Id<"usuarios"> },
            );

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

              if (agendadaPara) {
                // Agendar mensagem
                adicionarLog(
                  "chat",
                  destinatario.nome,
                  "info",
                  "Agendando mensagem...",
                );
                resultadoChat = await client.mutation(
                  api.chat.agendarMensagem,
                  {
                    conversaId: conversaResult.conversaId,
                    conteudo: mensagem,
                    agendadaPara: agendadaPara,
                  },
                );
                const dataFormatada = format(
                  new Date(agendadaPara),
                  "dd/MM/yyyy 'às' HH:mm",
                  { locale: ptBR },
                );
                adicionarLog(
                  "chat",
                  destinatario.nome,
                  "sucesso",
                  `Mensagem agendada para ${dataFormatada}`,
                );
              } else {
                // Envio imediato
                adicionarLog(
                  "chat",
                  destinatario.nome,
                  "enviando",
                  "Enviando mensagem...",
                );
                resultadoChat = await client.mutation(api.chat.enviarMensagem, {
                  conversaId: conversaResult.conversaId,
                  conteudo: mensagem,
                  tipo: "texto",
                  permitirNotificacaoParaSiMesmo: true,
                });
                adicionarLog(
                  "chat",
                  destinatario.nome,
                  "sucesso",
                  "Mensagem enviada com sucesso",
                );
              }
            } else {
              adicionarLog(
                "chat",
                destinatario.nome,
                "erro",
                "Falha ao criar/buscar conversa",
              );
            }
          } catch (error) {
            const erro =
              error instanceof Error ? error.message : "Erro desconhecido";
            console.error("Erro ao enviar chat:", error);
            adicionarLog("chat", destinatario.nome, "erro", `Erro: ${erro}`);
          }
        }

        // ENVIAR PARA EMAIL
        if (canal === "email" || canal === "ambos") {
          if (destinatario.email) {
            try {
              adicionarLog(
                "email",
                destinatario.nome,
                "enviando",
                `Enfileirando email para ${destinatario.email}...`,
              );
              if (usarTemplate && templateId) {
                const template = templateSelecionado;
                if (template) {
                  resultadoEmail = await client.mutation(
                    api.email.enviarEmailComTemplate,
                    {
                      destinatario: destinatario.email,
                      destinatarioId: destinatario._id as Id<"usuarios">,
                      templateCodigo: template.codigo,
                      variaveis: {
                        nome: destinatario.nome,
                        matricula: destinatario.matricula,
                      },
                      enviadoPorId: authStore.usuario._id as Id<"usuarios">,
                      agendadaPara: agendadaPara,
                    },
                  );
                  if (resultadoEmail?.sucesso && resultadoEmail?.emailId) {
                    if (agendadaPara) {
                      const dataFormatada = format(
                        new Date(agendadaPara),
                        "dd/MM/yyyy 'às' HH:mm",
                        { locale: ptBR },
                      );
                      adicionarLog(
                        "email",
                        destinatario.nome,
                        "fila",
                        `Email agendado para ${dataFormatada}`,
                        resultadoEmail.emailId,
                      );
                    } else {
                      adicionarLog(
                        "email",
                        destinatario.nome,
                        "fila",
                        "Email enfileirado para envio",
                        resultadoEmail.emailId,
                      );
                    }
                  } else {
                    adicionarLog(
                      "email",
                      destinatario.nome,
                      "erro",
                      "Falha ao enfileirar email",
                    );
                  }
                } else {
                  adicionarLog(
                    "email",
                    destinatario.nome,
                    "erro",
                    "Template não encontrado",
                  );
                }
              } else {
                resultadoEmail = await client.mutation(
                  api.email.enfileirarEmail,
                  {
                    destinatario: destinatario.email,
                    destinatarioId: destinatario._id as Id<"usuarios">,
                    assunto: "Notificação do Sistema",
                    corpo: mensagemPersonalizada,
                    enviadoPorId: authStore.usuario._id as Id<"usuarios">,
                    agendadaPara: agendadaPara,
                  },
                );
                if (resultadoEmail?.sucesso && resultadoEmail?.emailId) {
                  if (agendadaPara) {
                    const dataFormatada = format(
                      new Date(agendadaPara),
                      "dd/MM/yyyy 'às' HH:mm",
                      { locale: ptBR },
                    );
                    adicionarLog(
                      "email",
                      destinatario.nome,
                      "fila",
                      `Email agendado para ${dataFormatada}`,
                      resultadoEmail.emailId,
                    );
                  } else {
                    adicionarLog(
                      "email",
                      destinatario.nome,
                      "fila",
                      "Email enfileirado para envio",
                      resultadoEmail.emailId,
                    );
                  }
                } else {
                  adicionarLog(
                    "email",
                    destinatario.nome,
                    "erro",
                    "Falha ao enfileirar email",
                  );
                }
              }
            } catch (error) {
              const erro =
                error instanceof Error ? error.message : "Erro desconhecido";
              console.error("Erro ao enviar email:", error);
              adicionarLog("email", destinatario.nome, "erro", `Erro: ${erro}`);
            }
          } else {
            adicionarLog(
              "email",
              destinatario.nome,
              "erro",
              "Destinatário não possui email cadastrado",
            );
          }
        }

        // Feedback de sucesso
        let mensagemSucesso = agendadaPara
          ? `Notificação agendada com sucesso!`
          : "Notificação enviada com sucesso!";
        if (agendadaPara) {
          const dataFormatada = format(
            new Date(agendadaPara),
            "dd/MM/yyyy 'às' HH:mm",
            { locale: ptBR },
          );
          mensagemSucesso += ` Será enviada em: ${dataFormatada}`;
        } else {
          if (canal === "ambos") {
            if (resultadoChat && resultadoEmail) {
              mensagemSucesso = "Notificação enviada para Chat e Email!";
            } else if (resultadoChat) {
              mensagemSucesso = "Notificação enviada para Chat. Email falhou.";
            } else if (resultadoEmail) {
              mensagemSucesso = "Notificação enviada para Email. Chat falhou.";
            }
          } else if (canal === "chat" && resultadoChat) {
            mensagemSucesso = "Mensagem enviada no Chat!";
          } else if (canal === "email" && resultadoEmail) {
            mensagemSucesso = "Email enfileirado para envio!";
          }
        }

        mostrarMensagem("success", mensagemSucesso);
        progressoEnvio.enviados = 1;
      } else {
        // ENVIO EM MASSA
        let sucessosChat = 0;
        let sucessosEmail = 0;
        let falhasChat = 0;
        let falhasEmail = 0;

        adicionarLog(
          "email",
          "Sistema",
          "info",
          `Processando ${destinatarios.length} destinatários...`,
        );

        for (const destinatario of destinatarios) {
          try {
            // ENVIAR PARA CHAT
            if (canal === "chat" || canal === "ambos") {
              try {
                adicionarLog(
                  "chat",
                  destinatario.nome,
                  "enviando",
                  "Processando...",
                );
                const conversaResult = await client.mutation(
                  api.chat.criarOuBuscarConversaIndividual,
                  { outroUsuarioId: destinatario._id as Id<"usuarios"> },
                );

                if (conversaResult.conversaId) {
                  // Para templates, usar corpo direto (o backend já faz substituição via email)
                  // Para mensagem personalizada, usar diretamente
                  const mensagem = usarTemplate
                    ? templateSelecionado?.corpo || ""
                    : mensagemPersonalizada;

                  if (agendadaPara) {
                    await client.mutation(api.chat.agendarMensagem, {
                      conversaId: conversaResult.conversaId,
                      conteudo: mensagem,
                      agendadaPara: agendadaPara,
                    });
                    const dataFormatada = format(
                      new Date(agendadaPara),
                      "dd/MM/yyyy 'às' HH:mm",
                      { locale: ptBR },
                    );
                    adicionarLog(
                      "chat",
                      destinatario.nome,
                      "sucesso",
                      `Agendado para ${dataFormatada}`,
                    );
                  } else {
                    await client.mutation(api.chat.enviarMensagem, {
                      conversaId: conversaResult.conversaId,
                      conteudo: mensagem,
                      tipo: "texto",
                      permitirNotificacaoParaSiMesmo: true,
                    });
                    adicionarLog(
                      "chat",
                      destinatario.nome,
                      "sucesso",
                      "Enviado com sucesso",
                    );
                  }
                  sucessosChat++;
                } else {
                  adicionarLog(
                    "chat",
                    destinatario.nome,
                    "erro",
                    "Falha ao criar/buscar conversa",
                  );
                  falhasChat++;
                }
              } catch (error) {
                const erro =
                  error instanceof Error ? error.message : "Erro desconhecido";
                console.error(
                  `Erro ao enviar chat para ${destinatario.nome}:`,
                  error,
                );
                adicionarLog(
                  "chat",
                  destinatario.nome,
                  "erro",
                  `Erro: ${erro}`,
                );
                falhasChat++;
              }
            }

            // ENVIAR PARA EMAIL
            if (canal === "email" || canal === "ambos") {
              if (destinatario.email) {
                try {
                  adicionarLog(
                    "email",
                    destinatario.nome,
                    "enviando",
                    `Enfileirando email para ${destinatario.email}...`,
                  );
                  if (usarTemplate && templateId) {
                    const template = templateSelecionado;
                    if (template) {
                      const resultadoEmail = await client.mutation(
                        api.email.enviarEmailComTemplate,
                        {
                          destinatario: destinatario.email,
                          destinatarioId: destinatario._id as Id<"usuarios">,
                          templateCodigo: template.codigo,
                          variaveis: {
                            nome: destinatario.nome,
                            matricula: destinatario.matricula || "",
                          },
                          enviadoPorId: authStore.usuario._id as Id<"usuarios">,
                          agendadaPara: agendadaPara,
                        },
                      );
                      if (resultadoEmail?.sucesso && resultadoEmail?.emailId) {
                        if (agendadaPara) {
                          const dataFormatada = format(
                            new Date(agendadaPara),
                            "dd/MM/yyyy 'às' HH:mm",
                            { locale: ptBR },
                          );
                          adicionarLog(
                            "email",
                            destinatario.nome,
                            "fila",
                            `Agendado para ${dataFormatada}`,
                            resultadoEmail.emailId,
                          );
                        } else {
                          adicionarLog(
                            "email",
                            destinatario.nome,
                            "fila",
                            "Enfileirado para envio",
                            resultadoEmail.emailId,
                          );
                        }
                        sucessosEmail++;
                      } else {
                        adicionarLog(
                          "email",
                          destinatario.nome,
                          "erro",
                          "Falha ao enfileirar email",
                        );
                        falhasEmail++;
                      }
                    } else {
                      adicionarLog(
                        "email",
                        destinatario.nome,
                        "erro",
                        "Template não encontrado",
                      );
                      falhasEmail++;
                    }
                  } else {
                    const resultadoEmail = await client.mutation(
                      api.email.enfileirarEmail,
                      {
                        destinatario: destinatario.email,
                        destinatarioId: destinatario._id as Id<"usuarios">,
                        assunto: "Notificação do Sistema",
                        corpo: mensagemPersonalizada,
                        enviadoPorId: authStore.usuario._id as Id<"usuarios">,
                        agendadaPara: agendadaPara,
                      },
                    );
                    if (resultadoEmail?.sucesso && resultadoEmail?.emailId) {
                      if (agendadaPara) {
                        const dataFormatada = format(
                          new Date(agendadaPara),
                          "dd/MM/yyyy 'às' HH:mm",
                          { locale: ptBR },
                        );
                        adicionarLog(
                          "email",
                          destinatario.nome,
                          "fila",
                          `Agendado para ${dataFormatada}`,
                          resultadoEmail.emailId,
                        );
                      } else {
                        adicionarLog(
                          "email",
                          destinatario.nome,
                          "fila",
                          "Enfileirado para envio",
                          resultadoEmail.emailId,
                        );
                      }
                      sucessosEmail++;
                    } else {
                      adicionarLog(
                        "email",
                        destinatario.nome,
                        "erro",
                        "Falha ao enfileirar email",
                      );
                      falhasEmail++;
                    }
                  }
                } catch (error) {
                  const erro =
                    error instanceof Error
                      ? error.message
                      : "Erro desconhecido";
                  console.error(
                    `Erro ao enviar email para ${destinatario.nome}:`,
                    error,
                  );
                  adicionarLog(
                    "email",
                    destinatario.nome,
                    "erro",
                    `Erro: ${erro}`,
                  );
                  falhasEmail++;
                }
              } else {
                adicionarLog(
                  "email",
                  destinatario.nome,
                  "erro",
                  "Destinatário não possui email cadastrado",
                );
                falhasEmail++;
              }
            }

            progressoEnvio.enviados++;
          } catch (error) {
            console.error(
              `Erro geral ao enviar para ${destinatario.nome}:`,
              error,
            );
            progressoEnvio.falhas++;
          }
        }

        // Feedback de envio em massa
        let mensagemMassa = agendadaPara
          ? `Agendamento em massa concluído! `
          : `Envio em massa concluído! `;

        if (agendadaPara) {
          const dataFormatada = format(
            new Date(agendadaPara),
            "dd/MM/yyyy 'às' HH:mm",
            { locale: ptBR },
          );
          mensagemMassa += `Será enviado em: ${dataFormatada}. `;
        }

        if (canal === "ambos") {
          mensagemMassa += `Chat: ${sucessosChat} ${agendadaPara ? "agendados" : "enviados"}, ${falhasChat} falhas. `;
          mensagemMassa += `Email: ${sucessosEmail} ${agendadaPara ? "agendados" : "enviados"}, ${falhasEmail} falhas.`;
        } else if (canal === "chat") {
          mensagemMassa += `Chat: ${sucessosChat} ${agendadaPara ? "agendados" : "enviados"}, ${falhasChat} falhas.`;
        } else if (canal === "email") {
          mensagemMassa += `Email: ${sucessosEmail} ${agendadaPara ? "agendados" : "enviados"}, ${falhasEmail} falhas.`;
        }

        // Adicionar log resumo
        adicionarLog("email", "Sistema", "info", mensagemMassa);
        mostrarMensagem("success", mensagemMassa);
      }

      // Limpar form
      destinatarioId = "";
      enviarParaTodos = false;
      templateId = "";
      mensagemPersonalizada = "";
      agendarEnvio = false;
      dataAgendamento = "";
      horaAgendamento = "";
    } catch (error) {
      const erro = error instanceof Error ? error.message : "Erro desconhecido";
      console.error("Erro ao enviar notificação:", error);
      adicionarLog("email", "Sistema", "erro", `Erro geral: ${erro}`);
      mostrarMensagem("error", "Erro ao enviar notificação: " + erro);
    } finally {
      processando = false;
      progressoEnvio = { total: 0, enviados: 0, falhas: 0 };
      adicionarLog("email", "Sistema", "info", "Processo de envio finalizado");
    }
  }
</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>

  <!-- Mensagens de Feedback -->
  {#if mensagem}
    <div
      class="alert mb-6 shadow-lg"
      class:alert-success={mensagem.tipo === "success"}
      class:alert-error={mensagem.tipo === "error"}
      class:alert-info={mensagem.tipo === "info"}
    >
      <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 if mensagem.tipo === "error"}
          <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"
          />
        {:else}
          <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"
          />
        {/if}
      </svg>
      <span class="font-medium">{mensagem.texto}</span>
      <button
        type="button"
        class="btn btn-sm btn-circle btn-ghost"
        onclick={() => (mensagem = null)}
      >
        ✕
      </button>
    </div>
  {/if}

  <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">
          <div class="flex items-center justify-between mb-2">
            <label class="label" for="destinatario-select">
              <span class="label-text font-medium">Destinatário *</span>
            </label>
            <label class="label cursor-pointer gap-2">
              <input
                type="checkbox"
                bind:checked={enviarParaTodos}
                class="checkbox checkbox-primary checkbox-sm"
                disabled={processando}
              />
              <span class="label-text text-sm"
                >Enviar para todos ({usuarios.length} usuários)</span
              >
            </label>
          </div>
          <select
            id="destinatario-select"
            bind:value={destinatarioId}
            class="select select-bordered"
            disabled={enviarParaTodos || processando}
          >
            <option value="">Selecione um usuário</option>
            {#if carregandoUsuarios}
              <option disabled>Carregando usuários...</option>
            {:else if usuarios.length > 0}
              {#each usuarios as usuario}
                <option value={usuario._id}>
                  {usuario.nome} ({usuario.matricula})
                </option>
              {/each}
            {:else}
              <option disabled>Nenhum usuário disponível</option>
            {/if}
          </select>
          {#if enviarParaTodos}
            <label class="label">
              <span class="label-text-alt text-warning">
                ⚠️ A notificação será enviada para todos os {usuarios.length} usuários
                do sistema
              </span>
            </label>
          {/if}
        </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 carregandoTemplates}
                <option disabled>Carregando templates...</option>
              {:else if templates.length > 0}
                {#each templates as template}
                  <option value={template._id}>
                    {template.nome}
                  </option>
                {/each}
              {:else}
                <option disabled>Nenhum template disponível</option>
              {/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}

        <!-- Agendamento -->
        <div class="form-control mb-4">
          <label class="label cursor-pointer">
            <span class="label-text font-medium">Agendar Envio</span>
            <input
              type="checkbox"
              bind:checked={agendarEnvio}
              class="checkbox checkbox-primary"
              disabled={processando}
            />
          </label>

          {#if agendarEnvio}
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
              <div class="form-control">
                <label class="label" for="data-agendamento">
                  <span class="label-text">Data</span>
                </label>
                <input
                  id="data-agendamento"
                  type="date"
                  class="input input-bordered"
                  bind:value={dataAgendamento}
                  min={minDate}
                  disabled={processando}
                />
              </div>

              <div class="form-control">
                <label class="label" for="hora-agendamento">
                  <span class="label-text">Hora</span>
                </label>
                <input
                  id="hora-agendamento"
                  type="time"
                  class="input input-bordered"
                  bind:value={horaAgendamento}
                  min={horaMinima}
                  disabled={processando}
                />
              </div>
            </div>

            {#if getPreviewAgendamento()}
              <div class="alert alert-info mt-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>{getPreviewAgendamento()}</span>
              </div>
            {/if}
          {/if}
        </div>

        <!-- 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>
              {#if progressoEnvio.total > 1}
                <span class="ml-2">
                  Enviando... ({progressoEnvio.enviados}/{progressoEnvio.total})
                </span>
              {:else}
                <span class="ml-2">Enviando...</span>
              {/if}
            {: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}
            {#if processando}
              <!-- Texto já está no bloco acima -->
            {:else if agendarEnvio && enviarParaTodos}
              Agendar para Todos ({usuarios.length})
            {:else if agendarEnvio}
              Agendar Notificação
            {:else if enviarParaTodos}
              Enviar para Todos ({usuarios.length})
            {:else}
              Enviar Notificação
            {/if}
          </button>
        </div>

        <!-- Terminal de Status -->
        <div class="mt-4">
          <div class="flex items-center justify-between mb-2">
            <label class="label">
              <span class="label-text font-medium">Terminal de Status</span>
            </label>
            {#if logsEnvio.length > 0}
              <button
                type="button"
                class="btn btn-sm btn-ghost"
                onclick={limparLogs}
              >
                <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="M6 18L18 6M6 6l12 12"
                  />
                </svg>
                Limpar
              </button>
            {/if}
          </div>
          <div
            bind:this={terminalScrollRef}
            class="bg-neutral text-neutral-content p-4 rounded-lg font-mono text-sm max-h-64 overflow-y-auto"
            style="background-color: #1a1a1a; color: #e5e5e5;"
          >
            {#if logsEnvio.length === 0}
              <div class="text-neutral-content/60 italic">
                Aguardando envio de notificação...
              </div>
            {:else}
              {#each logsEnvio as log}
                <div class="mb-1">
                  <span class="text-neutral-content/60"
                    >[{formatarTimestamp(log.timestamp)}]</span
                  >
                  <span
                    class="ml-2 badge badge-xs {log.tipo === 'chat'
                      ? 'badge-info'
                      : 'badge-secondary'}"
                  >
                    {log.tipo.toUpperCase()}
                  </span>
                  <span class="ml-2 font-semibold">{log.destinatario}:</span>
                  <span class="ml-2 {obterCorStatus(log.status)}">
                    {log.mensagem}
                  </span>
                </div>
              {/each}
            {/if}
          </div>
        </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
            type="button"
            class="btn btn-sm btn-outline btn-primary"
            onclick={() => abrirModalNovoTemplate()}
          >
            <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 carregandoTemplates}
          <div class="flex flex-col items-center justify-center py-10 gap-4">
            <span class="loading loading-spinner loading-lg"></span>
            <p class="text-sm text-base-content/60">Carregando templates...</p>
          </div>
        {:else if templates.length > 0}
          <!-- Mostrar templates se existirem -->
          <div class="space-y-3 max-h-[600px] overflow-y-auto">
            {#each templates 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>
        {:else}
          <!-- Nenhum template disponível - mostrar botão para criar -->
          <div class="text-center py-10">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-12 w-12 mx-auto mb-4 opacity-50"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
              />
            </svg>
            <p class="font-medium text-base-content mb-2">
              Nenhum template disponível
            </p>
            <p class="text-sm text-base-content/60 mb-4">
              Clique no botão abaixo para criar os templates padrão do sistema.
            </p>
            <button
              class="btn btn-primary btn-sm"
              onclick={criarTemplatesPadrao}
              disabled={criandoTemplates}
            >
              {#if criandoTemplates}
                <span class="loading loading-spinner loading-xs"></span>
                Criando templates...
              {:else}
                <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>
                Criar Templates Padrão
              {/if}
            </button>
          </div>
        {/if}
      </div>
    </div>
  </div>

  <!-- Histórico de Agendamentos -->
  <div class="card bg-base-100 shadow-xl mt-6">
    <div class="card-body">
      <div class="flex items-center justify-between mb-4">
        <div class="flex items-center gap-3">
          <div class="p-2 bg-secondary/10 rounded-lg">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-6 w-6 text-secondary"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
              />
            </svg>
          </div>
          <h2 class="card-title">Histórico de Agendamentos</h2>
        </div>

        <!-- Filtros -->
        <div class="flex gap-2">
          <button
            type="button"
            class="btn btn-sm {filtroAgendamento === 'todos'
              ? 'btn-primary'
              : 'btn-ghost'}"
            onclick={() => (filtroAgendamento = "todos")}
          >
            Todos
          </button>
          <button
            type="button"
            class="btn btn-sm {filtroAgendamento === 'agendados'
              ? 'btn-primary'
              : 'btn-ghost'}"
            onclick={() => (filtroAgendamento = "agendados")}
          >
            Agendados
          </button>
          <button
            type="button"
            class="btn btn-sm {filtroAgendamento === 'enviados'
              ? 'btn-primary'
              : 'btn-ghost'}"
            onclick={() => (filtroAgendamento = "enviados")}
          >
            Enviados
          </button>
        </div>
      </div>

      {#if agendamentosFiltrados.length === 0}
        <div class="text-center py-10">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-12 w-12 mx-auto mb-4 opacity-50"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
            />
          </svg>
          <p class="font-medium text-base-content mb-2">
            Nenhum agendamento encontrado
          </p>
          <p class="text-sm text-base-content/60">
            Os agendamentos aparecerão aqui quando você agendar envios.
          </p>
        </div>
      {:else}
        <!-- Tabela de Agendamentos -->
        <div class="overflow-x-auto">
          <table class="table table-zebra">
            <thead>
              <tr>
                <th>Tipo</th>
                <th>Destinatário</th>
                <th>Data/Hora</th>
                <th>Status</th>
                <th>Template</th>
                <th>Ações</th>
              </tr>
            </thead>
            <tbody>
              {#each agendamentosFiltrados as agendamento}
                {@const status = obterStatusAgendamento(agendamento)}
                {@const nomeDestinatario = obterNomeDestinatario(agendamento)}
                {@const dataFormatada = formatarDataAgendamento(agendamento)}
                {@const podeCancelar = status === "agendado"}
                {@const templateNome =
                  agendamento.tipo === "email" && agendamento.dados.templateInfo
                    ? agendamento.dados.templateInfo.nome
                    : agendamento.tipo === "email" &&
                        agendamento.dados.templateId
                      ? "Template removido"
                      : "-"}
                <tr>
                  <td>
                    <div class="flex items-center gap-2">
                      {#if agendamento.tipo === "email"}
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          class="h-5 w-5 text-info"
                          fill="none"
                          viewBox="0 0 24 24"
                          stroke="currentColor"
                        >
                          <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
                          />
                        </svg>
                        <span class="badge badge-info badge-sm">Email</span>
                      {:else}
                        <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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
                          />
                        </svg>
                        <span class="badge badge-primary badge-sm">Chat</span>
                      {/if}
                    </div>
                  </td>
                  <td>
                    <div class="font-medium">{nomeDestinatario}</div>
                    {#if agendamento.tipo === "email"}
                      <div class="text-xs text-base-content/60">
                        {agendamento.dados.destinatario}
                      </div>
                    {/if}
                  </td>
                  <td>
                    <div class="font-medium">{dataFormatada}</div>
                    {#if podeCancelar}
                      {@const tempoRestante =
                        agendamento.tipo === "email"
                          ? (agendamento.dados.agendadaPara ?? 0) - Date.now()
                          : (agendamento.dados.agendadaPara ?? 0) - Date.now()}
                      {@const horasRestantes = Math.floor(
                        tempoRestante / (1000 * 60 * 60),
                      )}
                      {@const minutosRestantes = Math.floor(
                        (tempoRestante % (1000 * 60 * 60)) / (1000 * 60),
                      )}
                      {#if horasRestantes < 1 && minutosRestantes < 60}
                        <div class="text-xs text-warning">
                          Em {minutosRestantes} min
                        </div>
                      {:else if horasRestantes < 24}
                        <div class="text-xs text-info">
                          Em {horasRestantes}h {minutosRestantes}min
                        </div>
                      {/if}
                    {/if}
                  </td>
                  <td>
                    {#if status === "agendado"}
                      <span class="badge badge-warning badge-sm">Agendado</span>
                    {:else if status === "enviado"}
                      <span class="badge badge-success badge-sm">Enviado</span>
                    {:else}
                      <span class="badge badge-error badge-sm">Cancelado</span>
                    {/if}
                  </td>
                  <td>
                    {#if agendamento.tipo === "email"}
                      {#if agendamento.dados.templateInfo}
                        <div class="text-sm">
                          {agendamento.dados.templateInfo.nome}
                        </div>
                      {:else if agendamento.dados.templateId}
                        <div class="text-sm text-base-content/60 italic">
                          Template removido
                        </div>
                      {:else}
                        <div class="text-sm text-base-content/60">-</div>
                      {/if}
                    {:else}
                      <div class="text-sm text-base-content/60">-</div>
                    {/if}
                  </td>
                  <td>
                    {#if podeCancelar}
                      <button
                        type="button"
                        class="btn btn-sm btn-error btn-outline"
                        onclick={() => cancelarAgendamento(agendamento)}
                      >
                        <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="M6 18L18 6M6 6l12 12"
                          />
                        </svg>
                        Cancelar
                      </button>
                    {:else}
                      <span class="text-sm text-base-content/60">-</span>
                    {/if}
                  </td>
                </tr>
              {/each}
            </tbody>
          </table>
        </div>
      {/if}
    </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>

<!-- Modal Novo Template -->
{#if modalNovoTemplateAberto}
  <div class="modal modal-open">
    <div class="modal-box max-w-2xl">
      <h3 class="font-bold text-lg mb-4">Criar Novo Template</h3>

      <div class="space-y-4">
        <!-- Código -->
        <div class="form-control">
          <label class="label">
            <span class="label-text font-medium">Código *</span>
            <span class="label-text-alt">Ex: AVISO_IMPORTANTE</span>
          </label>
          <input
            type="text"
            bind:value={codigoTemplate}
            placeholder="CODIGO_TEMPLATE"
            class="input input-bordered"
            maxlength="50"
          />
          <label class="label">
            <span class="label-text-alt"
              >Código único para identificar o template (será convertido para
              MAIÚSCULAS)</span
            >
          </label>
        </div>

        <!-- Nome -->
        <div class="form-control">
          <label class="label">
            <span class="label-text font-medium">Nome *</span>
          </label>
          <input
            type="text"
            bind:value={nomeTemplate}
            placeholder="Nome do Template"
            class="input input-bordered"
            maxlength="100"
          />
          <label class="label">
            <span class="label-text-alt"
              >Nome exibido na lista de templates</span
            >
          </label>
        </div>

        <!-- Título -->
        <div class="form-control">
          <label class="label">
            <span class="label-text font-medium">Título *</span>
          </label>
          <input
            type="text"
            bind:value={tituloTemplate}
            placeholder="Título da Mensagem"
            class="input input-bordered"
            maxlength="200"
          />
          <label class="label">
            <span class="label-text-alt"
              >Título usado no assunto do email ou cabeçalho da mensagem</span
            >
          </label>
        </div>

        <!-- Corpo -->
        <div class="form-control">
          <label class="label">
            <span class="label-text font-medium">Corpo da Mensagem *</span>
          </label>
          <textarea
            bind:value={corpoTemplate}
            placeholder="Digite o conteúdo da mensagem..."
            class="textarea textarea-bordered h-32"
            maxlength="2000"
          ></textarea>
          <label class="label">
            <span class="label-text-alt"
              >Use {"{{"}variavel{"}}"} para variáveis dinâmicas (ex: {"{{"}nome{"}}"},
              {"{{"}data{"}}"})</span
            >
          </label>
        </div>

        <!-- Variáveis -->
        <div class="form-control">
          <label class="label">
            <span class="label-text font-medium">Variáveis (opcional)</span>
          </label>
          <input
            type="text"
            bind:value={variaveisTemplate}
            placeholder="nome, data, valor (separadas por vírgula)"
            class="input input-bordered"
          />
          <label class="label">
            <span class="label-text-alt"
              >Liste as variáveis que podem ser substituídas no template
              (separadas por vírgula ou espaço)</span
            >
          </label>
        </div>
      </div>

      <div class="modal-action">
        <button
          class="btn btn-ghost"
          onclick={fecharModalNovoTemplate}
          disabled={criandoNovoTemplate}
        >
          Cancelar
        </button>
        <button
          class="btn btn-primary"
          onclick={salvarNovoTemplate}
          disabled={criandoNovoTemplate}
        >
          {#if criandoNovoTemplate}
            <span class="loading loading-spinner loading-sm"></span>
            Criando...
          {: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 Template
          {/if}
        </button>
      </div>
    </div>
    <div class="modal-backdrop" onclick={fecharModalNovoTemplate}></div>
  </div>
{/if}
