{% extends "base.html" %}
{% from "components/help_macros.html" import tooltip, help_panel, help_step, help_tip %}
{% set active_page = 'subscriptions' %}

{% block title %}Manage News Subscriptions - LDR{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="/static/css/subscriptions.css">
<style>
    /* Theme-aware modal and form styles */
    .modal-content {
        background-color: var(--bg-secondary);
        color: var(--text-primary);
    }
    .ldr-form-control, .form-select {
        background-color: var(--bg-tertiary);
        border-color: var(--border-color);
        color: var(--text-primary);
    }
    .ldr-form-control:focus, .form-select:focus {
        background-color: var(--bg-tertiary);
        border-color: var(--accent-primary);
        color: var(--text-primary);
        box-shadow: 0 0 0 0.2rem rgba(var(--accent-primary-rgb), 0.25);
    }
    .btn-secondary {
        background-color: var(--bg-tertiary);
        border-color: var(--border-color);
    }
    .btn-secondary:hover {
        background-color: var(--border-color);
        border-color: var(--border-color);
    }
    .alert {
        background-color: var(--bg-tertiary);
        border-color: var(--border-color);
        color: var(--text-primary);
    }
</style>
{% endblock %}

{% block content %}
<div class="ldr-subscriptions-page">
    <!-- Header Section -->
    <div class="ldr-page-header">
        <div class="ldr-header-content">
            <h1><i aria-hidden="true" class="bi bi-bell"></i> News Subscriptions</h1>
            <p class="ldr-subtitle">Manage your news topics and scheduled searches</p>
        </div>
        <div class="ldr-header-actions">
            <a href="/news" class="btn btn-outline-secondary">
                <i aria-hidden="true" class="bi bi-arrow-left"></i> Back to News Feed
            </a>
            <button id="create-subscription-btn" class="btn btn-primary">
                <i aria-hidden="true" class="bi bi-plus-circle"></i> Create Subscription
            </button>
        </div>
    </div>

    <!-- Understanding Subscriptions Help Panel -->
    {% call help_panel('subs-how', 'Understanding News Subscriptions', icon='bell', collapsed=true, dismissible=true) %}
    <div class="ldr-help-steps">
        {{ help_step(1, "Create Topics", "Define research topics you want to track. The system searches for new content automatically.") }}
        {{ help_step(2, "Set Schedule", "Choose update frequency: hourly, daily, or weekly. Adjust based on topic volatility.") }}
        {{ help_step(3, "Get Updates", "New results appear in your news feed with priority indicators and impact scores.") }}
        {{ help_step(4, "Pause/Resume", "Temporarily pause subscriptions without losing settings. Resume anytime.") }}
    </div>
    {{ help_tip("<strong>Tip:</strong> Start with daily updates. Switch to hourly only for fast-moving topics to avoid API overuse.") }}
    {% endcall %}

    <!-- Stats Overview -->
    <div class="ldr-stats-overview">
        <div class="ldr-stat-card">
            <div class="ldr-stat-value" id="total-subscriptions">0</div>
            <div class="ldr-stat-label">Total Subscriptions</div>
        </div>
        <div class="ldr-stat-card">
            <div class="ldr-stat-value" id="active-subscriptions">0</div>
            <div class="ldr-stat-label">Active</div>
        </div>
        <div class="ldr-stat-card">
            <div class="ldr-stat-value" id="paused-subscriptions">0</div>
            <div class="ldr-stat-label">Paused</div>
        </div>
        <div class="ldr-stat-card">
            <div class="ldr-stat-value" id="updates-today">0</div>
            <div class="ldr-stat-label">Updates Today</div>
        </div>
    </div>

    <!-- Scheduler Status Bar -->
    <div class="ldr-scheduler-status-bar">
        <div class="ldr-scheduler-info">
            <i aria-hidden="true" class="bi bi-clock-history"></i>
            <span class="ldr-scheduler-label">Auto-Refresh Scheduler:</span>
            <span id="scheduler-status" class="ldr-scheduler-status">
                <span class="ldr-status-indicator" id="status-indicator"></span>
                <span id="status-text">Checking...</span>
            </span>
            <span class="ldr-scheduler-details" id="scheduler-details"></span>
        </div>
    </div>

    <!-- Subscriptions List -->
    <div class="ldr-subscriptions-container">
        <!-- Folder/Category Sidebar -->
        <div class="ldr-folders-sidebar">
            <h3>Folders</h3>
            <div class="ldr-folder-list">
                <div class="ldr-folder-item active" data-folder="all">
                    <i aria-hidden="true" class="bi bi-collection"></i> All Subscriptions
                    <span class="ldr-folder-count">0</span>
                </div>
                <div class="ldr-folder-item" data-folder="uncategorized">
                    <i aria-hidden="true" class="bi bi-folder"></i> Uncategorized
                    <span class="ldr-folder-count">0</span>
                </div>
                <!-- Dynamic folders will be added here -->
            </div>
            <button class="btn btn-sm btn-outline-secondary mt-3" id="add-folder-btn">
                <i aria-hidden="true" class="bi bi-plus"></i> New Folder
            </button>
        </div>

        <!-- Main Content Area -->
        <div class="ldr-subscriptions-main">
            <!-- Search and Filter Bar -->
            <div class="ldr-filter-bar">
                <div class="ldr-search-box">
                    <i aria-hidden="true" class="bi bi-search"></i>
                    <input type="text" id="subscription-search" placeholder="Search subscriptions...">
                </div>
                <div class="ldr-filter-options">
                    <select id="status-filter" class="form-select ldr-form-select-sm">
                        <option value="all">All Status</option>
                        <option value="active">Active</option>
                        <option value="paused">Paused</option>
                    </select>
                    <select id="frequency-filter" class="form-select ldr-form-select-sm">
                        <option value="all">All Frequencies</option>
                        <option value="hourly">Hourly</option>
                        <option value="daily">Daily</option>
                        <option value="weekly">Weekly</option>
                    </select>
                </div>
            </div>

            <!-- Subscriptions Grid -->
            <div id="subscriptions-grid" class="ldr-subscriptions-grid">
                <!-- Subscription cards will be dynamically loaded here -->
                <div class="ldr-loading-placeholder">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p>Loading subscriptions...</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modals removed - using dedicated form pages instead -->

{% endblock %}

{% block page_scripts %}
<script defer src="/static/js/pages/subscriptions.js"></script>
{% endblock %}