/**
 * Sistema de Templates de E-mail
 * Sistema de Chamados Raven
 * Design inspirado em boas práticas de e-mail marketing
 */

// ============================================
// Tipos
// ============================================

export type TemplateName =
  | "test"
  | "ticket_created"
  | "ticket_resolved"
  | "ticket_assigned"
  | "ticket_status"
  | "ticket_comment"
  | "password_reset"
  | "email_verify"
  | "invite"
  | "new_login"
  | "sla_warning"
  | "sla_breached"

export type TemplateData = Record<string, unknown>

// ============================================
// Design Tokens - Sincronizado com globals.css
// ============================================

const COLORS = {
  // Primárias - cyan do sistema
  primary: "#00e8ff",
  primaryDark: "#00d6eb",
  primaryForeground: "#020617",

  // Backgrounds
  background: "#f7f8fb",
  card: "#ffffff",
  cardAlt: "#f8fafc",

  // Borders
  border: "#e2e8f0",
  borderLight: "#f1f5f9",

  // Texto
  textPrimary: "#0f172a",
  textSecondary: "#475569",
  textMuted: "#94a3b8",

  // Status - alinhado com status-badge.tsx
  statusPending: "#64748b",
  statusPendingBg: "#f1f5f9",
  statusProgress: "#0a4760",
  statusProgressBg: "#dff1fb",
  statusPaused: "#7a5901",
  statusPausedBg: "#fff3c4",
  statusResolved: "#1f6a45",
  statusResolvedBg: "#dcf4eb",

  // Prioridade
  priorityLow: "#64748b",
  priorityLowBg: "#f1f5f9",
  priorityMedium: "#0a4760",
  priorityMediumBg: "#dff1fb",
  priorityHigh: "#92400e",
  priorityHighBg: "#fef3c7",
  priorityUrgent: "#991b1b",
  priorityUrgentBg: "#fee2e2",

  // Alertas
  warning: "#d97706",
  warningBg: "#fffbeb",
  error: "#dc2626",
  errorBg: "#fef2f2",
  success: "#059669",
  successBg: "#ecfdf5",

  // Estrelas
  starActive: "#f59e0b",
  starInactive: "#e2e8f0",

  // Botao secundario
  buttonSecondary: "#0f172a",
  buttonSecondaryForeground: "#f8fafc",
}

// ============================================
// Helpers
// ============================================

function escapeHtml(str: unknown): string {
  if (str === null || str === undefined) return ""
  const s = String(str)
  return s
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#39;")
}

function formatDate(date: Date | string | number, options?: Intl.DateTimeFormatOptions): string {
  const d = date instanceof Date ? date : new Date(date)
  return d.toLocaleDateString("pt-BR", {
    timeZone: "America/Sao_Paulo",
    day: "2-digit",
    month: "2-digit",
    year: "numeric",
    hour: "2-digit",
    minute: "2-digit",
    ...options,
  })
}

function formatDateShort(date: Date | string | number): string {
  const d = date instanceof Date ? date : new Date(date)
  return d.toLocaleDateString("pt-BR", {
    timeZone: "America/Sao_Paulo",
    day: "2-digit",
    month: "short",
    year: "numeric",
  })
}

// ============================================
// Componentes de E-mail
// ============================================

function getStatusStyle(status: string): { bg: string; color: string; label: string } {
  const statusMap: Record<string, { bg: string; color: string; label: string }> = {
    PENDING: { bg: COLORS.statusPendingBg, color: COLORS.statusPending, label: "Pendente" },
    AWAITING_ATTENDANCE: { bg: COLORS.statusProgressBg, color: COLORS.statusProgress, label: "Em andamento" },
    PAUSED: { bg: COLORS.statusPausedBg, color: COLORS.statusPaused, label: "Pausado" },
    RESOLVED: { bg: COLORS.statusResolvedBg, color: COLORS.statusResolved, label: "Resolvido" },
  }
  return statusMap[status] ?? { bg: COLORS.statusPendingBg, color: COLORS.statusPending, label: status }
}

function getPriorityStyle(priority: string): { bg: string; color: string; label: string } {
  const priorityMap: Record<string, { bg: string; color: string; label: string }> = {
    LOW: { bg: COLORS.priorityLowBg, color: COLORS.priorityLow, label: "Baixa" },
    MEDIUM: { bg: COLORS.priorityMediumBg, color: COLORS.priorityMedium, label: "Média" },
    HIGH: { bg: COLORS.priorityHighBg, color: COLORS.priorityHigh, label: "Alta" },
    URGENT: { bg: COLORS.priorityUrgentBg, color: COLORS.priorityUrgent, label: "Urgente" },
  }
  return priorityMap[priority] ?? { bg: COLORS.priorityMediumBg, color: COLORS.priorityMedium, label: priority }
}

// Badge pill - estilo arredondado como no sistema
function badge(label: string, bg: string, color: string): string {
  return `<span style="display:inline-block;padding:6px 14px;border-radius:9999px;font-size:13px;font-weight:600;background:${bg};color:${color};border:1px solid ${bg};">${escapeHtml(label)}</span>`
}

function statusBadge(status: string): string {
  const style = getStatusStyle(status)
  return badge(style.label, style.bg, style.color)
}

function priorityBadge(priority: string): string {
  const style = getPriorityStyle(priority)
  return badge(style.label, style.bg, style.color)
}

// Botao principal - estilo cyan do sistema
function buttonPrimary(label: string, url: string): string {
  return `
    <table cellpadding="0" cellspacing="0" border="0" style="margin:0 auto;">
      <tr>
        <td align="center" style="border-radius:12px;background:${COLORS.primary};">
          <a href="${escapeHtml(url)}" target="_blank" style="display:inline-block;padding:14px 32px;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:15px;font-weight:600;color:${COLORS.primaryForeground};text-decoration:none;border-radius:12px;">${escapeHtml(label)}</a>
        </td>
      </tr>
    </table>
  `
}

// Botao secundario - estilo escuro
function buttonSecondary(label: string, url: string): string {
  return `
    <table cellpadding="0" cellspacing="0" border="0" style="margin:0 auto;">
      <tr>
        <td align="center" style="border-radius:12px;background:${COLORS.buttonSecondary};">
          <a href="${escapeHtml(url)}" target="_blank" style="display:inline-block;padding:14px 32px;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:15px;font-weight:600;color:${COLORS.buttonSecondaryForeground};text-decoration:none;border-radius:12px;">${escapeHtml(label)}</a>
        </td>
      </tr>
    </table>
  `
}

// Link de texto
function textLink(label: string, url: string): string {
  return `<a href="${escapeHtml(url)}" style="color:${COLORS.primaryDark};text-decoration:none;font-weight:500;">${escapeHtml(label)}</a>`
}

// Card de informações do ticket
function ticketInfoCard(data: {
  reference: number | string
  subject: string
  status?: string
  priority?: string
  requesterName?: string
  assigneeName?: string
  createdAt?: Date | string
}): string {
  const rows: string[] = []

  // Número do chamado com destaque
  rows.push(`
    <tr>
      <td style="padding:12px 16px;border-bottom:1px solid ${COLORS.borderLight};">
        <table width="100%" cellpadding="0" cellspacing="0">
          <tr>
            <td style="color:${COLORS.textMuted};font-size:13px;font-weight:500;width:120px;">Chamado</td>
            <td style="color:${COLORS.textPrimary};font-size:15px;font-weight:700;">#${escapeHtml(data.reference)}</td>
          </tr>
        </table>
      </td>
    </tr>
  `)

  // Assunto
  rows.push(`
    <tr>
      <td style="padding:12px 16px;border-bottom:1px solid ${COLORS.borderLight};">
        <table width="100%" cellpadding="0" cellspacing="0">
          <tr>
            <td style="color:${COLORS.textMuted};font-size:13px;font-weight:500;width:120px;vertical-align:top;">Assunto</td>
            <td style="color:${COLORS.textPrimary};font-size:14px;line-height:1.5;">${escapeHtml(data.subject)}</td>
          </tr>
        </table>
      </td>
    </tr>
  `)

  // Status e Prioridade na mesma linha
  if (data.status || data.priority) {
    rows.push(`
      <tr>
        <td style="padding:12px 16px;border-bottom:1px solid ${COLORS.borderLight};">
          <table width="100%" cellpadding="0" cellspacing="0">
            <tr>
              ${data.status ? `
                <td style="width:50%;">
                  <span style="color:${COLORS.textMuted};font-size:13px;font-weight:500;display:block;margin-bottom:6px;">Status</span>
                  ${statusBadge(data.status)}
                </td>
              ` : ""}
              ${data.priority ? `
                <td style="width:50%;">
                  <span style="color:${COLORS.textMuted};font-size:13px;font-weight:500;display:block;margin-bottom:6px;">Prioridade</span>
                  ${priorityBadge(data.priority)}
                </td>
              ` : ""}
            </tr>
          </table>
        </td>
      </tr>
    `)
  }

  // Solicitante e Responsável
  if (data.requesterName || data.assigneeName) {
    rows.push(`
      <tr>
        <td style="padding:12px 16px;${data.createdAt ? `border-bottom:1px solid ${COLORS.borderLight};` : ""}">
          <table width="100%" cellpadding="0" cellspacing="0">
            <tr>
              ${data.requesterName ? `
                <td style="width:50%;">
                  <span style="color:${COLORS.textMuted};font-size:13px;font-weight:500;display:block;margin-bottom:4px;">Solicitante</span>
                  <span style="color:${COLORS.textPrimary};font-size:14px;">${escapeHtml(data.requesterName)}</span>
                </td>
              ` : ""}
              ${data.assigneeName ? `
                <td style="width:50%;">
                  <span style="color:${COLORS.textMuted};font-size:13px;font-weight:500;display:block;margin-bottom:4px;">Responsável</span>
                  <span style="color:${COLORS.textPrimary};font-size:14px;">${escapeHtml(data.assigneeName)}</span>
                </td>
              ` : ""}
            </tr>
          </table>
        </td>
      </tr>
    `)
  }

  // Data de criação
  if (data.createdAt) {
    rows.push(`
      <tr>
        <td style="padding:12px 16px;">
          <table width="100%" cellpadding="0" cellspacing="0">
            <tr>
              <td style="color:${COLORS.textMuted};font-size:13px;font-weight:500;width:120px;">Criado em</td>
              <td style="color:${COLORS.textSecondary};font-size:14px;">${formatDate(data.createdAt)}</td>
            </tr>
          </table>
        </td>
      </tr>
    `)
  }

  return `
    <table width="100%" cellpadding="0" cellspacing="0" style="background:${COLORS.cardAlt};border-radius:12px;border:1px solid ${COLORS.border};margin:24px 0;">
      ${rows.join("")}
    </table>
  `
}

// Sistema de estrelas de avaliação
function ratingStars(rateUrl: string): string {
  const stars: string[] = []
  for (let i = 1; i <= 5; i++) {
    stars.push(`
      <td style="padding:0 6px;">
        <a href="${escapeHtml(rateUrl)}?rating=${i}" style="text-decoration:none;">
          <span style="font-size:32px;color:${COLORS.starActive};line-height:1;">&#9733;</span>
        </a>
      </td>
    `)
  }

  return `
    <div style="text-align:center;padding:24px 0;">
      <table cellpadding="0" cellspacing="0" style="margin:0 auto;" align="center">
        <tr>
          ${stars.join("")}
        </tr>
      </table>
      <p style="color:${COLORS.textMuted};font-size:13px;margin:12px 0 0 0;text-align:center;">Clique em uma estrela para avaliar</p>
    </div>
  `
}

// Divisor
function divider(): string {
  return `<hr style="border:none;border-top:1px solid ${COLORS.border};margin:32px 0;">`
}

// ============================================
// Template Base
// ============================================

function baseTemplate(content: string, data: TemplateData): string {
  const appUrl = process.env.NEXT_PUBLIC_APP_URL ?? "https://tickets.esdrasrenan.com.br"
  const preferencesUrl = `${appUrl}/settings/notifications`
  const helpUrl = `${appUrl}/help`

  return `<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>${escapeHtml(data.subject ?? "Notificação")}</title>
  <!--[if mso]>
  <noscript>
    <xml>
      <o:OfficeDocumentSettings>
        <o:PixelsPerInch>96</o:PixelsPerInch>
      </o:OfficeDocumentSettings>
    </xml>
  </noscript>
  <![endif]-->
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
  </style>
</head>
<body style="margin:0;padding:0;background:${COLORS.background};font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;">

  <table width="100%" cellpadding="0" cellspacing="0" style="background:${COLORS.background};padding:40px 20px;">
    <tr>
      <td align="center">
        <table width="560" cellpadding="0" cellspacing="0" style="max-width:560px;width:100%;">

          <!-- Header com logo -->
          <tr>
            <td style="padding:0 0 32px 0;text-align:center;">
              <table cellpadding="0" cellspacing="0" style="margin:0 auto;">
                <tr>
                  <td style="background:${COLORS.primary};width:44px;height:44px;border-radius:10px;text-align:center;vertical-align:middle;">
                    <span style="color:${COLORS.primaryForeground};font-size:22px;font-weight:700;font-family:'Inter',sans-serif;">R</span>
                  </td>
                  <td style="padding-left:14px;">
                    <span style="color:${COLORS.textPrimary};font-size:22px;font-weight:700;font-family:'Inter',sans-serif;">Raven</span>
                  </td>
                </tr>
              </table>
            </td>
          </tr>

          <!-- Card principal -->
          <tr>
            <td style="background:${COLORS.card};border-radius:16px;padding:40px;box-shadow:0 1px 3px rgba(0,0,0,0.05);border:1px solid ${COLORS.border};">
              ${content}
            </td>
          </tr>

          <!-- Footer -->
          <tr>
            <td style="padding:32px 0;text-align:center;">
              <p style="color:${COLORS.textMuted};font-size:13px;margin:0 0 12px 0;line-height:1.6;">
                Este e-mail foi enviado pelo Sistema de Chamados Raven.
              </p>
              <p style="margin:0;">
                ${textLink("Gerenciar notificações", preferencesUrl)}
                <span style="color:${COLORS.textMuted};margin:0 12px;">|</span>
                ${textLink("Central de ajuda", helpUrl)}
              </p>
            </td>
          </tr>

        </table>
      </td>
    </tr>
  </table>

</body>
</html>`
}

// ============================================
// Templates
// ============================================

const templates: Record<TemplateName, (data: TemplateData) => string> = {
  // Template de teste
  test: (data) => {
    return baseTemplate(
      `
      <h1 style="color:${COLORS.textPrimary};font-size:26px;font-weight:700;margin:0 0 12px 0;text-align:center;">
        ${escapeHtml(data.title)}
      </h1>
      <p style="color:${COLORS.textSecondary};font-size:15px;line-height:1.7;margin:0 0 32px 0;text-align:center;">
        ${escapeHtml(data.message)}
      </p>
      <p style="color:${COLORS.textMuted};font-size:13px;margin:0;text-align:center;">
        Enviado em ${escapeHtml(data.timestamp)}
      </p>
    `,
      data
    )
  },

  // Abertura de chamado
  ticket_created: (data) => {
    const viewUrl = data.viewUrl as string
    return baseTemplate(
      `
      <h1 style="color:${COLORS.textPrimary};font-size:26px;font-weight:700;margin:0 0 12px 0;">
        Chamado aberto
      </h1>
      <p style="color:${COLORS.textSecondary};font-size:15px;line-height:1.7;margin:0 0 8px 0;">
        Seu chamado foi registrado com sucesso.
      </p>
      <p style="color:${COLORS.textSecondary};font-size:15px;line-height:1.7;margin:0;">
        Nossa equipe irá analisá-lo e entrar em contato em breve.
      </p>

      ${ticketInfoCard({
        reference: data.reference as number,
        subject: data.subject as string,
        status: data.status as string,
        priority: data.priority as string,
        createdAt: data.createdAt as string,
      })}

      <div style="text-align:center;margin-top:32px;">
        ${buttonPrimary("Ver chamado", viewUrl)}
      </div>
    `,
      data
    )
  },

  // Resolução de chamado
  ticket_resolved: (data) => {
    const viewUrl = data.viewUrl as string
    const rateUrl = data.rateUrl as string

    return baseTemplate(
      `
      <div style="text-align:center;margin-bottom:24px;">
        <div style="display:inline-block;width:64px;height:64px;background:${COLORS.statusResolvedBg};border-radius:50%;line-height:64px;">
          <span style="font-size:28px;">&#10003;</span>
        </div>
      </div>

      <h1 style="color:${COLORS.textPrimary};font-size:26px;font-weight:700;margin:0 0 12px 0;text-align:center;">
        Chamado resolvido
      </h1>
      <p style="color:${COLORS.textSecondary};font-size:15px;line-height:1.7;margin:0;text-align:center;">
        Seu chamado foi marcado como resolvido. Esperamos que o atendimento tenha sido satisfatório!
      </p>

      ${ticketInfoCard({
        reference: data.reference as number,
        subject: data.subject as string,
        status: "RESOLVED",
        assigneeName: data.assigneeName as string,
      })}

      ${
        data.resolutionSummary
          ? `
        <div style="background:${COLORS.successBg};border-radius:12px;padding:20px;margin:24px 0;border-left:4px solid ${COLORS.success};">
          <p style="color:${COLORS.success};font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;margin:0 0 8px 0;">Resumo da resolução</p>
          <p style="color:${COLORS.textPrimary};font-size:14px;line-height:1.6;margin:0;">${escapeHtml(data.resolutionSummary)}</p>
        </div>
      `
          : ""
      }

      ${divider()}

      <div style="text-align:center;">
        <p style="color:${COLORS.textPrimary};font-size:18px;font-weight:600;margin:0 0 8px 0;">Como foi o atendimento?</p>
        <p style="color:${COLORS.textSecondary};font-size:14px;margin:0;">Sua avaliação nos ajuda a melhorar!</p>
        ${ratingStars(rateUrl)}
      </div>

      <div style="text-align:center;margin-top:24px;">
        ${buttonSecondary("Ver detalhes", viewUrl)}
      </div>
    `,
      data
    )
  },

  // Atribuição de chamado
  ticket_assigned: (data) => {
    const viewUrl = data.viewUrl as string
    const isForRequester = data.isForRequester as boolean

    const title = isForRequester ? "Agente atribuído" : "Novo chamado atribuído"
    const message = isForRequester
      ? `O agente <strong>${escapeHtml(data.assigneeName)}</strong> foi atribuído ao seu chamado e em breve entrará em contato.`
      : `Um novo chamado foi atribuído a você. Por favor, verifique os detalhes abaixo.`

    return baseTemplate(
      `
      <h1 style="color:${COLORS.textPrimary};font-size:26px;font-weight:700;margin:0 0 12px 0;">
        ${title}
      </h1>
      <p style="color:${COLORS.textSecondary};font-size:15px;line-height:1.7;margin:0;">
        ${message}
      </p>

      ${ticketInfoCard({
        reference: data.reference as number,
        subject: data.subject as string,
        status: data.status as string,
        priority: data.priority as string,
        requesterName: data.requesterName as string,
        assigneeName: data.assigneeName as string,
      })}

      <div style="text-align:center;margin-top:32px;">
        ${buttonPrimary("Ver chamado", viewUrl)}
      </div>
    `,
      data
    )
  },

  // Mudança de status
  ticket_status: (data) => {
    const viewUrl = data.viewUrl as string
    const oldStatus = getStatusStyle(data.oldStatus as string)
    const newStatus = getStatusStyle(data.newStatus as string)

    return baseTemplate(
      `
      <h1 style="color:${COLORS.textPrimary};font-size:26px;font-weight:700;margin:0 0 12px 0;">
        Status atualizado
      </h1>
      <p style="color:${COLORS.textSecondary};font-size:15px;line-height:1.7;margin:0;">
        O status do seu chamado foi alterado.
      </p>

      ${ticketInfoCard({
        reference: data.reference as number,
        subject: data.subject as string,
      })}

      <div style="text-align:center;margin:32px 0;">
        <table cellpadding="0" cellspacing="0" style="margin:0 auto;">
          <tr>
            <td style="text-align:center;padding-right:16px;">
              <span style="color:${COLORS.textMuted};font-size:12px;display:block;margin-bottom:8px;">Anterior</span>
              ${badge(oldStatus.label, oldStatus.bg, oldStatus.color)}
            </td>
            <td style="padding:0 8px;color:${COLORS.textMuted};font-size:24px;vertical-align:bottom;padding-bottom:4px;">&#8594;</td>
            <td style="text-align:center;padding-left:16px;">
              <span style="color:${COLORS.textMuted};font-size:12px;display:block;margin-bottom:8px;">Atual</span>
              ${badge(newStatus.label, newStatus.bg, newStatus.color)}
            </td>
          </tr>
        </table>
      </div>

      <div style="text-align:center;">
        ${buttonPrimary("Ver chamado", viewUrl)}
      </div>
    `,
      data
    )
  },

  // Novo comentário
  ticket_comment: (data) => {
    const viewUrl = data.viewUrl as string

    return baseTemplate(
      `
      <h1 style="color:${COLORS.textPrimary};font-size:26px;font-weight:700;margin:0 0 12px 0;">
        Nova atualização
      </h1>
      <p style="color:${COLORS.textSecondary};font-size:15px;line-height:1.7;margin:0;">
        <strong>${escapeHtml(data.authorName)}</strong> adicionou um comentário ao seu chamado.
      </p>

      ${ticketInfoCard({
        reference: data.reference as number,
        subject: data.subject as string,
      })}

      <div style="background:${COLORS.cardAlt};border-radius:12px;padding:20px;margin:24px 0;border-left:4px solid ${COLORS.primary};">
        <div style="margin-bottom:12px;">
          <span style="color:${COLORS.textPrimary};font-size:14px;font-weight:600;">${escapeHtml(data.authorName)}</span>
          <span style="color:${COLORS.textMuted};font-size:13px;margin-left:8px;">${formatDate(data.commentedAt as string)}</span>
        </div>
        <p style="color:${COLORS.textSecondary};font-size:14px;line-height:1.7;margin:0;">
          ${escapeHtml(data.commentBody)}
        </p>
      </div>

      <div style="text-align:center;">
        ${buttonPrimary("Responder", viewUrl)}
      </div>
    `,
      data
    )
  },

  // Reset de senha
  password_reset: (data) => {
    const resetUrl = data.resetUrl as string

    return baseTemplate(
      `
      <div style="text-align:center;margin-bottom:24px;">
        <div style="display:inline-block;width:64px;height:64px;background:${COLORS.cardAlt};border-radius:50%;line-height:64px;border:1px solid ${COLORS.border};">
          <span style="font-size:28px;">&#128274;</span>
        </div>
      </div>

      <h1 style="color:${COLORS.textPrimary};font-size:26px;font-weight:700;margin:0 0 12px 0;text-align:center;">
        Redefinição de senha
      </h1>
      <p style="color:${COLORS.textSecondary};font-size:15px;line-height:1.7;margin:0 0 32px 0;text-align:center;">
        Recebemos uma solicitação para redefinir a senha da sua conta. Se você não fez essa solicitação, pode ignorar este e-mail.
      </p>

      <div style="text-align:center;margin:32px 0;">
        ${buttonPrimary("Redefinir senha", resetUrl)}
      </div>

      <p style="color:${COLORS.textMuted};font-size:13px;margin:32px 0 0 0;text-align:center;line-height:1.6;">
        Este link expira em 24 horas. Se você não solicitou a redefinição de senha, pode ignorar este e-mail com segurança.
      </p>
    `,
      data
    )
  },

  // Verificação de e-mail
  email_verify: (data) => {
    const verifyUrl = data.verifyUrl as string

    return baseTemplate(
      `
      <div style="text-align:center;margin-bottom:24px;">
        <div style="display:inline-block;width:64px;height:64px;background:${COLORS.cardAlt};border-radius:50%;line-height:64px;border:1px solid ${COLORS.border};">
          <span style="font-size:28px;">&#9993;</span>
        </div>
      </div>

      <h1 style="color:${COLORS.textPrimary};font-size:26px;font-weight:700;margin:0 0 12px 0;text-align:center;">
        Confirme seu e-mail
      </h1>
      <p style="color:${COLORS.textSecondary};font-size:15px;line-height:1.7;margin:0 0 32px 0;text-align:center;">
        Clique no botão abaixo para confirmar seu endereço de e-mail e ativar sua conta.
      </p>

      <div style="text-align:center;margin:32px 0;">
        ${buttonPrimary("Confirmar e-mail", verifyUrl)}
      </div>

      <p style="color:${COLORS.textMuted};font-size:13px;margin:32px 0 0 0;text-align:center;line-height:1.6;">
        Se você não criou uma conta, pode ignorar este e-mail com segurança.
      </p>
    `,
      data
    )
  },

  // Convite de usuário
  invite: (data) => {
    const inviteUrl = data.inviteUrl as string

    return baseTemplate(
      `
      <div style="text-align:center;margin-bottom:24px;">
        <div style="display:inline-block;width:64px;height:64px;background:${COLORS.primary};border-radius:50%;line-height:64px;">
          <span style="font-size:28px;">&#127881;</span>
        </div>
      </div>

      <h1 style="color:${COLORS.textPrimary};font-size:26px;font-weight:700;margin:0 0 12px 0;text-align:center;">
        Você foi convidado!
      </h1>
      <p style="color:${COLORS.textSecondary};font-size:15px;line-height:1.7;margin:0 0 24px 0;text-align:center;">
        <strong>${escapeHtml(data.inviterName)}</strong> convidou você para acessar o Sistema de Chamados Raven.
      </p>

      <table width="100%" cellpadding="0" cellspacing="0" style="background:${COLORS.cardAlt};border-radius:12px;border:1px solid ${COLORS.border};margin:24px 0;">
        <tr>
          <td style="padding:16px 20px;border-bottom:1px solid ${COLORS.borderLight};">
            <table width="100%" cellpadding="0" cellspacing="0">
              <tr>
                <td style="color:${COLORS.textMuted};font-size:13px;font-weight:500;width:100px;">Função</td>
                <td style="color:${COLORS.textPrimary};font-size:14px;font-weight:600;">${escapeHtml(data.roleName)}</td>
              </tr>
            </table>
          </td>
        </tr>
        ${
          data.companyName
            ? `
        <tr>
          <td style="padding:16px 20px;">
            <table width="100%" cellpadding="0" cellspacing="0">
              <tr>
                <td style="color:${COLORS.textMuted};font-size:13px;font-weight:500;width:100px;">Empresa</td>
                <td style="color:${COLORS.textPrimary};font-size:14px;">${escapeHtml(data.companyName)}</td>
              </tr>
            </table>
          </td>
        </tr>
        `
            : ""
        }
      </table>

      <div style="text-align:center;margin:32px 0;">
        ${buttonPrimary("Aceitar convite", inviteUrl)}
      </div>

      <p style="color:${COLORS.textMuted};font-size:13px;margin:24px 0 0 0;text-align:center;line-height:1.6;">
        Este convite expira em 7 dias. Se você não esperava este convite, pode ignorá-lo com segurança.
      </p>
    `,
      data
    )
  },

  // Novo login detectado
  new_login: (data) => {
    return baseTemplate(
      `
      <div style="text-align:center;margin-bottom:24px;">
        <div style="display:inline-block;width:64px;height:64px;background:${COLORS.warningBg};border-radius:50%;line-height:64px;border:1px solid ${COLORS.warning};">
          <span style="font-size:28px;">&#128274;</span>
        </div>
      </div>

      <h1 style="color:${COLORS.textPrimary};font-size:26px;font-weight:700;margin:0 0 12px 0;text-align:center;">
        Novo acesso detectado
      </h1>
      <p style="color:${COLORS.textSecondary};font-size:15px;line-height:1.7;margin:0 0 24px 0;text-align:center;">
        Detectamos um novo acesso à sua conta. Se foi você, pode ignorar este e-mail.
      </p>

      <table width="100%" cellpadding="0" cellspacing="0" style="background:${COLORS.cardAlt};border-radius:12px;border:1px solid ${COLORS.border};margin:24px 0;">
        <tr>
          <td style="padding:16px 20px;border-bottom:1px solid ${COLORS.borderLight};">
            <table width="100%" cellpadding="0" cellspacing="0">
              <tr>
                <td style="color:${COLORS.textMuted};font-size:13px;font-weight:500;width:120px;">Data/Hora</td>
                <td style="color:${COLORS.textPrimary};font-size:14px;">${formatDate(data.loginAt as string)}</td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td style="padding:16px 20px;border-bottom:1px solid ${COLORS.borderLight};">
            <table width="100%" cellpadding="0" cellspacing="0">
              <tr>
                <td style="color:${COLORS.textMuted};font-size:13px;font-weight:500;width:120px;">Dispositivo</td>
                <td style="color:${COLORS.textPrimary};font-size:14px;">${escapeHtml(data.userAgent)}</td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td style="padding:16px 20px;">
            <table width="100%" cellpadding="0" cellspacing="0">
              <tr>
                <td style="color:${COLORS.textMuted};font-size:13px;font-weight:500;width:120px;">Endereço IP</td>
                <td style="color:${COLORS.textPrimary};font-size:14px;font-family:monospace;">${escapeHtml(data.ipAddress)}</td>
              </tr>
            </table>
          </td>
        </tr>
      </table>

      <p style="color:${COLORS.textMuted};font-size:13px;margin:24px 0 0 0;text-align:center;line-height:1.6;">
        Se você não reconhece este acesso, recomendamos alterar sua senha imediatamente.
      </p>
    `,
      data
    )
  },

  // Alerta de SLA em risco
  sla_warning: (data) => {
    const viewUrl = data.viewUrl as string

    return baseTemplate(
      `
      <div style="text-align:center;margin-bottom:24px;">
        <div style="display:inline-block;width:64px;height:64px;background:${COLORS.warningBg};border-radius:50%;line-height:64px;border:2px solid ${COLORS.warning};">
          <span style="font-size:28px;">&#9888;</span>
        </div>
      </div>

      <h1 style="color:${COLORS.warning};font-size:26px;font-weight:700;margin:0 0 12px 0;text-align:center;">
        SLA em risco
      </h1>
      <p style="color:${COLORS.textSecondary};font-size:15px;line-height:1.7;margin:0 0 8px 0;text-align:center;">
        O chamado abaixo está próximo de violar o SLA.
      </p>
      <p style="color:${COLORS.textSecondary};font-size:15px;line-height:1.7;margin:0;text-align:center;">
        <strong>Ação necessária!</strong>
      </p>

      ${ticketInfoCard({
        reference: data.reference as number,
        subject: data.subject as string,
        status: data.status as string,
        priority: data.priority as string,
        requesterName: data.requesterName as string,
        assigneeName: data.assigneeName as string,
      })}

      <div style="background:${COLORS.warningBg};border-radius:12px;padding:20px;margin:24px 0;border:1px solid ${COLORS.warning};text-align:center;">
        <p style="color:${COLORS.warning};font-size:24px;font-weight:700;margin:0 0 4px 0;">
          ${escapeHtml(data.timeRemaining)}
        </p>
        <p style="color:${COLORS.textSecondary};font-size:13px;margin:0;">
          Prazo: ${formatDate(data.dueAt as string)}
        </p>
      </div>

      <div style="text-align:center;">
        ${buttonPrimary("Ver chamado", viewUrl)}
      </div>
    `,
      data
    )
  },

  // Alerta de SLA violado
  sla_breached: (data) => {
    const viewUrl = data.viewUrl as string

    return baseTemplate(
      `
      <div style="text-align:center;margin-bottom:24px;">
        <div style="display:inline-block;width:64px;height:64px;background:${COLORS.errorBg};border-radius:50%;line-height:64px;border:2px solid ${COLORS.error};">
          <span style="font-size:28px;">&#10060;</span>
        </div>
      </div>

      <h1 style="color:${COLORS.error};font-size:26px;font-weight:700;margin:0 0 12px 0;text-align:center;">
        SLA violado
      </h1>
      <p style="color:${COLORS.textSecondary};font-size:15px;line-height:1.7;margin:0 0 8px 0;text-align:center;">
        O chamado abaixo violou o SLA estabelecido.
      </p>
      <p style="color:${COLORS.textSecondary};font-size:15px;line-height:1.7;margin:0;text-align:center;">
        <strong>Atenção urgente necessária!</strong>
      </p>

      ${ticketInfoCard({
        reference: data.reference as number,
        subject: data.subject as string,
        status: data.status as string,
        priority: data.priority as string,
        requesterName: data.requesterName as string,
        assigneeName: data.assigneeName as string,
      })}

      <div style="background:${COLORS.errorBg};border-radius:12px;padding:20px;margin:24px 0;border:1px solid ${COLORS.error};text-align:center;">
        <p style="color:${COLORS.error};font-size:24px;font-weight:700;margin:0 0 4px 0;">
          ${escapeHtml(data.timeExceeded)}
        </p>
        <p style="color:${COLORS.textSecondary};font-size:13px;margin:0;">
          Prazo era: ${formatDate(data.dueAt as string)}
        </p>
      </div>

      <div style="text-align:center;">
        ${buttonPrimary("Ver chamado", viewUrl)}
      </div>
    `,
      data
    )
  },
}

// ============================================
// Exportação
// ============================================

/**
 * Renderiza um template de e-mail com os dados fornecidos
 */
export function renderTemplate(name: TemplateName, data: TemplateData): string {
  const template = templates[name]
  if (!template) {
    throw new Error(`Template "${name}" não encontrado`)
  }
  return template(data)
}

/**
 * Retorna a lista de templates disponíveis
 */
export function getAvailableTemplates(): TemplateName[] {
  return Object.keys(templates) as TemplateName[]
}
