export function getRescheduleConfirmationTemplate(
  patientName: string,
  oldDate: Date,
  newDate: Date
): string {
  const formatDate = (date: Date) => {
    return date.toLocaleDateString("es-MX", {
      weekday: "long",
      year: "numeric",
      month: "long",
      day: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    });
  };

  return `
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Confirmación de Cambio de Cita</title>
        <style>
          body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f5f5;
            padding: 20px;
            margin: 0;
          }
          .container {
            max-width: 600px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          }
          .header {
            background: linear-gradient(135deg, #7C3AED 0%, #9333EA 100%);
            color: white;
            padding: 30px;
            text-align: center;
          }
          .header h1 {
            margin: 0;
            font-size: 28px;
            font-weight: 600;
          }
          .content {
            padding: 40px 30px;
          }
          .greeting {
            font-size: 20px;
            margin-bottom: 20px;
            color: #7C3AED;
          }
          .appointment-card {
            background: #F9FAFB;
            border-left: 4px solid #7C3AED;
            padding: 20px;
            margin: 20px 0;
            border-radius: 8px;
          }
          .appointment-card.cancelled {
            border-left-color: #EF4444;
            background: #FEF2F2;
          }
          .appointment-card.new {
            border-left-color: #10B981;
            background: #ECFDF5;
          }
          .label {
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #6B7280;
            margin-bottom: 5px;
          }
          .date {
            font-size: 18px;
            font-weight: 600;
            color: #111827;
          }
          .footer {
            background: #F9FAFB;
            padding: 20px;
            text-align: center;
            color: #6B7280;
            font-size: 14px;
          }
          .contact-info {
            margin-top: 20px;
            padding: 15px;
            background: #F3E8FF;
            border-radius: 8px;
          }
        </style>
      </head>
      <body>
        <div class="container">
          <div class="header">
            <h1>Confirmación de Cambio de Cita</h1>
          </div>
          <div class="content">
            <p class="greeting">Hola, ${patientName}</p>
            <p>Tu cita ha sido reacomodada exitosamente. Aquí están los detalles:</p>
            
            <div class="appointment-card cancelled">
              <div class="label">Cita Cancelada</div>
              <div class="date">${formatDate(oldDate)}</div>
            </div>
            
            <div class="appointment-card new">
              <div class="label">Nueva Cita Confirmada</div>
              <div class="date">${formatDate(newDate)}</div>
            </div>
            
            <div class="contact-info">
              <p><strong>¿Necesitas hacer más cambios?</strong></p>
              <p>Por favor contáctanos lo antes posible para confirmar o realizar modificaciones adicionales.</p>
            </div>
          </div>
          <div class="footer">
            <p>Gloria Niño - Terapia Integral</p>
            <p style="margin-top: 5px;">Este mensaje fue enviado automáticamente</p>
          </div>
        </div>
      </body>
    </html>
  `;
}
