{% extends 'base.html' %}
{% load static %}

{% block title %}Test Email Configuration - Optinet Global Links{% endblock %}

{% block extra_css %}
<style>
    .test-email-card {
        max-width: 800px;
        margin: 0 auto;
    }
    .status-badge {
        font-size: 0.875rem;
        padding: 0.375rem 0.75rem;
    }
    .config-table {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 1rem;
    }
    .test-form-card {
        border: 2px solid #e9ecef;
        border-radius: 12px;
        background: #fff;
    }
    .gmail-warning {
        border-left: 4px solid #ffc107;
        background: #fff3cd;
        padding: 1rem;
        border-radius: 0 8px 8px 0;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-12">
            <!-- Header -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="h3 mb-0">
                    <i class="bi bi-envelope-check me-2"></i>Test Email Configuration
                </h1>
                <a href="{% url 'settings:dashboard' %}" class="btn btn-outline-secondary">
                    <i class="bi bi-arrow-left me-1"></i>Back to Settings
                </a>
            </div>

            <div class="test-email-card">
                <!-- Current Configuration Status -->
                <div class="card mb-4">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">
                            <i class="bi bi-gear-fill me-2"></i>Current Email Configuration
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="config-table">
                                    <table class="table table-sm mb-0">
                                        <tbody>
                                            <tr>
                                                <td><strong>SMTP Host:</strong></td>
                                                <td>
                                                    {{ email_settings.host|default:"Not configured" }}
                                                    {% if email_settings.host != 'Not configured' and email_settings.host %}
                                                        <span class="badge bg-success status-badge ms-2">Configured</span>
                                                    {% else %}
                                                        <span class="badge bg-danger status-badge ms-2">Missing</span>
                                                    {% endif %}
                                                </td>
                                            </tr>
                                            <tr>
                                                <td><strong>Username:</strong></td>
                                                <td>
                                                    {{ email_settings.user|default:"Not configured" }}
                                                    {% if email_settings.user != 'Not configured' and email_settings.user %}
                                                        <span class="badge bg-success status-badge ms-2">Configured</span>
                                                    {% else %}
                                                        <span class="badge bg-danger status-badge ms-2">Missing</span>
                                                    {% endif %}
                                                </td>
                                            </tr>
                                            <tr>
                                                <td><strong>Overall Status:</strong></td>
                                                <td>
                                                    {% if email_settings.host != 'Not configured' and email_settings.user != 'Not configured' and email_settings.host and email_settings.user %}
                                                        <span class="badge bg-success status-badge">Ready for Testing</span>
                                                    {% else %}
                                                        <span class="badge bg-warning status-badge">Incomplete Configuration</span>
                                                    {% endif %}
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="gmail-warning">
                                    <h6 class="text-warning mb-2">
                                        <i class="bi bi-exclamation-triangle me-2"></i>Gmail Users - Important!
                                    </h6>
                                    <p class="mb-2 small">You <strong>must</strong> use an App Password, not your regular Gmail password.</p>
                                    <details>
                                        <summary class="text-primary" style="cursor: pointer;">Click for Gmail Setup Steps</summary>
                                        <ol class="mt-2 small">
                                            <li>Go to <a href="https://myaccount.google.com" target="_blank">myaccount.google.com</a></li>
                                            <li>Navigate to Security → 2-Step Verification</li>
                                            <li>Click "App passwords" at the bottom</li>
                                            <li>Select "Mail" and generate password</li>
                                            <li>Use the 16-character password in settings</li>
                                        </ol>
                                        <p class="mb-0 small"><strong>Gmail SMTP Settings:</strong><br>
                                        Host: smtp.gmail.com, Port: 587, TLS: Yes</p>
                                    </details>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Test Email Form -->
                <div class="test-form-card">
                    <div class="card-header bg-light">
                        <h5 class="mb-0">
                            <i class="bi bi-send me-2"></i>Send Test Email
                        </h5>
                    </div>
                    <div class="card-body">
                        {% if email_settings.host == 'Not configured' or email_settings.user == 'Not configured' or not email_settings.host or not email_settings.user %}
                            <div class="alert alert-warning">
                                <i class="bi bi-exclamation-triangle me-2"></i>
                                <strong>Configuration Required:</strong> Please configure your email settings first.
                                <a href="{% url 'settings:dashboard' %}" class="btn btn-sm btn-primary ms-2">
                                    Configure Email Settings
                                </a>
                            </div>
                        {% endif %}

                        <form method="post" class="needs-validation" novalidate>
                            {% csrf_token %}
                            <div class="row">
                                <div class="col-md-8">
                                    <div class="mb-4">
                                        <label for="{{ form.test_email.id_for_label }}" class="form-label h6">
                                            <i class="bi bi-envelope me-1"></i>{{ form.test_email.label }} *
                                        </label>
                                        <div class="input-group input-group-lg">
                                            <span class="input-group-text">
                                                <i class="bi bi-at"></i>
                                            </span>
                                            {{ form.test_email }}
                                        </div>
                                        {% if form.test_email.help_text %}
                                            <div class="form-text">{{ form.test_email.help_text }}</div>
                                        {% endif %}
                                        {% if form.test_email.errors %}
                                            <div class="invalid-feedback d-block">
                                                {% for error in form.test_email.errors %}
                                                    {{ error }}
                                                {% endfor %}
                                            </div>
                                        {% endif %}
                                    </div>

                                    <div class="d-grid gap-2 d-md-flex">
                                        <button type="submit" class="btn btn-success btn-lg" 
                                                {% if email_settings.host == 'Not configured' or email_settings.user == 'Not configured' or not email_settings.host or not email_settings.user %}disabled{% endif %}>
                                            <i class="bi bi-send-fill me-2"></i>Send Test Email
                                        </button>
                                        <a href="{% url 'settings:dashboard' %}" class="btn btn-outline-primary btn-lg">
                                            <i class="bi bi-gear me-1"></i>Email Settings
                                        </a>
                                        <a href="{% url 'settings:email_logs' %}" class="btn btn-outline-info btn-lg">
                                            <i class="bi bi-list-ul me-1"></i>Email Logs
                                        </a>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="card bg-light h-100">
                                        <div class="card-body">
                                            <h6 class="card-title">
                                                <i class="bi bi-info-circle me-2"></i>Test Email Content
                                            </h6>
                                            <ul class="list-unstyled small">
                                                <li><i class="bi bi-check2 text-success me-1"></i>OptiNet branded design</li>
                                                <li><i class="bi bi-check2 text-success me-1"></i>Configuration confirmation</li>
                                                <li><i class="bi bi-check2 text-success me-1"></i>Current SMTP settings</li>
                                                <li><i class="bi bi-check2 text-success me-1"></i>Company information</li>
                                                <li><i class="bi bi-check2 text-success me-1"></i>Professional footer</li>
                                            </ul>
                                            <div class="mt-3">
                                                <small class="text-muted">
                                                    <i class="bi bi-clock me-1"></i>
                                                    Test emails are sent immediately and logged for monitoring.
                                                </small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- Quick Tips -->
                <div class="card mt-4">
                    <div class="card-header">
                        <h6 class="mb-0">
                            <i class="bi bi-lightbulb me-2"></i>Troubleshooting Tips
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <h6 class="text-primary">Common Issues:</h6>
                                <ul class="small">
                                    <li>Wrong username/password combination</li>
                                    <li>Incorrect SMTP host or port</li>
                                    <li>TLS/SSL settings mismatch</li>
                                    <li>Firewall blocking SMTP ports</li>
                                </ul>
                            </div>
                            <div class="col-md-6">
                                <h6 class="text-primary">Popular SMTP Settings:</h6>
                                <ul class="small">
                                    <li><strong>Gmail:</strong> smtp.gmail.com:587 (TLS)</li>
                                    <li><strong>Outlook:</strong> smtp.live.com:587 (TLS)</li>
                                    <li><strong>Yahoo:</strong> smtp.mail.yahoo.com:587 (TLS)</li>
                                    <li><strong>Custom:</strong> Check with your provider</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Form validation
(function() {
    'use strict';
    window.addEventListener('load', function() {
        var forms = document.getElementsByClassName('needs-validation');
        var validation = Array.prototype.filter.call(forms, function(form) {
            form.addEventListener('submit', function(event) {
                if (form.checkValidity() === false) {
                    event.preventDefault();
                    event.stopPropagation();
                }
                form.classList.add('was-validated');
            }, false);
        });
    }, false);
})();
</script>
{% endblock %}