{% load static %}

<!-- Top Navigation Bar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
    <div class="container-fluid">
        <!-- Brand -->
        <a class="navbar-brand d-flex align-items-center" href="{% url 'core:dashboard' %}">
            <img src="{% static 'images/logo.svg' %}" alt="Ad-tlas" height="32" class="me-2">
            <span class="fw-bold">Ad-tlas</span>
        </a>
        
        <!-- Mobile Toggle -->
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        
        <!-- Navigation Items -->
        <div class="collapse navbar-collapse" id="navbarNav">
            <!-- Main Navigation -->
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link {% if request.resolver_match.namespace == 'core' and request.resolver_match.url_name == 'dashboard' %}active{% endif %}" href="{% url 'core:dashboard' %}">
                        <i class="fas fa-tachometer-alt me-1"></i> Dashboard
                    </a>
                </li>
                
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle {% if request.resolver_match.namespace == 'campaigns' %}active{% endif %}" href="#" id="campaignsDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="fas fa-bullhorn me-1"></i> Campaigns
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="campaignsDropdown">
                        <li><a class="dropdown-item" href="{% url 'campaigns:campaign_list' %}"><i class="fas fa-list me-2"></i> All Campaigns</a></li>
                        <li><a class="dropdown-item" href="{% url 'campaigns:campaign_create' %}"><i class="fas fa-plus me-2"></i> Create Campaign</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="{% url 'campaigns:campaign_dashboard' %}"><i class="fas fa-chart-line me-2"></i> Campaign Dashboard</a></li>
                        <li><a class="dropdown-item" href="{% url 'campaigns:campaign_analytics' %}"><i class="fas fa-analytics me-2"></i> Analytics</a></li>
                    </ul>
                </li>
                
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle {% if request.resolver_match.namespace == 'advertisers' %}active{% endif %}" href="#" id="advertisersDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="fas fa-building me-1"></i> Advertisers
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="advertisersDropdown">
                        <li><a class="dropdown-item" href="{% url 'advertisers:advertiser_list' %}"><i class="fas fa-list me-2"></i> All Advertisers</a></li>
                        <li><a class="dropdown-item" href="{% url 'advertisers:advertiser_create' %}"><i class="fas fa-plus me-2"></i> Add Advertiser</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="{% url 'advertisers:advertiser_dashboard' %}"><i class="fas fa-chart-bar me-2"></i> Performance</a></li>
                    </ul>
                </li>
                
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle {% if request.resolver_match.namespace == 'channels' %}active{% endif %}" href="#" id="channelsDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="fas fa-broadcast-tower me-1"></i> Channels
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="channelsDropdown">
                        <li><a class="dropdown-item" href="{% url 'channels:channel_list' %}"><i class="fas fa-list me-2"></i> All Channels</a></li>
                        <li><a class="dropdown-item" href="{% url 'channels:channel_create' %}"><i class="fas fa-plus me-2"></i> Add Channel</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="{% url 'channels:channel_dashboard' %}"><i class="fas fa-chart-pie me-2"></i> Channel Analytics</a></li>
                    </ul>
                </li>
                
                <li class="nav-item">
                    <a class="nav-link {% if request.resolver_match.namespace == 'activities' %}active{% endif %}" href="{% url 'activities:activity_list' %}">
                        <i class="fas fa-history me-1"></i> Activities
                    </a>
                </li>
            </ul>
            
            <!-- Search -->
            <form class="d-flex me-3" method="get" action="{% url 'core:search' %}">
                <div class="input-group">
                    <input class="form-control form-control-sm" type="search" name="q" placeholder="Search..." aria-label="Search" value="{{ request.GET.q }}">
                    <button class="btn btn-outline-light btn-sm" type="submit">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
            </form>
            
            <!-- User Menu -->
            <ul class="navbar-nav">
                {% if user.is_authenticated %}
                    <!-- Notifications -->
                    <li class="nav-item dropdown">
                        <a class="nav-link position-relative" href="#" id="notificationsDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fas fa-bell"></i>
                            <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger notification-count" style="display: none;">
                                0
                            </span>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end notification-dropdown" aria-labelledby="notificationsDropdown">
                            <li><h6 class="dropdown-header">Notifications</h6></li>
                            <li><hr class="dropdown-divider"></li>
                            <li class="notification-item">
                                <div class="dropdown-item-text text-muted text-center py-3">
                                    No new notifications
                                </div>
                            </li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item text-center" href="{% url 'notifications:notification_list' %}">View All Notifications</a></li>
                        </ul>
                    </li>
                    
                    <!-- User Profile -->
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle d-flex align-items-center" href="#" id="userDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            {% if user.profile.avatar %}
                                <img src="{{ user.profile.avatar.url }}" alt="{{ user.get_full_name }}" class="rounded-circle me-2" width="24" height="24">
                            {% else %}
                                <div class="bg-secondary rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 24px; height: 24px; font-size: 12px;">
                                    {{ user.first_name|first|default:user.username|first|upper }}
                                </div>
                            {% endif %}
                            <span class="d-none d-md-inline">{{ user.get_full_name|default:user.username }}</span>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
                            <li><h6 class="dropdown-header">{{ user.get_full_name|default:user.username }}</h6></li>
                            <li><small class="dropdown-item-text text-muted">{{ user.email }}</small></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="{% url 'accounts:profile' %}"><i class="fas fa-user me-2"></i> Profile</a></li>
                            <li><a class="dropdown-item" href="{% url 'accounts:settings' %}"><i class="fas fa-cog me-2"></i> Settings</a></li>
                            {% if user.is_staff %}
                            <li><a class="dropdown-item" href="{% url 'admin:index' %}" target="_blank"><i class="fas fa-tools me-2"></i> Admin Panel</a></li>
                            {% endif %}
                            <li><hr class="dropdown-divider"></li>
                            <li>
                                <form method="post" action="{% url 'accounts:logout' %}" class="d-inline">
                                    {% csrf_token %}
                                    <button type="submit" class="dropdown-item text-danger">
                                        <i class="fas fa-sign-out-alt me-2"></i> Logout
                                    </button>
                                </form>
                            </li>
                        </ul>
                    </li>
                {% else %}
                    <!-- Login/Register -->
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'accounts:login' %}">
                            <i class="fas fa-sign-in-alt me-1"></i> Login
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'accounts:register' %}">
                            <i class="fas fa-user-plus me-1"></i> Register
                        </a>
                    </li>
                {% endif %}
            </ul>
        </div>
    </div>
</nav>

<!-- Sidebar (for larger screens) -->
<div class="sidebar d-none d-lg-block">
    <div class="sidebar-content">
        <!-- Quick Actions -->
        <div class="sidebar-section">
            <h6 class="sidebar-heading">Quick Actions</h6>
            <div class="list-group list-group-flush">
                <a href="{% url 'campaigns:campaign_create' %}" class="list-group-item list-group-item-action">
                    <i class="fas fa-plus text-success me-2"></i> New Campaign
                </a>
                <a href="{% url 'advertisers:advertiser_create' %}" class="list-group-item list-group-item-action">
                    <i class="fas fa-building text-primary me-2"></i> Add Advertiser
                </a>
                <a href="{% url 'channels:channel_create' %}" class="list-group-item list-group-item-action">
                    <i class="fas fa-broadcast-tower text-info me-2"></i> Add Channel
                </a>
            </div>
        </div>
        
        <!-- Recent Activity -->
        <div class="sidebar-section">
            <h6 class="sidebar-heading">Recent Activity</h6>
            <div class="recent-activity">
                <!-- This will be populated via AJAX -->
                <div class="text-muted text-center py-3">
                    <small>Loading...</small>
                </div>
            </div>
        </div>
        
        <!-- System Status -->
        <div class="sidebar-section">
            <h6 class="sidebar-heading">System Status</h6>
            <div class="system-status">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <small class="text-muted">System Health</small>
                    <span class="badge bg-success system-health-badge">Healthy</span>
                </div>
                <div class="d-flex justify-content-between align-items-center">
                    <small class="text-muted">Active Campaigns</small>
                    <span class="badge bg-primary active-campaigns-count">-</span>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Mobile Sidebar Overlay -->
<div class="sidebar-overlay d-lg-none" id="sidebarOverlay"></div>

<style>
/* Navigation Styles */
.navbar {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 1030;
}

.navbar-brand img {
    filter: brightness(0) invert(1);
}

.notification-dropdown {
    width: 300px;
    max-height: 400px;
    overflow-y: auto;
}

.notification-count {
    font-size: 0.7rem;
}

/* Sidebar Styles */
.sidebar {
    position: fixed;
    top: 56px;
    left: 0;
    width: 280px;
    height: calc(100vh - 56px);
    background: #f8f9fa;
    border-right: 1px solid #dee2e6;
    overflow-y: auto;
    z-index: 1020;
}

.sidebar-content {
    padding: 1rem;
}

.sidebar-section {
    margin-bottom: 2rem;
}

.sidebar-heading {
    font-size: 0.875rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.sidebar .list-group-item {
    border: none;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

.sidebar .list-group-item:hover {
    background-color: #e9ecef;
}

.recent-activity {
    font-size: 0.875rem;
}

.system-status {
    font-size: 0.875rem;
}

.system-health-badge {
    font-size: 0.7rem;
}

.active-campaigns-count {
    font-size: 0.7rem;
}

/* Main content adjustment for sidebar */
@media (min-width: 992px) {
    .main-content {
        margin-left: 280px;
    }
}

/* Mobile sidebar overlay */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1019;
    display: none;
}

.sidebar-overlay.show {
    display: block;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    
    .sidebar.show {
        transform: translateX(0);
    }
}
</style>

<script>
// Navigation JavaScript
document.addEventListener('DOMContentLoaded', function() {
    // Load notifications
    loadNotifications();
    
    // Load recent activity
    loadRecentActivity();
    
    // Load system status
    loadSystemStatus();
    
    // Auto-refresh every 30 seconds
    setInterval(function() {
        loadNotifications();
        loadSystemStatus();
    }, 30000);
});

function loadNotifications() {
    // This would typically make an AJAX call to get notifications
    // For now, we'll just update the count
    const count = 0; // This would come from the API
    const badge = document.querySelector('.notification-count');
    if (count > 0) {
        badge.textContent = count;
        badge.style.display = 'block';
    } else {
        badge.style.display = 'none';
    }
}

function loadRecentActivity() {
    // This would typically make an AJAX call to get recent activity
    const activityContainer = document.querySelector('.recent-activity');
    activityContainer.innerHTML = '<div class="text-muted text-center py-3"><small>No recent activity</small></div>';
}

function loadSystemStatus() {
    // This would typically make an AJAX call to get system status
    const healthBadge = document.querySelector('.system-health-badge');
    const campaignsCount = document.querySelector('.active-campaigns-count');
    
    // Simulate API call
    fetch('/api/system/status/')
        .then(response => response.json())
        .then(data => {
            healthBadge.textContent = data.status || 'Healthy';
            healthBadge.className = `badge bg-${data.status === 'Healthy' ? 'success' : 'warning'} system-health-badge`;
            campaignsCount.textContent = data.active_campaigns || '0';
        })
        .catch(error => {
            console.error('Error loading system status:', error);
            healthBadge.textContent = 'Unknown';
            healthBadge.className = 'badge bg-secondary system-health-badge';
            campaignsCount.textContent = '-';
        });
}
</script>