{% extends "base.html" %}

{% block title %}ZOP Kaszubia - Panel Admina - Norda Biznes Hub{% endblock %}

{% block extra_css %}
<style>
    .admin-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--spacing-xl);
    }

    .admin-header h1 {
        font-size: var(--font-size-2xl);
        color: var(--text-primary);
    }

    .admin-actions {
        display: flex;
        gap: var(--spacing-sm);
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: var(--spacing-lg);
        margin-bottom: var(--spacing-xl);
    }

    .stat-card {
        background: var(--surface);
        padding: var(--spacing-lg);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow);
        cursor: pointer;
        transition: var(--transition);
        border: 2px solid transparent;
        text-decoration: none;
        display: block;
        color: inherit;
    }

    .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }

    .stat-card.info-only {
        cursor: default;
        opacity: 0.85;
    }

    .stat-card.info-only:hover {
        transform: none;
        box-shadow: var(--shadow);
    }

    .stat-card.active {
        border-color: var(--primary);
        background: var(--primary-light, #f0fdf4);
    }

    .stat-value {
        font-size: var(--font-size-3xl);
        font-weight: 700;
        color: var(--primary);
    }

    .stat-label {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
    }

    .stat-card.warning .stat-value {
        color: var(--warning);
    }

    .stat-card.success .stat-value {
        color: var(--success);
    }

    .stat-card.danger .stat-value {
        color: var(--danger);
    }

    /* Stats sections (two-row layout) */
    .stats-section {
        margin-bottom: var(--spacing-lg);
    }

    .stats-section-title {
        font-size: var(--font-size-sm);
        font-weight: 600;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: var(--spacing-md);
    }

    .stats-section-title small {
        font-weight: 400;
        text-transform: none;
        letter-spacing: normal;
        opacity: 0.8;
    }

    .stats-grid-small {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-md);
        max-width: 600px;
    }

    .filter-card {
        cursor: pointer;
    }

    .filter-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }

    /* AI Action button */
    .stat-card.ai-action {
        background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
        color: white;
        border: none;
        font-family: inherit;
    }

    .stat-card.ai-action .stat-value {
        color: white;
    }

    .stat-card.ai-action .stat-label {
        color: rgba(255,255,255,0.9);
    }

    .stat-card.ai-action:hover {
        background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    }

    .stat-card.ai-action:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
    }

    .stat-card.ai-action:disabled:hover {
        box-shadow: var(--shadow);
    }

    /* AI evaluation result */
    .ai-result {
        background: #f3e8ff;
        border: 1px solid #c4b5fd;
        color: #6b21a8;
        padding: var(--spacing-sm) var(--spacing-md);
        border-radius: var(--radius);
        font-size: var(--font-size-sm);
    }

    .ai-result.success {
        background: #dcfce7;
        border-color: #86efac;
        color: #166534;
    }

    .ai-result.error {
        background: #fee2e2;
        border-color: #fca5a5;
        color: #991b1b;
    }

    /* AI badge in news list */
    .ai-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 2px 8px;
        border-radius: var(--radius-sm);
        font-size: var(--font-size-xs);
        font-weight: 500;
    }

    .ai-badge.relevant {
        background: #dcfce7;
        color: #166534;
    }

    .ai-badge.not-relevant {
        background: #fee2e2;
        color: #991b1b;
    }

    /* Star rating display */
    .ai-stars {
        display: inline-flex;
        gap: 1px;
        font-size: 11px;
        letter-spacing: -1px;
    }

    .ai-stars .star-filled { color: #f59e0b; }
    .ai-stars .star-empty { color: #d1d5db; }

    .ai-badge.score-5 { background: #dcfce7; color: #166534; }
    .ai-badge.score-4 { background: #d1fae5; color: #047857; }
    .ai-badge.score-3 { background: #fef3c7; color: #92400e; }
    .ai-badge.score-2 { background: #fee2e2; color: #b91c1c; }
    .ai-badge.score-1 { background: #fecaca; color: #991b1b; }

    /* AI Evaluation Modal */
    .modal-icon {
        font-size: 48px;
        text-align: center;
        margin-bottom: var(--spacing-md);
    }

    .modal-icon.spinning {
        animation: spin 2s linear infinite;
    }

    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    .modal-description {
        text-align: center;
        color: var(--text-primary);
        margin-bottom: var(--spacing-sm);
    }

    .modal-note {
        text-align: center;
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        margin-bottom: var(--spacing-lg);
    }

    .ai-progress-bar {
        width: 100%;
        height: 8px;
        background: var(--border);
        border-radius: 4px;
        overflow: hidden;
        margin-bottom: var(--spacing-md);
    }

    .ai-progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #8b5cf6, #7c3aed);
        border-radius: 4px;
        transition: width 0.5s ease;
        width: 0%;
    }

    .ai-result-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-md);
        margin-bottom: var(--spacing-lg);
    }

    .ai-stat-item {
        text-align: center;
        padding: var(--spacing-md);
        background: var(--background);
        border-radius: var(--radius);
    }

    .ai-stat-item .value {
        font-size: var(--font-size-2xl);
        font-weight: 700;
    }

    .ai-stat-item .label {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
    }

    .ai-stat-item.success .value { color: var(--success); }
    .ai-stat-item.danger .value { color: var(--danger); }
    .ai-stat-item.warning .value { color: var(--warning); }

    #aiResultIcon.success { color: var(--success); }
    #aiResultIcon.error { color: var(--danger); }

    /* Filters bar */
    .filters-bar {
        display: flex;
        gap: var(--spacing-md);
        margin-bottom: var(--spacing-lg);
        flex-wrap: wrap;
        align-items: center;
    }

    .filter-group {
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
    }

    .filter-group label {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
    }

    .filter-checkbox {
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
        padding: var(--spacing-xs) var(--spacing-sm);
        background: var(--background);
        border-radius: var(--radius);
        cursor: pointer;
        font-size: var(--font-size-sm);
    }

    .filter-checkbox input {
        margin: 0;
    }

    .old-news-warning {
        background: #fef3c7;
        color: #92400e;
        padding: var(--spacing-sm) var(--spacing-md);
        border-radius: var(--radius);
        font-size: var(--font-size-sm);
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
    }

    /* Pagination */
    .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--spacing-sm);
        margin-top: var(--spacing-lg);
        padding-top: var(--spacing-lg);
        border-top: 1px solid var(--border);
    }

    .pagination a,
    .pagination span {
        padding: var(--spacing-xs) var(--spacing-sm);
        border-radius: var(--radius);
        font-size: var(--font-size-sm);
        text-decoration: none;
        color: var(--text-primary);
    }

    .pagination a {
        background: var(--background);
        border: 1px solid var(--border);
    }

    .pagination a:hover {
        background: var(--border);
    }

    .pagination .current {
        background: var(--primary);
        color: white;
        font-weight: 600;
    }

    .pagination .disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .pagination-info {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
    }

    /* Old news badge */
    .old-news-badge {
        background: #fef3c7;
        color: #92400e;
        padding: 2px 6px;
        border-radius: var(--radius-sm);
        font-size: var(--font-size-xs);
        font-weight: 500;
    }

    .panel-section {
        background: var(--surface);
        border-radius: var(--radius-lg);
        padding: var(--spacing-lg);
        box-shadow: var(--shadow);
        margin-bottom: var(--spacing-xl);
    }

    .panel-section h2 {
        font-size: var(--font-size-lg);
        margin-bottom: var(--spacing-lg);
        padding-bottom: var(--spacing-md);
        border-bottom: 1px solid var(--border);
    }

    .pending-news-list {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .pending-news-item {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: var(--spacing-md);
        background: var(--background);
        border-radius: var(--radius);
        gap: var(--spacing-md);
    }

    .news-info {
        flex: 1;
        min-width: 0;
    }

    .news-info h4 {
        font-size: var(--font-size-base);
        margin-bottom: var(--spacing-xs);
        word-break: break-word;
    }

    .news-info h4 a {
        color: inherit;
        text-decoration: none;
    }

    .news-info h4 a:hover {
        color: var(--primary);
    }

    .news-meta {
        font-size: var(--font-size-xs);
        color: var(--text-secondary);
        display: flex;
        gap: var(--spacing-md);
    }

    .news-actions {
        display: flex;
        gap: var(--spacing-xs);
        flex-shrink: 0;
    }

    .btn-approve {
        background: var(--success);
        color: white;
    }

    .btn-approve:hover {
        background: #059669;
    }

    .btn-reject {
        background: var(--danger);
        color: white;
    }

    .btn-reject:hover {
        background: #dc2626;
    }

    .projects-table {
        width: 100%;
        border-collapse: collapse;
    }

    .projects-table th,
    .projects-table td {
        padding: var(--spacing-sm) var(--spacing-md);
        text-align: left;
        border-bottom: 1px solid var(--border);
    }

    .projects-table th {
        font-weight: 600;
        color: var(--text-secondary);
        font-size: var(--font-size-sm);
    }

    .status-badge {
        display: inline-block;
        padding: 2px 8px;
        border-radius: var(--radius-sm);
        font-size: var(--font-size-xs);
        font-weight: 500;
    }

    .status-planned { background: #fef3c7; color: #92400e; }
    .status-in_progress { background: #dbeafe; color: #1e40af; }
    .status-completed { background: #dcfce7; color: #166534; }

    .search-section {
        background: linear-gradient(135deg, #059669 0%, #047857 100%);
        color: white;
        padding: var(--spacing-lg);
        border-radius: var(--radius-lg);
        margin-bottom: var(--spacing-xl);
    }

    .search-section h3 {
        margin-bottom: var(--spacing-md);
    }

    .search-form {
        display: flex;
        gap: var(--spacing-sm);
    }

    .search-form input {
        flex: 1;
        padding: var(--spacing-sm) var(--spacing-md);
        border: none;
        border-radius: var(--radius);
        font-size: var(--font-size-base);
    }

    .search-form button {
        padding: var(--spacing-sm) var(--spacing-lg);
        background: white;
        color: var(--primary);
        border: none;
        border-radius: var(--radius);
        font-weight: 600;
        cursor: pointer;
        transition: var(--transition);
    }

    .search-form button:hover {
        background: #f0fdf4;
    }

    .search-form button:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .fetch-jobs-list {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .fetch-job {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--spacing-sm) var(--spacing-md);
        background: var(--background);
        border-radius: var(--radius-sm);
        font-size: var(--font-size-sm);
    }

    .fetch-job-status {
        padding: 2px 6px;
        border-radius: var(--radius-sm);
        font-size: var(--font-size-xs);
    }

    .fetch-job-status.completed { background: #dcfce7; color: #166534; }
    .fetch-job-status.failed { background: #fee2e2; color: #991b1b; }
    .fetch-job-status.running { background: #dbeafe; color: #1e40af; }

    /* Progress bar */
    .progress-container {
        display: none;
        margin-top: var(--spacing-lg);
        background: rgba(255,255,255,0.1);
        border-radius: var(--radius);
        padding: var(--spacing-md);
    }

    .progress-container.active {
        display: block;
    }

    .progress-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: var(--spacing-sm);
        font-size: var(--font-size-sm);
    }

    .progress-bar-container {
        height: 8px;
        background: rgba(255,255,255,0.2);
        border-radius: 4px;
        overflow: hidden;
        margin-bottom: var(--spacing-md);
    }

    .progress-bar-fill {
        height: 100%;
        background: white;
        border-radius: 4px;
        transition: width 0.3s ease;
        width: 0%;
    }

    .progress-steps {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
        font-size: var(--font-size-xs);
        max-height: 200px;
        overflow-y: auto;
    }

    .progress-step {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        opacity: 0.6;
    }

    .progress-step.active {
        opacity: 1;
        font-weight: 600;
    }

    .progress-step.completed {
        opacity: 1;
    }

    .progress-step-icon {
        width: 16px;
        height: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .progress-step.active .progress-step-icon::before {
        content: "⏳";
    }

    .progress-step.completed .progress-step-icon::before {
        content: "✓";
    }

    .progress-step.pending .progress-step-icon::before {
        content: "○";
    }

    .progress-step-count {
        margin-left: auto;
        background: rgba(255,255,255,0.2);
        padding: 2px 6px;
        border-radius: var(--radius-sm);
    }

    /* Source stats */
    .source-stats {
        display: none;
        margin-top: var(--spacing-md);
        padding: var(--spacing-md);
        background: rgba(255,255,255,0.1);
        border-radius: var(--radius);
    }

    .source-stats.active {
        display: block;
    }

    .source-stats h4 {
        margin-bottom: var(--spacing-sm);
        font-size: var(--font-size-sm);
    }

    .source-stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: var(--spacing-sm);
    }

    .source-stat-item {
        display: flex;
        justify-content: space-between;
        padding: var(--spacing-xs) var(--spacing-sm);
        background: rgba(255,255,255,0.1);
        border-radius: var(--radius-sm);
        font-size: var(--font-size-xs);
    }

    .source-stat-item .count {
        font-weight: 700;
    }

    /* News source badges */
    .source-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 2px 8px;
        border-radius: var(--radius-sm);
        font-size: var(--font-size-xs);
        font-weight: 500;
    }

    .source-badge.brave { background: #fff3cd; color: #856404; }
    .source-badge.rss_local_media { background: #d1ecf1; color: #0c5460; }
    .source-badge.rss_government { background: #d4edda; color: #155724; }
    .source-badge.rss_aggregator { background: #e2e3e5; color: #383d41; }
    .source-badge.manual { background: #f8d7da; color: #721c24; }

    .confidence-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 2px 8px;
        border-radius: var(--radius-sm);
        font-size: var(--font-size-xs);
        font-weight: 500;
    }

    .confidence-badge.high { background: #d4edda; color: #155724; }
    .confidence-badge.medium { background: #fff3cd; color: #856404; }
    .confidence-badge.low { background: #f8d7da; color: #721c24; }

    .empty-state {
        text-align: center;
        padding: var(--spacing-xl);
        color: var(--text-secondary);
    }

    /* Modal */
    .modal-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 1000;
        align-items: center;
        justify-content: center;
    }

    .modal-overlay.active {
        display: flex;
    }

    .modal {
        background: var(--surface);
        border-radius: var(--radius-lg);
        padding: var(--spacing-xl);
        max-width: 500px;
        width: 90%;
        max-height: 90vh;
        overflow-y: auto;
    }

    .modal h3 {
        margin-bottom: var(--spacing-lg);
    }

    .form-group {
        margin-bottom: var(--spacing-md);
    }

    .form-group label {
        display: block;
        margin-bottom: var(--spacing-xs);
        font-weight: 500;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
        width: 100%;
        padding: var(--spacing-sm);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        font-size: var(--font-size-base);
    }

    .form-group textarea {
        min-height: 80px;
        resize: vertical;
    }

    .modal-actions {
        display: flex;
        justify-content: flex-end;
        gap: var(--spacing-sm);
        margin-top: var(--spacing-lg);
    }

    @media (max-width: 768px) {
        .admin-header {
            flex-direction: column;
            align-items: flex-start;
            gap: var(--spacing-md);
        }

        .pending-news-item {
            flex-direction: column;
        }

        .news-actions {
            width: 100%;
            justify-content: flex-end;
        }

        .search-form {
            flex-direction: column;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="admin-header">
    <div>
        <h1>Zielony Okręg Przemysłowy Kaszubia</h1>
        <p class="text-muted">Panel zarządzania bazą wiedzy</p>
    </div>
    <div class="admin-actions">
        <a href="{{ url_for('zopk_index') }}" class="btn btn-secondary" target="_blank">Zobacz stronę publiczną</a>
        <a href="{{ url_for('admin_zopk_news') }}" class="btn btn-secondary">Zarządzaj newsami</a>
        <button class="btn btn-primary" onclick="openAddNewsModal()">+ Dodaj news</button>
    </div>
</div>

<!-- Section 1: General stats (info only, not clickable) -->
<div class="stats-section">
    <h3 class="stats-section-title">Baza wiedzy ZOP Kaszubia</h3>
    <div class="stats-grid stats-grid-small">
        <div class="stat-card info-only">
            <div class="stat-value">{{ stats.total_projects }}</div>
            <div class="stat-label">Projektów</div>
        </div>
        <div class="stat-card info-only">
            <div class="stat-value">{{ stats.total_stakeholders }}</div>
            <div class="stat-label">Interesariuszy</div>
        </div>
        <div class="stat-card info-only">
            <div class="stat-value">{{ stats.total_resources }}</div>
            <div class="stat-label">Materiałów</div>
        </div>
    </div>
</div>

<!-- Section 2: News filters (clickable) -->
<div class="stats-section">
    <h3 class="stats-section-title">Filtruj newsy <small>(kliknij aby wybrać)</small></h3>
    <div class="stats-grid stats-grid-small">
        <a href="?status=pending" class="stat-card filter-card warning {{ 'active' if status_filter == 'pending' else '' }}">
            <div class="stat-value">{{ stats.pending_news }}</div>
            <div class="stat-label">Oczekujących</div>
        </a>
        <a href="?status=approved" class="stat-card filter-card success {{ 'active' if status_filter == 'approved' else '' }}">
            <div class="stat-value">{{ stats.approved_news }}</div>
            <div class="stat-label">Zatwierdzonych</div>
        </a>
        <a href="?status=rejected" class="stat-card filter-card danger {{ 'active' if status_filter == 'rejected' else '' }}">
            <div class="stat-value">{{ stats.rejected_news }}</div>
            <div class="stat-label">Odrzuconych</div>
        </a>
    </div>
</div>

<!-- Section 3: AI Evaluation filters -->
<div class="stats-section">
    <h3 class="stats-section-title">Ocena AI (Gemini) <small>(kliknij aby wybrać)</small></h3>
    <div class="stats-grid" style="grid-template-columns: repeat(4, 1fr); max-width: 800px;">
        <a href="?status=ai_relevant" class="stat-card filter-card success {{ 'active' if status_filter == 'ai_relevant' else '' }}">
            <div class="stat-value">{{ stats.ai_relevant }}</div>
            <div class="stat-label">Pasuje wg AI</div>
        </a>
        <a href="?status=ai_not_relevant" class="stat-card filter-card danger {{ 'active' if status_filter == 'ai_not_relevant' else '' }}">
            <div class="stat-value">{{ stats.ai_not_relevant }}</div>
            <div class="stat-label">Nie pasuje wg AI</div>
        </a>
        <a href="?status=ai_not_evaluated" class="stat-card filter-card warning {{ 'active' if status_filter == 'ai_not_evaluated' else '' }}">
            <div class="stat-value">{{ stats.ai_not_evaluated }}</div>
            <div class="stat-label">Nieocenione</div>
        </a>
        <button type="button" class="stat-card filter-card ai-action" onclick="evaluateWithAI()" id="aiEvalBtn" {% if stats.ai_not_evaluated == 0 %}disabled{% endif %} title="Gemini AI oceni {{ stats.ai_not_evaluated }} nieocenionych newsów">
            <div class="stat-value" style="font-size: var(--font-size-xl);">🤖</div>
            <div class="stat-label">AI: Oceń {{ stats.ai_not_evaluated }}</div>
        </button>
    </div>

    {% if stats.ai_missing_score > 0 %}
    <div class="stats-grid" style="grid-template-columns: repeat(2, 1fr); max-width: 400px; margin-top: var(--spacing-md);">
        <div class="stat-card warning info-only">
            <div class="stat-value">{{ stats.ai_missing_score }}</div>
            <div class="stat-label">Brak gwiazdek</div>
        </div>
        <button type="button" class="stat-card filter-card ai-action" onclick="reevaluateScores()" id="aiRescoreBtn" title="Gemini AI przeoceni {{ stats.ai_missing_score }} newsów i doda oceny 1-5 gwiazdek">
            <div class="stat-value" style="font-size: var(--font-size-xl);">🤖⭐</div>
            <div class="stat-label">AI: Dodaj gwiazdki</div>
        </button>
    </div>
    {% endif %}

    <div id="aiEvalResult" style="margin-top: var(--spacing-md); display: none;"></div>
</div>

<!-- Old news warning -->
{% if stats.old_news > 0 and not show_old %}
<div class="old-news-warning">
    <span>⚠️</span>
    <span><strong>{{ stats.old_news }} newsów</strong> z przed 2024 roku zostało ukrytych (ZOP Kaszubia powstał w 2024).
    <a href="?status={{ status_filter }}&show_old=true">Pokaż wszystkie</a> lub
    <a href="#" onclick="rejectOldNews(); return false;">odrzuć wszystkie stare</a>.</span>
</div>
{% endif %}

<!-- Search Section -->
<div class="search-section">
    <h3>Wyszukaj nowe artykuły</h3>
    <p style="opacity: 0.9; margin-bottom: var(--spacing-md); font-size: var(--font-size-sm);">Multi-source search: Brave API, RSS (trojmiasto.pl, Dziennik Bałtycki), Google News, gov.pl</p>
    <div class="search-form">
        <input type="text" id="searchQuery" value="Zielony Okręg Przemysłowy Kaszubia" placeholder="Wpisz zapytanie...">
        <button type="button" onclick="searchNews()" id="searchBtn">Szukaj artykułów</button>
    </div>

    <!-- Progress Container -->
    <div class="progress-container" id="progressContainer">
        <div class="progress-header">
            <span id="progressStatus">Inicjalizacja...</span>
            <span id="progressPercent">0%</span>
        </div>
        <div class="progress-bar-container">
            <div class="progress-bar-fill" id="progressBar"></div>
        </div>
        <div class="progress-steps" id="progressSteps"></div>
    </div>

    <!-- Source Stats (shown after completion) -->
    <div class="source-stats" id="sourceStats">
        <h4>Statystyki źródeł</h4>
        <div class="source-stats-grid" id="sourceStatsGrid"></div>
    </div>

    <div id="searchResult" style="margin-top: var(--spacing-md); display: none;"></div>
</div>

<!-- News List -->
<div class="panel-section">
    <h2>
        {% if status_filter == 'pending' %}Newsy oczekujące na moderację
        {% elif status_filter == 'approved' %}Newsy zatwierdzone
        {% elif status_filter == 'rejected' %}Newsy odrzucone
        {% elif status_filter == 'ai_relevant' %}🤖 Newsy pasujące wg AI
        {% elif status_filter == 'ai_not_relevant' %}🤖 Newsy NIE pasujące wg AI
        {% else %}Wszystkie newsy{% endif %}
        ({{ total_news_filtered }})
    </h2>

    {% if news_items %}
    <div class="pending-news-list">
        {% for news in news_items %}
        <div class="pending-news-item" id="news-{{ news.id }}">
            <div class="news-info">
                <h4><a href="{{ news.url }}" target="_blank" rel="noopener">{{ news.title }}</a></h4>
                <div class="news-meta">
                    {% if news.source_type %}
                    <span class="source-badge {{ news.source_type|replace(' ', '_') }}">
                        {% if news.source_type == 'brave' %}🔍 Brave
                        {% elif news.source_type == 'rss_local_media' %}📰 Media lokalne
                        {% elif news.source_type == 'rss_government' %}🏛️ Rząd
                        {% elif news.source_type == 'rss_aggregator' %}📡 Agregator
                        {% elif news.source_type == 'manual' %}✏️ Ręcznie
                        {% else %}{{ news.source_type }}{% endif %}
                    </span>
                    {% endif %}
                    <span>{{ news.source_name or news.source_domain or '-' }}</span>
                    {% set news_year = news.published_at.year if news.published_at else None %}
                    <span>{{ news.published_at.strftime('%d.%m.%Y') if news.published_at else (news.created_at.strftime('%d.%m.%Y') if news.created_at else '-') }}</span>
                    {% if news_year and news_year < min_year %}
                    <span class="old-news-badge">⚠️ Sprzed {{ min_year }}</span>
                    {% endif %}
                    {% if news.confidence_score %}
                    <span class="confidence-badge {{ 'high' if news.confidence_score >= 4 else ('medium' if news.confidence_score >= 2 else 'low') }}">
                        {% if news.source_count and news.source_count > 1 %}{{ news.source_count }} źródeł{% else %}1 źródło{% endif %}
                    </span>
                    {% endif %}
                    {% if news.status == 'approved' or news.status == 'auto_approved' %}
                    <span class="confidence-badge high">✓ {{ 'Auto' if news.status == 'auto_approved' else '' }}Zatwierdzony</span>
                    {% elif news.status == 'rejected' %}
                    <span class="confidence-badge low">✗ Odrzucony</span>
                    {% endif %}
                    {# AI Evaluation badge with star rating #}
                    {% if news.ai_relevant is not none %}
                    <span class="ai-badge score-{{ news.ai_relevance_score or 3 }}" title="{{ news.ai_evaluation_reason or '' }}">
                        🤖
                        <span class="ai-stars">
                            {% for i in range(1, 6) %}
                                <span class="{{ 'star-filled' if i <= (news.ai_relevance_score or 0) else 'star-empty' }}">★</span>
                            {% endfor %}
                        </span>
                    </span>
                    {% endif %}
                </div>
            </div>
            <div class="news-actions">
                {% if news.status == 'pending' %}
                <button class="btn btn-sm btn-approve" onclick="approveNews({{ news.id }})">Zatwierdź</button>
                <button class="btn btn-sm btn-reject" onclick="rejectNews({{ news.id }})">Odrzuć</button>
                {% elif news.status == 'rejected' %}
                <button class="btn btn-sm btn-approve" onclick="approveNews({{ news.id }})">Przywróć</button>
                {% endif %}
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- Pagination -->
    {% if total_pages > 1 %}
    <div class="pagination">
        {% if current_page > 1 %}
        <a href="?page={{ current_page - 1 }}&status={{ status_filter }}{% if show_old %}&show_old=true{% endif %}">← Poprzednia</a>
        {% else %}
        <span class="disabled">← Poprzednia</span>
        {% endif %}

        {% for p in range(1, total_pages + 1) %}
            {% if p == current_page %}
            <span class="current">{{ p }}</span>
            {% elif p == 1 or p == total_pages or (p >= current_page - 2 and p <= current_page + 2) %}
            <a href="?page={{ p }}&status={{ status_filter }}{% if show_old %}&show_old=true{% endif %}">{{ p }}</a>
            {% elif p == current_page - 3 or p == current_page + 3 %}
            <span>...</span>
            {% endif %}
        {% endfor %}

        {% if current_page < total_pages %}
        <a href="?page={{ current_page + 1 }}&status={{ status_filter }}{% if show_old %}&show_old=true{% endif %}">Następna →</a>
        {% else %}
        <span class="disabled">Następna →</span>
        {% endif %}

        <span class="pagination-info">
            ({{ (current_page - 1) * per_page + 1 }}-{{ [current_page * per_page, total_news_filtered]|min }} z {{ total_news_filtered }})
        </span>
    </div>
    {% endif %}
    {% else %}
    <div class="empty-state">
        <p>Brak newsów{% if status_filter != 'all' %} o tym statusie{% endif %}.</p>
    </div>
    {% endif %}
</div>

<!-- Projects -->
<div class="panel-section">
    <h2>Projekty strategiczne</h2>

    {% if projects %}
    <table class="projects-table">
        <thead>
            <tr>
                <th>Nazwa</th>
                <th>Typ</th>
                <th>Status</th>
                <th>Region</th>
            </tr>
        </thead>
        <tbody>
            {% for project in projects %}
            <tr>
                <td>
                    <strong>{{ project.name }}</strong>
                    <br><small class="text-muted">{{ project.slug }}</small>
                </td>
                <td>{{ project.project_type or '-' }}</td>
                <td>
                    <span class="status-badge status-{{ project.status }}">
                        {% if project.status == 'planned' %}Planowany{% elif project.status == 'in_progress' %}W realizacji{% else %}{{ project.status }}{% endif %}
                    </span>
                </td>
                <td>{{ project.region or '-' }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
    <div class="empty-state">
        <p>Brak projektów.</p>
    </div>
    {% endif %}
</div>

<!-- Recent Fetch Jobs -->
{% if fetch_jobs %}
<div class="panel-section">
    <h2>Ostatnie wyszukiwania</h2>
    <div class="fetch-jobs-list">
        {% for job in fetch_jobs %}
        <div class="fetch-job">
            <div>
                <strong>{{ job.search_query }}</strong>
                <br><small class="text-muted">{{ job.created_at.strftime('%d.%m.%Y %H:%M') if job.created_at else '-' }}</small>
            </div>
            <div>
                Znaleziono: {{ job.results_found or 0 }} | Nowych: {{ job.results_new or 0 }}
            </div>
            <span class="fetch-job-status {{ job.status }}">{{ job.status }}</span>
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}

<!-- AI Evaluation Modal -->
<div class="modal-overlay" id="aiEvalModal">
    <div class="modal">
        <div id="aiEvalConfirm">
            <div class="modal-icon">🤖</div>
            <h3>Ocena AI (Gemini)</h3>
            <p class="modal-description">Czy chcesz uruchomić ocenę AI dla <strong>max 20</strong> z {{ stats.ai_not_evaluated }} nieocenionych newsów?</p>
            <p class="modal-note">Gemini oceni każdy news pod kątem związku z ZOP Kaszubia.<br>
            <strong>Uwaga:</strong> Proces trwa ok. 30-60 sekund (każdy news = osobne zapytanie do AI).</p>
            <div class="modal-actions">
                <button type="button" class="btn btn-secondary" onclick="closeAiEvalModal()">Anuluj</button>
                <button type="button" class="btn btn-primary" onclick="startAiEvaluation()">
                    <span>🚀</span> Rozpocznij ocenę
                </button>
            </div>
        </div>
        <div id="aiEvalProgress" style="display: none;">
            <div class="modal-icon spinning">⚙️</div>
            <h3>Trwa ocena AI...</h3>
            <p class="modal-description" id="aiEvalStatusText">Analizowanie newsów przez Gemini...</p>
            <div class="ai-progress-bar">
                <div class="ai-progress-fill" id="aiProgressFill"></div>
            </div>
            <p class="modal-note" id="aiEvalCounter">Proszę czekać...</p>
        </div>
        <div id="aiEvalResult" style="display: none;">
            <div class="modal-icon" id="aiResultIcon">✓</div>
            <h3 id="aiResultTitle">Ocena zakończona</h3>
            <div class="ai-result-stats" id="aiResultStats"></div>
            <div class="modal-actions">
                <button type="button" class="btn btn-primary" onclick="closeAiEvalModal(); location.reload();">Zamknij i odśwież</button>
            </div>
        </div>
    </div>
</div>

<!-- Add News Modal -->
<div class="modal-overlay" id="addNewsModal">
    <div class="modal">
        <h3>Dodaj news ręcznie</h3>
        <form id="addNewsForm">
            <div class="form-group">
                <label for="newsTitle">Tytuł *</label>
                <input type="text" id="newsTitle" name="title" required>
            </div>
            <div class="form-group">
                <label for="newsUrl">URL artykułu *</label>
                <input type="url" id="newsUrl" name="url" required placeholder="https://...">
            </div>
            <div class="form-group">
                <label for="newsDescription">Opis</label>
                <textarea id="newsDescription" name="description" placeholder="Krótki opis artykułu..."></textarea>
            </div>
            <div class="form-group">
                <label for="newsSource">Źródło</label>
                <input type="text" id="newsSource" name="source_name" placeholder="np. trojmiasto.pl">
            </div>
            <div class="form-group">
                <label for="newsProject">Projekt</label>
                <select id="newsProject" name="project_id">
                    <option value="">-- Brak --</option>
                    {% for project in projects %}
                    <option value="{{ project.id }}">{{ project.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="modal-actions">
                <button type="button" class="btn btn-secondary" onclick="closeAddNewsModal()">Anuluj</button>
                <button type="submit" class="btn btn-primary">Dodaj</button>
            </div>
        </form>
    </div>
</div>

<!-- Universal Confirm/Alert Modal -->
<div class="modal-overlay" id="confirmModal">
    <div class="modal" style="max-width: 420px;">
        <div style="text-align: center; margin-bottom: var(--spacing-lg);">
            <div class="modal-icon" id="confirmModalIcon">❓</div>
            <h3 id="confirmModalTitle" style="margin-bottom: var(--spacing-sm);">Potwierdzenie</h3>
            <p class="modal-description" id="confirmModalMessage">Czy na pewno chcesz kontynuować?</p>
        </div>
        <!-- Optional input for prompt -->
        <div class="form-group" id="confirmModalInputGroup" style="display: none;">
            <label id="confirmModalInputLabel">Wprowadź wartość:</label>
            <input type="text" id="confirmModalInput" placeholder="">
        </div>
        <div class="modal-actions" style="justify-content: center;">
            <button type="button" class="btn btn-secondary" id="confirmModalCancel">Anuluj</button>
            <button type="button" class="btn btn-primary" id="confirmModalOk">OK</button>
        </div>
    </div>
</div>

<!-- Toast notifications -->
<div id="toastContainer" style="position: fixed; top: 80px; right: 20px; z-index: 1100; display: flex; flex-direction: column; gap: 10px;"></div>

<style>
/* Toast styles */
.toast {
    padding: 12px 20px;
    border-radius: var(--radius);
    background: var(--surface);
    border-left: 4px solid var(--primary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 10px;
    animation: slideIn 0.3s ease;
    max-width: 350px;
}
.toast.success { border-left-color: var(--success); }
.toast.error { border-left-color: var(--error); }
.toast.warning { border-left-color: #f59e0b; }
.toast-icon { font-size: 1.2em; }
.toast-message { flex: 1; }
@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}
</style>
{% endblock %}

{% block extra_js %}
const csrfToken = '{{ csrf_token() }}';

// ===========================================
// Universal Modal System
// ===========================================
let confirmModalResolve = null;

function showConfirm(message, options = {}) {
    return new Promise((resolve) => {
        confirmModalResolve = resolve;
        const modal = document.getElementById('confirmModal');
        const icon = document.getElementById('confirmModalIcon');
        const title = document.getElementById('confirmModalTitle');
        const msg = document.getElementById('confirmModalMessage');
        const cancelBtn = document.getElementById('confirmModalCancel');
        const okBtn = document.getElementById('confirmModalOk');
        const inputGroup = document.getElementById('confirmModalInputGroup');
        const input = document.getElementById('confirmModalInput');

        icon.textContent = options.icon || '❓';
        title.textContent = options.title || 'Potwierdzenie';
        msg.innerHTML = message;
        cancelBtn.textContent = options.cancelText || 'Anuluj';
        okBtn.textContent = options.okText || 'OK';
        okBtn.className = 'btn ' + (options.okClass || 'btn-primary');

        // Show/hide input for prompt mode
        if (options.showInput) {
            inputGroup.style.display = 'block';
            document.getElementById('confirmModalInputLabel').textContent = options.inputLabel || 'Wprowadź wartość:';
            input.value = options.inputValue || '';
            input.placeholder = options.inputPlaceholder || '';
        } else {
            inputGroup.style.display = 'none';
        }

        // Show/hide cancel button for alert mode
        cancelBtn.style.display = options.alertOnly ? 'none' : '';

        modal.classList.add('active');

        if (options.showInput) {
            setTimeout(() => input.focus(), 100);
        }
    });
}

function closeConfirmModal(result) {
    document.getElementById('confirmModal').classList.remove('active');
    if (confirmModalResolve) {
        confirmModalResolve(result);
        confirmModalResolve = null;
    }
}

// Modal button handlers
document.getElementById('confirmModalOk').addEventListener('click', () => {
    const inputGroup = document.getElementById('confirmModalInputGroup');
    if (inputGroup.style.display !== 'none') {
        closeConfirmModal(document.getElementById('confirmModalInput').value);
    } else {
        closeConfirmModal(true);
    }
});

document.getElementById('confirmModalCancel').addEventListener('click', () => {
    closeConfirmModal(false);
});

document.getElementById('confirmModal').addEventListener('click', (e) => {
    if (e.target.id === 'confirmModal') {
        closeConfirmModal(false);
    }
});

// Keyboard support
document.getElementById('confirmModal').addEventListener('keydown', (e) => {
    if (e.key === 'Escape') closeConfirmModal(false);
    if (e.key === 'Enter' && document.getElementById('confirmModalInputGroup').style.display === 'none') {
        closeConfirmModal(true);
    }
});

// Toast notification system
function showToast(message, type = 'info', duration = 4000) {
    const container = document.getElementById('toastContainer');
    const icons = { success: '✓', error: '✕', warning: '⚠', info: 'ℹ' };

    const toast = document.createElement('div');
    toast.className = `toast ${type}`;
    toast.innerHTML = `
        <span class="toast-icon">${icons[type] || icons.info}</span>
        <span class="toast-message">${message}</span>
    `;
    container.appendChild(toast);

    setTimeout(() => {
        toast.style.animation = 'slideOut 0.3s ease forwards';
        setTimeout(() => toast.remove(), 300);
    }, duration);
}

function openAddNewsModal() {
    document.getElementById('addNewsModal').classList.add('active');
}

function closeAddNewsModal() {
    document.getElementById('addNewsModal').classList.remove('active');
    document.getElementById('addNewsForm').reset();
}

document.getElementById('addNewsForm').addEventListener('submit', async function(e) {
    e.preventDefault();

    const formData = {
        title: document.getElementById('newsTitle').value,
        url: document.getElementById('newsUrl').value,
        description: document.getElementById('newsDescription').value,
        source_name: document.getElementById('newsSource').value,
        project_id: document.getElementById('newsProject').value || null
    };

    try {
        const response = await fetch('{{ url_for("admin_zopk_news_add") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': csrfToken
            },
            body: JSON.stringify(formData)
        });

        const data = await response.json();
        if (data.success) {
            closeAddNewsModal();
            showToast('News został dodany', 'success');
            setTimeout(() => location.reload(), 1000);
        } else {
            showToast(data.error || 'Wystąpił błąd', 'error');
        }
    } catch (error) {
        showToast('Błąd połączenia: ' + error.message, 'error');
    }
});

async function approveNews(newsId) {
    const confirmed = await showConfirm('Czy na pewno chcesz zatwierdzić ten news?', {
        icon: '✓',
        title: 'Zatwierdź news',
        okText: 'Zatwierdź',
        okClass: 'btn-success'
    });
    if (!confirmed) return;

    try {
        const response = await fetch(`/admin/zopk/news/${newsId}/approve`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': csrfToken
            }
        });

        const data = await response.json();
        if (data.success) {
            document.getElementById(`news-${newsId}`).remove();
            showToast('News został zatwierdzony', 'success');
        } else {
            showToast(data.error || 'Wystąpił błąd', 'error');
        }
    } catch (error) {
        showToast('Błąd połączenia: ' + error.message, 'error');
    }
}

async function rejectNews(newsId) {
    const reason = await showConfirm('Podaj powód odrzucenia (opcjonalnie):', {
        icon: '✕',
        title: 'Odrzuć news',
        showInput: true,
        inputLabel: 'Powód odrzucenia:',
        inputPlaceholder: 'np. Nieistotny artykuł...',
        okText: 'Odrzuć',
        okClass: 'btn-danger'
    });
    if (reason === false) return; // User cancelled

    try {
        const response = await fetch(`/admin/zopk/news/${newsId}/reject`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': csrfToken
            },
            body: JSON.stringify({ reason: reason })
        });

        const data = await response.json();
        if (data.success) {
            document.getElementById(`news-${newsId}`).remove();
            showToast('News został odrzucony', 'success');
        } else {
            showToast(data.error || 'Wystąpił błąd', 'error');
        }
    } catch (error) {
        showToast('Błąd połączenia: ' + error.message, 'error');
    }
}

async function rejectOldNews() {
    const minYear = {{ min_year }};
    const confirmed = await showConfirm(
        `Czy na pewno chcesz odrzucić wszystkie newsy sprzed <strong>${minYear}</strong> roku?<br><br>` +
        `<small style="color: var(--text-muted)">ZOP Kaszubia powstał w 2024 roku, więc starsze artykuły najprawdopodobniej nie dotyczą tego projektu.</small>`,
        {
            icon: '🗑️',
            title: 'Odrzuć stare newsy',
            okText: 'Odrzuć wszystkie',
            okClass: 'btn-danger'
        }
    );
    if (!confirmed) {
        return;
    }

    try {
        const response = await fetch('/admin/zopk/news/reject-old', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': csrfToken
            },
            body: JSON.stringify({ min_year: minYear })
        });

        const data = await response.json();
        if (data.success) {
            showToast(data.message, 'success', 3000);
            setTimeout(() => location.reload(), 1500);
        } else {
            showToast(data.error || 'Wystąpił błąd', 'error');
        }
    } catch (error) {
        showToast('Błąd połączenia: ' + error.message, 'error');
    }
}

// AI Evaluation Modal functions
function evaluateWithAI() {
    // Open modal instead of confirm()
    document.getElementById('aiEvalModal').classList.add('active');
    // Reset modal state
    document.getElementById('aiEvalConfirm').style.display = 'block';
    document.getElementById('aiEvalProgress').style.display = 'none';
    document.getElementById('aiEvalResult').style.display = 'none';
}

function closeAiEvalModal() {
    document.getElementById('aiEvalModal').classList.remove('active');
}

async function startAiEvaluation() {
    const btn = document.getElementById('aiEvalBtn');
    const progressFill = document.getElementById('aiProgressFill');
    const statusText = document.getElementById('aiEvalStatusText');
    const counter = document.getElementById('aiEvalCounter');

    // Switch to progress view
    document.getElementById('aiEvalConfirm').style.display = 'none';
    document.getElementById('aiEvalProgress').style.display = 'block';

    // Disable button
    btn.disabled = true;
    btn.querySelector('.stat-label').textContent = 'AI pracuje...';

    // Animated progress with better messaging
    let progress = 0;
    let seconds = 0;
    const progressInterval = setInterval(() => {
        progress = Math.min(progress + Math.random() * 8, 95);
        seconds++;
        progressFill.style.width = `${progress}%`;

        // Show elapsed time and encouraging messages
        if (seconds < 30) {
            statusText.textContent = `Gemini analizuje newsy... ${Math.round(progress)}%`;
        } else if (seconds < 60) {
            statusText.textContent = `Prawie gotowe... ${Math.round(progress)}%`;
        } else {
            statusText.textContent = `Jeszcze chwilę... ${Math.round(progress)}%`;
        }
        counter.textContent = `Upłynęło: ${seconds}s (każdy news wymaga wywołania AI)`;
    }, 1000);

    try {
        // Use AbortController for timeout (3 minutes max)
        const controller = new AbortController();
        const timeoutId = setTimeout(() => controller.abort(), 180000);

        const response = await fetch('/admin/zopk/news/evaluate-ai', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': csrfToken
            },
            body: JSON.stringify({ limit: 20 }),  // Reduced limit for faster response
            signal: controller.signal
        });

        clearTimeout(timeoutId);
        clearInterval(progressInterval);
        progressFill.style.width = '100%';

        const data = await response.json();

        // Switch to result view
        document.getElementById('aiEvalProgress').style.display = 'none';
        document.getElementById('aiEvalResult').style.display = 'block';

        const resultIcon = document.getElementById('aiResultIcon');
        const resultTitle = document.getElementById('aiResultTitle');
        const resultStats = document.getElementById('aiResultStats');

        if (data.success) {
            resultIcon.textContent = '✓';
            resultIcon.className = 'modal-icon success';
            resultTitle.textContent = 'Ocena zakończona!';
            resultStats.innerHTML = `
                <div class="ai-stat-item success">
                    <div class="value">${data.relevant_count}</div>
                    <div class="label">Pasuje do ZOP Kaszubia</div>
                </div>
                <div class="ai-stat-item danger">
                    <div class="value">${data.not_relevant_count}</div>
                    <div class="label">Nie pasuje</div>
                </div>
                <div class="ai-stat-item warning">
                    <div class="value">${data.total_evaluated}</div>
                    <div class="label">Ocenionych</div>
                </div>
                <p style="text-align: center; margin-top: var(--spacing-md); color: var(--text-secondary);">
                    Odświeżam stronę za 2 sekundy...
                </p>
            `;
            // Auto-reload after showing results
            setTimeout(() => location.reload(), 2000);
        } else {
            resultIcon.textContent = '✗';
            resultIcon.className = 'modal-icon error';
            resultTitle.textContent = 'Wystąpił błąd';
            resultStats.innerHTML = `<p style="text-align: center; color: var(--danger);">${data.error}</p>`;
            btn.disabled = false;
            btn.querySelector('.stat-label').textContent = 'AI: Oceń ponownie';
        }
    } catch (error) {
        clearInterval(progressInterval);

        document.getElementById('aiEvalProgress').style.display = 'none';
        document.getElementById('aiEvalResult').style.display = 'block';

        const resultIcon = document.getElementById('aiResultIcon');
        const resultTitle = document.getElementById('aiResultTitle');
        const resultStats = document.getElementById('aiResultStats');

        resultIcon.textContent = '✗';
        resultIcon.className = 'modal-icon error';

        // Check if timeout
        if (error.name === 'AbortError') {
            resultTitle.textContent = 'Przekroczono limit czasu';
            resultStats.innerHTML = `<p style="text-align: center; color: var(--danger);">
                Przetwarzanie trwało zbyt długo (>3 min).<br>
                Spróbuj ponownie lub sprawdź logi serwera.
            </p>`;
        } else {
            resultTitle.textContent = 'Błąd połączenia';
            resultStats.innerHTML = `<p style="text-align: center; color: var(--danger);">${error.message}</p>`;
        }

        btn.disabled = false;
        btn.querySelector('.stat-label').textContent = 'AI: Oceń ponownie';
    }
}

// Re-evaluate items missing scores (upgrade to 1-5 stars)
async function reevaluateScores() {
    const btn = document.getElementById('aiRescoreBtn');
    if (!btn) return;

    // Show modal for re-evaluation
    document.getElementById('aiEvalModal').classList.add('active');
    document.getElementById('aiEvalConfirm').style.display = 'none';
    document.getElementById('aiEvalProgress').style.display = 'block';
    document.getElementById('aiEvalResult').style.display = 'none';

    const progressBar = document.getElementById('aiProgressFill');
    const progressStatus = document.getElementById('aiProgressStatus');

    btn.disabled = true;
    btn.querySelector('.stat-label').textContent = 'AI pracuje...';

    // Simulated progress for better UX
    let progress = 0;
    let startTime = Date.now();
    const progressInterval = setInterval(() => {
        const elapsed = Math.floor((Date.now() - startTime) / 1000);
        if (progress < 90) {
            progress += Math.random() * 3;
            progressBar.style.width = Math.min(progress, 90) + '%';
        }
        progressStatus.textContent = `AI dodaje gwiazdki... (${elapsed}s)`;
    }, 500);

    try {
        const controller = new AbortController();
        const timeoutId = setTimeout(() => controller.abort(), 180000);

        const response = await fetch('/admin/zopk/news/reevaluate-scores', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': csrfToken
            },
            body: JSON.stringify({ limit: 30 }),
            signal: controller.signal
        });

        clearTimeout(timeoutId);
        clearInterval(progressInterval);

        const data = await response.json();

        progressBar.style.width = '100%';

        document.getElementById('aiEvalProgress').style.display = 'none';
        document.getElementById('aiEvalResult').style.display = 'block';

        const resultIcon = document.getElementById('aiResultIcon');
        const resultTitle = document.getElementById('aiResultTitle');
        const resultStats = document.getElementById('aiResultStats');

        if (data.success) {
            resultIcon.textContent = '⭐';
            resultIcon.className = 'modal-icon success';
            resultTitle.textContent = 'Gwiazdki dodane!';
            resultStats.innerHTML = `
                <div style="display: flex; gap: 20px; justify-content: center; margin-bottom: var(--spacing-md);">
                    <div><strong>${data.total_evaluated}</strong><br><small>Ocenionych</small></div>
                    <div style="color: var(--success);"><strong>${data.relevant_count}</strong><br><small>Pasuje</small></div>
                    <div style="color: var(--danger);"><strong>${data.not_relevant_count}</strong><br><small>Nie pasuje</small></div>
                </div>
                <p style="text-align: center; color: var(--text-secondary);">${data.message}</p>
            `;
            setTimeout(() => location.reload(), 2000);
        } else {
            resultIcon.textContent = '✗';
            resultIcon.className = 'modal-icon error';
            resultTitle.textContent = 'Wystąpił błąd';
            resultStats.innerHTML = `<p style="text-align: center; color: var(--danger);">${data.error}</p>`;
            btn.disabled = false;
            btn.querySelector('.stat-label').textContent = 'AI: Spróbuj ponownie';
        }
    } catch (error) {
        clearInterval(progressInterval);
        document.getElementById('aiEvalProgress').style.display = 'none';
        document.getElementById('aiEvalResult').style.display = 'block';

        const resultIcon = document.getElementById('aiResultIcon');
        const resultTitle = document.getElementById('aiResultTitle');
        const resultStats = document.getElementById('aiResultStats');

        resultIcon.textContent = '✗';
        resultIcon.className = 'modal-icon error';
        resultTitle.textContent = 'Błąd połączenia';
        resultStats.innerHTML = `<p style="text-align: center; color: var(--danger);">${error.message}</p>`;

        btn.disabled = false;
        btn.querySelector('.stat-label').textContent = 'AI: Spróbuj ponownie';
    }
}

// Close modal on click outside
document.getElementById('aiEvalModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeAiEvalModal();
    }
});

// Source names mapping for progress display
const SOURCE_NAMES = {
    'brave': '🔍 Brave Search API',
    'trojmiasto': '📰 trojmiasto.pl',
    'dziennik_baltycki': '📰 Dziennik Bałtycki',
    'gov_mon': '🏛️ Ministerstwo Obrony Narodowej',
    'gov_przemysl': '🏛️ Min. Rozwoju i Technologii',
    'google_news_zopk': '📡 Google News (ZOP Kaszubia)',
    'google_news_offshore': '📡 Google News (offshore)',
    'google_news_nuclear': '📡 Google News (elektrownia jądrowa)',
    'google_news_samsonowicz': '📡 Google News (Samsonowicz)',
    'google_news_kongsberg': '📡 Google News (Kongsberg)',
    // New local media sources
    'google_news_norda_fm': '📻 Norda FM',
    'google_news_ttm': '📺 Twoja Telewizja Morska',
    'google_news_nadmorski24': '📰 Nadmorski24.pl',
    'google_news_samsonowicz_fb': '👤 Facebook (Samsonowicz)',
    'google_news_norda': '📡 Google News (Norda Biznes)',
    'google_news_spoko': '📡 Google News (Spoko Gospodarcze)'
};

const ALL_SOURCES = Object.keys(SOURCE_NAMES);

async function searchNews() {
    const btn = document.getElementById('searchBtn');
    const resultDiv = document.getElementById('searchResult');
    const progressContainer = document.getElementById('progressContainer');
    const progressBar = document.getElementById('progressBar');
    const progressStatus = document.getElementById('progressStatus');
    const progressPercent = document.getElementById('progressPercent');
    const progressSteps = document.getElementById('progressSteps');
    const sourceStats = document.getElementById('sourceStats');
    const sourceStatsGrid = document.getElementById('sourceStatsGrid');
    const query = document.getElementById('searchQuery').value;

    // Reset UI
    btn.disabled = true;
    btn.textContent = 'Szukam...';
    resultDiv.style.display = 'none';
    sourceStats.classList.remove('active');
    progressContainer.classList.add('active');
    progressBar.style.width = '0%';
    progressPercent.textContent = '0%';

    // Build initial progress steps
    progressSteps.innerHTML = ALL_SOURCES.map((src, idx) => `
        <div class="progress-step pending" id="step-${src}">
            <span class="progress-step-icon"></span>
            <span>${SOURCE_NAMES[src]}</span>
            <span class="progress-step-count" id="count-${src}">-</span>
        </div>
    `).join('');

    // Simulate progress while waiting for API
    let currentStep = 0;
    const totalSteps = ALL_SOURCES.length + 1; // +1 for cross-verification

    const progressInterval = setInterval(() => {
        if (currentStep < ALL_SOURCES.length) {
            // Mark previous step as completed
            if (currentStep > 0) {
                const prevStep = document.getElementById(`step-${ALL_SOURCES[currentStep - 1]}`);
                if (prevStep) {
                    prevStep.classList.remove('active');
                    prevStep.classList.add('completed');
                }
            }

            // Mark current step as active
            const currStep = document.getElementById(`step-${ALL_SOURCES[currentStep]}`);
            if (currStep) {
                currStep.classList.remove('pending');
                currStep.classList.add('active');
            }

            progressStatus.textContent = `Przeszukiwanie: ${SOURCE_NAMES[ALL_SOURCES[currentStep]]}`;
            const percent = Math.round(((currentStep + 1) / totalSteps) * 80);
            progressBar.style.width = `${percent}%`;
            progressPercent.textContent = `${percent}%`;

            currentStep++;
        }
    }, 800);

    try {
        const response = await fetch('{{ url_for("api_zopk_search_news") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': csrfToken
            },
            body: JSON.stringify({ query: query })
        });

        clearInterval(progressInterval);

        const data = await response.json();

        // Mark all steps as completed
        ALL_SOURCES.forEach(src => {
            const step = document.getElementById(`step-${src}`);
            if (step) {
                step.classList.remove('pending', 'active');
                step.classList.add('completed');
            }
        });

        if (data.success) {
            // Update counts from source_stats
            if (data.source_stats) {
                Object.entries(data.source_stats).forEach(([src, count]) => {
                    const countEl = document.getElementById(`count-${src}`);
                    if (countEl) {
                        countEl.textContent = count;
                    }
                });
            }

            // Show cross-verification step
            progressStatus.textContent = 'Weryfikacja krzyżowa zakończona';
            progressBar.style.width = '100%';
            progressPercent.textContent = '100%';

            // Show source stats
            if (data.source_stats && Object.keys(data.source_stats).length > 0) {
                sourceStatsGrid.innerHTML = Object.entries(data.source_stats)
                    .filter(([src, count]) => count > 0)
                    .sort((a, b) => b[1] - a[1])
                    .map(([src, count]) => `
                        <div class="source-stat-item">
                            <span>${SOURCE_NAMES[src] || src}</span>
                            <span class="count">${count}</span>
                        </div>
                    `).join('');
                sourceStats.classList.add('active');
            }

            // Show result message
            resultDiv.style.display = 'block';
            resultDiv.innerHTML = `
                <p style="color: #dcfce7;">
                    ✓ ${data.message}<br>
                    <small>Auto-zatwierdzone (3+ źródeł): ${data.auto_approved || 0}</small>
                </p>
            `;

            // Auto-refresh after 3 seconds
            setTimeout(() => {
                progressStatus.textContent = 'Odświeżanie strony...';
                location.reload();
            }, 3000);
        } else {
            progressBar.style.width = '100%';
            progressBar.style.background = '#fca5a5';
            progressStatus.textContent = 'Błąd wyszukiwania';
            resultDiv.style.display = 'block';
            resultDiv.innerHTML = `<p style="color: #fca5a5;">Błąd: ${data.error}</p>`;
            btn.disabled = false;
            btn.textContent = 'Szukaj artykułów';
        }
    } catch (error) {
        clearInterval(progressInterval);
        progressBar.style.width = '100%';
        progressBar.style.background = '#fca5a5';
        progressStatus.textContent = 'Błąd połączenia';
        resultDiv.style.display = 'block';
        resultDiv.innerHTML = `<p style="color: #fca5a5;">Błąd połączenia: ${error.message}</p>`;
        btn.disabled = false;
        btn.textContent = 'Szukaj artykułów';
    }
}

// Close modal on click outside
document.getElementById('addNewsModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeAddNewsModal();
    }
});
{% endblock %}
