<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>RTube - Admin - Announcements</title>
        <style>
            * {
                box-sizing: border-box;
            }
            body {
                font-family: Arial, sans-serif;
                max-width: 1200px;
                margin: 0 auto;
                padding: 20px;
                background-color: #1a1a1a;
                color: #fff;
            }
            h1 {
                margin-bottom: 10px;
            }
            .header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 20px;
            }
            .header-left {
                display: flex;
                align-items: center;
                gap: 20px;
            }
            .back-link {
                color: #888;
                text-decoration: none;
                font-size: 14px;
            }
            .back-link:hover {
                color: #fff;
            }
            .admin-nav {
                display: flex;
                gap: 10px;
                margin-bottom: 20px;
                flex-wrap: wrap;
            }
            .admin-nav a {
                padding: 10px 16px;
                background-color: #2a2a2a;
                color: #fff;
                text-decoration: none;
                border-radius: 5px;
                font-size: 13px;
                transition: background-color 0.2s;
            }
            .admin-nav a:hover {
                background-color: #3a3a3a;
            }
            .admin-nav a.active {
                background-color: #1565C0;
            }

            /* Flash messages */
            .flash-messages {
                margin-bottom: 20px;
            }
            .flash-message {
                padding: 12px;
                border-radius: 4px;
                margin-bottom: 10px;
                font-size: 14px;
            }
            .flash-error {
                background-color: #5c1a1a;
                color: #ff6b6b;
                border: 1px solid #8B0000;
            }
            .flash-success {
                background-color: #1a3d1a;
                color: #81C784;
                border: 1px solid #2E7D32;
            }

            /* Create form */
            .create-section {
                background-color: #2a2a2a;
                border-radius: 8px;
                padding: 20px;
                margin-bottom: 30px;
            }
            .create-section h2 {
                margin: 0 0 15px 0;
                font-size: 16px;
                color: #aaa;
                text-transform: uppercase;
                letter-spacing: 0.5px;
            }
            .form-row {
                display: flex;
                gap: 15px;
                align-items: flex-end;
                flex-wrap: wrap;
            }
            .form-group {
                display: flex;
                flex-direction: column;
                gap: 6px;
            }
            .form-group.grow {
                flex: 1;
                min-width: 300px;
            }
            .form-group label {
                color: #888;
                font-size: 13px;
            }
            .form-group input,
            .form-group textarea {
                padding: 10px 12px;
                background-color: #1a1a1a;
                color: #fff;
                border: 1px solid #444;
                border-radius: 4px;
                font-size: 14px;
            }
            .form-group input:focus,
            .form-group textarea:focus {
                outline: none;
                border-color: #1565C0;
            }
            .form-group textarea {
                resize: vertical;
                min-height: 60px;
            }
            .form-group input[type="number"] {
                width: 120px;
            }
            .btn-create {
                padding: 10px 20px;
                background-color: #1565C0;
                color: white;
                border: none;
                border-radius: 4px;
                font-size: 14px;
                cursor: pointer;
                transition: background-color 0.2s;
            }
            .btn-create:hover {
                background-color: #1976D2;
            }
            .form-hint {
                color: #666;
                font-size: 12px;
                margin-top: 4px;
            }

            /* Announcements list */
            .announcements-list {
                display: flex;
                flex-direction: column;
                gap: 15px;
            }
            .announcement-card {
                background-color: #2a2a2a;
                border-radius: 8px;
                padding: 20px;
                border-left: 4px solid #1565C0;
            }
            .announcement-card.inactive {
                border-left-color: #666;
                opacity: 0.7;
            }
            .announcement-card.expired {
                border-left-color: #c62828;
            }
            .announcement-header {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                margin-bottom: 10px;
                gap: 15px;
            }
            .announcement-meta {
                display: flex;
                flex-direction: column;
                gap: 4px;
            }
            .announcement-status {
                display: flex;
                gap: 8px;
                align-items: center;
            }
            .status-badge {
                display: inline-block;
                padding: 3px 8px;
                border-radius: 3px;
                font-size: 11px;
                font-weight: 600;
                text-transform: uppercase;
            }
            .status-active {
                background-color: #2E7D32;
                color: #fff;
            }
            .status-inactive {
                background-color: #666;
                color: #fff;
            }
            .status-expired {
                background-color: #c62828;
                color: #fff;
            }
            .announcement-info {
                color: #888;
                font-size: 12px;
            }
            .days-remaining {
                color: #4CAF50;
                font-weight: 500;
                cursor: help;
                border-bottom: 1px dotted #4CAF50;
            }
            .days-remaining.warning {
                color: #F57C00;
                border-bottom-color: #F57C00;
            }
            .days-remaining.critical {
                color: #c62828;
                border-bottom-color: #c62828;
            }
            .announcement-actions {
                display: flex;
                gap: 10px;
                flex-wrap: wrap;
            }
            .btn-toggle, .btn-delete, .btn-edit {
                padding: 6px 12px;
                border: none;
                border-radius: 4px;
                font-size: 12px;
                cursor: pointer;
                transition: background-color 0.2s;
            }
            .btn-edit {
                background-color: #1565C0;
                color: white;
            }
            .btn-edit:hover {
                background-color: #1976D2;
            }
            .btn-toggle {
                background-color: #F57C00;
                color: white;
            }
            .btn-toggle:hover {
                background-color: #FF9800;
            }
            .btn-toggle.activate {
                background-color: #2E7D32;
            }
            .btn-toggle.activate:hover {
                background-color: #388E3C;
            }
            .btn-delete {
                background-color: #c62828;
                color: white;
            }
            .btn-delete:hover {
                background-color: #d32f2f;
            }
            .announcement-message {
                color: #fff;
                font-size: 15px;
                line-height: 1.5;
                word-break: break-word;
            }
            .announcement-footer {
                margin-top: 12px;
                padding-top: 12px;
                border-top: 1px solid #333;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                gap: 10px;
            }
            .announcement-footer span {
                color: #888;
                font-size: 12px;
            }

            /* Empty state */
            .empty-state {
                text-align: center;
                padding: 60px 20px;
                color: #888;
                background-color: #2a2a2a;
                border-radius: 8px;
            }
            .empty-state h2 {
                color: #666;
                margin-bottom: 10px;
            }

            /* Edit modal */
            .modal-overlay {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.7);
                z-index: 1000;
                justify-content: center;
                align-items: center;
            }
            .modal-overlay.active {
                display: flex;
            }
            .modal {
                background-color: #2a2a2a;
                border-radius: 8px;
                padding: 25px;
                min-width: 350px;
                max-width: 90%;
            }
            .modal h3 {
                margin: 0 0 20px 0;
                color: #fff;
            }
            .modal .form-group {
                margin-bottom: 15px;
            }
            .modal-actions {
                display: flex;
                gap: 10px;
                justify-content: flex-end;
                margin-top: 20px;
            }
            .btn-cancel {
                padding: 8px 16px;
                background-color: #444;
                color: #fff;
                border: none;
                border-radius: 4px;
                font-size: 13px;
                cursor: pointer;
            }
            .btn-cancel:hover {
                background-color: #555;
            }
            .btn-save {
                padding: 8px 16px;
                background-color: #1565C0;
                color: #fff;
                border: none;
                border-radius: 4px;
                font-size: 13px;
                cursor: pointer;
            }
            .btn-save:hover {
                background-color: #1976D2;
            }

            footer {
                margin-top: 50px;
                padding-top: 20px;
                border-top: 1px solid #333;
                text-align: center;
                color: #666;
                font-size: 12px;
            }
        </style>
        <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}">
    <link rel="icon" type="image/png" href="{{ url_for('static', filename='favicon.png') }}">

</head>
    <body>
        <div class="header">
            <div class="header-left">
                <a href="/" class="back-link" style="display: inline-flex; align-items: center; gap: 5px;"><img src="{{ url_for('static', filename='logo_transparent.png') }}" alt="RTube" height="30"></a>
                <h1>Announcements</h1>
            </div>
        </div>

        <nav class="admin-nav">
            <a href="{{ url_for('admin.analytics') }}">Analytics</a>
            <a href="{{ url_for('admin.users') }}">Users</a>
            <a href="{{ url_for('admin.videos') }}">Videos</a>
            <a href="{{ url_for('admin.import_videos') }}">Import Videos</a>
            <a href="{{ url_for('admin.regenerate_previews') }}">Regenerate Previews</a>
            <a href="{{ url_for('admin.announcements') }}" class="active">Announcements</a>
            <a href="{{ url_for('admin.audit_log') }}">Audit Log</a>
        </nav>

        {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
        <div class="flash-messages">
            {% for category, message in messages %}
            <div class="flash-message flash-{{ category }}">{{ message }}</div>
            {% endfor %}
        </div>
        {% endif %}
        {% endwith %}

        <!-- Create new announcement -->
        <div class="create-section">
            <h2>Create New Announcement</h2>
            <form method="post" action="{{ url_for('admin.create_announcement') }}">
                <div class="form-row">
                    <div class="form-group grow">
                        <label for="message">Message</label>
                        <textarea name="message" id="message" placeholder="Enter your announcement message..." required></textarea>
                    </div>
                    <div class="form-group">
                        <label for="duration_days">Duration (days)</label>
                        <input type="number" name="duration_days" id="duration_days" min="1" placeholder="Optional">
                        <span class="form-hint">Leave empty for no expiration</span>
                    </div>
                    <button type="submit" class="btn-create">Create Announcement</button>
                </div>
            </form>
        </div>

        <!-- Announcements list -->
        {% if announcements %}
        <div class="announcements-list">
            {% for announcement in announcements %}
            <div class="announcement-card {{ 'inactive' if not announcement.is_active else '' }} {{ 'expired' if announcement.is_expired() else '' }}">
                <div class="announcement-header">
                    <div class="announcement-meta">
                        <div class="announcement-status">
                            {% if announcement.is_expired() %}
                            <span class="status-badge status-expired">Expired</span>
                            {% elif announcement.is_active %}
                            <span class="status-badge status-active">Active</span>
                            {% else %}
                            <span class="status-badge status-inactive">Inactive</span>
                            {% endif %}
                            {% if announcement.expires_at and not announcement.is_expired() %}
                            <span class="announcement-info">
                                {% set days = announcement.days_remaining() %}
                                {% if days == 0 %}
                                <span class="days-remaining critical" title="{{ announcement.expires_at.strftime('%d/%m/%Y %H:%M') }}">Expires today</span>
                                {% elif days == 1 %}
                                <span class="days-remaining critical" title="{{ announcement.expires_at.strftime('%d/%m/%Y %H:%M') }}">1 day left</span>
                                {% elif days <= 3 %}
                                <span class="days-remaining warning" title="{{ announcement.expires_at.strftime('%d/%m/%Y %H:%M') }}">{{ days }} days left</span>
                                {% else %}
                                <span class="days-remaining" title="{{ announcement.expires_at.strftime('%d/%m/%Y %H:%M') }}">{{ days }} days left</span>
                                {% endif %}
                            </span>
                            {% elif not announcement.expires_at %}
                            <span class="announcement-info">No expiration</span>
                            {% endif %}
                        </div>
                    </div>
                    <div class="announcement-actions">
                        <button type="button" class="btn-edit" onclick="openEditModal({{ announcement.id }}, {{ announcement.days_remaining() if announcement.expires_at else 'null' }})">Edit</button>
                        <form method="post" action="{{ url_for('admin.toggle_announcement', announcement_id=announcement.id) }}" style="display: inline;">
                            <button type="submit" class="btn-toggle {{ 'activate' if not announcement.is_active else '' }}">
                                {{ 'Activate' if not announcement.is_active else 'Deactivate' }}
                            </button>
                        </form>
                        <form method="post" action="{{ url_for('admin.delete_announcement', announcement_id=announcement.id) }}" style="display: inline;" onsubmit="return confirm('Are you sure you want to delete this announcement?');">
                            <button type="submit" class="btn-delete">Delete</button>
                        </form>
                    </div>
                </div>
                <div class="announcement-message">{{ announcement.message }}</div>
                <div class="announcement-footer">
                    <span>Created by {{ announcement.created_by }} on {{ announcement.created_at.strftime('%Y-%m-%d %H:%M') }}</span>
                    {% if announcement.expires_at %}
                    <span>Expires: {{ announcement.expires_at.strftime('%Y-%m-%d %H:%M') }}</span>
                    {% endif %}
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="empty-state">
            <h2>No announcements</h2>
            <p>Create an announcement above to display a banner to all users.</p>
        </div>
        {% endif %}

        <footer>RTube v{{ rtube_version }}</footer>

        <!-- Edit Duration Modal -->
        <div class="modal-overlay" id="edit-modal">
            <div class="modal">
                <h3>Edit Duration</h3>
                <form method="post" id="edit-duration-form">
                    <div class="form-group">
                        <label for="edit-duration-days">Duration (days from now)</label>
                        <input type="number" name="duration_days" id="edit-duration-days" min="0" placeholder="Leave empty or 0 for no expiration">
                        <span class="form-hint">Enter 0 or leave empty to remove expiration</span>
                    </div>
                    <div class="modal-actions">
                        <button type="button" class="btn-cancel" onclick="closeEditModal()">Cancel</button>
                        <button type="submit" class="btn-save">Save</button>
                    </div>
                </form>
            </div>
        </div>

        <script>
            function openEditModal(announcementId, currentDays) {
                var modal = document.getElementById('edit-modal');
                var form = document.getElementById('edit-duration-form');
                var input = document.getElementById('edit-duration-days');

                form.action = '/admin/announcements/' + announcementId + '/edit-duration';
                input.value = currentDays !== null ? currentDays : '';

                modal.classList.add('active');
                input.focus();
            }

            function closeEditModal() {
                var modal = document.getElementById('edit-modal');
                modal.classList.remove('active');
            }

            // Close modal on escape key or click outside
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape') {
                    closeEditModal();
                }
            });

            document.getElementById('edit-modal').addEventListener('click', function(e) {
                if (e.target === this) {
                    closeEditModal();
                }
            });
        </script>
    </body>
</html>
