export type FindIdEmailInput = {
  accountEmails: string[];
  loginUrl: string;
};

function escapeHtml(value: string) {
  return value
    .replaceAll("&", "&amp;")
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;")
    .replaceAll('"', "&quot;")
    .replaceAll("'", "&#039;");
}

export function renderFindIdEmail(input: FindIdEmailInput) {
  const accountEmails = Array.from(
    new Set(
      input.accountEmails
        .map((email) => email.trim().toLowerCase())
        .filter(Boolean),
    ),
  );
  const accountCount = accountEmails.length;
  const accountLabel = accountCount === 1 ? "아이디 1개" : `아이디 ${accountCount}개`;
  const bodyText = [
    "오피셜메일에 가입한 아이디를 확인했습니다.",
    "",
    ...accountEmails.map((email, index) => `${index + 1}. ${email}`),
    "",
    `총 ${accountLabel}가 이 보조 이메일에 연결되어 있습니다.`,
    `로그인: ${input.loginUrl}`,
    "",
    "직접 요청하지 않았다면 이 메일은 무시하셔도 됩니다.",
    "",
    "오피셜메일",
  ].join("\n");
  const accountRows = accountEmails
    .map(
      (email, index) => `
        <tr>
          <td style="padding:${index === 0 ? "18px" : "0"} 18px ${index === accountCount - 1 ? "18px" : "12px"};">
            <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background:#ffffff;border:1px solid #e1e9f7;border-radius:12px;">
              <tr>
                <td width="34" style="padding:14px 0 14px 14px;vertical-align:middle;">
                  <span style="display:inline-block;width:28px;height:28px;border-radius:9px;background:#edf4ff;color:#2f6df6;text-align:center;font-size:12px;font-weight:800;line-height:28px;">${index + 1}</span>
                </td>
                <td style="padding:14px 14px 14px 10px;font-size:15px;line-height:1.5;font-weight:700;color:#17243d;word-break:break-all;">${escapeHtml(email)}</td>
              </tr>
            </table>
          </td>
        </tr>`,
    )
    .join("");
  const bodyHtml = `<!doctype html>
<html lang="ko">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"></head>
<body style="margin:0;padding:0;background:#f3f7fd;font-family:'Apple SD Gothic Neo','Noto Sans KR',Arial,sans-serif;color:#17243d;">
  <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background:#f3f7fd;">
    <tr><td align="center" style="padding:36px 16px;">
      <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="max-width:600px;background:#ffffff;border:1px solid #e0e8f4;border-radius:20px;overflow:hidden;box-shadow:0 18px 50px rgba(24,54,112,.08);">
        <tr><td style="padding:30px 32px 14px;">
          <table role="presentation" cellspacing="0" cellpadding="0" border="0"><tr>
            <td width="34" height="34" style="width:34px;height:34px;padding:0;border-radius:10px;background:#2f6df6;color:#ffffff;text-align:center;vertical-align:middle;">
              <table role="presentation" width="34" height="34" cellspacing="0" cellpadding="0" border="0"><tr>
                <td align="center" valign="middle" style="padding:0 0 3px;font-family:Arial,sans-serif;font-size:18px;line-height:18px;mso-line-height-rule:exactly;">&#9993;</td>
              </tr></table>
            </td>
            <td style="padding-left:10px;font-size:18px;font-weight:800;letter-spacing:-.04em;color:#2f6df6;">오피셜메일</td>
          </tr></table>
        </td></tr>
        <tr><td style="padding:0 32px 8px;font-size:24px;line-height:1.4;font-weight:800;letter-spacing:-.04em;color:#111b30;">가입한 아이디를<br>확인했습니다</td></tr>
        <tr><td style="padding:0 32px 24px;font-size:14px;line-height:1.75;color:#63728c;">입력하신 보조 이메일에 연결된 오피셜메일 ${escapeHtml(accountLabel)}를 안내드립니다.</td></tr>
        <tr><td style="padding:0 32px 24px;">
          <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background:#f6f9ff;border:1px solid #e4ebf7;border-radius:16px;">
            <tr><td style="padding:18px 18px 0;font-size:12px;font-weight:700;color:#71819b;">로그인 아이디</td></tr>
            ${accountRows}
          </table>
        </td></tr>
        <tr><td align="center" style="padding:0 32px 28px;"><a href="${escapeHtml(input.loginUrl)}" target="_blank" style="display:block;padding:14px 20px;border-radius:12px;background:#2f6df6;color:#ffffff;text-decoration:none;font-size:14px;font-weight:700;">오피셜메일 로그인</a></td></tr>
        <tr><td style="border-top:1px solid #edf1f6;padding:20px 32px 25px;font-size:11px;line-height:1.75;color:#8a98ad;">본 메일은 아이디 찾기 요청에 따라 자동 발송되었습니다. 직접 요청하지 않았다면 별도의 조치 없이 이 메일을 무시해 주세요.</td></tr>
      </table>
    </td></tr>
  </table>
</body>
</html>`;

  return {
    bodyHtml,
    bodyText,
    subject: `[오피셜메일] 가입한 ${accountLabel}를 안내드립니다`,
  };
}
