export function verificationEmailTemplate(name: string, link: string) {
  return `
  <div style="font-family: Arial, sans-serif; max-width: 500px; margin: auto;">
    <h2>Welcome to RKDA, ${name}!</h2>
    <p>Please verify your email address to activate your student account.</p>
    <p>
      <a href="${link}" style="display:inline-block; padding:10px 20px; background:#c0392b; color:#fff; text-decoration:none; border-radius:5px;">
        Verify Email
      </a>
    </p>
    <p>Or copy this link into your browser:</p>
    <p>${link}</p>
    <p>This link expires in 24 hours.</p>
  </div>
  `;
}

export function welcomeEmailTemplate(
  name: string,
  studentId: string,
  email: string,
  password: string,
  loginLink: string
) {
  return `
  <div style="font-family: Arial, sans-serif; max-width: 500px; margin: auto;">
    <h2>Welcome to RKDA, ${name}!</h2>
    <p>Your student account has been created by the admin. Here are your login details:</p>
    <p>
      <strong>Student ID:</strong> ${studentId}<br/>
      <strong>Email:</strong> ${email}<br/>
      <strong>Password:</strong> ${password}
    </p>
    <p>
      <a href="${loginLink}" style="display:inline-block; padding:10px 20px; background:#c0392b; color:#fff; text-decoration:none; border-radius:5px;">
        Login Now
      </a>
    </p>
    <p>We recommend changing your password after your first login.</p>
  </div>
  `;
}

export function slotAssignedEmailTemplate(
  name: string,
  entries: { dateLabel: string; startTime: string; endTime: string }[],
  dashboardLink: string
) {
  const rows = entries
    .map(
      (e) =>
        `<tr>
          <td style="padding:6px 10px; border-bottom:1px solid #eee;">${e.dateLabel}</td>
          <td style="padding:6px 10px; border-bottom:1px solid #eee;">${e.startTime} - ${e.endTime}</td>
        </tr>`
    )
    .join("");

  return `
  <div style="font-family: Arial, sans-serif; max-width: 500px; margin: auto;">
    <h2>Hi ${name}, your class schedule has been updated!</h2>
    <p>Here ${entries.length > 1 ? "are your newly assigned class slots" : "is your newly assigned class slot"}:</p>
    <table style="width:100%; border-collapse: collapse; margin: 12px 0;">
      <thead>
        <tr>
          <th style="text-align:left; padding:6px 10px; border-bottom:2px solid #c0392b;">Date</th>
          <th style="text-align:left; padding:6px 10px; border-bottom:2px solid #c0392b;">Time</th>
        </tr>
      </thead>
      <tbody>
        ${rows}
      </tbody>
    </table>
    <p>
      <a href="${dashboardLink}" style="display:inline-block; padding:10px 20px; background:#c0392b; color:#fff; text-decoration:none; border-radius:5px;">
        View My Schedule
      </a>
    </p>
    <p>If you have any questions about this schedule, please contact the academy.</p>
  </div>
  `;
}

export function slotChangedEmailTemplate(
  name: string,
  dateLabel: string,
  oldTime: { startTime: string; endTime: string },
  newTime: { startTime: string; endTime: string },
  dashboardLink: string
) {
  return `
  <div style="font-family: Arial, sans-serif; max-width: 500px; margin: auto;">
    <h2>Hi ${name}, your class slot has been changed</h2>
    <p><strong>Date:</strong> ${dateLabel}</p>
    <p>
      <strong>Previous time:</strong> ${oldTime.startTime} - ${oldTime.endTime}<br/>
      <strong>New time:</strong> ${newTime.startTime} - ${newTime.endTime}
    </p>
    <p>
      <a href="${dashboardLink}" style="display:inline-block; padding:10px 20px; background:#c0392b; color:#fff; text-decoration:none; border-radius:5px;">
        View My Schedule
      </a>
    </p>
    <p>If you have any questions about this change, please contact the academy.</p>
  </div>
  `;
}

export function scheduleRequestApprovedEmailTemplate(
  name: string,
  oldDetails: { dateLabel: string; startTime: string; endTime: string },
  newDetails: { dateLabel: string; startTime: string; endTime: string },
  dashboardLink: string
) {
  return `
  <div style="font-family: Arial, sans-serif; max-width: 500px; margin: auto;">
    <h2>Hi ${name}, your schedule change request was approved!</h2>
    <p>
      <strong>Previous slot:</strong><br/>
      ${oldDetails.dateLabel} — ${oldDetails.startTime} - ${oldDetails.endTime}
    </p>
    <p>
      <strong>New slot:</strong><br/>
      ${newDetails.dateLabel} — ${newDetails.startTime} - ${newDetails.endTime}
    </p>
    <p>
      <a href="${dashboardLink}" style="display:inline-block; padding:10px 20px; background:#198754; color:#fff; text-decoration:none; border-radius:5px;">
        View My Schedule
      </a>
    </p>
  </div>
  `;
}

export function scheduleRequestRejectedEmailTemplate(
  name: string,
  currentDetails: { dateLabel: string; startTime: string; endTime: string },
  requestedDetails: { dateLabel: string; startTime: string; endTime: string },
  adminNote: string | null,
  dashboardLink: string
) {
  return `
  <div style="font-family: Arial, sans-serif; max-width: 500px; margin: auto;">
    <h2>Hi ${name}, your schedule change request was not approved</h2>
    <p>
      <strong>Your current slot remains unchanged:</strong><br/>
      ${currentDetails.dateLabel} — ${currentDetails.startTime} - ${currentDetails.endTime}
    </p>
    <p>
      <strong>Requested slot (not approved):</strong><br/>
      ${requestedDetails.dateLabel} — ${requestedDetails.startTime} - ${requestedDetails.endTime}
    </p>
    ${adminNote ? `<p><strong>Note from academy:</strong> ${adminNote}</p>` : ""}
    <p>
      <a href="${dashboardLink}" style="display:inline-block; padding:10px 20px; background:#6c757d; color:#fff; text-decoration:none; border-radius:5px;">
        View My Schedule
      </a>
    </p>
    <p>If you'd like to submit a different request, you can do so from your dashboard.</p>
  </div>
  `;
}

export function bookingCancelledEmailTemplate(
  name: string,
  dateLabel: string,
  time: { startTime: string; endTime: string },
  dashboardLink: string
) {
  return `
  <div style="font-family: Arial, sans-serif; max-width: 500px; margin: auto;">
    <h2>Hi ${name}, a class slot has been cancelled</h2>
    <p><strong>Date:</strong> ${dateLabel}</p>
    <p><strong>Time:</strong> ${time.startTime} - ${time.endTime}</p>
    <p>This slot has been removed from your schedule.</p>
    <p>
      <a href="${dashboardLink}" style="display:inline-block; padding:10px 20px; background:#c0392b; color:#fff; text-decoration:none; border-radius:5px;">
        View My Schedule
      </a>
    </p>
    <p>If you have any questions about this change, please contact the academy.</p>
  </div>
  `;
}

export function scheduleCancelledEmailTemplate(
  name: string,
  startDateLabel: string,
  endDateLabel: string,
  dashboardLink: string
) {
  return `
  <div style="font-family: Arial, sans-serif; max-width: 500px; margin: auto;">
    <h2>Hi ${name}, your recurring class assignment has been cancelled</h2>
    <p>Your recurring schedule from <strong>${startDateLabel}</strong> to <strong>${endDateLabel}</strong> has been cancelled. All future dates under it have been freed up.</p>
    <p>
      <a href="${dashboardLink}" style="display:inline-block; padding:10px 20px; background:#c0392b; color:#fff; text-decoration:none; border-radius:5px;">
        View My Schedule
      </a>
    </p>
    <p>If you have any questions about this change, please contact the academy.</p>
  </div>
  `;
}

export function resetPasswordEmailTemplate(name: string, link: string) {
  return `
  <div style="font-family: Arial, sans-serif; max-width: 500px; margin: auto;">
    <h2>Hi ${name}, reset your password</h2>
    <p>We received a request to reset your RKDA student account password. Click the button below to set a new password.</p>
    <p>
      <a href="${link}" style="display:inline-block; padding:10px 20px; background:#c0392b; color:#fff; text-decoration:none; border-radius:5px;">
        Reset Password
      </a>
    </p>
    <p>Or copy this link into your browser:</p>
    <p>${link}</p>
    <p>This link expires in 1 hour. If you didn't request this, you can safely ignore this email — your password will remain unchanged.</p>
  </div>
  `;
}
export function scheduleChangeRequestedEmailTemplate(
  studentName: string,
  studentIdOrEmail: string,
  currentDetails: { dateLabel: string; startTime: string; endTime: string } | null,
  requestedDetails: { dateLabel: string; startTime: string; endTime: string },
  reason: string | null,
  adminDashboardLink: string
) {
  return `
  <div style="font-family: Arial, sans-serif; max-width: 500px; margin: auto;">
    <h2>New schedule change request</h2>
    <p><strong>Student:</strong> ${studentName} (${studentIdOrEmail})</p>
    ${
      currentDetails
        ? `<p>
            <strong>Current slot:</strong><br/>
            ${currentDetails.dateLabel} — ${currentDetails.startTime} - ${currentDetails.endTime}
          </p>`
        : `<p><strong>Current slot:</strong> Not linked to an existing booking</p>`
    }
    <p>
      <strong>Requested slot:</strong><br/>
      ${requestedDetails.dateLabel} — ${requestedDetails.startTime} - ${requestedDetails.endTime}
    </p>
    ${reason ? `<p><strong>Reason given:</strong> ${reason}</p>` : ""}
    <p>
      <a href="${adminDashboardLink}" style="display:inline-block; padding:10px 20px; background:#c0392b; color:#fff; text-decoration:none; border-radius:5px;">
        Review Request
      </a>
    </p>
  </div>
  `;
}

export function contactEnquiryThankYouEmailTemplate(name: string) {
  return `
  <div style="font-family: Arial, sans-serif; max-width: 500px; margin: auto;">
    <h2>Thank you for contacting RKDA, ${name}!</h2>
    <p>We've received your message and a member of our team will get back to you as soon as possible.</p>
    <p>If your enquiry is urgent, feel free to call us directly at <a href="tel:2487613901">248-761-3901</a>.</p>
    <p>Thanks again for reaching out!</p>
  </div>
  `;
}

export function contactEnquiryAdminNotificationEmailTemplate(details: {
  id: string;
  name: string;
  email: string;
  phone: string | null;
  subject: string | null;
  message: string;
  companyName: string | null;
  ipAddress: string | null;
  submittedAt: Date;
  dashboardLink: string;
}) {
  const {
    id,
    name,
    email,
    phone,
    subject,
    message,
    companyName,
    ipAddress,
    submittedAt,
    dashboardLink,
  } = details;

  const submittedLabel = submittedAt.toLocaleString("en-US", {
    dateStyle: "medium",
    timeStyle: "short",
  });

  const row = (label: string, value: string) => `
    <tr>
      <td style="padding:8px 12px; border-bottom:1px solid #f0f0f0; color:#888; font-size:13px; white-space:nowrap; vertical-align:top;">
        ${label}
      </td>
      <td style="padding:8px 12px; border-bottom:1px solid #f0f0f0; color:#222; font-size:14px;">
        ${value}
      </td>
    </tr>
  `;

  return `
  <div style="font-family: Arial, sans-serif; max-width: 560px; margin: auto; border: 1px solid #eee; border-radius: 8px; overflow: hidden;">
    <div style="background:#c0392b; padding:20px 24px;">
      <p style="margin:0; color:#fff; font-size:12px; letter-spacing:1px; text-transform:uppercase; opacity:0.85;">
        RKDA &middot; Website Enquiry
      </p>
      <h2 style="margin:6px 0 0; color:#fff; font-size:20px;">New Contact Enquiry</h2>
    </div>

    <div style="padding:24px;">
      <p style="margin:0 0 16px; color:#444; font-size:14px;">
        You've received a new enquiry from the RKDA contact form. Details are below.
      </p>

      <table style="width:100%; border-collapse: collapse; margin-bottom: 20px;">
        ${row("Name", name)}
        ${row("Email", `<a href="mailto:${email}" style="color:#c0392b; text-decoration:none;">${email}</a>`)}
        ${phone ? row("Phone", `<a href="tel:${phone}" style="color:#c0392b; text-decoration:none;">${phone}</a>`) : ""}
        ${companyName ? row("Company", companyName) : ""}
        ${subject ? row("Subject", subject) : ""}
        ${row("Submitted", submittedLabel)}
      </table>

      <p style="margin:0 0 6px; color:#888; font-size:13px;">Message</p>
      <div style="background:#f9f9f9; border-radius:6px; padding:14px 16px; color:#222; font-size:14px; line-height:1.5; margin-bottom:24px; white-space:pre-wrap;">${message}</div>

      <p>
        <a href="${dashboardLink}" style="display:inline-block; padding:11px 24px; background:#c0392b; color:#fff; text-decoration:none; border-radius:5px; font-size:14px; font-weight:bold;">
          View Enquiry
        </a>
      </p>

      ${
        ipAddress
          ? `<p style="margin:20px 0 0; color:#aaa; font-size:11px;">Enquiry ID: ${id} &middot; Submitted from IP: ${ipAddress}</p>`
          : `<p style="margin:20px 0 0; color:#aaa; font-size:11px;">Enquiry ID: ${id}</p>`
      }
    </div>
  </div>
  `;
}