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

{% block title %}System Settings - OptiNet Global Links{% endblock %}

{% block extra_css %}
<style>
    .settings-card {
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 0.5rem;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        transition: all 0.3s ease;
        margin-bottom: 1.5rem;
    }

    .settings-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }

    .settings-card-header {
        padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--border-color);
        background: var(--card-header-bg);
        border-radius: 0.5rem 0.5rem 0 0;
        display: flex;
        justify-content: between;
        align-items: center;
    }

    .settings-card-body {
        padding: 1.25rem;
    }

    .setting-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--border-color);
    }

    .setting-item:last-child {
        border-bottom: none;
    }

    .setting-key {
        font-weight: 600;
        color: var(--text-color);
        min-width: 120px;
    }

    .setting-value {
        color: var(--text-muted);
        text-align: right;
        flex: 1;
        margin-left: 1rem;
    }

    .image-preview {
        max-height: 40px;
        max-width: 80px;
        object-fit: contain;
        border-radius: 0.25rem;
        border: 1px solid var(--border-color);
    }

    .status-badge {
        padding: 0.25rem 0.75rem;
        border-radius: 1rem;
        font-size: 0.75rem;
        font-weight: 600;
    }

    .status-configured {
        background-color: #d1edff;
        color: #0c63e4;
    }

    .status-not-configured {
        background-color: #fef3cd;
        color: #b6860a;
    }

    .quick-action-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
        margin-top: 1rem;
    }

    .quick-action-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 1.5rem;
        text-decoration: none;
        border: 1px solid var(--border-color);
        border-radius: 0.5rem;
        background: var(--card-bg);
        color: var(--text-color);
        transition: all 0.3s ease;
        text-align: center;
    }

    .quick-action-btn:hover {
        background: var(--primary-color);
        color: white;
        text-decoration: none;
        transform: translateY(-2px);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }

    .quick-action-btn i {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }

    .modal-content {
        border-radius: 0.5rem;
    }

    .form-floating {
        margin-bottom: 1rem;
    }

    .form-check {
        margin-bottom: 0.5rem;
    }

    @media (max-width: 768px) {
        .settings-card-header {
            padding: 0.75rem 1rem;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.5rem;
        }

        .settings-card-body {
            padding: 1rem;
        }

        .setting-item {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.5rem;
        }

        .setting-value {
            text-align: left;
            margin-left: 0;
        }

        .quick-action-grid {
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 0.75rem;
        }

        .quick-action-btn {
            padding: 1rem;
        }

        .quick-action-btn i {
            font-size: 1.5rem;
        }
    }

    @media (max-width: 576px) {
        .container-fluid {
            padding: 0.5rem;
        }

        .settings-card {
            margin-bottom: 1rem;
        }

        .quick-action-grid {
            grid-template-columns: 1fr 1fr;
            gap: 0.5rem;
        }

        .quick-action-btn {
            padding: 0.75rem;
            font-size: 0.875rem;
        }

        .quick-action-btn i {
            font-size: 1.25rem;
            margin-bottom: 0.25rem;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Header -->
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <div>
            <h1 class="h2">
                <i class="bi bi-gear"></i> System Settings
            </h1>
            <p class="text-muted mb-0">Configure system-wide settings and integrations</p>
        </div>
        <div class="btn-toolbar mb-2 mb-md-0">
            <div class="btn-group me-2">
                <button type="button" class="btn btn-sm btn-outline-secondary">
                    <i class="bi bi-download"></i> Export Settings
                </button>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Quick Actions -->
        <div class="col-12 mb-4">
            <div class="settings-card">
                <div class="settings-card-header">
                    <div>
                        <i class="bi bi-lightning me-2"></i>
                        <strong>Quick Actions</strong>
                    </div>
                </div>
                <div class="settings-card-body">
                    <div class="quick-action-grid">
                        <a href="{% url 'settings:test_email' %}" class="quick-action-btn">
                            <i class="bi bi-envelope-check"></i>
                            <span>Test Email</span>
                        </a>
                        <a href="{% url 'settings:email_logs' %}" class="quick-action-btn">
                            <i class="bi bi-journal-text"></i>
                            <span>Email Logs</span>
                        </a>
                        <a href="{% url 'settings:company_profile' %}" class="quick-action-btn">
                            <i class="bi bi-building"></i>
                            <span>Company Profile</span>
                        </a>
                        <button class="quick-action-btn" onclick="testEmailConfig()">
                            <i class="bi bi-envelope-arrow-up"></i>
                            <span>Quick Test</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Company Profile -->
        <div class="col-lg-6 col-xl-4 mb-4">
            <div class="settings-card h-100">
                <div class="settings-card-header">
                    <div>
                        <i class="bi bi-building me-2"></i>
                        <strong>Company Profile</strong>
                    </div>
                </div>
                <div class="settings-card-body">
                    {% if company_profile %}
                        <div class="setting-item">
                            <span class="setting-key">Name:</span>
                            <span class="setting-value">{{ company_profile.company_name }}</span>
                        </div>
                        {% if company_profile.email %}
                        <div class="setting-item">
                            <span class="setting-key">Email:</span>
                            <span class="setting-value">{{ company_profile.email }}</span>
                        </div>
                        {% endif %}
                        {% if company_profile.phone %}
                        <div class="setting-item">
                            <span class="setting-key">Phone:</span>
                            <span class="setting-value">{{ company_profile.phone }}</span>
                        </div>
                        {% endif %}
                        {% if company_profile.company_logo %}
                        <div class="setting-item">
                            <span class="setting-key">Logo:</span>
                            <img src="{{ company_profile.company_logo.url }}" alt="Logo" class="image-preview">
                        </div>
                        {% endif %}
                        {% if company_profile.favicon %}
                        <div class="setting-item">
                            <span class="setting-key">Favicon:</span>
                            <img src="{{ company_profile.favicon.url }}" alt="Favicon" class="image-preview">
                        </div>
                        {% endif %}
                    {% else %}
                        <p class="text-muted mb-0">No company profile configured</p>
                    {% endif %}
                    <button class="btn btn-primary btn-sm w-100 mt-2" data-bs-toggle="modal" data-bs-target="#companyModal">
                        <i class="bi bi-pencil"></i> Configure Company
                    </button>
                </div>
            </div>
        </div>

        <!-- Email Configuration -->
        <div class="col-lg-6 col-xl-4 mb-4">
            <div class="settings-card h-100">
                <div class="settings-card-header">
                    <div>
                        <i class="bi bi-envelope me-2"></i>
                        <strong>Email Configuration</strong>
                    </div>
                    <span class="status-badge {% if email_settings.HOST %}status-configured{% else %}status-not-configured{% endif %}">
                        {% if email_settings.HOST %}Configured{% else %}Not Configured{% endif %}
                    </span>
                </div>
                <div class="settings-card-body">
                    {% if email_settings %}
                        <div class="setting-item">
                            <span class="setting-key">Host:</span>
                            <span class="setting-value">{{ email_settings.HOST|default:"Not set" }}</span>
                        </div>
                        <div class="setting-item">
                            <span class="setting-key">Port:</span>
                            <span class="setting-value">{{ email_settings.PORT|default:"Not set" }}</span>
                        </div>
                        <div class="setting-item">
                            <span class="setting-key">User:</span>
                            <span class="setting-value">{{ email_settings.HOST_USER|default:"Not set" }}</span>
                        </div>
                        <div class="setting-item">
                            <span class="setting-key">TLS:</span>
                            <span class="setting-value">{% if email_settings.USE_TLS == 'true' %}Yes{% else %}No{% endif %}</span>
                        </div>
                        <div class="setting-item">
                            <span class="setting-key">SSL:</span>
                            <span class="setting-value">{% if email_settings.USE_SSL == 'true' %}Yes{% else %}No{% endif %}</span>
                        </div>
                    {% else %}
                        <p class="text-muted mb-0">No email configuration found</p>
                    {% endif %}
                    <button class="btn btn-primary btn-sm w-100 mt-2" data-bs-toggle="modal" data-bs-target="#emailModal">
                        <i class="bi bi-pencil"></i> Configure Email
                    </button>
                </div>
            </div>
        </div>

        <!-- M-Pesa Configuration -->
        <div class="col-lg-6 col-xl-4 mb-4">
            <div class="settings-card h-100">
                <div class="settings-card-header">
                    <div>
                        <i class="bi bi-phone me-2"></i>
                        <strong>M-Pesa Configuration</strong>
                    </div>
                    <span class="status-badge {% if mpesa_settings.CONSUMER_KEY %}status-configured{% else %}status-not-configured{% endif %}">
                        {% if mpesa_settings.CONSUMER_KEY %}Configured{% else %}Not Configured{% endif %}
                    </span>
                </div>
                <div class="settings-card-body">
                    {% if mpesa_settings %}
                        <div class="setting-item">
                            <span class="setting-key">Environment:</span>
                            <span class="setting-value">{{ mpesa_settings.ENVIRONMENT|default:"sandbox" }}</span>
                        </div>
                        <div class="setting-item">
                            <span class="setting-key">Short Code:</span>
                            <span class="setting-value">{{ mpesa_settings.BUSINESS_SHORT_CODE|default:"Not set" }}</span>
                        </div>
                        <div class="setting-item">
                            <span class="setting-key">Consumer Key:</span>
                            <span class="setting-value">{% if mpesa_settings.CONSUMER_KEY %}••••••••{% else %}Not set{% endif %}</span>
                        </div>
                    {% else %}
                        <p class="text-muted mb-0">No M-Pesa configuration found</p>
                    {% endif %}
                    <button class="btn btn-primary btn-sm w-100 mt-2" data-bs-toggle="modal" data-bs-target="#mpesaModal">
                        <i class="bi bi-pencil"></i> Configure M-Pesa
                    </button>
                </div>
            </div>
        </div>

        <!-- SMS Configuration -->
        <div class="col-lg-6 col-xl-4 mb-4">
            <div class="settings-card h-100">
                <div class="settings-card-header">
                    <div>
                        <i class="bi bi-chat me-2"></i>
                        <strong>SMS Configuration</strong>
                    </div>
                    <span class="status-badge {% if sms_settings.API_KEY %}status-configured{% else %}status-not-configured{% endif %}">
                        {% if sms_settings.API_KEY %}Configured{% else %}Not Configured{% endif %}
                    </span>
                </div>
                <div class="settings-card-body">
                    {% if sms_settings %}
                        <div class="setting-item">
                            <span class="setting-key">API URL:</span>
                            <span class="setting-value">{{ sms_settings.API_URL|default:"Not set" }}</span>
                        </div>
                        <div class="setting-item">
                            <span class="setting-key">Sender ID:</span>
                            <span class="setting-value">{{ sms_settings.SENDER_ID|default:"Not set" }}</span>
                        </div>
                        <div class="setting-item">
                            <span class="setting-key">API Key:</span>
                            <span class="setting-value">{% if sms_settings.API_KEY %}••••••••{% else %}Not set{% endif %}</span>
                        </div>
                    {% else %}
                        <p class="text-muted mb-0">No SMS configuration found</p>
                    {% endif %}
                    <button class="btn btn-primary btn-sm w-100 mt-2" data-bs-toggle="modal" data-bs-target="#smsModal">
                        <i class="bi bi-pencil"></i> Configure SMS
                    </button>
                </div>
            </div>
        </div>

        <!-- Email Statistics -->
        {% if email_stats %}
        <div class="col-lg-6 col-xl-4 mb-4">
            <div class="settings-card h-100">
                <div class="settings-card-header">
                    <div>
                        <i class="bi bi-graph-up me-2"></i>
                        <strong>Email Statistics</strong>
                    </div>
                </div>
                <div class="settings-card-body">
                    <div class="setting-item">
                        <span class="setting-key">Total Sent:</span>
                        <span class="setting-value text-success">{{ email_stats.total_sent }}</span>
                    </div>
                    <div class="setting-item">
                        <span class="setting-key">Failed:</span>
                        <span class="setting-value text-danger">{{ email_stats.total_failed }}</span>
                    </div>
                    <div class="setting-item">
                        <span class="setting-key">Pending:</span>
                        <span class="setting-value text-warning">{{ email_stats.total_pending }}</span>
                    </div>
                    <div class="setting-item">
                        <span class="setting-key">Today:</span>
                        <span class="setting-value text-info">{{ email_stats.today_sent }}</span>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</div>

<!-- Company Profile Modal -->
<div class="modal fade" id="companyModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Company Profile Settings</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="post" enctype="multipart/form-data" action="{% url 'settings:dashboard' %}">
                {% csrf_token %}
                <input type="hidden" name="action" value="save_company_settings">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <div class="form-floating">
                                <input type="text" class="form-control" name="company_name" value="{{ company_profile.company_name|default:'' }}" placeholder="Company Name">
                                <label>Company Name</label>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="form-floating">
                                <input type="email" class="form-control" name="email" value="{{ company_profile.email|default:'' }}" placeholder="Email">
                                <label>Email</label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Company Logo</label>
                            {% if company_profile.company_logo %}
                                <div class="mb-2">
                                    <img src="{{ company_profile.company_logo.url }}" alt="Current Logo" class="image-preview">
                                    <a href="javascript:void(0)" onclick="deleteImage('logo')" class="btn btn-sm btn-outline-danger ms-2">
                                        <i class="bi bi-trash"></i> Delete
                                    </a>
                                </div>
                            {% endif %}
                            <input type="file" class="form-control" name="company_logo" accept="image/*">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Favicon</label>
                            {% if company_profile.favicon %}
                                <div class="mb-2">
                                    <img src="{{ company_profile.favicon.url }}" alt="Current Favicon" class="image-preview">
                                    <a href="javascript:void(0)" onclick="deleteImage('favicon')" class="btn btn-sm btn-outline-danger ms-2">
                                        <i class="bi bi-trash"></i> Delete
                                    </a>
                                </div>
                            {% endif %}
                            <input type="file" class="form-control" name="favicon" accept="image/*">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Changes</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Email Settings Modal -->
<div class="modal fade" id="emailModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Email Configuration</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="post" action="{% url 'settings:dashboard' %}">
                {% csrf_token %}
                <input type="hidden" name="action" value="save_email_settings">
                <div class="modal-body">
                    <div class="form-floating mb-3">
                        <input type="text" class="form-control" name="HOST" value="{{ email_settings.HOST|default:'' }}" placeholder="SMTP Host">
                        <label>SMTP Host</label>
                    </div>
                    <div class="form-floating mb-3">
                        <input type="number" class="form-control" name="PORT" value="{{ email_settings.PORT|default:'587' }}" placeholder="Port">
                        <label>Port</label>
                    </div>
                    <div class="form-floating mb-3">
                        <input type="email" class="form-control" name="HOST_USER" value="{{ email_settings.HOST_USER|default:'' }}" placeholder="Username">
                        <label>Username</label>
                    </div>
                    <div class="form-floating mb-3">
                        <input type="password" class="form-control" name="HOST_PASSWORD" placeholder="Password">
                        <label>Password</label>
                        <small class="text-muted">Leave blank to keep current password</small>
                    </div>
                    <div class="form-check mb-2">
                        <input class="form-check-input" type="checkbox" name="USE_TLS" {% if email_settings.USE_TLS == 'true' %}checked{% endif %}>
                        <label class="form-check-label">Use TLS</label>
                    </div>
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" name="USE_SSL" {% if email_settings.USE_SSL == 'true' %}checked{% endif %}>
                        <label class="form-check-label">Use SSL</label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Settings</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- M-Pesa Settings Modal -->
<div class="modal fade" id="mpesaModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">M-Pesa Configuration</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="post" action="{% url 'settings:dashboard' %}">
                {% csrf_token %}
                <input type="hidden" name="action" value="save_mpesa_settings">
                <div class="modal-body">
                    <div class="form-floating mb-3">
                        <select class="form-select" name="ENVIRONMENT">
                            <option value="sandbox" {% if mpesa_settings.ENVIRONMENT == 'sandbox' %}selected{% endif %}>Sandbox</option>
                            <option value="production" {% if mpesa_settings.ENVIRONMENT == 'production' %}selected{% endif %}>Production</option>
                        </select>
                        <label>Environment</label>
                    </div>
                    <div class="form-floating mb-3">
                        <input type="text" class="form-control" name="BUSINESS_SHORT_CODE" value="{{ mpesa_settings.BUSINESS_SHORT_CODE|default:'' }}" placeholder="Business Short Code">
                        <label>Business Short Code</label>
                    </div>
                    <div class="form-floating mb-3">
                        <input type="text" class="form-control" name="CONSUMER_KEY" placeholder="Consumer Key">
                        <label>Consumer Key</label>
                        <small class="text-muted">Leave blank to keep current key</small>
                    </div>
                    <div class="form-floating mb-3">
                        <input type="password" class="form-control" name="CONSUMER_SECRET" placeholder="Consumer Secret">
                        <label>Consumer Secret</label>
                        <small class="text-muted">Leave blank to keep current secret</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Settings</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- SMS Settings Modal -->
<div class="modal fade" id="smsModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">SMS Configuration</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="post" action="{% url 'settings:dashboard' %}">
                {% csrf_token %}
                <input type="hidden" name="action" value="save_sms_settings">
                <div class="modal-body">
                    <div class="form-floating mb-3">
                        <input type="url" class="form-control" name="API_URL" value="{{ sms_settings.API_URL|default:'' }}" placeholder="API URL">
                        <label>API URL</label>
                    </div>
                    <div class="form-floating mb-3">
                        <input type="text" class="form-control" name="SENDER_ID" value="{{ sms_settings.SENDER_ID|default:'' }}" placeholder="Sender ID">
                        <label>Sender ID</label>
                    </div>
                    <div class="form-floating mb-3">
                        <input type="password" class="form-control" name="API_KEY" placeholder="API Key">
                        <label>API Key</label>
                        <small class="text-muted">Leave blank to keep current key</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Settings</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function deleteImage(imageType) {
    if (confirm(`Are you sure you want to delete the ${imageType}?`)) {
        fetch('{% url "settings:delete_image" %}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': '{{ csrf_token }}'
            },
            body: JSON.stringify({
                'image_type': imageType
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Error: ' + data.error);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred while deleting the image.');
        });
    }
}

function testEmailConfig() {
    // Show loading message
    const alertDiv = document.createElement('div');
    alertDiv.className = 'alert alert-info alert-dismissible fade show';
    alertDiv.innerHTML = `
        <i class="bi bi-envelope-arrow-up me-2"></i>
        Testing email configuration... Please wait.
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    document.querySelector('.container-fluid').insertBefore(alertDiv, document.querySelector('.container-fluid').firstChild);

    // Make an AJAX call to test email
    fetch('/accounts/test-email/')
        .then(response => response.json())
        .then(data => {
            alertDiv.remove();
            const successAlert = document.createElement('div');
            if (data.success) {
                successAlert.className = 'alert alert-success alert-dismissible fade show';
                successAlert.innerHTML = `
                    <i class="bi bi-check-circle me-2"></i>
                    ${data.message}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                `;
            } else {
                successAlert.className = 'alert alert-danger alert-dismissible fade show';
                successAlert.innerHTML = `
                    <i class="bi bi-x-circle me-2"></i>
                    ${data.error || data.message}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                `;
            }
            document.querySelector('.container-fluid').insertBefore(successAlert, document.querySelector('.container-fluid').firstChild);
        })
        .catch(error => {
            alertDiv.remove();
            const errorAlert = document.createElement('div');
            errorAlert.className = 'alert alert-danger alert-dismissible fade show';
            errorAlert.innerHTML = `
                <i class="bi bi-x-circle me-2"></i>
                An unexpected error occurred while testing email.
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            `;
            document.querySelector('.container-fluid').insertBefore(errorAlert, document.querySelector('.container-fluid').firstChild);
            console.error('Error testing email:', error);
        });
}
</script>
{% endblock %}