{% extends "base.html" %}

{% block title %}Settings - Email Alerts System{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <h2 class="mb-4">
            <i class="fas fa-cog me-2"></i>
            System Settings
        </h2>
    </div>
</div>

<form method="POST" action="{{ url_for('update_settings') }}">
    <div class="row">
        <!-- Email Configuration -->
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-body">
                    <h5 class="card-title">
                        <i class="fas fa-envelope me-2"></i>
                        Email Configuration
                    </h5>
                    
                    <div class="mb-3">
                        <label for="email_address" class="form-label">Email Address to Monitor</label>
                        <input type="email" class="form-control" id="email_address" name="email_address" 
                               value="{{ config.email_address }}" required>
                        <div class="form-text">The email address that will be checked for new messages.</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="zoho_email" class="form-label">Zoho Email Address</label>
                        <input type="email" class="form-control" id="zoho_email" name="zoho_email" 
                               value="{{ config.zoho_email }}" required>
                        <div class="form-text">Your Zoho email address for IMAP access.</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="zoho_app_password" class="form-label">Zoho App Password</label>
                        <input type="password" class="form-control" id="zoho_app_password" name="zoho_app_password" 
                               value="{{ config.zoho_app_password }}" required>
                        <div class="form-text">App password for Zoho IMAP access (not your regular password).</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="email_days_back" class="form-label">Email Range (Days)</label>
                        <input type="number" class="form-control" id="email_days_back" name="email_days_back" 
                               value="{{ config.email_days_back }}" min="1" max="365" required>
                        <div class="form-text">How many days back to check for emails (1-365 days).</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="agency_domains" class="form-label">Agency Domains</label>
                        <textarea class="form-control" id="agency_domains" name="agency_domains" rows="3" 
                                  placeholder="projects@manaknightdigital.com, support@company.com">{{ config.agency_domains|join(', ') }}</textarea>
                        <div class="form-text">Comma-separated list of email domains that indicate agency responses.</div>
                    </div>
                    
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="auto_process" name="auto_process" 
                                   {% if config.auto_process %}checked{% endif %}>
                            <label class="form-check-label" for="auto_process">
                                Enable Automatic Email Processing
                            </label>
                        </div>
                        <div class="form-text">Automatically process emails at regular intervals.</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="auto_process_interval" class="form-label">Processing Interval (minutes)</label>
                        <input type="number" class="form-control" id="auto_process_interval" name="auto_process_interval" 
                               value="{{ config.auto_process_interval }}" min="5" max="1440">
                        <div class="form-text">How often to automatically process emails (5-1440 minutes).</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Time Frames Configuration -->
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-body">
                    <h5 class="card-title">
                        <i class="fas fa-clock me-2"></i>
                        Alert Time Frames
                    </h5>
                    <p class="text-muted">Configure when alerts should be sent based on response time.</p>
                    
                    <div id="time-frames-container">
                        {% for frame in config.time_frames %}
                        <div class="time-frame-row mb-3 p-3 border rounded">
                            <div class="row">
                                <div class="col-md-4">
                                    <label class="form-label">Name</label>
                                    <input type="text" class="form-control" name="frame_name[]" 
                                           value="{{ frame.name }}" placeholder="e.g., 1-24 hours">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">Hours</label>
                                    <input type="number" class="form-control" name="frame_hours[]" 
                                           value="{{ frame.hours }}" min="1" max="720">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">Alert Level</label>
                                    <select class="form-select" name="frame_level[]">
                                        <option value="1" {% if frame.alert_level == 1 %}selected{% endif %}>Level 1 (Normal)</option>
                                        <option value="2" {% if frame.alert_level == 2 %}selected{% endif %}>Level 2 (Urgent)</option>
                                        <option value="3" {% if frame.alert_level == 3 %}selected{% endif %}>Level 3 (Critical)</option>
                                    </select>
                                </div>
                                <div class="col-md-2 d-flex align-items-end">
                                    <button type="button" class="btn btn-outline-danger btn-sm" onclick="removeTimeFrame(this)">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    
                    <button type="button" class="btn btn-outline-primary btn-sm" onclick="addTimeFrame()">
                        <i class="fas fa-plus me-2"></i>
                        Add Time Frame
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Save Button -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-0">
                                <i class="fas fa-save me-2"></i>
                                Save Configuration
                            </h6>
                            <small class="text-muted">Click save to update all settings</small>
                        </div>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-2"></i>
                            Save Settings
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<!-- Configuration Preview -->
<div class="row mt-4">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">
                    <i class="fas fa-eye me-2"></i>
                    Current Configuration Preview
                </h5>
                <div class="row">
                    <div class="col-md-6">
                        <h6>Email Settings</h6>
                        <ul class="list-unstyled">
                            <li><strong>Email:</strong> <span id="preview-email">{{ config.email_address }}</span></li>
                            <li><strong>Range:</strong> <span id="preview-range">{{ config.email_days_back }}</span> days</li>
                            <li><strong>Domains:</strong> <span id="preview-domains">{{ config.agency_domains|join(', ') }}</span></li>
                            <li><strong>Auto Processing:</strong> <span id="preview-auto">{{ 'Enabled' if config.auto_process else 'Disabled' }}</span></li>
                            <li><strong>Interval:</strong> <span id="preview-interval">{{ config.auto_process_interval }}</span> minutes</li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h6>Time Frames</h6>
                        <div id="preview-frames">
                            {% for frame in config.time_frames %}
                            <div class="mb-1">
                                <span class="badge bg-primary me-2">{{ frame.name }}</span>
                                <small>{{ frame.hours }} hours (Level {{ frame.alert_level }})</small>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function addTimeFrame() {
    const container = document.getElementById('time-frames-container');
    const newFrame = document.createElement('div');
    newFrame.className = 'time-frame-row mb-3 p-3 border rounded';
    newFrame.innerHTML = `
        <div class="row">
            <div class="col-md-4">
                <label class="form-label">Name</label>
                <input type="text" class="form-control" name="frame_name[]" 
                       placeholder="e.g., 1-24 hours">
            </div>
            <div class="col-md-3">
                <label class="form-label">Hours</label>
                <input type="number" class="form-control" name="frame_hours[]" 
                       value="24" min="1" max="720">
            </div>
            <div class="col-md-3">
                <label class="form-label">Alert Level</label>
                <select class="form-select" name="frame_level[]">
                    <option value="1">Level 1 (Normal)</option>
                    <option value="2">Level 2 (Urgent)</option>
                    <option value="3">Level 3 (Critical)</option>
                </select>
            </div>
            <div class="col-md-2 d-flex align-items-end">
                <button type="button" class="btn btn-outline-danger btn-sm" onclick="removeTimeFrame(this)">
                    <i class="fas fa-trash"></i>
                </button>
            </div>
        </div>
    `;
    container.appendChild(newFrame);
}

function removeTimeFrame(button) {
    const frameRow = button.closest('.time-frame-row');
    frameRow.remove();
}

// Update preview when form fields change
document.addEventListener('DOMContentLoaded', function() {
    const emailInput = document.getElementById('email_address');
    const rangeInput = document.getElementById('email_days_back');
    const domainsInput = document.getElementById('agency_domains');
    const autoProcessInput = document.getElementById('auto_process');
    const intervalInput = document.getElementById('auto_process_interval');
    
    emailInput.addEventListener('input', function() {
        document.getElementById('preview-email').textContent = this.value;
    });
    
    rangeInput.addEventListener('input', function() {
        document.getElementById('preview-range').textContent = this.value;
    });
    
    domainsInput.addEventListener('input', function() {
        document.getElementById('preview-domains').textContent = this.value;
    });
    
    autoProcessInput.addEventListener('change', function() {
        document.getElementById('preview-auto').textContent = this.checked ? 'Enabled' : 'Disabled';
    });
    
    intervalInput.addEventListener('input', function() {
        document.getElementById('preview-interval').textContent = this.value;
    });
});
</script>
{% endblock %}