/**
 * PKWT Expiration Email Template
 * Template email untuk notifikasi kontrak PKWT yang akan berakhir
 * Mengikuti best practices untuk email HTML yang responsive dan accessible
 */

const moment = require("moment");

/* eslint-disable no-useless-escape */
module.exports = {
	html: (data) => {
		const employeeName = data.employee_name || "Employee";
		const employeeNumber = data.employee_number || "N/A";
		const contractEndDate = data.contract_end_date || null;
		const daysUntilExpiration = data.days_until_expiration || null;
		const companyName = data.company_name || "Company";

		// Format tanggal kontrak berakhir
		let formattedEndDate = "N/A";
		if (contractEndDate) {
			try {
				formattedEndDate = moment(contractEndDate).format("DD MMMM YYYY");
			} catch (error) {
				formattedEndDate = contractEndDate;
			}
		}

		// Determine urgency level and color
		let urgencyLevel = "normal";
		let urgencyColor = "#2A3F5F";
		let urgencyBgColor = "#F0F4FB";
		let urgencyMessage = "";

		if (daysUntilExpiration !== null) {
			if (daysUntilExpiration <= 7) {
				urgencyLevel = "critical";
				urgencyColor = "#DC2626";
				urgencyBgColor = "#FEE2E2";
				urgencyMessage = "Segera Perlu Tindakan";
			} else if (daysUntilExpiration <= 14) {
				urgencyLevel = "high";
				urgencyColor = "#F59E0B";
				urgencyBgColor = "#FEF3C7";
				urgencyMessage = "Perlu Perhatian";
			} else if (daysUntilExpiration <= 30) {
				urgencyLevel = "medium";
				urgencyColor = "#3B82F6";
				urgencyBgColor = "#DBEAFE";
				urgencyMessage = "Perlu Persiapan";
			} else {
				urgencyLevel = "normal";
				urgencyColor = "#2A3F5F";
				urgencyBgColor = "#F0F4FB";
				urgencyMessage = "Informasi";
			}
		}

		// Days remaining display
		const daysRemainingSection = daysUntilExpiration !== null
			? `
<!-- Days remaining section -->
<tr>
  <td style="padding:0 24px 24px 24px;">
    <table width="100%" cellpadding="0" cellspacing="0" role="presentation" style="background-color:${urgencyBgColor}; border-radius:8px; border-left:6px solid ${urgencyColor};">
      <tr>
        <td style="padding:16px 20px;">
          <div style="font-weight:700; font-size:16px; color:${urgencyColor}; margin-bottom:8px; font-family: Arial, sans-serif;">
            ${daysUntilExpiration === 0 ? "Kontrak Berakhir Hari Ini" : daysUntilExpiration === 1 ? "Kontrak Berakhir Besok" : `${daysUntilExpiration} Hari Lagi`}
          </div>
          <div style="font-size:13px; color:#475569; font-family: Arial, sans-serif;">
            ${urgencyMessage}
          </div>
        </td>
      </tr>
    </table>
  </td>
</tr>
`
			: "";

		return `<!DOCTYPE html>
        <html lang="id">
        <head>
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <title>Pemberitahuan: Kontrak PKWT Akan Berakhir</title>
          <style>
            body, table, td, a {
              -webkit-text-size-adjust: 100%;
              -ms-text-size-adjust: 100%;
            }
            table, td {
              mso-table-lspace: 0pt;
              mso-table-rspace: 0pt;
            }
            table {
              border-collapse: separate !important;
              border-spacing: 0;
              border-radius: 8px;
            }
            img {
              -ms-interpolation-mode: bicubic;
            }
            .ExternalClass {
              width: 100%;
              line-height: 100%;
            }
            a[x-apple-data-detectors] {
              color: inherit !important;
              text-decoration: none !important;
              font-size: inherit !important;
              font-family: inherit !important;
              font-weight: inherit !important;
              line-height: inherit !important;
            }
          </style>
        </head>
        <body style="margin:0; padding:0; background-color:#f8fafc; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color:#334155;">
          <center>
            <table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#f8fafc" style="padding:20px 0; min-width:320px;">
              <tr>
                <td align="center">
                  <table width="600" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff" style="border-radius:12px; overflow:hidden; border:1px solid #e2e8f0; max-width:600px;">
                    
                    <!-- Header -->
                    <tr bgcolor="${urgencyColor}">
                      <td style="padding:18px 24px; text-align:left; color:#fff;">
                        <h2 style="margin:0; font-weight:700; font-size:18px; font-family: Arial, sans-serif;">Pemberitahuan: Kontrak PKWT Akan Berakhir</h2>
                        <p style="margin:6px 0 0 0; font-weight:400; font-size:14px; color:#fff; font-family: Arial, sans-serif;">
                          Informasi penting mengenai kontrak kerja waktu tertentu
                        </p>
                      </td>
                    </tr>
        
                    <!-- Main Content -->
                    <tr>
                      <td style="padding:24px;">
                        <p style="margin:0 0 16px 0; font-size:15px; line-height:1.6; color:#334155; font-family: Arial, sans-serif;">
                          Yth. Bapak/Ibu,
                        </p>
                        <p style="margin:0 0 20px 0; font-size:15px; line-height:1.6; color:#334155; font-family: Arial, sans-serif;">
                          Dengan hormat, kami sampaikan bahwa kontrak <strong>Perjanjian Kerja Waktu Tertentu (PKWT)</strong> untuk karyawan berikut akan segera berakhir:
                        </p>
                      </td>
                    </tr>

                    <!-- Employee Information Card -->
                    <tr>
                      <td style="padding:0 24px 24px 24px;">
                        <table width="100%" cellpadding="0" cellspacing="0" role="presentation" style="background-color:#F8FAFC; border-radius:8px; border:1px solid #E2E8F0;">
                          <tr>
                            <td style="padding:20px;">
                              <table width="100%" cellpadding="0" cellspacing="0" role="presentation">
                                <tr>
                                  <td style="padding-bottom:12px; font-weight:600; font-size:13px; color:#64748B; font-family: Arial, sans-serif;">Nama Karyawan</td>
                                  <td style="padding-bottom:12px; font-weight:600; font-size:13px; color:#1E293B; font-family: Arial, sans-serif;">${employeeName}</td>
                                </tr>
                                <tr>
                                  <td style="padding-bottom:12px; font-weight:600; font-size:13px; color:#64748B; font-family: Arial, sans-serif;">NIK</td>
                                  <td style="padding-bottom:12px; font-weight:600; font-size:13px; color:#1E293B; font-family: Arial, sans-serif;">${employeeNumber}</td>
                                </tr>
                                <tr>
                                  <td style="padding-bottom:12px; font-weight:600; font-size:13px; color:#64748B; font-family: Arial, sans-serif;">Perusahaan</td>
                                  <td style="padding-bottom:12px; font-weight:600; font-size:13px; color:#1E293B; font-family: Arial, sans-serif;">${companyName}</td>
                                </tr>
                                <tr>
                                  <td style="padding-bottom:0; font-weight:600; font-size:13px; color:#64748B; font-family: Arial, sans-serif;">Tanggal Berakhir Kontrak</td>
                                  <td style="padding-bottom:0; font-weight:700; font-size:13px; color:${urgencyColor}; font-family: Arial, sans-serif;">${formattedEndDate}</td>
                                </tr>
                              </table>
                            </td>
                          </tr>
                        </table>
                      </td>
                    </tr>

                    ${daysRemainingSection}

                    <!-- Action Required Section -->
                    <tr>
                      <td style="padding:0 24px 24px 24px;">
                        <table width="100%" cellpadding="0" cellspacing="0" role="presentation" style="background-color:#FFF7ED; border-radius:8px; border-left:6px solid #F59E0B;">
                          <tr>
                            <td style="padding:16px 20px;">
                              <div style="font-weight:700; font-size:14px; color:#92400E; margin-bottom:8px; font-family: Arial, sans-serif;">
                                Tindakan yang Diperlukan:
                              </div>
                              <ul style="margin:0; padding-left:20px; font-size:13px; color:#78350F; line-height:1.8; font-family: Arial, sans-serif;">
                                <li>Tinjau status kontrak karyawan terkait</li>
                                <li>Persiapkan dokumen perpanjangan kontrak jika diperlukan</li>
                                <li>Koordinasi dengan departemen HR untuk tindak lanjut</li>
                                <li>Pastikan semua proses administrasi selesai sebelum kontrak berakhir</li>
                              </ul>
                            </td>
                          </tr>
                        </table>
                      </td>
                    </tr>

                    <!-- Footer Message -->
                    <tr>
                      <td style="padding:0 24px 24px 24px;">
                        <p style="margin:0; font-size:14px; line-height:1.6; color:#64748B; font-family: Arial, sans-serif;">
                          Email ini dikirim secara otomatis oleh sistem SAPPS. Mohon untuk tidak membalas email ini.
                        </p>
                        <p style="margin:12px 0 0 0; font-size:14px; line-height:1.6; color:#64748B; font-family: Arial, sans-serif;">
                          Jika Anda memiliki pertanyaan, silakan hubungi departemen HR atau administrator sistem.
                        </p>
                      </td>
                    </tr>

                    <!-- Footer -->
                    <tr bgcolor="#F8FAFC">
                      <td style="padding:20px 24px; text-align:center; border-top:1px solid #E2E8F0;">
                        <p style="margin:0; font-size:12px; color:#94A3B8; font-family: Arial, sans-serif;">
                          © ${new Date().getFullYear()} SAPPS - Sistem Aplikasi Perusahaan
                        </p>
                        <p style="margin:8px 0 0 0; font-size:12px; color:#94A3B8; font-family: Arial, sans-serif;">
                          Email ini dikirim secara otomatis, mohon tidak membalas email ini.
                        </p>
                      </td>
                    </tr>
        
                  </table>
                </td>
              </tr>
            </table>
          </center>
        </body>
        </html>`;
	},
};
