/**
 * Resend email helper — server-side only, never exposes API key.
 * Uses the Resend REST API directly.
 */

const RESEND_API_KEY = process.env.RESEND_API_KEY;
const RESEND_API_URL = "https://api.resend.com/emails";
const FROM_EMAIL = "Vela <onboarding@resend.dev>"; // Update with verified domain in production

interface SendEmailOptions {
  to: string[];
  subject: string;
  html: string;
  replyTo?: string;
}

export async function sendEmail(options: SendEmailOptions): Promise<{ id: string } | { error: string }> {
  if (!RESEND_API_KEY) {
    console.warn("RESEND_API_KEY not configured — email not sent");
    return { error: "RESEND_API_KEY not configured" };
  }

  try {
    const res = await fetch(RESEND_API_URL, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${RESEND_API_KEY}`,
      },
      body: JSON.stringify({
        from: FROM_EMAIL,
        to: options.to,
        subject: options.subject,
        html: options.html,
        reply_to: options.replyTo,
      }),
    });

    const data = await res.json();

    if (!res.ok) {
      console.error("Resend API error:", data);
      return { error: data.message || "Failed to send email" };
    }

    return { id: data.id };
  } catch (error) {
    console.error("Resend API network error:", error);
    return { error: "Network error sending email" };
  }
}

// ── Email templates ──────────────────────────────────────────

export function leaveApprovalEmailTemplate(
  employeeName: string,
  leaveType: string,
  startDate: string,
  endDate: string
): { subject: string; html: string } {
  return {
    subject: `Leave Request Approved — ${employeeName}`,
    html: `
      <div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 480px; margin: 0 auto;">
        <div style="background: #1D9E75; padding: 24px; border-radius: 8px 8px 0 0;">
          <h1 style="color: white; margin: 0; font-size: 20px;">Leave Request Approved</h1>
        </div>
        <div style="border: 1px solid #E2E8F0; border-top: none; padding: 24px; border-radius: 0 0 8px 8px;">
          <p style="color: #374151; font-size: 15px; line-height: 1.6;">
            Hi ${employeeName},
          </p>
          <p style="color: #374151; font-size: 15px; line-height: 1.6;">
            Your leave request has been <strong style="color: #1D9E75;">approved</strong>.
          </p>
          <div style="background: #F0FDF9; border: 1px solid #A7F3D0; border-radius: 6px; padding: 16px; margin: 16px 0;">
            <p style="margin: 0; color: #065F46; font-size: 14px;">
              <strong>Type:</strong> ${leaveType}<br/>
              <strong>From:</strong> ${startDate}<br/>
              <strong>To:</strong> ${endDate}
            </p>
          </div>
          <p style="color: #6B7280; font-size: 13px; margin-top: 24px;">
            This is an automated notification from Vela.
          </p>
        </div>
      </div>
    `,
  };
}

export function leaveRejectionEmailTemplate(
  employeeName: string,
  leaveType: string,
  startDate: string,
  endDate: string,
  reason: string
): { subject: string; html: string } {
  return {
    subject: `Leave Request Update — ${employeeName}`,
    html: `
      <div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 480px; margin: 0 auto;">
        <div style="background: #EF4444; padding: 24px; border-radius: 8px 8px 0 0;">
          <h1 style="color: white; margin: 0; font-size: 20px;">Leave Request Not Approved</h1>
        </div>
        <div style="border: 1px solid #E2E8F0; border-top: none; padding: 24px; border-radius: 0 0 8px 8px;">
          <p style="color: #374151; font-size: 15px; line-height: 1.6;">
            Hi ${employeeName},
          </p>
          <p style="color: #374151; font-size: 15px; line-height: 1.6;">
            Unfortunately, your leave request could not be approved at this time.
          </p>
          <div style="background: #FEF2F2; border: 1px solid #FECACA; border-radius: 6px; padding: 16px; margin: 16px 0;">
            <p style="margin: 0; color: #991B1B; font-size: 14px;">
              <strong>Type:</strong> ${leaveType}<br/>
              <strong>From:</strong> ${startDate}<br/>
              <strong>To:</strong> ${endDate}<br/>
              <strong>Reason:</strong> ${reason}
            </p>
          </div>
          <p style="color: #6B7280; font-size: 13px; margin-top: 24px;">
            This is an automated notification from Vela.
          </p>
        </div>
      </div>
    `,
  };
}

export function invoiceNotificationTemplate(
  clientName: string,
  invoiceNumber: string,
  amount: string,
  dueDate: string,
  invoiceUrl?: string
): { subject: string; html: string } {
  return {
    subject: `Invoice ${invoiceNumber} from Vela`,
    html: `
      <div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 480px; margin: 0 auto;">
        <div style="background: #1D9E75; padding: 24px; border-radius: 8px 8px 0 0;">
          <h1 style="color: white; margin: 0; font-size: 20px;">Invoice ${invoiceNumber}</h1>
        </div>
        <div style="border: 1px solid #E2E8F0; border-top: none; padding: 24px; border-radius: 0 0 8px 8px;">
          <p style="color: #374151; font-size: 15px; line-height: 1.6;">
            Hi ${clientName},
          </p>
          <p style="color: #374151; font-size: 15px; line-height: 1.6;">
            Please find your invoice below.
          </p>
          <div style="background: #F0FDF9; border: 1px solid #A7F3D0; border-radius: 6px; padding: 16px; margin: 16px 0;">
            <p style="margin: 0; color: #065F46; font-size: 14px;">
              <strong>Invoice:</strong> ${invoiceNumber}<br/>
              <strong>Amount:</strong> ${amount}<br/>
              <strong>Due:</strong> ${dueDate}
            </p>
          </div>
          ${invoiceUrl ? `<a href="${invoiceUrl}" style="display: inline-block; background: #1D9E75; color: white; padding: 10px 20px; border-radius: 6px; text-decoration: none; font-size: 14px; margin-top: 8px;">View Invoice</a>` : ""}
          <p style="color: #6B7280; font-size: 13px; margin-top: 24px;">
            This is an automated notification from Vela.
          </p>
        </div>
      </div>
    `,
  };
}

export function contractSignatureTemplate(
  employeeName: string,
  contractTitle: string,
  signUrl: string
): { subject: string; html: string } {
  return {
    subject: `Please sign your contract: ${contractTitle}`,
    html: `
      <div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 480px; margin: 0 auto;">
        <div style="background: #1D9E75; padding: 24px; border-radius: 8px 8px 0 0;">
          <h1 style="color: white; margin: 0; font-size: 20px;">Sign Your Contract</h1>
        </div>
        <div style="border: 1px solid #E2E8F0; border-top: none; padding: 24px; border-radius: 0 0 8px 8px;">
          <p style="color: #374151; font-size: 15px; line-height: 1.6;">
            Hi ${employeeName},
          </p>
          <p style="color: #374151; font-size: 15px; line-height: 1.6;">
            Please review and sign your contract: <strong>${contractTitle}</strong>
          </p>
          <div style="margin: 24px 0;">
            <a href="${signUrl}" style="display: inline-block; background: #1D9E75; color: white; padding: 12px 24px; border-radius: 6px; text-decoration: none; font-size: 14px; font-weight: 500;">Sign Contract</a>
          </div>
          <p style="color: #6B7280; font-size: 13px; margin-top: 24px;">
            This is an automated notification from Vela.
          </p>
        </div>
      </div>
    `,
  };
}