const OFFICIAL_MAIL_LOGO_URL =
  process.env.MAIL_AI_RELAY_LOGO_URL?.trim() ||
  "https://mail.officialsite.kr/images/officialmail-logo-128.png";

export type SystemLifecycleEmail = {
  bodyHtml: string;
  bodyText: string;
  subject: string;
};

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

function renderLifecycleEmailHtml(input: {
  actionLabel: string;
  actionUrl: string;
  description: string;
  footer: string;
  steps: string[];
  title: string;
}) {
  const steps = input.steps
    .map(
      (step, index) => `
        <tr>
          <td width="34" style="padding:${index === 0 ? "18px" : "0"} 0 12px 18px;vertical-align:top;">
            <span style="display:inline-block;width:26px;height:26px;border-radius:8px;background:#eaf2ff;color:#2f6df6;text-align:center;font-size:12px;font-weight:800;line-height:26px;">${index + 1}</span>
          </td>
          <td style="padding:${index === 0 ? "20px" : "2px"} 18px 12px 10px;font-size:14px;line-height:1.55;font-weight:650;color:#253653;">${escapeHtml(step)}</td>
        </tr>`,
    )
    .join("");

  return `<!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="30" height="30" style="width:30px;height:30px;padding:0;vertical-align:middle;"><img src="${escapeHtml(OFFICIAL_MAIL_LOGO_URL)}" width="30" height="30" alt="" style="display:block;width:30px;height:30px;border:0;outline:none;text-decoration:none;"></td>
            <td style="padding-left:10px;font-size:18px;line-height:30px;font-weight:800;letter-spacing:-.04em;color:#2f6df6;vertical-align:middle;">오피셜메일</td>
          </tr></table>
        </td></tr>
        <tr><td style="padding:0 32px 10px;font-size:24px;line-height:1.4;font-weight:800;letter-spacing:-.04em;color:#111b30;">${escapeHtml(input.title)}</td></tr>
        <tr><td style="padding:0 32px 24px;font-size:14px;line-height:1.8;color:#63728c;">${escapeHtml(input.description)}</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;">
            ${steps}
          </table>
        </td></tr>
        <tr><td align="center" style="padding:0 32px 28px;"><a href="${escapeHtml(input.actionUrl)}" target="_blank" style="display:block;padding:14px 20px;border-radius:12px;background:#2f6df6;color:#ffffff;text-decoration:none;font-size:14px;font-weight:700;">${escapeHtml(input.actionLabel)}</a></td></tr>
        <tr><td style="border-top:1px solid #edf1f6;padding:20px 32px 25px;font-size:11px;line-height:1.75;color:#8a98ad;">${escapeHtml(input.footer)}</td></tr>
      </table>
    </td></tr>
  </table>
</body>
</html>`;
}

export function renderSystemWelcomeEmail(input: {
  companyName: string;
  domainSetupUrl: string;
  mailboxEmail: string;
}): SystemLifecycleEmail {
  const companyName = input.companyName.trim() || "대표";
  const bodyText = [
    `${companyName}님, 오피셜메일에 오신 것을 환영합니다.`,
    "",
    `대표 메일 ${input.mailboxEmail} 계정이 생성되었습니다.`,
    "현재 도메인 연결이 완료되지 않아 아직 외부 메일을 주고받을 수 없습니다.",
    "먼저 도메인 DNS 설정을 완료해주세요.",
    "",
    "처음 설정 순서",
    "1. 도메인 DNS 값 등록",
    "2. 오피셜메일에서 연결 상태 확인",
    "3. 연결 완료 후 테스트 메일 발송",
    "",
    "DNS 변경 사항은 반영까지 시간이 걸릴 수 있습니다.",
    `도메인 연결: ${input.domainSetupUrl}`,
    "",
    "문의가 필요하면 이 메일에 답장해주세요.",
    "",
    "오피셜메일",
  ].join("\n");

  return {
    bodyHtml: renderLifecycleEmailHtml({
      actionLabel: "도메인 연결하기",
      actionUrl: input.domainSetupUrl,
      description: `대표 메일 ${input.mailboxEmail} 계정이 생성되었습니다. 외부 메일 송수신을 시작하려면 먼저 도메인 DNS 연결을 완료해주세요.`,
      footer: "DNS 변경 사항은 반영까지 시간이 걸릴 수 있습니다. 도움이 필요하면 이 메일에 답장해주세요.",
      steps: ["도메인 DNS 값 등록", "오피셜메일에서 연결 상태 확인", "연결 완료 후 테스트 메일 발송"],
      title: `${companyName}님, 대표 메일이 생성되었습니다`,
    }),
    bodyText,
    subject: `[오피셜메일] ${companyName}님의 대표 메일이 생성되었습니다`,
  };
}

export function renderDomainConnectionCompletedEmail(input: {
  companyName: string;
  domain: string;
  mailboxEmail: string;
  mailboxUrl: string;
}): SystemLifecycleEmail {
  const companyName = input.companyName.trim() || "대표";
  const bodyText = [
    `${companyName}님, ${input.domain} 도메인 연결이 완료되었습니다.`,
    "",
    `DNS 설정이 확인되어 대표 메일 ${input.mailboxEmail}에서 이제 실제 메일 송수신을 시작할 수 있습니다.`,
    "",
    "시작 순서",
    "1. 받은메일함 열기",
    "2. 외부 메일 주소로 테스트 메일 발송",
    "3. 대표 메일로 수신 및 회신 확인",
    "",
    "DNS 레코드를 변경하면 메일 연결 상태에 영향을 줄 수 있습니다.",
    `받은메일함: ${input.mailboxUrl}`,
    "",
    "문의가 필요하면 이 메일에 답장해주세요.",
    "",
    "오피셜메일",
  ].join("\n");

  return {
    bodyHtml: renderLifecycleEmailHtml({
      actionLabel: "받은메일함 열기",
      actionUrl: input.mailboxUrl,
      description: `DNS 설정이 확인되어 대표 메일 ${input.mailboxEmail}에서 이제 실제 메일 송수신을 시작할 수 있습니다.`,
      footer: "DNS 레코드를 변경하면 메일 연결 상태에 영향을 줄 수 있습니다. 도움이 필요하면 이 메일에 답장해주세요.",
      steps: ["받은메일함 열기", "외부 메일 주소로 테스트 메일 발송", "대표 메일로 수신 및 회신 확인"],
      title: `${input.domain} 연결이 완료되었습니다`,
    }),
    bodyText,
    subject: `[오피셜메일] ${input.domain} 도메인 연결이 완료되었습니다`,
  };
}
