from sqlmodel.ext.asyncio.session import AsyncSession
from app.model.email_template import EmailTemplate, TemplateType
from app.repo.email_template import get_all_templates, create_template
from typing import List


# Default professional email templates
DEFAULT_TEMPLATES = [
    {
        "name": "Newsletter - Monthly Digest",
        "template_type": TemplateType.newsletter,
        "subject": "Your Monthly Digest - {month}",
        "body": """<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Inter', Arial, sans-serif; background-color: #f1f5f9; margin: 0; padding: 40px 20px; -webkit-font-smoothing: antialiased; }
        .container { max-width: 600px; margin: 0 auto; background-color: #ffffff; border-radius: 24px; overflow: hidden; border: 1px solid #e2e8f0; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); }
        .header { padding: 24px; text-align: center; border-bottom: 1px solid #f1f5f9; }
        .logo { font-size: 24px; font-weight: 900; letter-spacing: -0.05em; color: #0f172a; }
        .logo .blue { color: #2563eb; }
        .hero { background-color: #0f172a; padding: 40px; text-align: center; color: #ffffff; }
        .badge { display: inline-block; padding: 4px 12px; border-radius: 9999px; background-color: rgba(37,99,235,0.2); color: #93c5fd; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 16px; border: 1px solid rgba(37,99,235,0.3); }
        .hero h1 { font-size: 32px; font-weight: 900; margin: 0 0 16px 0; line-height: 1.2; }
        .hero p { color: #cbd5e1; font-size: 16px; margin: 0; }
        .content { padding: 40px; color: #475569; line-height: 1.6; }
        .content h2 { color: #0f172a; font-size: 20px; font-weight: 700; margin-bottom: 16px; }
        .footer { padding: 32px; background-color: #f8fafc; text-align: center; border-top: 1px solid #f1f5f9; color: #94a3b8; font-size: 12px; }
        .cta { text-align: center; margin-top: 32px; }
        .button { display: inline-block; padding: 16px 32px; background-color: #2563eb; color: #ffffff; font-weight: 700; text-decoration: none; border-radius: 9999px; font-size: 14px; box-shadow: 0 10px 15px -3px rgba(37,99,235,0.3); }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <span class="logo">Aero<span class="blue">Mail.</span></span>
        </div>
        <div class="hero">
            <span class="badge">Monthly Digest</span>
            <h1>Your Monthly <span style="color: #60a5fa;">Insights.</span></h1>
            <p>We've compiled the best updates from this month just for you.</p>
        </div>
        <div class="content">
            <p>Hello {name},</p>
            <p>Here's a look at the top stories and major breakthroughs from our community this month.</p>
            <h2>Top Stories:</h2>
            <ul>
                <li>Story 1: The Future of Automation</li>
                <li>Story 2: Scaling Your Outreach</li>
                <li>Story 3: Content Marketing Trends</li>
            </ul>
            <div class="cta">
                <a href="#" class="button">Read Full Digest</a>
            </div>
        </div>
        <div class="footer">
            <p>© 2026 AeroMail. All rights reserved.</p>
            <p><a href="#" style="color: #3b82f6; text-decoration: underline;">Unsubscribe</a> | <a href="#" style="color: #3b82f6; text-decoration: underline;">Manage Preferences</a></p>
        </div>
    </div>
</body>
</html>""",
        "description": "Professional monthly newsletter digest"
    },
    {
        "name": "Promotional - Special Offer",
        "template_type": TemplateType.promotional,
        "subject": "🎉 Exclusive Offer: {discount}% Off!",
        "body": """<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Inter', Arial, sans-serif; background-color: #f1f5f9; margin: 0; padding: 40px 20px; -webkit-font-smoothing: antialiased; }
        .container { max-width: 600px; margin: 0 auto; background-color: #ffffff; border-radius: 24px; overflow: hidden; border: 1px solid #e2e8f0; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); }
        .header { padding: 24px; text-align: center; border-bottom: 1px solid #f1f5f9; }
        .logo { font-size: 24px; font-weight: 900; letter-spacing: -0.05em; color: #0f172a; }
        .logo .blue { color: #2563eb; }
        .hero { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); padding: 60px 40px; text-align: center; color: #ffffff; }
        .offer { font-size: 64px; font-weight: 900; margin: 20px 0; letter-spacing: -0.05em; }
        .content { padding: 40px; color: #475569; line-height: 1.6; text-align: center; }
        .footer { padding: 32px; background-color: #f8fafc; text-align: center; border-top: 1px solid #f1f5f9; color: #94a3b8; font-size: 12px; }
        .cta { text-align: center; margin-top: 32px; }
        .button { display: inline-block; padding: 18px 48px; background-color: #f43f5e; color: #ffffff; font-weight: 800; text-decoration: none; border-radius: 9999px; font-size: 16px; box-shadow: 0 10px 15px -3px rgba(244,63,94,0.4); text-transform: uppercase; letter-spacing: 0.05em; }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <span class="logo">Aero<span class="blue">Mail.</span></span>
        </div>
        <div class="hero">
            <h1 style="font-size: 24px; margin-bottom: 8px;">Limited Time Offer!</h1>
            <div class="offer">{discount}% OFF</div>
            <p style="color: #bfdbfe;">Don't miss out on this exclusive deal</p>
        </div>
        <div class="content">
            <p style="font-size: 18px; color: #0f172a; font-weight: 600;">Hi {name},</p>
            <p>We're excited to offer you an exclusive {discount}% discount on your next purchase. This is our way of saying thank you for being a valued member.</p>
            <div class="cta">
                <a href="{link}" class="button">Claim Offer Now</a>
            </div>
            <p style="margin-top: 32px; font-size: 12px; color: #94a3b8;">Offer valid until {expiry_date}</p>
        </div>
        <div class="footer">
            <p>© 2026 AeroMail. All rights reserved.</p>
        </div>
    </div>
</body>
</html>""",
        "description": "Eye-catching promotional offer email"
    },
    {
        "name": "Announcement - Company Update",
        "template_type": TemplateType.announcement,
        "subject": "Important Update: {announcement_title}",
        "body": """<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Inter', Arial, sans-serif; background-color: #f8fafc; margin: 0; padding: 40px 20px; }
        .container { max-width: 600px; margin: 0 auto; background-color: #ffffff; border-radius: 24px; overflow: hidden; border: 1px solid #e2e8f0; }
        .header { padding: 32px; border-bottom: 1px solid #f1f5f9; text-align: left; }
        .logo { font-size: 22px; font-weight: 900; color: #0f172a; }
        .content { padding: 40px; color: #334155; line-height: 1.8; }
        .announcement-box { border-left: 4px solid #2563eb; padding: 24px; background-color: #f0f7ff; border-radius: 0 16px 16px 0; margin: 32px 0; }
        .footer { padding: 32px; text-align: center; color: #94a3b8; font-size: 12px; }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <span class="logo">Aero<span style="color: #2563eb;">Mail.</span></span>
        </div>
        <div class="content">
            <h1 style="font-size: 28px; font-weight: 900; color: #0f172a; margin-bottom: 24px; letter-spacing: -0.02em;">{announcement_title}</h1>
            <p>Hello {name},</p>
            <p>We have an important update we'd like to share with our community regarding our latest developments.</p>
            <div class="announcement-box">
                <p style="margin: 0; font-weight: 500;">{announcement_content}</p>
            </div>
            <p>Thank you for your continued support and for being part of our journey.</p>
            <p>Best regards,<br><strong>The AeroMail Team</strong></p>
        </div>
        <div class="footer">
            <p>© 2026 AeroMail. All rights reserved.</p>
        </div>
    </div>
</body>
</html>""",
        "description": "Professional company announcement"
    },
    {
        "name": "Product Launch",
        "template_type": TemplateType.product,
        "subject": "Introducing {product_name} - Now Available!",
        "body": """<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Inter', Arial, sans-serif; background-color: #0f172a; margin: 0; padding: 40px 20px; }
        .container { max-width: 600px; margin: 0 auto; background-color: #ffffff; border-radius: 32px; overflow: hidden; }
        .hero { background-color: #2563eb; padding: 64px 40px; text-align: center; color: #ffffff; }
        .content { padding: 48px; color: #475569; }
        .feature { padding: 16px; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; }
        .button { display: inline-block; padding: 16px 40px; background-color: #0f172a; color: #ffffff; font-weight: 700; text-decoration: none; border-radius: 12px; }
    </style>
</head>
<body>
    <div class="container">
        <div class="hero">
            <div style="font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 16px; opacity: 0.8;">New Release</div>
            <h1 style="font-size: 40px; font-weight: 900; margin: 0;">{product_name}</h1>
            <p style="font-size: 18px; margin-top: 16px; opacity: 0.9;">The future of email marketing is here.</p>
        </div>
        <div class="content">
            <p>Hello {name},</p>
            <p>We're thrilled to officially announce the launch of <strong>{product_name}</strong>. After months of development, it's finally ready for you.</p>
            <h3 style="color: #0f172a; margin-top: 32px;">Why you'll love it:</h3>
            <div class="feature">✓ Advanced Automation Flows</div>
            <div class="feature">✓ Next-Gen Analytics Dashboard</div>
            <div class="feature">✓ AI-Powered Content Generation</div>
            <div style="text-align: center; margin-top: 48px;">
                <a href="{product_link}" class="button">Get Started Now</a>
            </div>
        </div>
    </div>
</body>
</html>""",
        "description": "Product launch announcement"
    },
    {
        "name": "Event Invitation",
        "template_type": TemplateType.event,
        "subject": "You're Invited: {event_name}",
        "body": """<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Inter', Arial, sans-serif; background-color: #f1f5f9; margin: 0; padding: 40px 20px; }
        .container { max-width: 600px; margin: 0 auto; background-color: #ffffff; border-radius: 24px; overflow: hidden; border: 4px solid #2563eb; }
        .details { background-color: #f8fafc; padding: 32px; border-radius: 16px; margin: 32px 0; }
        .button { display: inline-block; padding: 16px 48px; background-color: #2563eb; color: #ffffff; font-weight: 700; text-decoration: none; border-radius: 9999px; }
    </style>
</head>
<body>
    <div class="container" style="padding: 40px; text-align: center;">
        <div style="font-size: 48px; margin-bottom: 24px;">📅</div>
        <h1 style="font-size: 32px; font-weight: 900; color: #0f172a; margin: 0;">You're Invited!</h1>
        <h2 style="color: #2563eb; margin-top: 8px;">{event_name}</h2>
        <div class="details">
            <div style="margin-bottom: 16px;"><strong>📍 Location:</strong> {event_location}</div>
            <div style="margin-bottom: 16px;"><strong>⏰ Time:</strong> {event_date} at {event_time}</div>
            <p style="margin: 0; color: #64748b;">{event_description}</p>
        </div>
        <a href="{event_link}" class="button">Save My Spot</a>
    </div>
</body>
</html>""",
        "description": "Event invitation with registration link"
    },
    {
        "name": "Webinar Invitation",
        "template_type": TemplateType.webinar,
        "subject": "Join Our Webinar: {topic}",
        "body": """<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Inter', Arial, sans-serif; background-color: #f1f5f9; margin: 0; padding: 40px 20px; }
        .container { max-width: 600px; margin: 0 auto; background-color: #ffffff; border-radius: 24px; overflow: hidden; }
        .header { background: linear-gradient(to right, #6366f1, #a855f7); padding: 60px 40px; text-align: center; color: #ffffff; }
        .content { padding: 40px; }
        .button { display: inline-block; padding: 16px 40px; background-color: #6366f1; color: #ffffff; font-weight: 700; text-decoration: none; border-radius: 12px; }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1 style="font-size: 32px; font-weight: 900; margin: 0;">Live Webinar</h1>
            <p style="font-size: 18px; margin-top: 16px; opacity: 0.9;">{topic}</p>
        </div>
        <div class="content">
            <p>Hello {name},</p>
            <p>You're invited to attend our upcoming exclusive guest webinar session.</p>
            <div style="background-color: #f8fafc; padding: 24px; border-radius: 16px; margin: 32px 0;">
                <p><strong>Topic:</strong> {topic}</p>
                <p><strong>Speaker:</strong> {speaker_name}</p>
                <p><strong>When:</strong> {webinar_date} at {webinar_time}</p>
            </div>
            <div style="text-align: center;">
                <a href="{webinar_link}" class="button">Register for Webinar</a>
            </div>
        </div>
    </div>
</body>
</html>""",
        "description": "Webinar invitation"
    },
    {
        "name": "Onboarding Welcome",
        "template_type": TemplateType.onboarding,
        "subject": "Welcome {name}! Let's Get Started",
        "body": """<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Inter', Arial, sans-serif; background-color: #f1f5f9; margin: 0; padding: 40px 20px; }
        .container { max-width: 600px; margin: 0 auto; background-color: #ffffff; border-radius: 32px; overflow: hidden; border: 1px solid #e2e8f0; }
        .hero { background-color: #0f172a; padding: 64px 40px; text-align: center; color: #ffffff; }
        .step { padding: 24px; background-color: #f8fafc; border-radius: 16px; margin-bottom: 16px; border-left: 4px solid #2563eb; }
    </style>
</head>
<body>
    <div class="container">
        <div class="hero">
            <h1 style="font-size: 40px; font-weight: 900; margin: 0;">Welcome! 🎉</h1>
            <p style="font-size: 18px; margin-top: 16px; color: #94a3b8;">We're thrilled to have you, {name}.</p>
        </div>
        <div style="padding: 48px;">
            <h2 style="font-size: 20px; font-weight: 800; color: #0f172a; margin-bottom: 32px;">Your Getting Started Checklist:</h2>
            <div class="step"><strong>Step 1:</strong> Complete your profile setup</div>
            <div class="step"><strong>Step 2:</strong> Connect your first email list</div>
            <div class="step"><strong>Step 3:</strong> Launch your first campaign</div>
            <p style="margin-top: 40px; color: #64748b;">If you need any help, our team is just a reply away!</p>
        </div>
    </div>
</body>
</html>""",
        "description": "Welcome onboarding email for new users"
    },
    {
        "name": "Feedback Request",
        "template_type": TemplateType.feedback,
        "subject": "We'd Love Your Feedback!",
        "body": """<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Inter', Arial, sans-serif; background-color: #f1f5f9; margin: 0; padding: 40px 20px; }
        .container { max-width: 500px; margin: 0 auto; background-color: #ffffff; border-radius: 32px; padding: 48px; text-align: center; border: 1px solid #e2e8f0; }
        .button { display: inline-block; padding: 16px 48px; background-color: #2563eb; color: #ffffff; font-weight: 700; text-decoration: none; border-radius: 9999px; }
    </style>
</head>
<body>
    <div class="container">
        <div style="font-size: 48px; margin-bottom: 24px;">💬</div>
        <h1 style="font-size: 28px; font-weight: 900; color: #0f172a; margin: 0;">How are we doing?</h1>
        <p style="font-size: 16px; color: #64748b; margin-top: 16px; line-height: 1.6;">Hi {name}, your feedback helps us build a better experience for everyone. Would you mind taking 2 minutes to share your thoughts?</p>
        <div style="margin-top: 40px;">
            <a href="{survey_link}" class="button">Share Feedback</a>
        </div>
    </div>
</body>
</html>""",
        "description": "Customer feedback survey request"
    },
    {
        "name": "Retention - Win Back",
        "template_type": TemplateType.retention,
        "subject": "We Miss You! Here's {incentive} Just for You",
        "body": """<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Inter', Arial, sans-serif; background-color: #f1f5f9; margin: 0; padding: 40px 20px; }
        .container { max-width: 600px; margin: 0 auto; background-color: #ffffff; border-radius: 32px; overflow: hidden; text-align: center; }
        .hero { background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%); padding: 64px 40px; color: #ffffff; }
        .button { display: inline-block; padding: 16px 48px; background-color: #0f172a; color: #ffffff; font-weight: 700; text-decoration: none; border-radius: 9999px; }
    </style>
</head>
<body>
    <div class="container">
        <div class="hero">
            <h1 style="font-size: 40px; font-weight: 900; margin: 0;">We Miss You!</h1>
            <p style="font-size: 18px; margin-top: 16px; opacity: 0.9;">Come back and enjoy exclusive benefits.</p>
        </div>
        <div style="padding: 48px;">
            <p style="font-size: 18px; color: #0f172a;">Hi {name}, it's been a while.</p>
            <p style="color: #64748b; margin-top: 16px;">We'd love to have you back! To make it easier, here's a special gift: <strong>{incentive}</strong>.</p>
            <div style="margin-top: 40px;">
                <a href="{comeback_link}" class="button">Claim My Gift</a>
            </div>
            <p style="margin-top: 32px; font-size: 12px; color: #94a3b8;">Expires on {expiry_date}</p>
        </div>
    </div>
</body>
</html>""",
        "description": "Win-back campaign for inactive users"
    },
    {
        "name": "Sales - Follow Up",
        "template_type": TemplateType.sales,
        "subject": "Quick Question About {product}",
        "body": """<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Inter', Arial, sans-serif; background-color: #ffffff; margin: 0; padding: 40px 20px; color: #0f172a; }
        .container { max-width: 600px; margin: 0 auto; line-height: 1.8; }
        .button { display: inline-block; padding: 16px 32px; background-color: #2563eb; color: #ffffff; font-weight: 700; text-decoration: none; border-radius: 12px; }
    </style>
</head>
<body>
    <div class="container">
        <p>Hi {name},</p>
        <p>I hope you've been doing well! I'm reaching out because I noticed you were interested in <strong>{product}</strong>.</p>
        <p>I'd love to hear if you have any questions or if there's anything I can clarify for you. We've helped many teams similar to yours achieve great results with {product}.</p>
        <div style="background-color: #f8fafc; padding: 24px; border-radius: 16px; margin: 32px 0;">
            <p style="margin: 0;">"The best tool we've used for email engagement." - Happy Client</p>
        </div>
        <p>Would you be open to a quick 10-minute chat this week?</p>
        <div style="margin: 40px 0;">
            <a href="{calendar_link}" class="button">Schedule a Call</a>
        </div>
        <p>Best regards,<br><strong>{sales_rep_name}</strong><br>AeroMail Team</p>
    </div>
</body>
</html>""",
        "description": "Sales follow-up email"
    }
]


async def initialize_default_templates(db: AsyncSession) -> int:
    """Initialize default email templates if they don't exist"""
    existing_templates = await get_all_templates(db)

    if existing_templates:
        print(f"✅ {len(existing_templates)} templates already exist, skipping initialization")
        return len(existing_templates)

    created_count = 0
    for template_data in DEFAULT_TEMPLATES:
        try:
            await create_template(
                name=template_data["name"],
                template_type=template_data["template_type"],
                subject=template_data["subject"],
                body=template_data["body"],
                description=template_data["description"],
                db=db
            )
            created_count += 1
            print(f"✅ Created template: {template_data['name']}")
        except Exception as e:
            print(f"❌ Error creating template {template_data['name']}: {str(e)}")

    print(f"\n✅ Successfully initialized {created_count} email templates")
    return created_count
