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

{% block title %}Notification Preferences - AdTlas{% endblock %}

{% block breadcrumb %}
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Home</a></li>
        <li class="breadcrumb-item"><a href="{% url 'notifications:list' %}">Notifications</a></li>
        <li class="breadcrumb-item active">Preferences</li>
    </ol>
</nav>
{% endblock %}

{% block extra_css %}
<style>
    .preference-card {
        transition: all 0.3s ease;
        border: 2px solid transparent;
    }
    .preference-card:hover {
        border-color: #007bff;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    .preference-toggle {
        transform: scale(1.2);
    }
    .notification-type-icon {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
    }
    .delivery-method {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1rem;
    }
    .save-indicator {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 1050;
    }
</style>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <!-- Header -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h1 class="h3 mb-0">
                    <i class="fas fa-cog text-primary me-2"></i>
                    Notification Preferences
                </h1>
                <p class="text-muted mb-0">Customize how and when you receive notifications</p>
            </div>
            <div>
                <button type="button" class="btn btn-success" id="saveAllBtn">
                    <i class="fas fa-save me-1"></i>Save All Changes
                </button>
            </div>
        </div>
        
        <!-- Save Indicator -->
        <div id="saveIndicator" class="save-indicator" style="display: none;">
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="fas fa-check-circle me-2"></i>Preferences saved successfully!
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        </div>
        
        <form id="preferencesForm" method="post">
            {% csrf_token %}
            
            <!-- Global Settings -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-globe me-2"></i>Global Settings
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="delivery-method">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <h6 class="mb-1">
                                            <i class="fas fa-envelope text-primary me-2"></i>
                                            Email Notifications
                                        </h6>
                                        <p class="text-muted mb-0">Receive notifications via email</p>
                                    </div>
                                    <div class="form-check form-switch">
                                        <input class="form-check-input preference-toggle" type="checkbox" 
                                               id="emailEnabled" name="email_enabled" 
                                               {% if preferences.email_enabled %}checked{% endif %}>
                                    </div>
                                </div>
                                
                                <div id="emailSettings" class="mt-3" {% if not preferences.email_enabled %}style="display: none;"{% endif %}>
                                    <div class="row g-3">
                                        <div class="col-12">
                                            <label for="emailAddress" class="form-label">Email Address</label>
                                            <input type="email" class="form-control" id="emailAddress" 
                                                   name="email_address" value="{{ user.email }}" readonly>
                                        </div>
                                        <div class="col-6">
                                            <label for="emailFrequency" class="form-label">Frequency</label>
                                            <select class="form-select" id="emailFrequency" name="email_frequency">
                                                <option value="instant" {% if preferences.email_frequency == 'instant' %}selected{% endif %}>Instant</option>
                                                <option value="hourly" {% if preferences.email_frequency == 'hourly' %}selected{% endif %}>Hourly Digest</option>
                                                <option value="daily" {% if preferences.email_frequency == 'daily' %}selected{% endif %}>Daily Digest</option>
                                                <option value="weekly" {% if preferences.email_frequency == 'weekly' %}selected{% endif %}>Weekly Digest</option>
                                            </select>
                                        </div>
                                        <div class="col-6">
                                            <label for="emailTime" class="form-label">Preferred Time</label>
                                            <input type="time" class="form-control" id="emailTime" 
                                                   name="email_time" value="{{ preferences.email_time|default:'09:00' }}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="delivery-method">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <h6 class="mb-1">
                                            <i class="fas fa-bell text-warning me-2"></i>
                                            In-App Notifications
                                        </h6>
                                        <p class="text-muted mb-0">Show notifications in the application</p>
                                    </div>
                                    <div class="form-check form-switch">
                                        <input class="form-check-input preference-toggle" type="checkbox" 
                                               id="inAppEnabled" name="in_app_enabled" 
                                               {% if preferences.in_app_enabled %}checked{% endif %}>
                                    </div>
                                </div>
                                
                                <div id="inAppSettings" class="mt-3" {% if not preferences.in_app_enabled %}style="display: none;"{% endif %}>
                                    <div class="row g-3">
                                        <div class="col-6">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="showDesktop" 
                                                       name="show_desktop" {% if preferences.show_desktop %}checked{% endif %}>
                                                <label class="form-check-label" for="showDesktop">
                                                    Desktop Notifications
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="playSound" 
                                                       name="play_sound" {% if preferences.play_sound %}checked{% endif %}>
                                                <label class="form-check-label" for="playSound">
                                                    Sound Alerts
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Quiet Hours -->
                    <div class="mt-4">
                        <h6 class="mb-3">
                            <i class="fas fa-moon text-info me-2"></i>
                            Quiet Hours
                        </h6>
                        <div class="row g-3">
                            <div class="col-md-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="quietHoursEnabled" 
                                           name="quiet_hours_enabled" {% if preferences.quiet_hours_enabled %}checked{% endif %}>
                                    <label class="form-check-label" for="quietHoursEnabled">
                                        Enable Quiet Hours
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <label for="quietStart" class="form-label">Start Time</label>
                                <input type="time" class="form-control" id="quietStart" 
                                       name="quiet_start" value="{{ preferences.quiet_start|default:'22:00' }}" 
                                       {% if not preferences.quiet_hours_enabled %}disabled{% endif %}>
                            </div>
                            <div class="col-md-3">
                                <label for="quietEnd" class="form-label">End Time</label>
                                <input type="time" class="form-control" id="quietEnd" 
                                       name="quiet_end" value="{{ preferences.quiet_end|default:'08:00' }}" 
                                       {% if not preferences.quiet_hours_enabled %}disabled{% endif %}>
                            </div>
                            <div class="col-md-3">
                                <label for="quietTimezone" class="form-label">Timezone</label>
                                <select class="form-select" id="quietTimezone" name="quiet_timezone" 
                                        {% if not preferences.quiet_hours_enabled %}disabled{% endif %}>
                                    <option value="UTC" {% if preferences.quiet_timezone == 'UTC' %}selected{% endif %}>UTC</option>
                                    <option value="America/New_York" {% if preferences.quiet_timezone == 'America/New_York' %}selected{% endif %}>Eastern Time</option>
                                    <option value="America/Chicago" {% if preferences.quiet_timezone == 'America/Chicago' %}selected{% endif %}>Central Time</option>
                                    <option value="America/Denver" {% if preferences.quiet_timezone == 'America/Denver' %}selected{% endif %}>Mountain Time</option>
                                    <option value="America/Los_Angeles" {% if preferences.quiet_timezone == 'America/Los_Angeles' %}selected{% endif %}>Pacific Time</option>
                                    <option value="Europe/London" {% if preferences.quiet_timezone == 'Europe/London' %}selected{% endif %}>London</option>
                                    <option value="Europe/Paris" {% if preferences.quiet_timezone == 'Europe/Paris' %}selected{% endif %}>Paris</option>
                                    <option value="Asia/Tokyo" {% if preferences.quiet_timezone == 'Asia/Tokyo' %}selected{% endif %}>Tokyo</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Notification Types -->
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-list me-2"></i>Notification Types
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        {% for notification_type in notification_types %}
                        <div class="col-lg-6 col-xl-4 mb-4">
                            <div class="preference-card card h-100">
                                <div class="card-body">
                                    <div class="d-flex align-items-start">
                                        <div class="notification-type-icon bg-{{ notification_type.color }} text-white me-3">
                                            <i class="{{ notification_type.icon }}"></i>
                                        </div>
                                        <div class="flex-grow-1">
                                            <h6 class="card-title mb-1">{{ notification_type.name }}</h6>
                                            <p class="card-text text-muted small mb-3">{{ notification_type.description|truncatechars:80 }}</p>
                                            
                                            <!-- Priority Badge -->
                                            <div class="mb-3">
                                                {% if notification_type.priority == 5 %}
                                                <span class="badge bg-danger">Critical</span>
                                                {% elif notification_type.priority == 4 %}
                                                <span class="badge bg-warning">High</span>
                                                {% elif notification_type.priority == 3 %}
                                                <span class="badge bg-info">Normal</span>
                                                {% elif notification_type.priority == 2 %}
                                                <span class="badge bg-secondary">Low</span>
                                                {% else %}
                                                <span class="badge bg-light text-dark">Very Low</span>
                                                {% endif %}
                                            </div>
                                            
                                            <!-- Preferences -->
                                            {% if notification_type.can_be_disabled %}
                                            <div class="form-check form-switch mb-2">
                                                <input class="form-check-input" type="checkbox" 
                                                       id="type_{{ notification_type.code }}" 
                                                       name="type_{{ notification_type.code }}" 
                                                       {% if notification_type.code in user_preferences %}checked{% endif %}>
                                                <label class="form-check-label" for="type_{{ notification_type.code }}">
                                                    Enable notifications
                                                </label>
                                            </div>
                                            
                                            {% if notification_type.supports_email %}
                                            <div class="form-check mb-1">
                                                <input class="form-check-input" type="checkbox" 
                                                       id="email_{{ notification_type.code }}" 
                                                       name="email_{{ notification_type.code }}" 
                                                       {% if notification_type.code in email_preferences %}checked{% endif %}
                                                       {% if notification_type.code not in user_preferences %}disabled{% endif %}>
                                                <label class="form-check-label small" for="email_{{ notification_type.code }}">
                                                    <i class="fas fa-envelope me-1"></i>Email
                                                </label>
                                            </div>
                                            {% endif %}
                                            
                                            {% if notification_type.supports_in_app %}
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" 
                                                       id="inapp_{{ notification_type.code }}" 
                                                       name="inapp_{{ notification_type.code }}" 
                                                       {% if notification_type.code in inapp_preferences %}checked{% endif %}
                                                       {% if notification_type.code not in user_preferences %}disabled{% endif %}>
                                                <label class="form-check-label small" for="inapp_{{ notification_type.code }}">
                                                    <i class="fas fa-bell me-1"></i>In-App
                                                </label>
                                            </div>
                                            {% endif %}
                                            
                                            {% else %}
                                            <div class="text-muted small">
                                                <i class="fas fa-lock me-1"></i>
                                                This notification type cannot be disabled
                                            </div>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            
            <!-- Action Buttons -->
            <div class="d-flex justify-content-between mt-4">
                <div>
                    <button type="button" class="btn btn-outline-secondary" id="resetBtn">
                        <i class="fas fa-undo me-1"></i>Reset to Defaults
                    </button>
                </div>
                <div>
                    <a href="{% url 'notifications:list' %}" class="btn btn-outline-primary me-2">
                        <i class="fas fa-arrow-left me-1"></i>Back to Notifications
                    </a>
                    <button type="submit" class="btn btn-success">
                        <i class="fas fa-save me-1"></i>Save Preferences
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // Toggle email settings visibility
    $('#emailEnabled').change(function() {
        if ($(this).is(':checked')) {
            $('#emailSettings').slideDown();
        } else {
            $('#emailSettings').slideUp();
        }
    });
    
    // Toggle in-app settings visibility
    $('#inAppEnabled').change(function() {
        if ($(this).is(':checked')) {
            $('#inAppSettings').slideDown();
        } else {
            $('#inAppSettings').slideUp();
        }
    });
    
    // Toggle quiet hours settings
    $('#quietHoursEnabled').change(function() {
        const isEnabled = $(this).is(':checked');
        $('#quietStart, #quietEnd, #quietTimezone').prop('disabled', !isEnabled);
    });
    
    // Handle notification type toggles
    $('input[id^="type_"]').change(function() {
        const typeCode = $(this).attr('id').replace('type_', '');
        const isEnabled = $(this).is(':checked');
        
        // Enable/disable delivery method checkboxes
        $(`#email_${typeCode}, #inapp_${typeCode}`).prop('disabled', !isEnabled);
        
        if (!isEnabled) {
            $(`#email_${typeCode}, #inapp_${typeCode}`).prop('checked', false);
        }
    });
    
    // Auto-save functionality
    let saveTimeout;
    $('input, select').change(function() {
        clearTimeout(saveTimeout);
        saveTimeout = setTimeout(function() {
            savePreferences(true); // Auto-save
        }, 2000);
    });
    
    // Manual save
    $('#preferencesForm').submit(function(e) {
        e.preventDefault();
        savePreferences(false);
    });
    
    $('#saveAllBtn').click(function() {
        savePreferences(false);
    });
    
    // Reset to defaults
    $('#resetBtn').click(function() {
        if (confirm('Reset all notification preferences to default values?')) {
            $.ajax({
                url: '{% url "notifications:reset_preferences" %}',
                method: 'POST',
                headers: {
                    'X-CSRFToken': $('[name=csrfmiddlewaretoken]').val()
                },
                success: function(response) {
                    if (response.success) {
                        location.reload();
                    }
                },
                error: function() {
                    alert('Error resetting preferences');
                }
            });
        }
    });
    
    function savePreferences(isAutoSave = false) {
        const formData = new FormData($('#preferencesForm')[0]);
        
        $.ajax({
            url: '{% url "notifications:preferences" %}',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRFToken': $('[name=csrfmiddlewaretoken]').val()
            },
            success: function(response) {
                if (response.success) {
                    if (!isAutoSave) {
                        $('#saveIndicator').fadeIn().delay(3000).fadeOut();
                    }
                } else {
                    alert('Error saving preferences: ' + (response.error || 'Unknown error'));
                }
            },
            error: function() {
                alert('Error saving preferences');
            }
        });
    }
    
    // Request notification permission for desktop notifications
    $('#showDesktop').change(function() {
        if ($(this).is(':checked') && 'Notification' in window) {
            if (Notification.permission === 'default') {
                Notification.requestPermission().then(function(permission) {
                    if (permission !== 'granted') {
                        $('#showDesktop').prop('checked', false);
                        alert('Desktop notifications permission denied');
                    }
                });
            } else if (Notification.permission === 'denied') {
                $(this).prop('checked', false);
                alert('Desktop notifications are blocked. Please enable them in your browser settings.');
            }
        }
    });
});
</script>
{% endblock %}