import { emailLayout } from './email-layout';

export const adminCourseApprovalTemplate = (
  trainerName: string,
  courseTitle: string,
  approveUrl: string,
  rejectUrl: string,
  projectName: string,
  requestType: 'publish' | 'unpublish'
) => {
  const isPublish = requestType === 'publish';
  const actionText = isPublish ? 'Publish' : 'Unpublish';
  const color = isPublish ? '#10b981' : '#f59e0b'; // Green for publish, Amber for unpublish

  const content = `
    <p style="margin-bottom: 25px; font-size: 16px; color: #475569;">
      A trainer has requested a status change for their course. Please review the details below and take a decision.
    </p>

    <div style="background-color: #f8fafc; padding: 25px; border-radius: 12px; border: 1px solid #e2e8f0; margin-bottom: 30px;">
      <h3 style="margin-top: 0; color: #64748b; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 20px;">Request Details</h3>
      
      <div style="margin-bottom: 15px;">
        <span style="color: #94a3b8; font-size: 13px; display: block; margin-bottom: 4px;">Trainer</span>
        <span style="color: #1e293b; font-size: 15px; font-weight: 600;">${trainerName}</span>
      </div>

      <div style="margin-bottom: 15px;">
        <span style="color: #94a3b8; font-size: 13px; display: block; margin-bottom: 4px;">Course Title</span>
        <span style="color: #1e293b; font-size: 15px; font-weight: 600;">${courseTitle}</span>
      </div>

      <div>
        <span style="color: #94a3b8; font-size: 13px; display: block; margin-bottom: 4px;">Action Requested</span>
        <span style="color: ${color}; font-size: 14px; font-weight: 700; background-color: ${color}15; padding: 4px 12px; border-radius: 20px; text-transform: uppercase; border: 1px solid ${color}30;">
          ${actionText} Course
        </span>
      </div>
    </div>

    <table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-top: 40px; border-top: 1px solid #f1f5f9; padding-top: 40px;">
      <tr>
        <td align="center">
          <table border="0" cellspacing="0" cellpadding="0" style="margin-bottom: 16px; width: 100%; max-width: 320px;">
            <tr>
              <td align="center" bgcolor="#10b981" style="border-radius: 12px; border: 1px solid #059669; box-shadow: 0 2px 4px rgba(16, 185, 129, 0.1);">
                <a href="${approveUrl}" target="_blank" style="font-size: 16px; font-family: 'Inter', Helvetica, Arial, sans-serif; color: #ffffff !important; text-decoration: none; padding: 18px 20px; border-radius: 12px; display: block; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;">
                  Confirm & ${actionText}
                </a>
              </td>
            </tr>
          </table>
          
          <table border="0" cellspacing="0" cellpadding="0" style="width: 100%; max-width: 320px;">
            <tr>
              <td align="center" bgcolor="#ffffff" style="border-radius: 12px; border: 1px solid #fecaca;">
                <a href="${rejectUrl}" target="_blank" style="font-size: 14px; font-family: 'Inter', Helvetica, Arial, sans-serif; color: #ef4444 !important; text-decoration: none; padding: 14px 20px; border-radius: 12px; display: block; font-weight: 600;">
                  Decline Change Request
                </a>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>

    <p style="margin-top: 40px; font-size: 13px; color: #94a3b8; text-align: center; font-style: italic;">
      This is a high-priority administrative request. These secure links will expire in 7 days. Please process it at your earliest convenience to maintain platform activity.
    </p>
  `;

  return emailLayout(content, `Course Status Change Request: ${courseTitle}`, projectName);
};
