/**
 * Referral Email Templates System
 * Automated emails for referral invites, confirmations, and achievements
 */

export interface EmailTemplate {
  id: string;
  name: string;
  subject: string;
  htmlContent: string;
  textContent: string;
  variables: string[];
}

/**
 * Referral Invitation Email Template
 */
export const referralInviteTemplate: EmailTemplate = {
  id: 'referral_invite',
  name: 'Referral Invitation',
  subject: '{{referrerName}} invited you to join CoinKrazy!',
  htmlContent: `
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body { font-family: Arial, sans-serif; background-color: #f5f5f5; }
    .container { max-width: 600px; margin: 0 auto; background-color: white; padding: 20px; border-radius: 8px; }
    .header { text-align: center; padding: 20px 0; border-bottom: 2px solid #6366f1; }
    .logo { font-size: 28px; font-weight: bold; color: #6366f1; }
    .content { padding: 20px 0; }
    .cta-button { display: inline-block; background-color: #6366f1; color: white; padding: 12px 30px; text-decoration: none; border-radius: 4px; margin: 20px 0; }
    .bonus-box { background-color: #f0f4ff; border-left: 4px solid #6366f1; padding: 15px; margin: 20px 0; }
    .footer { text-align: center; padding: 20px 0; border-top: 1px solid #e0e0e0; color: #666; font-size: 12px; }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <div class="logo">CoinKrazy</div>
    </div>
    
    <div class="content">
      <h2>Hey {{refereeName}}!</h2>
      
      <p>{{referrerName}} thinks you'll love CoinKrazy, our exciting sweepstakes social casino!</p>
      
      <div class="bonus-box">
        <strong>🎁 Exclusive Welcome Bonus</strong>
        <p>Join now using {{referrerName}}'s referral link and get <strong>1 SC bonus</strong> to start playing!</p>
        <p>Plus, {{referrerName}} will also get 1 SC for referring you.</p>
      </div>
      
      <p>Click the button below to join and claim your bonus:</p>
      
      <center>
        <a href="{{referralLink}}" class="cta-button">Join CoinKrazy Now</a>
      </center>
      
      <h3>Why CoinKrazy?</h3>
      <ul>
        <li>367+ exciting games to play</li>
        <li>Daily bonuses and challenges</li>
        <li>Tournaments with big prize pools</li>
        <li>Referral rewards program</li>
        <li>VIP tier benefits</li>
      </ul>
      
      <p>See you on CoinKrazy!</p>
      <p><strong>{{referrerName}}</strong></p>
    </div>
    
    <div class="footer">
      <p>© 2026 CoinKrazy. All rights reserved.</p>
      <p>This is a referral invitation from {{referrerName}}.</p>
    </div>
  </div>
</body>
</html>
  `,
  textContent: `
CoinKrazy Referral Invitation

Hey {{refereeName}}!

{{referrerName}} thinks you'll love CoinKrazy, our exciting sweepstakes social casino!

🎁 Exclusive Welcome Bonus
Join now using {{referrerName}}'s referral link and get 1 SC bonus to start playing!
Plus, {{referrerName}} will also get 1 SC for referring you.

Join CoinKrazy Now: {{referralLink}}

Why CoinKrazy?
- 367+ exciting games to play
- Daily bonuses and challenges
- Tournaments with big prize pools
- Referral rewards program
- VIP tier benefits

See you on CoinKrazy!
{{referrerName}}

© 2026 CoinKrazy. All rights reserved.
  `,
  variables: ['referrerName', 'refereeName', 'referralLink'],
};

/**
 * Referral Bonus Confirmation Email Template
 */
export const referralBonusConfirmationTemplate: EmailTemplate = {
  id: 'referral_bonus_confirmation',
  name: 'Referral Bonus Confirmation',
  subject: 'Your referral bonus has been credited! 🎉',
  htmlContent: `
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body { font-family: Arial, sans-serif; background-color: #f5f5f5; }
    .container { max-width: 600px; margin: 0 auto; background-color: white; padding: 20px; border-radius: 8px; }
    .header { text-align: center; padding: 20px 0; border-bottom: 2px solid #10b981; }
    .logo { font-size: 28px; font-weight: bold; color: #10b981; }
    .content { padding: 20px 0; }
    .success-box { background-color: #ecfdf5; border-left: 4px solid #10b981; padding: 15px; margin: 20px 0; }
    .bonus-amount { font-size: 32px; font-weight: bold; color: #10b981; text-align: center; }
    .footer { text-align: center; padding: 20px 0; border-top: 1px solid #e0e0e0; color: #666; font-size: 12px; }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <div class="logo">CoinKrazy</div>
    </div>
    
    <div class="content">
      <h2>Congratulations! 🎉</h2>
      
      <p>Your referral bonus has been successfully credited to your account!</p>
      
      <div class="success-box">
        <p><strong>Referral Details:</strong></p>
        <p>Referee: {{refereeName}}</p>
        <p>Bonus Type: Referral Completion</p>
        <p>Credited At: {{creditedDate}}</p>
      </div>
      
      <div style="text-align: center;">
        <p>You earned:</p>
        <div class="bonus-amount">+{{bonusAmount}} SC</div>
      </div>
      
      <p>Your bonus is now available in your wallet and ready to use!</p>
      
      <h3>Keep Referring!</h3>
      <p>You can earn unlimited SC by referring more friends. Each successful referral earns you 1 SC!</p>
      
      <p><a href="{{referralDashboardLink}}" style="color: #6366f1; text-decoration: none;">View Your Referral Dashboard →</a></p>
    </div>
    
    <div class="footer">
      <p>© 2026 CoinKrazy. All rights reserved.</p>
    </div>
  </div>
</body>
</html>
  `,
  textContent: `
CoinKrazy - Referral Bonus Confirmation

Congratulations! 🎉

Your referral bonus has been successfully credited to your account!

Referral Details:
Referee: {{refereeName}}
Bonus Type: Referral Completion
Credited At: {{creditedDate}}

You earned: +{{bonusAmount}} SC

Your bonus is now available in your wallet and ready to use!

Keep Referring!
You can earn unlimited SC by referring more friends. Each successful referral earns you 1 SC!

View Your Referral Dashboard: {{referralDashboardLink}}

© 2026 CoinKrazy. All rights reserved.
  `,
  variables: ['refereeName', 'creditedDate', 'bonusAmount', 'referralDashboardLink'],
};

/**
 * Top Referrer Achievement Email Template
 */
export const topReferrerAchievementTemplate: EmailTemplate = {
  id: 'top_referrer_achievement',
  name: 'Top Referrer Achievement',
  subject: 'You\'re a Top Referrer! 🏆',
  htmlContent: `
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body { font-family: Arial, sans-serif; background-color: #f5f5f5; }
    .container { max-width: 600px; margin: 0 auto; background-color: white; padding: 20px; border-radius: 8px; }
    .header { text-align: center; padding: 20px 0; background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); border-radius: 8px; color: white; }
    .logo { font-size: 28px; font-weight: bold; }
    .content { padding: 20px 0; }
    .achievement-box { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border-left: 4px solid #f59e0b; padding: 15px; margin: 20px 0; border-radius: 4px; }
    .rank { font-size: 24px; font-weight: bold; color: #d97706; }
    .footer { text-align: center; padding: 20px 0; border-top: 1px solid #e0e0e0; color: #666; font-size: 12px; }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <div class="logo">🏆 CoinKrazy 🏆</div>
      <h2 style="margin: 10px 0 0 0;">You're a Top Referrer!</h2>
    </div>
    
    <div class="content">
      <p>Amazing news! You've made it to the top {{rankPosition}} referrers on CoinKrazy!</p>
      
      <div class="achievement-box">
        <p><strong>Your Achievement:</strong></p>
        <p>Rank: <span class="rank">{{rankPosition}}</span></p>
        <p>Total Referrals: {{totalReferrals}}</p>
        <p>Total Earned: {{totalEarned}} SC</p>
      </div>
      
      <h3>Exclusive Perks:</h3>
      <ul>
        <li>🎁 {{exclusiveBonus}} SC bonus</li>
        <li>⭐ Top Referrer badge on your profile</li>
        <li>📊 Featured on the leaderboard</li>
        <li>🎯 Priority support</li>
      </ul>
      
      <p>Keep up the great work! The more friends you refer, the higher you'll climb on the leaderboard.</p>
      
      <p><a href="{{leaderboardLink}}" style="color: #f59e0b; text-decoration: none; font-weight: bold;">View Leaderboard →</a></p>
    </div>
    
    <div class="footer">
      <p>© 2026 CoinKrazy. All rights reserved.</p>
    </div>
  </div>
</body>
</html>
  `,
  textContent: `
CoinKrazy - Top Referrer Achievement

🏆 You're a Top Referrer! 🏆

Amazing news! You've made it to the top {{rankPosition}} referrers on CoinKrazy!

Your Achievement:
Rank: {{rankPosition}}
Total Referrals: {{totalReferrals}}
Total Earned: {{totalEarned}} SC

Exclusive Perks:
- 🎁 {{exclusiveBonus}} SC bonus
- ⭐ Top Referrer badge on your profile
- 📊 Featured on the leaderboard
- 🎯 Priority support

Keep up the great work! The more friends you refer, the higher you'll climb on the leaderboard.

View Leaderboard: {{leaderboardLink}}

© 2026 CoinKrazy. All rights reserved.
  `,
  variables: ['rankPosition', 'totalReferrals', 'totalEarned', 'exclusiveBonus', 'leaderboardLink'],
};

/**
 * Referral Milestone Email Template
 */
export const referralMilestoneTemplate: EmailTemplate = {
  id: 'referral_milestone',
  name: 'Referral Milestone',
  subject: 'You\'ve reached {{milestoneCount}} referrals! 🎊',
  htmlContent: `
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body { font-family: Arial, sans-serif; background-color: #f5f5f5; }
    .container { max-width: 600px; margin: 0 auto; background-color: white; padding: 20px; border-radius: 8px; }
    .header { text-align: center; padding: 20px 0; border-bottom: 2px solid #8b5cf6; }
    .logo { font-size: 28px; font-weight: bold; color: #8b5cf6; }
    .content { padding: 20px 0; }
    .milestone-box { background-color: #f3e8ff; border-left: 4px solid #8b5cf6; padding: 15px; margin: 20px 0; text-align: center; }
    .milestone-number { font-size: 48px; font-weight: bold; color: #8b5cf6; }
    .footer { text-align: center; padding: 20px 0; border-top: 1px solid #e0e0e0; color: #666; font-size: 12px; }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <div class="logo">CoinKrazy</div>
    </div>
    
    <div class="content">
      <h2>Milestone Reached! 🎊</h2>
      
      <p>Congratulations! You've reached an amazing milestone!</p>
      
      <div class="milestone-box">
        <div class="milestone-number">{{milestoneCount}}</div>
        <p style="margin: 10px 0 0 0;"><strong>Referrals</strong></p>
      </div>
      
      <p>You've earned <strong>{{totalEarned}} SC</strong> from your referrals!</p>
      
      <h3>Next Milestone: {{nextMilestone}} Referrals</h3>
      <p>You're {{referralsUntilNext}} referrals away from the next milestone. Keep sharing and earning!</p>
      
      <p><a href="{{referralDashboardLink}}" style="color: #8b5cf6; text-decoration: none; font-weight: bold;">Continue Referring →</a></p>
    </div>
    
    <div class="footer">
      <p>© 2026 CoinKrazy. All rights reserved.</p>
    </div>
  </div>
</body>
</html>
  `,
  textContent: `
CoinKrazy - Referral Milestone

Milestone Reached! 🎊

Congratulations! You've reached an amazing milestone!

{{milestoneCount}} Referrals

You've earned {{totalEarned}} SC from your referrals!

Next Milestone: {{nextMilestone}} Referrals
You're {{referralsUntilNext}} referrals away from the next milestone. Keep sharing and earning!

Continue Referring: {{referralDashboardLink}}

© 2026 CoinKrazy. All rights reserved.
  `,
  variables: ['milestoneCount', 'totalEarned', 'nextMilestone', 'referralsUntilNext', 'referralDashboardLink'],
};

/**
 * Get all email templates
 */
export function getAllEmailTemplates(): EmailTemplate[] {
  return [
    referralInviteTemplate,
    referralBonusConfirmationTemplate,
    topReferrerAchievementTemplate,
    referralMilestoneTemplate,
  ];
}

/**
 * Get template by ID
 */
export function getEmailTemplateById(id: string): EmailTemplate | undefined {
  return getAllEmailTemplates().find(t => t.id === id);
}

/**
 * Render email template with variables
 */
export function renderEmailTemplate(
  template: EmailTemplate,
  variables: Record<string, string>
): { subject: string; htmlContent: string; textContent: string } {
  let subject = template.subject;
  let htmlContent = template.htmlContent;
  let textContent = template.textContent;

  // Replace all variables
  Object.entries(variables).forEach(([key, value]) => {
    const placeholder = `{{${key}}}`;
    subject = subject.replace(new RegExp(placeholder, 'g'), value);
    htmlContent = htmlContent.replace(new RegExp(placeholder, 'g'), value);
    textContent = textContent.replace(new RegExp(placeholder, 'g'), value);
  });

  return { subject, htmlContent, textContent };
}
