/**
 * Service Newsletter
 */
import nodemailer from 'nodemailer';
import dotenv from 'dotenv';

dotenv.config();

// Configuration du transporteur email (réutilise la config du service email)
const createTransporter = () => {
  if (process.env.NODE_ENV === 'development' && !process.env.SMTP_HOST) {
    console.log('⚠️  Mode développement: Les emails seront affichés dans la console');
    return null;
  }

  return nodemailer.createTransport({
    host: process.env.SMTP_HOST,
    port: parseInt(process.env.SMTP_PORT) || 587,
    secure: process.env.SMTP_PORT === '465',
    auth: {
      user: process.env.SMTP_USER,
      pass: process.env.SMTP_PASS,
    },
    tls: {
      rejectUnauthorized: false // Ignore les erreurs de certificat SSL
    }
  });
};

const transporter = createTransporter();

/**
 * Fonction générique pour envoyer un email
 */
const sendEmail = async ({ to, subject, html, text }) => {
  try {
    if (!transporter) {
      console.log('📧 Email qui aurait été envoyé:');
      console.log('To:', to);
      console.log('Subject:', subject);
      console.log('Content:', text || html);
      return { success: true, mode: 'dev' };
    }

    const mailOptions = {
      from: process.env.EMAIL_FROM || 'noreply@thetiptop.fr',
      to,
      subject,
      text,
      html,
    };

    const info = await transporter.sendMail(mailOptions);
    console.log('✅ Email envoyé:', info.messageId);
    return { success: true, messageId: info.messageId };
  } catch (error) {
    console.error('❌ Erreur envoi email:', error);
    throw new Error('Erreur lors de l\'envoi de l\'email');
  }
};

/**
 * Envoie un email de confirmation d'abonnement à la newsletter
 */
export const sendNewsletterConfirmationEmail = async (email) => {
  const unsubscribeUrl = `${process.env.FRONTEND_URL || 'http://localhost:3000'}/newsletter/unsubscribe?email=${encodeURIComponent(email)}`;
  const siteUrl = process.env.FRONTEND_URL || 'http://localhost:3000';
  // Bouton "Jouer Maintenant" redirige vers /jeux
  const gameUrl = `${siteUrl}/jeux`;
  const currentDate = new Date().toLocaleString('fr-FR', {
    day: '2-digit',
    month: '2-digit',
    year: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  });

  const html = `
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <style>
        body {
          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
          line-height: 1.6;
          color: #5a5a4e;
          margin: 0;
          padding: 0;
          background: linear-gradient(135deg, #f5f5f0 0%, #faf9f5 100%);
        }
        .email-wrapper {
          padding: 40px 20px;
        }
        .container {
          max-width: 650px;
          margin: 0 auto;
          background: white;
          border-radius: 20px;
          overflow: hidden;
          box-shadow: 0 10px 40px rgba(0,0,0,0.15);
        }
        .header {
          background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
          color: white;
          padding: 50px 30px;
          text-align: center;
          position: relative;
        }
        .logo-container {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 15px;
          margin-bottom: 15px;
        }
        .logo-image {
          width: 60px;
          height: 60px;
          background: white;
          border-radius: 50%;
          padding: 10px;
          box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }
        .logo-icon {
          font-size: 48px;
          filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
        }
        .logo-text {
          font-size: 36px;
          font-weight: bold;
          letter-spacing: 1px;
          text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
        }
        .header-subtitle {
          font-size: 16px;
          opacity: 0.95;
          letter-spacing: 2px;
          text-transform: uppercase;
          font-weight: 500;
        }
        .welcome-section {
          background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
          color: white;
          padding: 40px 30px;
          text-align: center;
          border-bottom: 4px solid rgba(255,255,255,0.2);
        }
        .welcome-icon {
          font-size: 60px;
          margin-bottom: 20px;
          animation: bounce 2s infinite;
        }
        @keyframes bounce {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-10px); }
        }
        .welcome-title {
          font-size: 32px;
          font-weight: bold;
          margin: 15px 0;
          text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
        }
        .user-info {
          background: rgba(255,255,255,0.15);
          backdrop-filter: blur(10px);
          padding: 25px;
          border-radius: 15px;
          margin: 25px 0;
          border: 1px solid rgba(255,255,255,0.3);
        }
        .user-info-item {
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 12px 0;
          font-size: 15px;
        }
        .content {
          padding: 40px 30px;
          background: linear-gradient(to bottom, #faf9f5 0%, #f5f5f0 100%);
        }
        .game-section {
          background: white;
          border: 3px solid #f59e0b;
          border-radius: 20px;
          padding: 35px;
          text-align: center;
          margin: 30px 0;
          box-shadow: 0 4px 15px rgba(245, 158, 11, 0.25);
        }
        .game-icon {
          font-size: 64px;
          margin-bottom: 20px;
          filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
        }
        .game-title {
          font-size: 28px;
          color: #5a5a4e;
          font-weight: bold;
          margin: 20px 0;
        }
        .game-description {
          color: #8a8a7a;
          font-size: 16px;
          line-height: 1.8;
          margin: 20px 0;
        }
        .prizes-box {
          background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
          border-radius: 15px;
          padding: 25px;
          margin: 25px 0;
          border-left: 5px solid #f59e0b;
        }
        .prizes-title {
          color: #92400e;
          font-size: 18px;
          font-weight: bold;
          margin-bottom: 10px;
        }
        .prizes-text {
          color: #78350f;
          font-size: 15px;
          margin: 0;
        }
        .buttons-container {
          margin: 30px 0;
          text-align: center;
        }
        .button {
          display: inline-block;
          padding: 18px 40px;
          margin: 10px 8px;
          font-size: 17px;
          font-weight: bold;
          text-decoration: none;
          border-radius: 50px;
          transition: all 0.3s ease;
          box-shadow: 0 6px 20px rgba(0,0,0,0.25);
          letter-spacing: 0.5px;
        }
        .button-primary {
          background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
          color: white;
          border: 2px solid transparent;
        }
        .button-primary:hover {
          box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);
          transform: translateY(-2px);
        }
        .button-secondary {
          background: linear-gradient(135deg, #d4a574 0%, #c4956a 100%);
          color: white;
          border: 2px solid transparent;
        }
        .button-secondary:hover {
          box-shadow: 0 8px 25px rgba(212, 165, 116, 0.4);
          transform: translateY(-2px);
        }
        .info-box {
          background: white;
          border-radius: 15px;
          padding: 30px;
          margin: 25px 0;
          box-shadow: 0 2px 10px rgba(0,0,0,0.08);
        }
        .info-title {
          color: #5a5a4e;
          font-size: 22px;
          font-weight: bold;
          margin-top: 0;
          margin-bottom: 20px;
          display: flex;
          align-items: center;
          gap: 10px;
        }
        .benefits-grid {
          display: grid;
          gap: 15px;
        }
        .benefit-item {
          display: flex;
          align-items: center;
          padding: 15px;
          background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
          border-radius: 10px;
          border-left: 4px solid #f59e0b;
        }
        .benefit-icon {
          font-size: 28px;
          margin-right: 15px;
        }
        .benefit-text {
          color: #5a5a4e;
          font-size: 15px;
          font-weight: 500;
        }
        .footer {
          background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
          color: white;
          text-align: center;
          padding: 40px 30px;
        }
        .footer-logo {
          font-size: 24px;
          margin-bottom: 10px;
        }
        .footer-title {
          font-size: 18px;
          font-weight: bold;
          margin-bottom: 15px;
          color: white;
        }
        .footer-date {
          font-size: 13px;
          opacity: 0.8;
          margin: 15px 0;
        }
        .unsubscribe {
          margin-top: 20px;
          padding-top: 20px;
          border-top: 1px solid rgba(229, 228, 220, 0.3);
          font-size: 12px;
        }
        .unsubscribe a {
          color: #d4a574;
          text-decoration: underline;
        }
      </style>
    </head>
    <body>
      <div class="email-wrapper">
        <div class="container">
          <!-- En-tête avec Logo -->
          <div class="header">
            <div class="logo-container">
              <div class="logo-image">
                <div class="logo-icon">🍃</div>
              </div>
              <div class="logo-text">Thé Tip Top</div>
            </div>
            <div class="header-subtitle">Newsletter Jeu Concours</div>
          </div>

          <!-- Section Bienvenue -->
          <div class="welcome-section">
            <div class="welcome-icon">🎉</div>
            <div class="welcome-title">Bienvenue !</div>
            <p style="font-size: 18px; margin: 10px 0;">Votre inscription à la newsletter est confirmée</p>

            <div class="user-info">
              <div class="user-info-item">
                <span style="margin-right: 10px; font-size: 20px;">📅</span>
                <strong>Inscrit le ${currentDate}</strong>
              </div>
            </div>

            <p style="font-size: 16px; margin-top: 20px; opacity: 0.95;">
              Merci de rejoindre la communauté Thé Tip Top ! 🍵
            </p>
          </div>

          <!-- Contenu principal -->
          <div class="content">
            <!-- Section Jeu Concours -->
            <div class="game-section">
              <div class="game-icon">🎯</div>
              <div class="game-title">Participez à Notre Jeu Concours !</div>
              <p class="game-description">
                À l'occasion de l'ouverture de notre 10ème boutique à Nice,
                tentez votre chance de gagner des lots exceptionnels !
              </p>

              <div class="prizes-box">
                <div class="prizes-title">🎁 Lots à gagner</div>
                <p class="prizes-text">Thés premium • Accessoires • Coffrets cadeaux</p>
              </div>

              <div class="buttons-container">
                <a href="${gameUrl}" class="button button-primary">
                  🎮 Jouer Maintenant
                </a>
                <a href="${siteUrl}" class="button button-secondary">
                  🌐 Visiter le Site
                </a>
              </div>
            </div>

            <!-- Section Bénéfices -->
            <div class="info-box">
              <h3 class="info-title">
                <span>📧</span>
                <span>Ce que vous recevrez</span>
              </h3>
              <div class="benefits-grid">
                <div class="benefit-item">
                  <span class="benefit-icon">🎮</span>
                  <span class="benefit-text">Nouveautés du jeu concours</span>
                </div>
                <div class="benefit-item">
                  <span class="benefit-icon">🏆</span>
                  <span class="benefit-text">Annonces des gagnants</span>
                </div>
                <div class="benefit-item">
                  <span class="benefit-icon">🍃</span>
                  <span class="benefit-text">Découvertes de thés d'exception</span>
                </div>
                <div class="benefit-item">
                  <span class="benefit-icon">🎁</span>
                  <span class="benefit-text">Offres exclusives réservées</span>
                </div>
              </div>
            </div>
          </div>

          <!-- Pied de page -->
          <div class="footer">
            <div class="footer-logo">🍃 Thé Tip Top</div>
            <div class="footer-title">Votre spécialiste du thé d'exception</div>
            <p class="footer-date">📧 Newsletter envoyée le ${currentDate}</p>
            <p style="margin-top: 20px; font-size: 12px; opacity: 0.7;">
              © 2025 Thé Tip Top - Tous droits réservés
            </p>
          </div>
        </div>
      </div>
    </body>
    </html>
  `;

  const text = `
🍃 Thé Tip Top - Newsletter Jeu Concours

🎉 Bienvenue Utilisateur !
Votre inscription à la newsletter est confirmée

👤 Utilisateur
📅 Inscrit le ${currentDate}

🎯 Participez à Notre Jeu Concours !
À l'occasion de l'ouverture de notre 10ème boutique à Nice, tentez votre chance de gagner des lots exceptionnels !

🎁 Lots à gagner : Thés premium, accessoires, coffrets cadeaux

🎮 Jouer Maintenant : ${gameUrl}
🌐 Visiter le Site : ${siteUrl}

📧 Que recevrez-vous ?
🎮 Nouveautés du jeu concours
🏆 Annonces des gagnants
🍃 Découvertes de thés
🎁 Offres exclusives

Thé Tip Top - Votre spécialiste du thé d'exception
📧 Newsletter envoyée le ${currentDate}

Pour vous désinscrire : ${unsubscribeUrl}

© 2025 Thé Tip Top - Tous droits réservés
  `;

  return sendEmail({
    to: email,
    subject: 'Thé Tip Top | Bienvenue dans la newsletter - Jeu Concours 🎉',
    html,
    text,
  });
};

export default {
  sendNewsletterConfirmationEmail,
};
