/**
 * OTP email for the staff document portal.
 * Same visual style as the other audit-request / auditor-assignment templates.
 */

export interface DocumentOtpEmailContext {
  recipient_name: string;
  document_title: string;
  document_category: string;
  otp: string;
  expires_in_minutes: number;
  requester_ip?: string | null;
}

export function buildDocumentOtpEmail(ctx: DocumentOtpEmailContext): {
  subject: string;
  html: string;
} {
  const subject = `Your access code for "${ctx.document_title}"`;

  const html = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>${subject}</title>
</head>
<body style="margin:0;padding:0;background:#faf9fd;font-family:Inter,Arial,sans-serif;color:#26203a;">
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background:#faf9fd;padding:32px 12px;">
    <tr>
      <td align="center">
        <table role="presentation" width="560" cellpadding="0" cellspacing="0"
               style="background:#ffffff;border:1px solid #eae5f1;border-radius:16px;overflow:hidden;">
          <!-- Header -->
          <tr>
            <td style="background:linear-gradient(120deg,#2a0f57,#4a0080 60%,#6d28d9);padding:20px 26px;color:#fff;">
              <div style="font-family:'Fraunces',Georgia,serif;font-size:18px;font-weight:600;">
                CertifyHub — Document Portal
              </div>
            </td>
          </tr>

          <!-- Body -->
          <tr>
            <td style="padding:28px 26px 8px;">
              <h2 style="font-family:'Fraunces',Georgia,serif;font-size:20px;color:#1a1033;margin:0 0 6px;">
                Hello ${escapeHtml(ctx.recipient_name)},
              </h2>
              <p style="font-size:14px;color:#4b4560;line-height:1.55;margin:0 0 18px;">
                You just requested access to
                <b>${escapeHtml(ctx.document_title)}</b>
                <span style="color:#8b8397;">(${escapeHtml(ctx.document_category)})</span>.
                Use the code below to unlock it.
              </p>

              <div style="text-align:center;margin:22px 0;">
                <div style="display:inline-block;background:#f3eefb;border:1.5px solid #d9ccf0;
                            border-radius:12px;padding:14px 26px;font-family:'Courier New',monospace;
                            font-size:32px;font-weight:800;letter-spacing:.5em;color:#4a0080;">
                  ${escapeHtml(ctx.otp)}
                </div>
              </div>

              <p style="font-size:12.5px;color:#8b8397;text-align:center;margin:0 0 22px;">
                Valid for <b>${ctx.expires_in_minutes} minutes</b>. Do not share this code with anyone.
              </p>

              ${
                ctx.requester_ip
                  ? `<p style="font-size:11.5px;color:#94a3b8;text-align:center;margin:0 0 4px;">
                       Requested from IP ${escapeHtml(ctx.requester_ip)}
                     </p>`
                  : ''
              }
            </td>
          </tr>

          <!-- Footer -->
          <tr>
            <td style="padding:18px 26px 22px;border-top:1px solid #eae5f1;background:#faf9fd;">
              <p style="font-size:11px;color:#8b8397;margin:0;line-height:1.5;">
                If you didn't request this code, you can safely ignore this email —
                access has <b>not</b> been granted. Every failed attempt is logged.
              </p>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>
  `.trim();

  return { subject, html };
}

// Small helper — never trust user-supplied strings inside HTML.
function escapeHtml(s: string): string {
  return String(s ?? '')
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;');
}
