EMAIL_TEMPLATES = {
    "verification": {
        "subject": "Welcome to Backstory - Please verify your email",
        "html": """
        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Email Verification</title>
            <style>
                body {{ 
                    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; 
                    line-height: 1.6; 
                    color: #2E2E2E; 
                    margin: 0; 
                    padding: 0; 
                    background-color: #D3CDBF;
                }}
                .container {{ 
                    max-width: 600px; 
                    margin: 0 auto; 
                    background-color: #FFFFFF;
                    border-radius: 4px;
                    overflow: hidden;
                    box-shadow: 0 4px 12px rgba(26, 37, 54, 0.15);
                    margin-top: 40px;
                    margin-bottom: 40px;
                }}
                .header {{ 
                    background: linear-gradient(135deg, #1A2536 0%, #4A7A7D 100%); 
                    color: #D3CDBF; 
                    padding: 40px 30px; 
                    text-align: center; 
                }}
                .header h1 {{
                    margin: 0 0 10px 0;
                    font-size: 2rem;
                    font-weight: 500;
                    color: #D3CDBF;
                }}
                .header p {{
                    margin: 0;
                    opacity: 0.9;
                    font-size: 1rem;
                    color: #D3CDBF;
                }}
                .content {{ 
                    padding: 40px 30px; 
                }}
                .content h2 {{
                    margin: 0 0 20px 0;
                    color: #2E2E2E;
                    font-size: 1.75rem;
                    font-weight: 500;
                }}
                .button {{ 
                    display: inline-block; 
                    background: #D4A017; 
                    color: #FFFFFF; 
                    padding: 16px 32px; 
                    text-decoration: none; 
                    border-radius: 4px; 
                    font-weight: 500; 
                    margin: 24px 0;
                    font-size: 1rem;
                    transition: background-color 0.3s ease;
                }}
                .button:hover {{
                    background: rgba(212, 160, 23, 0.8);
                }}
                .link-text {{
                    word-break: break-all; 
                    color: #4A7A7D;
                    background-color: rgba(74, 122, 125, 0.1);
                    padding: 12px;
                    border-radius: 4px;
                    font-family: 'Roboto', monospace;
                    font-size: 0.875rem;
                    margin: 16px 0;
                }}
                .footer {{ 
                    background: #D3CDBF; 
                    padding: 30px; 
                    text-align: center; 
                    font-size: 0.875rem; 
                    color: #1A2536; 
                    border-top: 1px solid rgba(26, 37, 54, 0.1);
                }}
                .security-note {{ 
                    background: rgba(212, 160, 23, 0.1); 
                    border: 1px solid #D4A017; 
                    padding: 16px; 
                    border-radius: 4px; 
                    margin: 24px 0; 
                    color: #2E2E2E;
                }}
                .security-note strong {{
                    color: #1A2536;
                }}
            </style>
        </head>
        <body>
            <div class="container">
                <div class="header">
                    <h1>Welcome to Backstory!</h1>
                    <p>Thanks for joining us, {user_name}</p>
                </div>
                <div class="content">
                    <h2>Please verify your email address</h2>
                    <p>To complete your registration and start using Backstory, please verify your email address by clicking the button below:</p>
                    
                    <div style="text-align: center; margin: 32px 0;">
                        <a href="{verification_link}" class="button">Verify Email Address</a>
                    </div>
                    
                    <p>If the button doesn't work, copy and paste this link into your browser:</p>
                    <div class="link-text">{verification_link}</div>
                    
                    <div class="security-note">
                        <strong>Security Note:</strong> This verification link will expire in 24 hours. If you didn't create this account, please ignore this email and the account will be automatically deleted.
                    </div>
                </div>
                <div class="footer">
                    <p><strong>This email was sent to:</strong> {to_email}</p>
                    <p>If you have any questions, please contact our support team.</p>
                    <p>&copy; 2025 Backstory. All rights reserved.</p>
                </div>
            </div>
        </body>
        </html>
        """
    },
    
    "mfa": {
        "subject": "Security Code for Backstory",
        "html": """
        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Backstory Security Code</title>
            <style>
                body {{ 
                    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; 
                    line-height: 1.6; 
                    color: #2E2E2E; 
                    margin: 0; 
                    padding: 0; 
                    background-color: #D3CDBF;
                }}
                .container {{ 
                    max-width: 600px; 
                    margin: 40px auto; 
                    background-color: #FFFFFF;
                    border-radius: 4px;
                    overflow: hidden;
                    box-shadow: 0 4px 12px rgba(26, 37, 54, 0.15);
                }}
                .header {{ 
                    background: linear-gradient(135deg, #1A2536 0%, #4A7A7D 100%); 
                    color: #D3CDBF; 
                    padding: 40px 30px; 
                    text-align: center; 
                }}
                .header h1 {{
                    margin: 0 0 10px 0;
                    font-size: 2rem;
                    font-weight: 500;
                    color: #D3CDBF;
                }}
                .content {{ 
                    padding: 40px 30px; 
                }}
                .content h2 {{
                    margin: 0 0 20px 0;
                    color: #2E2E2E;
                    font-size: 1.75rem;
                    font-weight: 500;
                }}
                .device-info {{
                    background: rgba(74, 122, 125, 0.1);
                    border: 1px solid #4A7A7D;
                    padding: 16px;
                    border-radius: 4px;
                    margin: 20px 0;
                    color: #1A2536;
                }}
                .code {{ 
                    background: #D3CDBF; 
                    border: 3px solid #D4A017; 
                    padding: 24px; 
                    text-align: center; 
                    font-size: 2.25rem; 
                    font-weight: 500; 
                    letter-spacing: 12px; 
                    color: #1A2536; 
                    border-radius: 4px; 
                    margin: 32px 0;
                    font-family: 'Roboto', 'Courier New', monospace;
                }}
                .footer {{ 
                    background: #D3CDBF; 
                    padding: 30px; 
                    text-align: center; 
                    font-size: 0.875rem; 
                    color: #1A2536; 
                    border-top: 1px solid rgba(26, 37, 54, 0.1);
                }}
                .warning {{ 
                    background: rgba(212, 160, 23, 0.1); 
                    border: 1px solid #D4A017; 
                    color: #2E2E2E; 
                    padding: 16px; 
                    border-radius: 4px; 
                    margin: 24px 0; 
                }}
                .warning strong {{
                    color: #1A2536;
                }}
                .expiry-info {{
                    background: rgba(74, 122, 125, 0.1);
                    border: 1px solid #4A7A7D;
                    color: #1A2536;
                    padding: 12px;
                    border-radius: 4px;
                    margin: 16px 0;
                    font-size: 0.875rem;
                    text-align: center;
                }}
            </style>
        </head>
        <body>
            <div class="container">
                <div class="header">
                    <h1>🔐 Backstory Security Code</h1>
                    <p>Hi {user_name}</p>
                </div>
                <div class="content">
                    <h2>New device login detected</h2>
                    
                    <div class="device-info">
                        <strong>Device Details:</strong><br>
                        <strong>Name:</strong> {device_name}<br>
                        <strong>IP Address:</strong> {ip_address}<br>
                        <strong>Time:</strong> {login_time}
                    </div>
                    
                    <p>Please enter this security code to complete your login:</p>
                    
                    <div class="code">{mfa_code}</div>
                    
                    <div class="expiry-info">
                        ⏱️ This code will expire in 10 minutes
                    </div>
                    
                    <div class="warning">
                        <strong>⚠️ Important Security Notice:</strong><br>
                        If you didn't attempt to log in from this device, please:
                        <ul style="margin: 12px 0; padding-left: 20px;">
                            <li>Change your password immediately</li>
                            <li>Review your account activity</li>
                            <li>Contact our support team</li>
                        </ul>
                        Never share this code with anyone, including Backstory support.
                    </div>
                </div>
                <div class="footer">
                    <p><strong>This email was sent to:</strong> {to_email}</p>
                    <p>For security questions, please contact our support team immediately.</p>
                    <p>&copy; 2025 Backstory. All rights reserved.</p>
                </div>
            </div>
        </body>
        </html>
        """
    },
    
    "password_reset": {
        "subject": "Reset your Backstory password",
        "html": """
        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8">
            <title>Password Reset</title>
            <style>
                body {{ 
                    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; 
                    line-height: 1.6; 
                    color: #2E2E2E; 
                    margin: 0; 
                    padding: 0; 
                    background-color: #D3CDBF;
                }}
                .container {{ 
                    max-width: 600px; 
                    margin: 40px auto; 
                    background-color: #FFFFFF;
                    border-radius: 4px;
                    overflow: hidden;
                    box-shadow: 0 4px 12px rgba(26, 37, 54, 0.15);
                }}
                .header {{ 
                    background: linear-gradient(135deg, #4A7A7D 0%, #1A2536 100%); 
                    color: #D3CDBF; 
                    padding: 40px 30px; 
                    text-align: center; 
                }}
                .header h1 {{
                    margin: 0 0 10px 0;
                    font-size: 2rem;
                    font-weight: 500;
                    color: #D3CDBF;
                }}
                .content {{ 
                    padding: 40px 30px; 
                }}
                .content h2 {{
                    margin: 0 0 20px 0;
                    color: #2E2E2E;
                    font-size: 1.75rem;
                    font-weight: 500;
                }}
                .button {{ 
                    display: inline-block; 
                    background: #D4A017; 
                    color: #FFFFFF; 
                    padding: 16px 32px; 
                    text-decoration: none; 
                    border-radius: 4px; 
                    font-weight: 500; 
                    margin: 24px 0;
                    font-size: 1rem;
                    transition: background-color 0.3s ease;
                }}
                .button:hover {{
                    background: rgba(212, 160, 23, 0.8);
                }}
                .footer {{ 
                    background: #D3CDBF; 
                    padding: 30px; 
                    text-align: center; 
                    font-size: 0.875rem; 
                    color: #1A2536; 
                    border-top: 1px solid rgba(26, 37, 54, 0.1);
                }}
                .security-note {{ 
                    background: rgba(212, 160, 23, 0.1); 
                    border: 1px solid #D4A017; 
                    padding: 16px; 
                    border-radius: 4px; 
                    margin: 24px 0; 
                    color: #2E2E2E;
                }}
                .security-note strong {{
                    color: #1A2536;
                }}
            </style>
        </head>
        <body>
            <div class="container">
                <div class="header">
                    <h1>🔑 Password Reset</h1>
                    <p>Reset your password for Backstory</p>
                </div>
                <div class="content">
                    <h2>Reset your password</h2>
                    <p>We received a request to reset your password. Click the button below to create a new password:</p>
                    
                    <div style="text-align: center; margin: 32px 0;">
                        <a href="{reset_link}" class="button">Reset Password</a>
                    </div>
                    
                    <div class="security-note">
                        <strong>Security Information:</strong><br>
                        This link will expire in 1 hour for security reasons. If you didn't request a password reset, please ignore this email and your password will remain unchanged.
                    </div>
                </div>
                <div class="footer">
                    <p><strong>This email was sent to:</strong> {to_email}</p>
                    <p>If you have any questions, please contact our support team.</p>
                    <p>&copy; 2025 Backstory. All rights reserved.</p>
                </div>
            </div>
        </body>
        </html>
        """
    }
}