/**
 * HTML Email Template for Event Notifications
 */

/**
 * Format date to Slovak locale
 * @param {Date} date
 * @returns {string}
 */
const formatDate = (date) => {
  return new Intl.DateTimeFormat('sk-SK', {
    weekday: 'long',
    day: 'numeric',
    month: 'long',
    year: 'numeric',
  }).format(new Date(date));
};

/**
 * Format time to Slovak locale
 * @param {Date} date
 * @returns {string}
 */
const formatTime = (date) => {
  return new Intl.DateTimeFormat('sk-SK', {
    hour: '2-digit',
    minute: '2-digit',
  }).format(new Date(date));
};

/**
 * Get event type label in Slovak
 * @param {string} type
 * @returns {string}
 */
const getTypeLabel = (type) => {
  if (type === 'meeting') return 'Stretnutie';
  if (type === 'important') return 'Dôležité';
  return 'Udalosť';
};

/**
 * Get badge color based on event type
 * @param {string} type
 * @returns {string}
 */
const getTypeBadgeColor = (type) => {
  if (type === 'meeting') return '#22c55e';
  if (type === 'important') return '#ef4444';
  return '#3b82f6';
};

/**
 * Generate HTML email template for event notification
 * @param {Object} params
 * @param {string} params.firstName - User's first name
 * @param {string} params.username - User's username (fallback)
 * @param {Object} params.event - Event object
 * @param {string} params.event.title - Event title
 * @param {string} params.event.description - Event description
 * @param {string} params.event.type - Event type ('meeting' or 'event')
 * @param {Date} params.event.start - Event start time
 * @param {Date} params.event.end - Event end time
 * @returns {string} HTML email content
 */
export const generateEventNotificationHtml = ({ firstName, username, event }) => {
  const displayName = firstName || username || 'Používateľ';
  const typeLabel = getTypeLabel(event.type);
  const badgeColor = getTypeBadgeColor(event.type);

  return `
<!DOCTYPE html>
<html lang="sk">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pripomienka udalosti - CRM</title>
</head>
<body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background-color: #f3f4f6;">
  <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #f3f4f6;">
    <tr>
      <td style="padding: 40px 20px;">
        <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="max-width: 600px; margin: 0 auto; background-color: #ffffff; border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">

          <!-- Header -->
          <tr>
            <td style="padding: 32px 32px 24px 32px; text-align: center; border-bottom: 1px solid #e5e7eb;">
              <div style="display: inline-block; padding: 12px 20px; background-color: #1e293b; border-radius: 8px;">
                <span style="font-size: 24px; font-weight: 700; color: #ffffff; letter-spacing: -0.5px;">CRM</span>
              </div>
              <h1 style="margin: 20px 0 0 0; font-size: 22px; font-weight: 600; color: #1f2937;">
                Pripomienka udalosti
              </h1>
            </td>
          </tr>

          <!-- Content -->
          <tr>
            <td style="padding: 32px;">
              <p style="margin: 0 0 24px 0; font-size: 16px; color: #374151; line-height: 1.6;">
                Ahoj <strong>${displayName}</strong>,
              </p>

              <p style="margin: 0 0 24px 0; font-size: 16px; color: #374151; line-height: 1.6;">
                Zajtra máš naplánovanú udalosť v kalendári:
              </p>

              <!-- Event Card -->
              <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #f8fafc; border-radius: 8px; border: 1px solid #e2e8f0;">
                <tr>
                  <td style="padding: 24px;">
                    <!-- Type Badge -->
                    <div style="margin-bottom: 16px;">
                      <span style="display: inline-block; padding: 4px 12px; background-color: ${badgeColor}; color: #ffffff; font-size: 12px; font-weight: 600; border-radius: 9999px; text-transform: uppercase;">
                        ${typeLabel}
                      </span>
                    </div>

                    <!-- Title -->
                    <h2 style="margin: 0 0 16px 0; font-size: 20px; font-weight: 600; color: #1f2937;">
                      ${event.title}
                    </h2>

                    ${event.description ? `
                    <!-- Description -->
                    <p style="margin: 0 0 16px 0; font-size: 14px; color: #6b7280; line-height: 1.5;">
                      ${event.description}
                    </p>
                    ` : ''}

                    <!-- Date & Time -->
                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                      <tr>
                        <td style="padding: 8px 0;">
                          <table role="presentation" cellspacing="0" cellpadding="0" border="0">
                            <tr>
                              <td style="width: 24px; vertical-align: top;">
                                <span style="font-size: 16px;">📅</span>
                              </td>
                              <td style="padding-left: 8px;">
                                <span style="font-size: 14px; color: #374151; font-weight: 500;">
                                  ${formatDate(event.start)}
                                </span>
                              </td>
                            </tr>
                          </table>
                        </td>
                      </tr>
                      <tr>
                        <td style="padding: 8px 0;">
                          <table role="presentation" cellspacing="0" cellpadding="0" border="0">
                            <tr>
                              <td style="width: 24px; vertical-align: top;">
                                <span style="font-size: 16px;">🕐</span>
                              </td>
                              <td style="padding-left: 8px;">
                                <span style="font-size: 14px; color: #374151; font-weight: 500;">
                                  ${formatTime(event.start)} - ${formatTime(event.end)}
                                </span>
                              </td>
                            </tr>
                          </table>
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>

              <p style="margin: 24px 0 0 0; font-size: 14px; color: #6b7280; line-height: 1.6;">
                Prajeme ti produktívny deň!
              </p>
            </td>
          </tr>

          <!-- Footer -->
          <tr>
            <td style="padding: 24px 32px; background-color: #f8fafc; border-top: 1px solid #e5e7eb; border-radius: 0 0 12px 12px;">
              <p style="margin: 0; font-size: 12px; color: #9ca3af; text-align: center; line-height: 1.5;">
                Táto správa bola automaticky vygenerovaná systémom CRM.<br>
                Prosím, neodpovedajte na tento email.
              </p>
            </td>
          </tr>

        </table>
      </td>
    </tr>
  </table>
</body>
</html>
`.trim();
};

/**
 * Generate plain text version of the email
 * @param {Object} params
 * @param {string} params.firstName - User's first name
 * @param {string} params.username - User's username (fallback)
 * @param {Object} params.event - Event object
 * @returns {string} Plain text email content
 */
export const generateEventNotificationText = ({ firstName, username, event }) => {
  const displayName = firstName || username || 'Používateľ';
  const typeLabel = getTypeLabel(event.type);

  return `
Ahoj ${displayName},

Zajtra máš naplánovanú udalosť v kalendári:

${typeLabel.toUpperCase()}: ${event.title}
${event.description ? `Popis: ${event.description}\n` : ''}
Dátum: ${formatDate(event.start)}
Čas: ${formatTime(event.start)} - ${formatTime(event.end)}

Prajeme ti produktívny deň!

---
Táto správa bola automaticky vygenerovaná systémom CRM.
Prosím, neodpovedajte na tento email.
`.trim();
};

/**
 * Generate email subject
 * @param {Object} event
 * @returns {string}
 */
export const generateEventNotificationSubject = (event) => {
  const typeLabel = getTypeLabel(event.type);
  return `Pripomienka: ${typeLabel} - ${event.title} (zajtra)`;
};
