import FormData from 'form-data';
import Mailgun from 'mailgun.js';

const mailgun = new (Mailgun as any)(FormData);
const mg = mailgun.client({
  username: 'api',
  key: process.env.MAILGUN_API_KEY || '',
});

const DOMAIN = process.env.MAILGUN_DOMAIN || 'sandbox06aa4efa8cc342878b7470a7c9113df3.mailgun.org';
const FROM = process.env.FROM_EMAIL || `LabWise <postmaster@${DOMAIN}>`;

export async function sendEmail({
  to,
  subject,
  html,
}: {
  to: string;
  subject: string;
  html: string;
}) {
  await mg.messages.create(DOMAIN, {
    from: FROM,
    to: [to],
    subject,
    html,
  });
}

/* ------------------------------------------------------------------ */
/*  Shared email layout                                                */
/* ------------------------------------------------------------------ */

function emailLayout(body: string) {
  return `<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body style="margin:0;padding:0;background:#f0f5f3;font-family:'Inter',Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased">
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background:#f0f5f3;padding:40px 16px">
    <tr>
      <td align="center">
        <table role="presentation" width="480" cellpadding="0" cellspacing="0" style="max-width:480px;width:100%">
          <!-- Header -->
          <tr>
            <td align="center" style="padding-bottom:24px">
              <img src="https://labwise.wahwa.com/logo.png" alt="LabWise" width="140" style="display:block;border:0;height:auto">
            </td>
          </tr>
          <!-- Card -->
          <tr>
            <td style="background:#ffffff;border-radius:12px;border:1px solid rgba(45,90,74,0.12);padding:40px 36px">
              ${body}
            </td>
          </tr>
          <!-- Footer -->
          <tr>
            <td align="center" style="padding-top:24px">
              <p style="font-family:'Inter',Arial,Helvetica,sans-serif;font-size:12px;color:#5a7a6f;margin:0">
                &copy; ${new Date().getFullYear()} LabWise &mdash; AI-powered lab management
              </p>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>`;
}

/* ------------------------------------------------------------------ */
/*  Email templates                                                    */
/* ------------------------------------------------------------------ */

export function verificationEmailHtml(url: string) {
  return emailLayout(`
    <h2 style="font-family:'Inter',Arial,Helvetica,sans-serif;font-size:22px;font-weight:700;color:#1a3a2e;margin:0 0 8px">
      Verify your email
    </h2>
    <p style="font-family:'Inter',Arial,Helvetica,sans-serif;font-size:14px;color:#5a7a6f;line-height:1.6;margin:0 0 28px">
      Thanks for creating a LabWise account. Click the button below to verify your email address and get started.
    </p>
    <table role="presentation" cellpadding="0" cellspacing="0" style="margin:0 0 28px">
      <tr>
        <td style="background:#2d5a4a;border-radius:8px">
          <a href="${url}" style="display:inline-block;padding:14px 32px;font-family:'Inter',Arial,Helvetica,sans-serif;font-size:14px;font-weight:600;color:#ffffff;text-decoration:none">
            Verify Email
          </a>
        </td>
      </tr>
    </table>
    <p style="font-family:'Inter',Arial,Helvetica,sans-serif;font-size:12px;color:#5a7a6f;line-height:1.5;margin:0 0 8px">
      Or copy and paste this link into your browser:
    </p>
    <p style="font-family:'Inter',Arial,Helvetica,sans-serif;font-size:12px;color:#2d5a4a;word-break:break-all;line-height:1.5;margin:0 0 28px">
      ${url}
    </p>
    <div style="border-top:1px solid rgba(45,90,74,0.12);padding-top:20px">
      <p style="font-family:'Inter',Arial,Helvetica,sans-serif;font-size:12px;color:#9ab0a8;margin:0">
        If you didn't create a LabWise account, you can safely ignore this email.
      </p>
    </div>
  `);
}

export function resetPasswordEmailHtml(url: string) {
  return emailLayout(`
    <h2 style="font-family:'Inter',Arial,Helvetica,sans-serif;font-size:22px;font-weight:700;color:#1a3a2e;margin:0 0 8px">
      Reset your password
    </h2>
    <p style="font-family:'Inter',Arial,Helvetica,sans-serif;font-size:14px;color:#5a7a6f;line-height:1.6;margin:0 0 28px">
      We received a request to reset your LabWise password. Click the button below to choose a new one. This link expires in 1 hour.
    </p>
    <table role="presentation" cellpadding="0" cellspacing="0" style="margin:0 0 28px">
      <tr>
        <td style="background:#2d5a4a;border-radius:8px">
          <a href="${url}" style="display:inline-block;padding:14px 32px;font-family:'Inter',Arial,Helvetica,sans-serif;font-size:14px;font-weight:600;color:#ffffff;text-decoration:none">
            Reset Password
          </a>
        </td>
      </tr>
    </table>
    <p style="font-family:'Inter',Arial,Helvetica,sans-serif;font-size:12px;color:#5a7a6f;line-height:1.5;margin:0 0 8px">
      Or copy and paste this link into your browser:
    </p>
    <p style="font-family:'Inter',Arial,Helvetica,sans-serif;font-size:12px;color:#2d5a4a;word-break:break-all;line-height:1.5;margin:0 0 28px">
      ${url}
    </p>
    <div style="border-top:1px solid rgba(45,90,74,0.12);padding-top:20px">
      <p style="font-family:'Inter',Arial,Helvetica,sans-serif;font-size:12px;color:#9ab0a8;margin:0">
        If you didn't request a password reset, you can safely ignore this email. Your password won't be changed.
      </p>
    </div>
  `);
}
