/**
 * Correos con el diseño del tema — portado de `home/templates/emails/`.
 *
 * De las 7 plantillas de Django solo `security_token` y `activation` traían el
 * diseño; las otras 5 eran HTML soso, de ahí que aquí TODAS usen la misma
 * maqueta: la de `security_token`.
 *
 * La plantilla de Django era un volcado del DOM de Gmail. Al portarla se quitó
 * lo que no era diseño: los enlaces iban envueltos en el rastreador de Mailjet
 * (`079xk.mjt.lu`), que además redirigía a **ultimowow.com** en vez de a
 * nosotros; había un píxel de apertura, un "Click on me" oculto y atributos que
 * mete Gmail al mostrar el correo. Los 9 enlaces reales se reapuntan aquí.
 *
 * Ninguna URL va a fuego: todas cuelgan de SITE_URL (la variable que ya usa el
 * resto del proyecto), así que cambiar de dominio es tocar el .env. Ojo: en un
 * correo los enlaces han de ser ABSOLUTOS — se abre desde Gmail, no desde
 * nuestro dominio, así que "/ruta" no valdría.
 *
 * El contenido es el nuestro, no el de Django: el `activation` de allí mandaba
 * la contraseña en texto plano y aquí no se manda (además, con Battle.net se
 * entra con el correo, no con un usuario).
 */

import { MAX_GAME_ACCOUNTS, gameAccountDisplayName } from './bnet'

const SERVER_NAME = 'NightSpire'

/** Raíz del sitio, sin barra final. De aquí salen todos los enlaces e imágenes. */
function siteUrl(): string {
  return (process.env.SITE_URL || 'https://nightspire.gg').replace(/\/+$/, '')
}

/** Los correos son HTML crudo: hay que escapar todo lo que venga de fuera. */
export function esc(s: string): string {
  return String(s)
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
}

// Estilos calcados del diseño original.
const P_MAIN = "Margin:0;font-size:14px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';line-height:21px;color:#ebdec2"
// Igual que el principal pero en el tono apagado: es lo que hace el diseño.
const P_DATA = P_MAIN.replace('color:#ebdec2', 'color:#b1997f')
const BTN = "text-decoration:none;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';font-size:16px;color:#ebdec2;border-style:solid;border-color:#211917;border-width:10px 20px 10px 20px;display:inline-block;background:#211917;border-radius:0px;font-weight:normal;font-style:normal;line-height:19px;width:auto;text-align:center"
const H1 = "Margin:0;line-height:45px;font-family:georgia,times,'times new roman',serif;font-size:30px;font-style:normal;font-weight:normal;color:#b17c02"
const TD = 'padding:0;Margin:0'
const TD_LAST = 'padding:0;Margin:0;padding-top:5px;padding-bottom:20px'

/** Párrafo normal (crema). El HTML que se le pase ya debe ir escapado. */
function p(html: string, td: string = TD): string {
  return `<tr style="border-collapse:collapse"><td align="left" style="${td}"><p style="${P_MAIN}">${html}</p></td></tr>`
}

/** Párrafo de datos (cuenta, token…), en el tono apagado del diseño. */
function pData(html: string): string {
  return `<tr style="border-collapse:collapse"><td align="left" style="${TD}"><p style="${P_DATA}">${html}</p></td></tr>`
}

/** La línea separadora. */
function divider(): string {
  return `<tr style="border-collapse:collapse"><td align="center" style="padding:20px;Margin:0;font-size:0"><table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px"><tbody><tr style="border-collapse:collapse"><td style="padding:0;Margin:0;border-bottom:2px solid #5c4c44;background:none;height:1px;width:100%;margin:0px"></td></tr></tbody></table></td></tr>`
}

/** El botón del diseño (el mismo que traía `activation`). */
function button(href: string, text: string): string {
  return `<tr style="border-collapse:collapse"><td align="center" style="padding:0;Margin:0;padding-top:10px;padding-bottom:20px"><span style="border-style:solid;border-color:#211917;background:#211917;border-width:0px;display:inline-block;border-radius:0px;width:auto"><a href="${href}" target="_blank" style="${BTN}">${text}</a></span></td></tr>`
}

/**
 * Enlace de reserva: si el botón no tira, el usuario copia y pega. Lo hacía el
 * `activation` original y lo hacen ya nuestros correos.
 */
function fallbackLink(link: string): string {
  return p(
    `Si el botón no funciona, copia y pega este enlace en tu navegador:<br><span style="word-break:break-all;color:#2471a9">${esc(link)}</span>`,
  )
}

/** Cierre común a todas las plantillas. */
function signature(): string {
  return p(`<br><br>Atentamente, el Equipo de ${SERVER_NAME}.`, TD_LAST)
}

/**
 * La maqueta: cabecera + <h1> + filas de contenido + pie.
 * @param label rótulo superior en mayúsculas (p.ej. TOKEN DE SEGURIDAD)
 * @param title el <h1> grande
 * @param rows  filas hechas con p()/pData()/divider()/button()
 */
function layout(label: string, title: string, rows: string[], locale = 'es'): string {
  const site = siteUrl()
  const year = new Date().getFullYear()
  const head = `<div style="width:100%;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';padding:0;Margin:0"> 
  <div style="background-color:#0f0f0f"> 
    
   <table width="100%" cellspacing="0" cellpadding="0" style="border-collapse:collapse;border-spacing:0px;padding:0;Margin:0;width:100%;height:100%;background-repeat:repeat;background-position:center top"> 
     <tbody><tr style="border-collapse:collapse"> 
      <td valign="top" style="padding:0;Margin:0"> 
       <table cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse;border-spacing:0px;table-layout:fixed!important;width:100%;background-color:transparent;background-repeat:repeat;background-position:center top"> 
         <tbody><tr style="border-collapse:collapse"> 
          <td align="center" style="padding:0;Margin:0"> 
           <table cellspacing="0" cellpadding="0" align="center" style="border-collapse:collapse;border-spacing:0px;background-color:transparent;width:600px"> 
             <tbody><tr style="border-collapse:collapse"> 
              <td align="left" background="${site}/ns-themes/ns-ryu/ns-images/ns-mails/ns-mail-footer.jpg" style="Margin:0;padding-top:10px;padding-bottom:10px;padding-left:10px;padding-right:10px;background-image:url(${site}/ns-themes/ns-ryu/ns-images/ns-mails/ns-mail-footer.jpg);background-repeat:no-repeat;background-position:left top"> 
                
               <table cellspacing="0" cellpadding="0" align="left" style="border-collapse:collapse;border-spacing:0px;float:left"> 
                 <tbody><tr style="border-collapse:collapse"> 
                  <td align="left" style="padding:0;Margin:0;width:280px"> 
                   <table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="border-collapse:collapse;border-spacing:0px"> 
                     <tbody><tr style="border-collapse:collapse"> 
                      <td align="left" id="title-mail-header" style="padding:0;Margin:0"><p style="Margin:0;font-size:11px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';line-height:17px;color:#b1997f">${label}</p></td> 
                     </tr> 
                   </tbody></table></td> 
                 </tr> 
               </tbody></table> 
                
               <table cellspacing="0" cellpadding="0" align="right" style="border-collapse:collapse;border-spacing:0px;float:right"> 
                 <tbody><tr style="border-collapse:collapse"> 
                  <td align="left" style="padding:0;Margin:0"> 
                   <table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="border-collapse:collapse;border-spacing:0px"> 
                     <tbody><tr style="border-collapse:collapse"> 
                      <td style="padding:0;Margin:0"> 
                       <table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="border-collapse:collapse;border-spacing:0px"> 
                         <tbody><tr id="header-mail-links" style="border-collapse:collapse"> 
                          <td style="Margin:0;padding-left:5px;padding-right:5px;padding-top:3px;padding-bottom:0px;border:0" width="50%" bgcolor="transparent" align="center"><a style="font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';font-size:14px;text-decoration:none;display:block;color:#2471a9" href="${site}/${locale}/" target="_blank">Ir al sitio</a></td>
                         </tr> 
                       </tbody></table></td> 
                     </tr> 
                   </tbody></table></td> 
                 </tr> 
               </tbody></table> 
               </td> 
             </tr> 
           </tbody></table></td> 
         </tr> 
       </tbody></table> 
       <table cellspacing="0" cellpadding="0" align="center" style="border-collapse:collapse;border-spacing:0px;table-layout:fixed!important;width:100%"> 
         <tbody><tr style="border-collapse:collapse"> 
          <td align="center" style="padding:0;Margin:0"> 
           <table style="border-collapse:collapse;border-spacing:0px;background-color:transparent;width:600px" cellspacing="0" cellpadding="0" align="center"> 
             <tbody><tr style="border-collapse:collapse"> 
              <td align="left" style="padding:0;Margin:0"> 
               <table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;border-spacing:0px"> 
                 <tbody><tr style="border-collapse:collapse"> 
                  <td align="center" valign="top" style="padding:0;Margin:0;width:600px"> 
                   <table cellpadding="0" cellspacing="0" width="100%" role="presentation" style="border-collapse:collapse;border-spacing:0px"> 
                     <tbody><tr style="border-collapse:collapse"> 
                      <td align="center" style="padding:0;Margin:0;font-size:0px"><a href="${site}/${locale}/" style="font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';font-size:14px;text-decoration:underline;color:#b58a60" target="_blank"><img src="${site}/ns-themes/ns-ryu/ns-images/ns-mails/ns-mail-logo.png" alt="" style="display:block;border:0;outline:none;text-decoration:none" width="600" class="CToWUd" data-bit="iit"></a></td> 
                     </tr> 
                   </tbody></table></td> 
                 </tr> 
               </tbody></table></td> 
             </tr> 
             <tr style="border-collapse:collapse"> 
              <td align="left" background="${site}/ns-themes/ns-ryu/ns-images/ns-mails/ns-mail-body.jpg" style="Margin:0;padding-top:40px;padding-bottom:40px;padding-left:40px;padding-right:40px;background-image:url(${site}/ns-themes/ns-ryu/ns-images/ns-mails/ns-mail-body.jpg);background-repeat:repeat;background-position:left top"> 
               <table width="100%" cellspacing="0" cellpadding="0" style="border-collapse:collapse;border-spacing:0px"> 
                 <tbody><tr style="border-collapse:collapse"> 
                  <td valign="top" align="center" style="padding:0;Margin:0;width:520px"> 
                   <table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="border-collapse:collapse;border-spacing:0px"> 
                     <tbody><tr style="border-collapse:collapse"> 
                      <td align="left" style="padding:0;Margin:0">`
  const foot = ` 
                   </tbody></table></td> 
                 </tr> 
               </tbody></table></td> 
             </tr> 
           </tbody></table></td> 
         </tr> 
       </tbody></table> 
       <table cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse;border-spacing:0px;table-layout:fixed!important;width:100%;background-color:transparent;background-repeat:repeat;background-position:center top"> 
         <tbody><tr style="border-collapse:collapse"> 
          <td align="center" style="padding:0;Margin:0"> 
           <table cellspacing="0" cellpadding="0" align="center" style="background-color:transparent;border-collapse:collapse;border-spacing:0px;width:600px"> 
             <tbody><tr style="border-collapse:collapse"> 
              <td align="left" style="padding:0;Margin:0"> 
               <table width="100%" cellspacing="0" cellpadding="0" style="border-collapse:collapse;border-spacing:0px"> 
                 <tbody><tr style="border-collapse:collapse"> 
                  <td valign="top" align="center" style="padding:0;Margin:0;width:600px"> 
                   <table width="100%" cellspacing="0" cellpadding="0" background="${site}/ns-themes/ns-ryu/ns-images/ns-mails/ns-mail-footer.jpg" style="border-collapse:collapse;border-spacing:0px;background-image:url(${site}/ns-themes/ns-ryu/ns-images/ns-mails/ns-mail-footer.jpg);background-repeat:no-repeat;background-position:left top" role="presentation"> 
                     <tbody><tr style="border-collapse:collapse"> 
                      <td align="center" style="padding:0;Margin:0;padding-top:10px"><p style="Margin:0;font-size:14px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';line-height:21px;color:#ffffff">SÍGUENOS EN</p></td> 
                     </tr> 
                     <tr style="border-collapse:collapse"> 
                      <td align="center" style="padding:0;Margin:0;padding-top:15px;padding-bottom:15px;font-size:0"> 
                       <table cellspacing="0" cellpadding="0" role="presentation" style="border-collapse:collapse;border-spacing:0px"> 
                         <tbody><tr style="border-collapse:collapse"> 
                          <td valign="top" align="center" style="padding:0;Margin:0;padding-right:20px"><a href="https://www.facebook.com/NightSpire" style="font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';font-size:14px;text-decoration:underline;color:#333333" target="_blank"><img title="Facebook" src="${site}/ns-themes/ns-ryu/ns-images/ns-mails/facebook-logo-gray.png" alt="Fb" width="32" height="32" style="display:block;border:0;outline:none;text-decoration:none" class="CToWUd" data-bit="iit"></a></td> 
                          <td valign="top" align="center" style="padding:0;Margin:0;padding-right:20px"><a href="https://www.instagram.com/NightSpire" style="font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';font-size:14px;text-decoration:underline;color:#333333" target="_blank"><img title="Instagram" src="${site}/ns-themes/ns-ryu/ns-images/ns-mails/instagram-logo-gray.png" alt="Ig" width="32" height="32" style="display:block;border:0;outline:none;text-decoration:none" class="CToWUd" data-bit="iit"></a></td> 
                          <td valign="top" align="center" style="padding:0;Margin:0;padding-right:20px"><a href="https://twitter.com/NightSpire" style="font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';font-size:14px;text-decoration:underline;color:#333333" target="_blank"><img title="Twitter" src="${site}/ns-themes/ns-ryu/ns-images/ns-mails/twitter-logo-gray.png" alt="Tw" width="32" height="32" style="display:block;border:0;outline:none;text-decoration:none" class="CToWUd" data-bit="iit"></a></td> 
                          <td valign="top" align="center" style="padding:0;Margin:0"><a href="https://www.youtube.com/@NightSpire" style="font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';font-size:14px;text-decoration:underline;color:#333333" target="_blank"><img title="Youtube" src="${site}/ns-themes/ns-ryu/ns-images/ns-mails/youtube-logo-gray.png" alt="Yt" width="32" height="32" style="display:block;border:0;outline:none;text-decoration:none" class="CToWUd" data-bit="iit"></a></td> 
                         </tr> 
                       </tbody></table></td> 
                     </tr> 
                   </tbody></table></td> 
                 </tr> 
               </tbody></table></td> 
             </tr> 
             <tr style="border-collapse:collapse"> 
              <td style="padding:0;Margin:0" align="left"> 
               <table width="100%" cellspacing="0" cellpadding="0" style="border-collapse:collapse;border-spacing:0px"> 
                 <tbody><tr style="border-collapse:collapse"> 
                  <td valign="top" align="center" style="padding:0;Margin:0;width:600px"> 
                   <table width="100%" cellspacing="0" cellpadding="0" background="${site}/ns-themes/ns-ryu/ns-images/ns-mails/ns-mail-body.jpg" style="border-collapse:collapse;border-spacing:0px;background-image:url(${site}/ns-themes/ns-ryu/ns-images/ns-mails/ns-mail-body.jpg);background-repeat:no-repeat;background-position:left top" role="presentation"> 
                     <tbody><tr style="border-collapse:collapse"> 
                      <td align="center" style="padding:0;Margin:0;padding-top:10px;padding-bottom:15px"><p style="Margin:0;font-size:14px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';line-height:21px;color:#5c4c44"><a href="${site}/${locale}/terms-and-conditions" style="font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';font-size:14px;text-decoration:none;color:#2471a9" target="_blank">Términos y Condiciones</a>&nbsp;| <a href="${site}/${locale}/refund-policy" style="font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';font-size:14px;text-decoration:none;color:#2471a9" target="_blank">Política de Reembolso</a>&nbsp;| <a href="${site}/${locale}/privacy-policy" style="font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';font-size:14px;text-decoration:none;color:#2471a9" target="_blank">Política de Privacidad</a><br>${SERVER_NAME} © ${year}</p></td>
                     </tr> 
                   </tbody></table></td> 
                 </tr> 
               </tbody></table></td> 
             </tr> 
           </tbody></table></td> 
         </tr> 
       </tbody></table></td> 
     </tr> 
   </tbody></table> 
  </div>  
 <br>

</div><div class="yj6qo"></div><div>

</div></div></div><div class="WhmR8e" data-hash="0"></div></div>`
  return head + `<h1 style="${H1}">` + esc(title) + '</h1></td></tr>' + rows.join('') + foot
}

// ─── Las 7 plantillas ────────────────────────────────────────────────────────

/** `activation.html` — alta de cuenta. */
export function activationEmailHtml(email: string, link: string, locale = 'es'): string {
  // El <h1> lo escapa `layout`, así que el email va en crudo. Es el mismo valor que
  // en «Cuenta:»: el correo tal cual se registró (con bnet, la cuenta ES el correo).
  return layout('ACTIVACIÓN DE CUENTA', `Bienvenido ${email}`, [
    p(
      `Gracias por crear una cuenta en ${SERVER_NAME}.<br>Para poder empezar a usar tu cuenta, deberás activarla haciendo clic en el botón ACTIVAR LA CUENTA.<br><br>Tus datos de cuenta son:`,
    ),
    pData(`Cuenta: ${esc(email)}<br><br>`),
    p(
      'Recuerda que se entra tanto a la web como al servidor con tu correo y tu contraseña.<br>' +
        `Recuerda que puedes crear hasta ${MAX_GAME_ACCOUNTS} cuentas que quieras desde panel de usuario asociadas a este correo.`,
    ),
    button(link, 'ACTIVAR LA CUENTA'),
    fallbackLink(link),
    divider(),
    signature(),
  ], locale)
}

/** `security_token.html` — el diseño de referencia. */
export function securityTokenEmailHtml(username: string, token: string, ip: string, locale = 'es'): string {
  return layout('TOKEN DE SEGURIDAD', 'Token de Seguridad', [
    p(
      `Alguien desde la IP ${esc(ip)} ha solicitado el Token de seguridad para la cuenta ${esc(username)}.<br>Si no has sido tú, te recomendamos cambiar la contraseña de tu cuenta.<br><br>Tus datos de cuenta son:`,
    ),
    pData(`Cuenta: ${esc(username)}<br>Token de Seguridad: ${esc(token)}<br><br>`),
    p(
      'Recuerda que este Token es sensible a mayúsculas y minúsculas.<br>Al usarlo, escríbelo exactamente de la misma forma que aparece aquí.',
    ),
    divider(),
    p(`¡No compartas el Token de Seguridad con nadie!<br><br><br>Atentamente, el Equipo de ${SERVER_NAME}.`, TD_LAST),
  ], locale)
}

/** `password_reset.html` — restablecer contraseña. */
export function passwordResetEmailHtml(email: string, link: string, locale = 'es'): string {
  return layout('RESTABLECER CONTRASEÑA', 'Restablecer Contraseña', [
    p(
      `Hemos recibido una solicitud para restablecer la contraseña de la cuenta asociada a ${esc(email)}.<br>Pulsa el botón para elegir una nueva. El enlace caduca en 1 hora.`,
    ),
    button(link, 'RESTABLECER CONTRASEÑA'),
    fallbackLink(link),
    divider(),
    p('Si no has solicitado este cambio, ignora este correo: tu contraseña no se modificará.', TD_LAST),
  ], locale)
}

/** `account_names.html` — recordatorio de cuentas de juego. */
/** `accounts` son los usernames internos («17#1»); aquí se muestran como «WOW1». */
export function accountNamesEmailHtml(email: string, accounts: string[], locale = 'es'): string {
  const list = accounts.length
    ? pData(accounts.map((a) => `Cuenta: ${esc(gameAccountDisplayName(a))}`).join('<br>') + '<br><br>')
    : pData('No hay cuentas de juego asociadas todavía.<br><br>')
  return layout('CUENTAS DE JUEGO', 'Tus Cuentas de Juego', [
    p(
      `Estas son las cuentas de juego asociadas a tu cuenta Battle.net (${esc(email)}).<br>Recuerda que para entrar a la web usas tu correo electrónico.<br><br>Tus datos de cuenta son:`,
    ),
    list,
    divider(),
    p('Si no has solicitado esta información, ignora este correo.', TD_LAST),
  ], locale)
}

/** `confirm_old_email.html` — se confirma desde el correo ACTUAL. */
/**
 * Cómo se saluda a alguien: «INNA@INNA.CL (WOW1)». Antes se saludaba con el
 * username interno («Hola 15#1»), que no le dice nada a nadie: la cuenta es el
 * correo, y el «15#1» solo tiene sentido como WOW1. Si no se sabe la cuenta de
 * juego, va el correo a secas.
 */
function saludo(email: string, gameAccount?: string | null): string {
  const wow = gameAccount ? gameAccountDisplayName(gameAccount) : ''
  return wow ? `${esc(email)} (${esc(wow)})` : esc(email)
}

export function confirmOldEmailHtml(
  email: string,
  gameAccount: string | null,
  newEmail: string,
  link: string,
  locale = 'es',
): string {
  return layout('CAMBIO DE CORREO', 'Confirmación de Cambio de Correo', [
    p(
      `Hola ${saludo(email, gameAccount)}, has solicitado cambiar tu correo en ${SERVER_NAME} a ${esc(newEmail)}.<br>Para confirmar el cambio, pulsa el botón.`,
    ),
    button(link, 'CONFIRMAR CAMBIO'),
    fallbackLink(link),
    divider(),
    p('Si no has solicitado este cambio, ignora este correo.', TD_LAST),
  ], locale)
}

/** `confirm_new_email.html` — se confirma desde el correo NUEVO. */
export function confirmNewEmailHtml(
  email: string,
  gameAccount: string | null,
  link: string,
  locale = 'es',
): string {
  return layout('NUEVO CORREO', 'Activación de Nuevo Correo', [
    p(
      `Hola ${saludo(email, gameAccount)}, tu solicitud para cambiar el correo en ${SERVER_NAME} ha sido recibida.<br>Pulsa el botón para confirmar este correo como el nuevo de tu cuenta.`,
    ),
    button(link, 'ACTIVAR NUEVO CORREO'),
    fallbackLink(link),
    divider(),
    p('Si no has realizado esta solicitud, contacta con soporte.', TD_LAST),
  ], locale)
}

/** `old_email_notification.html` — aviso al correo antiguo, ya sin enlaces. */
export function oldEmailNotificationHtml(
  email: string,
  gameAccount: string | null,
  newEmail: string,
  locale = 'es',
): string {
  return layout('CAMBIO DE CORREO', 'Cambio de Correo Realizado', [
    p(
      `Hola ${saludo(email, gameAccount)}, te avisamos de que el correo de tu cuenta en ${SERVER_NAME} se ha cambiado correctamente al siguiente:`,
    ),
    pData(`Nuevo correo: ${esc(newEmail)}<br><br>`),
    divider(),
    p('Si no has realizado este cambio, contacta con soporte inmediatamente.', TD_LAST),
  ], locale)
}

/**
 * Variante de `security_token` para el recordatorio de `/recover`: allí se
 * mandan de golpe los tokens de todas las cuentas de juego del correo, cosa que
 * la plantilla de Django (de una sola cuenta) no contemplaba.
 */
export function securityTokensListEmailHtml(
  email: string,
  items: { username: string; token: string }[],
  locale = 'es',
): string {
  return layout(
    'TOKEN DE SEGURIDAD',
    'Token de Seguridad',
    [
      p(`Estos son los Token de seguridad de las cuentas de juego asociadas a ${esc(email)}.<br><br>Tus datos de cuenta son:`),
      pData(
        items
          .map((i) => `Cuenta: ${esc(gameAccountDisplayName(i.username))}<br>Token de Seguridad: ${esc(i.token)}`)
          .join('<br><br>') +
          '<br><br>',
      ),
      p(
        'Recuerda que este Token es sensible a mayúsculas y minúsculas.<br>Al usarlo, escríbelo exactamente de la misma forma que aparece aquí.',
      ),
      divider(),
      p(`¡No compartas el Token de Seguridad con nadie!<br><br><br>Atentamente, el Equipo de ${SERVER_NAME}.`, TD_LAST),
    ],
    locale,
  )
}
