import * as env from "../config/env.config";
import { readFileSync } from "fs";
import path from "path";
import { fileURLToPath } from "url";

// const __filename = fileURLToPath(import.meta.url);
// const __dirname = path.dirname(__filename);
// const css = readFileSync(path.join(__dirname, "../public/css/main.css"), "utf8");

// export const forgotPasswordTemplate = (name: string, code: string) => `
// <!DOCTYPE html>
// <html lang="es">
//   <head>
//     <meta charset="UTF-8" />
//     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
//     <title>Reseteo de contraseña</title>
//   </head>
//   <body style="text-align: center;">
//     <img src="${env.API_URL}/img/logo_pasta.png" alt="Logo" style="width: 200px; margin-bottom: 20px;">
//     <h1>Hola, ${name}!</h1>
//     <p>Para resetear tu contraseña, por favor ingrese el siguiente código de verificación en la aplicación:</p>
//     <p style="font-size: 20px; font-weight: bold;">${code}</p>
//   </body>
// </html>
// `;

export const forgotPasswordTemplate = (name: string, code: string) =>
  template(`
  <div class="v14_1932">¡Hola, ${name}!</div>
  <div class="v14_1933">Para resetear tu contraseña, por favor ingresa el siguiente código de verificación en la aplicación:</div>
  <div>
    <div class="v14_1934">
      <span class="v14_1935">${code}</span>
    </div>
  </div>
  
`);

// export const registerTemplate = (code: string) => `
// <!DOCTYPE html>
// <html lang="es">
//   <head>
//     <meta charset="UTF-8" />
//     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
//     <title>Completa tu registro</title>
//   </head>
//   <body style="text-align: center;">
//     <img src="${env.PUBLIC_API_URL}/img/logo_pasta.png" alt="Logo" style="width: 130px; margin-bottom: 20px;">
//     <p>Para completar tu registro, por favor ingrese el siguiente código de verificación en la aplicación:</p>
//     <p style="font-size: 20px; font-weight: bold;">${code}</p>
//   </body>
// </html>
// `;

export const registerTemplate = (code: string) =>
  template(`
  <span class="v14_1932">¡Hola!</span>
  <span class="v14_1933">Casi tienes tu Pasta en el bolsillo. Solo falta este código en la app para validar tu correo:</span>
  <div class="v14_1934">
    <span class="v14_1935">${code}</span>
  </div>
`);

export const registerAdminTemplate = (url: string) =>
  template(`
  <span class="v14_1932">¡Hola!</span>
  <span class="v14_1933">Para completar tu registro en el administrador, por favor haz click en el siguiente enlace:</span>
  <div class="v14_1934" style="width: 100%; text-align: center;">
    <a target="_blank" href="${url}">
      <span class="v14_1935">Completar registro</span>
    </a>
  </div>
`);

export const forgotPasswordAdminTemplate = (url: string) =>
  template(`
  <span class="v14_1932">¡Hola!</span>
  <span class="v14_1933">Para reestablecer tu contraseña en el administrador, por favor haz click en el siguiente enlace:</span>
  <div class="v14_1934" style="width: 100%; text-align: center;">
    <a target="_blank" href="${url}">
      <span class="v14_1935">Restablecer contraseña</span>
    </a>
  </div>
`);

// export const changePasswordTemplate = (name: string, code: string) => `
// <!DOCTYPE html>
// <html lang="es">
//   <head>
//     <meta charset="UTF-8" />
//     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
//     <title>Cambio de contraseña</title>
//   </head>
//   <body style="text-align: center;">
//     <img src="${env.PUBLIC_API_URL}/img/logo_pasta.png" alt="Logo" style="width: 130px; margin-bottom: 20px;">
//     <p>Hola, ${name}!</p>
//     <p>Para cambiar tu contraseña, por favor ingrese el siguiente código de verificación en la aplicación:</p>
//     <p style="font-size: 20px; font-weight: bold;">${code}</p>
//   </body>
// </html>
// `;
export const changePasswordTemplate = (name: string, code: string) =>
  template(`  
  <div class="v14_1932">¡Hola, ${name}!</div>
  <div class="v14_1933">Para cambiar tu contraseña, por favor ingresa el siguiente código de verificación en la aplicación:</div>
  <div>
    <div class="v14_1934">
      <span class="v14_1935">${code}</span>
    </div>
  </div>
`);

export const editProfileTemplate = (name: string, code: string) =>
  template(`  
  <div class="v14_1932">¡Hola, ${name}!</div>
  <div class="v14_1933">Para modificar tu perfil, por favor ingresa el siguiente código de verificación en la aplicación:</div>
  <div>
    <div class="v14_1934">
      <span class="v14_1935">${code}</span>
    </div>
  </div>
`);

const template = (children: string) => `
<!DOCTYPE html>
<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Google Sans&display=swap" rel="stylesheet" />
    <title>Document</title>
    <style>

      * {
  box-sizing: border-box;
}
body {
  font-size: 14px;
}   
.v14_1864 {
  width: 600px;       
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  position: relative;
  top: 0px;
  left: 0px;
  overflow: hidden;
  margin: 0 auto;
}
.v14_1865 {
  width: 518px;
  background: rgba(242, 242, 242, 1);
  opacity: 1;
  position: absolute;
  top: 159px;
  left: 41px;
  border-top-left-radius: 45px;
  border-top-right-radius: 45px;
  border-bottom-left-radius: 45px;
  border-bottom-right-radius: 45px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.10000000149011612);
  overflow: hidden;
  padding: 30px;
  margin: 0 auto;
}
.email-img {
  width: 320px;
  height: 234px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 1;
  position: absolute;
  top: 91px;
  left: 99px;
  overflow: hidden;
}
.v14_1931 {
  width: 453px;
  height: 351px;
  background: url("../images/v14_1931.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 1;
  position: absolute;
  top: 358px;
  left: 34px;
  overflow: hidden;
}
.v14_1932 {
  width: 453px;
  color: rgba(75, 75, 75, 1);
  position: relative;
  top: 0px;
  left: 0px;
  font-family: 'Google Sans', Arial, sans-serif;
  font-weight: Bold;
  font-size: 32px;
  opacity: 1;
  text-align: left;
   margin: 30px 0;
}
.v14_1933 {
  width: 453px;
  color: rgba(75, 75, 75, 1);
  position: absolute;
  top: 72px;
  left: 0px;
  font-family: 'Google Sans', Arial, sans-serif;
  font-weight: Medium;
  font-size: 18px;
  opacity: 1;
  text-align: left;
  margin: 30px 0;
}
.v14_1934 {
  width: 151px;
  height: 60px;
  background: rgba(255, 255, 255, 1);
  padding: 6px 16px;
  margin: 30px auto;
  opacity: 1;
  position: absolute;
  top: 176px;
  left: 150px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  overflow: hidden;
  text-align: center;
}
.v14_1935 {
  width: 80px;
  color: rgba(75, 75, 75, 1);
  position: absolute;
  top: 6px;
  left: 16px;
  font-family: 'Google Sans', Arial, sans-serif;
  font-weight: Bold;
  font-size: 32px;
  opacity: 1;
  text-align: center;
}
.copy {
  width: 28px;
  height: 28px;
  background: url("../images/copy.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 1;
  position: absolute;
  top: 16px;
  left: 107px;
  overflow: hidden;
}
.v14_1937 {
  width: 453px;
  height: 1px;
  background: rgba(207, 207, 207, 1);
  opacity: 1;
  position: absolute;
  top: 284px;
  left: 0px;
}
.v14_1938 {
  width: 453px;
  background: url("../images/v14_1938.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 1;
  position: absolute;
  top: 309px;
  left: 0px;
  overflow: hidden;
}
.v14_1939 {
  color: rgba(75, 75, 75, 1);
  position: relative;
  top: 0px;
  left: 0px;
  font-size: 14px;
  opacity: 1;
  text-align: left;
}
.v14_1940 {
  width: 90px;
  color: rgba(75, 75, 75, 1);
  position: absolute;
  top: 0px;
  left: 363px;
  font-family: 'Google Sans', Arial, sans-serif;
  font-weight: Medium;
  font-size: 14px;
  opacity: 1;
  text-align: right;
}
.instagram {
  width: 18px;
  height: 18px;
  background: url("../images/instagram.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 1;
  position: absolute;
  top: 25px;
  left: 435px;
  overflow: hidden;
}
.v14_1945 {
  width: 453px;
  color: rgba(149, 149, 149, 1);
  position: absolute;
  top: 947px;
  left: 75px;
  font-family: 'Google Sans', Arial, sans-serif;
  font-weight: Medium;
  font-size: 10px;
  opacity: 1;
  text-align: center; 
}
.logo_pasta {
  width: 100px;
  height: 54px;
  background: url("../images/logo_pasta.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 1;
  position: absolute;
  top: 53px;
  left: 250px;
  overflow: hidden;
}

    </style>
  </head>
  <body>
    <div class="v14_1864">
      <div class="v14_1865">
        <div class="email-img" style="margin: 20px auto;">
         <img src="${env.PUBLIC_API_URL}/img/email-img.png" alt="Email Image">
        </div>
        <div class="v14_1931">
          ${children}
          <div class="v14_1937"></div>
          <div class="v14_1938">
            <div class="v14_1939">Enviado por pasta.app</div>
            <div>
              <span class="v14_1940">Síguenos en:</span>
              <div class="instagram">
                <img src="${env.PUBLIC_API_URL}/img/instagram.png" alt="Instagram Image">
              </div>
            </div>
             
          </div>
        </div>
      </div>
      <span class="v14_1945">Recibes este correo electrónico porque te registraste en Pasta. © Pasta. 2025. Todos los derechos reservados.</span>
      <div class="logo_pasta"></div>
    </div>
  </body>
</html>

`;
