"""
Professional HTML email templates for BinByte contact form responses.
Uses the company color scheme with minimal shadows and reduced rounded corners.
"""

def get_user_confirmation_email(full_name, subject, inquiry_type, reference_id):
    """
    Generate HTML email for user confirmation.
    
    Args:
        full_name: User's full name
        subject: The subject of their inquiry
        inquiry_type: Type of inquiry (sales, support, etc.)
        reference_id: Submission reference ID
    
    Returns:
        HTML string for the email
    """
    html = f"""
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Thank You for Contacting BinByte</title>
</head>
<body style="margin: 0; padding: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: #f8f9fa;">
    <table width="100%" cellpadding="0" cellspacing="0" style="background-color: #f8f9fa; padding: 40px 20px;">
        <tr>
            <td align="center">
                <!-- Main Container -->
                <table width="600" cellpadding="0" cellspacing="0" style="max-width: 600px; background-color: #ffffff; border-radius: 8px; overflow: hidden;">
                    
                    <!-- Header with Brand Colors -->
                    <tr>
                        <td style="background: linear-gradient(135deg, #1a3d2e 0%, #1e4937 100%); padding: 40px 40px 30px 40px; text-align: center;">
                            <h1 style="margin: 0; color: #ffffff; font-size: 28px; font-weight: 700; letter-spacing: -0.5px;">
                                BinByte
                            </h1>
                            <p style="margin: 8px 0 0 0; color: #7fd957; font-size: 14px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase;">
                                Business Management Platform
                            </p>
                        </td>
                    </tr>
                    
                    <!-- Main Content -->
                    <tr>
                        <td style="padding: 40px;">
                            <!-- Greeting -->
                            <h2 style="margin: 0 0 16px 0; color: #1a3d2e; font-size: 22px; font-weight: 600;">
                                Hi {full_name},
                            </h2>
                            
                            <p style="margin: 0 0 24px 0; color: #6b7280; font-size: 16px; line-height: 1.6;">
                                Thank you for reaching out to BinByte. We've received your message and our team will review it shortly.
                            </p>
                            
                            <!-- Info Box -->
                            <table width="100%" cellpadding="0" cellspacing="0" style="background-color: #ffffff; border: 1px solid #e5e7eb; border-radius: 6px; margin: 0 0 20px 0;">
                                <tr>
                                    <td style="padding: 24px;">
                                        <p style="margin: 0 0 16px 0; color: #1a3d2e; font-size: 14px; font-weight: 600;">
                                            Your Inquiry Details
                                        </p>
                                        
                                        <table width="100%" cellpadding="0" cellspacing="0">
                                            <tr>
                                                <td style="padding: 8px 0; color: #6b7280; font-size: 14px; width: 140px;">
                                                    Subject:
                                                </td>
                                                <td style="padding: 8px 0; color: #1f2937; font-size: 14px; font-weight: 500;">
                                                    {subject}
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="padding: 8px 0; color: #6b7280; font-size: 14px;">
                                                    Inquiry Type:
                                                </td>
                                                <td style="padding: 8px 0; color: #1f2937; font-size: 14px; font-weight: 500;">
                                                    {inquiry_type.replace('_', ' ').title()}
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="padding: 8px 0; color: #6b7280; font-size: 14px;">
                                                    Reference ID:
                                                </td>
                                                <td style="padding: 8px 0; color: #6b7280; font-size: 13px; font-family: 'Courier New', monospace;">
                                                    {reference_id}
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                            
                            <!-- Response Time Notice -->
                            <table width="100%" cellpadding="0" cellspacing="0" style="background-color: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; margin: 0 0 24px 0;">
                                <tr>
                                    <td style="padding: 16px 20px;">
                                        <p style="margin: 0; color: #92400e; font-size: 14px; line-height: 1.5;">
                                            <strong>Response Time:</strong> We typically respond within 24 hours during business days (Monday - Friday, 9:00 AM - 6:00 PM EAT).
                                        </p>
                                    </td>
                                </tr>
                            </table>
                            
                            <!-- CTA Section -->
                            <table width="100%" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td style="padding: 0 8px 0 0;" width="50%">
                                        <a href="https://binbyte.co.ke/resources/help" style="display: block; padding: 14px 20px; background-color: #ffffff; border: 1px solid #e5e7eb; border-radius: 6px; text-align: center; text-decoration: none; color: #1a3d2e; font-size: 14px; font-weight: 600;">
                                            Help Center
                                        </a>
                                    </td>
                                    <td style="padding: 0 0 0 8px;" width="50%">
                                        <a href="https://binbyte.co.ke/features" style="display: block; padding: 14px 20px; background-color: #ffffff; border: 1px solid #e5e7eb; border-radius: 6px; text-align: center; text-decoration: none; color: #1a3d2e; font-size: 14px; font-weight: 600;">
                                            Features
                                        </a>
                                    </td>
                                </tr>
                            </table>
                            
                            <!-- Urgent Contact -->
                            <table width="100%" cellpadding="0" cellspacing="0" style="background-color: #f8f9fa; border-radius: 6px; margin: 24px 0 0 0;">
                                <tr>
                                    <td style="padding: 20px 24px; text-align: center;">
                                        <p style="margin: 0 0 12px 0; color: #1a3d2e; font-size: 14px; font-weight: 600;">
                                            Need Immediate Assistance?
                                        </p>
                                        <p style="margin: 0; color: #6b7280; font-size: 14px;">
                                            Call us at <a href="tel:+254798969800" style="color: #1a3d2e; text-decoration: none; font-weight: 600;">+254 798 969 800</a><br>
                                            or email <a href="mailto:support@binbyte.co.ke" style="color: #1a3d2e; text-decoration: none; font-weight: 600;">support@binbyte.co.ke</a>
                                        </p>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    
                    <!-- Footer -->
                    <tr>
                        <td style="background-color: #1f2937; padding: 32px 40px; text-align: center;">
                            <p style="margin: 0 0 16px 0; color: #e5e7eb; font-size: 14px; font-weight: 600;">
                                BinByte - Simplify Your Business Operations
                            </p>
                            
                            <!-- Social Links (Optional) -->
                            <table cellpadding="0" cellspacing="0" style="margin: 0 auto 16px auto;">
                                <tr>
                                    <td style="padding: 0 8px;">
                                        <a href="https://twitter.com/binbyte" style="color: #7fd957; text-decoration: none; font-size: 13px;">Twitter</a>
                                    </td>
                                    <td style="padding: 0 8px; color: #6b7280;">•</td>
                                    <td style="padding: 0 8px;">
                                        <a href="https://linkedin.com/company/binbyte" style="color: #7fd957; text-decoration: none; font-size: 13px;">LinkedIn</a>
                                    </td>
                                    <td style="padding: 0 8px; color: #6b7280;">•</td>
                                    <td style="padding: 0 8px;">
                                        <a href="https://binbyte.co.ke" style="color: #7fd957; text-decoration: none; font-size: 13px;">Website</a>
                                    </td>
                                </tr>
                            </table>
                            
                            <p style="margin: 0; color: #9ca3af; font-size: 12px; line-height: 1.5;">
                                © 2024 BinByte. All rights reserved.<br>
                                This is an automated message, please do not reply to this email.
                            </p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>
    """
    return html


def get_admin_notification_email(submission_data):
    """
    Generate HTML email for admin notification.
    
    Args:
        submission_data: Dict containing all submission details
    
    Returns:
        HTML string for the admin email
    """
    html = f"""
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>New Contact Form Submission</title>
</head>
<body style="margin: 0; padding: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: #f8f9fa;">
    <table width="100%" cellpadding="0" cellspacing="0" style="background-color: #f8f9fa; padding: 40px 20px;">
        <tr>
            <td align="center">
                <!-- Main Container -->
                <table width="700" cellpadding="0" cellspacing="0" style="max-width: 700px; background-color: #ffffff; border-radius: 8px; overflow: hidden;">
                    
                    <!-- Header -->
                    <tr>
                        <td style="background: linear-gradient(135deg, #1a3d2e 0%, #1e4937 100%); padding: 24px 40px;">
                            <table width="100%" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td>
                                        <h1 style="margin: 0; color: #ffffff; font-size: 20px; font-weight: 600;">
                                            🔔 New Contact Form Submission
                                        </h1>
                                    </td>
                                    <td align="right">
                                        <span style="display: inline-block; padding: 6px 12px; background-color: #7fd957; color: #1a3d2e; font-size: 12px; font-weight: 600; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px;">
                                            {submission_data.get('status', 'NEW')}
                                        </span>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    
                    <!-- Main Content -->
                    <tr>
                        <td style="padding: 40px;">
                            
                            <!-- Submission Overview -->
                            <table width="100%" cellpadding="0" cellspacing="0" style="background-color: #f0f9f4; border-radius: 6px; margin: 0 0 24px 0;">
                                <tr>
                                    <td style="padding: 24px;">
                                        <h2 style="margin: 0 0 16px 0; color: #1a3d2e; font-size: 16px; font-weight: 600;">
                                            Contact Information
                                        </h2>
                                        
                                        <table width="100%" cellpadding="0" cellspacing="0">
                                            <tr>
                                                <td style="padding: 8px 0; color: #6b7280; font-size: 14px; width: 140px;">
                                                    <strong>Name:</strong>
                                                </td>
                                                <td style="padding: 8px 0; color: #1f2937; font-size: 14px;">
                                                    {submission_data['full_name']}
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="padding: 8px 0; color: #6b7280; font-size: 14px;">
                                                    <strong>Email:</strong>
                                                </td>
                                                <td style="padding: 8px 0;">
                                                    <a href="mailto:{submission_data['email']}" style="color: #1a3d2e; text-decoration: none; font-size: 14px; font-weight: 500;">
                                                        {submission_data['email']}
                                                    </a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="padding: 8px 0; color: #6b7280; font-size: 14px;">
                                                    <strong>Phone:</strong>
                                                </td>
                                                <td style="padding: 8px 0;">
                                                    <a href="tel:{submission_data.get('phone', '')}" style="color: #1a3d2e; text-decoration: none; font-size: 14px; font-weight: 500;">
                                                        {submission_data.get('phone', 'Not provided')}
                                                    </a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="padding: 8px 0; color: #6b7280; font-size: 14px;">
                                                    <strong>Company:</strong>
                                                </td>
                                                <td style="padding: 8px 0; color: #1f2937; font-size: 14px;">
                                                    {submission_data.get('company', 'Not provided')}
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="padding: 8px 0; color: #6b7280; font-size: 14px;">
                                                    <strong>Inquiry Type:</strong>
                                                </td>
                                                <td style="padding: 8px 0;">
                                                    <span style="display: inline-block; padding: 4px 10px; background-color: #7fd957; color: #1a3d2e; font-size: 12px; font-weight: 600; border-radius: 4px;">
                                                        {submission_data.get('inquiry_type', 'general').replace('_', ' ').title()}
                                                    </span>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                            
                            <!-- Subject -->
                            <div style="margin: 0 0 24px 0;">
                                <p style="margin: 0 0 8px 0; color: #6b7280; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">
                                    Subject
                                </p>
                                <p style="margin: 0; color: #1f2937; font-size: 16px; font-weight: 600;">
                                    {submission_data['subject']}
                                </p>
                            </div>
                            
                            <!-- Message -->
                            <div style="margin: 0 0 24px 0;">
                                <p style="margin: 0 0 12px 0; color: #6b7280; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">
                                    Message
                                </p>
                                <div style="padding: 20px; background-color: #f8f9fa; border-left: 4px solid #7fd957; border-radius: 6px;">
                                    <p style="margin: 0; color: #1f2937; font-size: 14px; line-height: 1.7; white-space: pre-wrap;">
{submission_data['message']}</p>
                                </div>
                            </div>
                            
                            <!-- Metadata -->
                            <table width="100%" cellpadding="0" cellspacing="0" style="background-color: #f8f9fa; border-radius: 6px; margin: 0 0 24px 0;">
                                <tr>
                                    <td style="padding: 20px 24px;">
                                        <p style="margin: 0 0 12px 0; color: #1a3d2e; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">
                                            Submission Details
                                        </p>
                                        
                                        <table width="100%" cellpadding="0" cellspacing="0">
                                            <tr>
                                                <td style="padding: 6px 0; color: #6b7280; font-size: 13px; width: 140px;">
                                                    Reference ID:
                                                </td>
                                                <td style="padding: 6px 0; color: #1f2937; font-size: 13px; font-family: 'Courier New', monospace;">
                                                    {submission_data['reference_id']}
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="padding: 6px 0; color: #6b7280; font-size: 13px;">
                                                    Submitted At:
                                                </td>
                                                <td style="padding: 6px 0; color: #1f2937; font-size: 13px;">
                                                    {submission_data['submitted_at']}
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="padding: 6px 0; color: #6b7280; font-size: 13px;">
                                                    IP Address:
                                                </td>
                                                <td style="padding: 6px 0; color: #1f2937; font-size: 13px; font-family: 'Courier New', monospace;">
                                                    {submission_data.get('ip_address', 'Unknown')}
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="padding: 6px 0; color: #6b7280; font-size: 13px;">
                                                    Referrer:
                                                </td>
                                                <td style="padding: 6px 0; color: #1f2937; font-size: 13px;">
                                                    {submission_data.get('referrer', 'Direct')}
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                            
                            <!-- Action Button -->
                            <table width="100%" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td align="center" style="padding: 20px 0;">
                                        <a href="{submission_data['admin_url']}" style="display: inline-block; padding: 14px 32px; background-color: #1a3d2e; color: #ffffff; text-decoration: none; font-size: 14px; font-weight: 600; border-radius: 6px;">
                                            View in Admin Dashboard →
                                        </a>
                                    </td>
                                </tr>
                            </table>
                            
                        </td>
                    </tr>
                    
                    <!-- Footer -->
                    <tr>
                        <td style="background-color: #f8f9fa; padding: 24px 40px; text-align: center; border-top: 1px solid #e5e7eb;">
                            <p style="margin: 0; color: #6b7280; font-size: 13px;">
                                BinByte Admin Notification System<br>
                                <a href="https://binbyte.co.ke" style="color: #1a3d2e; text-decoration: none;">binbyte.co.ke</a>
                            </p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>
    """
    return html