{% extends "base.html" %}

{% block title %}Timeline ZOPK - Roadmapa{% endblock %}

{% block extra_css %}
<style>
    .page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-lg); }
    .page-header h1 { font-size: var(--font-size-2xl); color: var(--text-primary); }
    .breadcrumb { display: flex; gap: var(--spacing-xs); color: var(--text-secondary); font-size: var(--font-size-sm); margin-bottom: var(--spacing-lg); }
    .breadcrumb a { color: var(--primary); text-decoration: none; }

    .timeline-container { position: relative; padding: var(--spacing-lg) 0; }
    .timeline-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; background: var(--border); transform: translateX(-50%); }

    .timeline-item { display: flex; margin-bottom: var(--spacing-xl); position: relative; }
    .timeline-item:nth-child(odd) { flex-direction: row-reverse; }
    .timeline-item:nth-child(odd) .timeline-content { text-align: right; padding-right: var(--spacing-xl); }
    .timeline-item:nth-child(even) .timeline-content { padding-left: var(--spacing-xl); }

    .timeline-content { width: 45%; }
    .timeline-dot { position: absolute; left: 50%; transform: translateX(-50%); width: 20px; height: 20px; border-radius: 50%; border: 4px solid var(--surface); z-index: 1; }

    .timeline-card { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: var(--spacing-md); }
    .timeline-date { font-size: var(--font-size-sm); color: var(--text-secondary); margin-bottom: var(--spacing-xs); }
    .timeline-title { font-size: var(--font-size-lg); font-weight: 600; margin-bottom: var(--spacing-xs); }
    .timeline-desc { font-size: var(--font-size-sm); color: var(--text-secondary); margin-bottom: var(--spacing-sm); }
    .timeline-meta { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; }
    .timeline-badge { padding: 2px 8px; border-radius: 12px; font-size: var(--font-size-xs); }

    .status-planned { background: #e5e7eb; color: #374151; }
    .status-in_progress { background: #dbeafe; color: #1d4ed8; }
    .status-completed { background: #d1fae5; color: #047857; }
    .status-delayed { background: #fef3c7; color: #b45309; }

    .category-nuclear { --cat-color: #ef4444; }
    .category-offshore { --cat-color: #3b82f6; }
    .category-infrastructure { --cat-color: #8b5cf6; }
    .category-defense { --cat-color: #059669; }
    .category-other { --cat-color: #6b7280; }

    .timeline-dot.category-nuclear { background: #ef4444; }
    .timeline-dot.category-offshore { background: #3b82f6; }
    .timeline-dot.category-infrastructure { background: #8b5cf6; }
    .timeline-dot.category-defense { background: #059669; }
    .timeline-dot.category-other { background: #6b7280; }

    .btn { padding: 8px 16px; border-radius: var(--radius); font-weight: 500; cursor: pointer; border: none; }
    .btn-primary { background: var(--primary); color: white; }
    .btn-sm { padding: 4px 8px; font-size: var(--font-size-xs); }

    .legend { display: flex; gap: var(--spacing-lg); margin-bottom: var(--spacing-lg); flex-wrap: wrap; }
    .legend-item { display: flex; align-items: center; gap: var(--spacing-xs); font-size: var(--font-size-sm); }
    .legend-dot { width: 12px; height: 12px; border-radius: 50%; }

    .modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center; }
    .modal.active { display: flex; }
    .modal-content { background: var(--surface); border-radius: var(--radius-lg); padding: var(--spacing-lg); width: 500px; max-width: 90%; }
    .modal-content.modal-large { width: 900px; max-height: 80vh; overflow-y: auto; }
    .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-md); }
    .form-group { margin-bottom: var(--spacing-md); }
    .form-group label { display: block; font-size: var(--font-size-sm); margin-bottom: 4px; }
    .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); }
    .empty-state { text-align: center; padding: var(--spacing-xl); color: var(--text-secondary); }

    /* Suggestions styles */
    .btn-secondary { background: var(--surface); color: var(--text-primary); border: 1px solid var(--border); }
    .btn-secondary:hover { background: var(--background); }
    .btn-success { background: var(--success); color: white; }
    .btn-group { display: flex; gap: var(--spacing-sm); }

    .suggestions-stats { display: flex; gap: var(--spacing-lg); margin-bottom: var(--spacing-md); padding: var(--spacing-md); background: var(--background); border-radius: var(--radius); }
    .stat-item { text-align: center; }
    .stat-value { font-size: var(--font-size-xl); font-weight: 700; color: var(--primary); }
    .stat-label { font-size: var(--font-size-xs); color: var(--text-secondary); }

    .suggestion-card { background: var(--background); border-radius: var(--radius); padding: var(--spacing-md); margin-bottom: var(--spacing-sm); border-left: 4px solid var(--primary); }
    .suggestion-card.approved { opacity: 0.5; border-left-color: var(--success); }
    .suggestion-text { font-size: var(--font-size-sm); margin-bottom: var(--spacing-sm); line-height: 1.5; }
    .suggestion-meta { display: flex; gap: var(--spacing-md); font-size: var(--font-size-xs); color: var(--text-secondary); flex-wrap: wrap; margin-bottom: var(--spacing-sm); }
    .suggestion-actions { display: flex; gap: var(--spacing-sm); align-items: center; }
    .suggestion-input { flex: 1; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius); font-size: var(--font-size-sm); }

    /* AI Analysis tabs */
    .ai-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: var(--spacing-md); }
    .ai-tab { padding: 10px 16px; cursor: pointer; font-size: var(--font-size-sm); font-weight: 500; color: var(--text-secondary); border-bottom: 2px solid transparent; margin-bottom: -2px; display: flex; align-items: center; gap: 6px; }
    .ai-tab:hover { color: var(--text-primary); background: var(--background); }
    .ai-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
    .ai-tab-badge { background: var(--primary); color: white; font-size: 11px; padding: 1px 7px; border-radius: 10px; min-width: 18px; text-align: center; }
    .ai-tab-badge.zero { background: var(--border); color: var(--text-secondary); }
    .ai-tab-content { display: none; }
    .ai-tab-content.active { display: block; }
    .update-card { background: var(--background); border-radius: var(--radius); padding: var(--spacing-md); margin-bottom: var(--spacing-sm); border-left: 4px solid #f59e0b; }
    .update-card .status-arrow { font-weight: 600; color: var(--primary); }
    .gap-card { background: var(--background); border-radius: var(--radius); padding: var(--spacing-md); margin-bottom: var(--spacing-sm); border-left: 4px solid #8b5cf6; }

    /* Toast notifications */
    .toast-container { position: fixed; top: 20px; right: 20px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; }
    .toast { padding: 12px 20px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 10px; animation: slideIn 0.3s ease; }
    .toast.success { border-left: 4px solid var(--success); }
    .toast.error { border-left: 4px solid var(--error); }
    .toast.info { border-left: 4px solid var(--primary); }
    @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 content %}
<div class="container">
    <div class="breadcrumb">
        <a href="{{ url_for('admin.admin_zopk') }}">Panel ZOPK</a>
        <span>›</span>
        <span>Timeline / Roadmapa</span>
    </div>

    <div class="page-header">
        <h1>🗺️ Timeline ZOPK</h1>
        <div class="btn-group">
            <button class="btn btn-secondary" onclick="loadSuggestions()">🧠 Sugestie z bazy wiedzy</button>
            <button class="btn btn-secondary" onclick="loadAIAnalysis()" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none;">🤖 AI Analiza roadmapy</button>
            <button class="btn btn-primary" onclick="openAddModal()">➕ Dodaj kamień milowy</button>
        </div>
    </div>

    <div class="legend">
        <div class="legend-item"><div class="legend-dot" style="background: #ef4444;"></div> Energia jądrowa</div>
        <div class="legend-item"><div class="legend-dot" style="background: #3b82f6;"></div> Offshore wind</div>
        <div class="legend-item"><div class="legend-dot" style="background: #8b5cf6;"></div> Infrastruktura</div>
        <div class="legend-item"><div class="legend-dot" style="background: #059669;"></div> Obronność</div>
        <div class="legend-item"><div class="legend-dot" style="background: #6b7280;"></div> Inne</div>
    </div>

    <div class="timeline-container">
        <div class="timeline-line"></div>
        <div id="timelineItems">
            <div class="empty-state">Ładowanie...</div>
        </div>
    </div>
</div>

<!-- Modal dodawania -->
<div class="modal" id="addModal">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="modalTitle">Dodaj kamień milowy</h3>
            <button onclick="closeModal()" style="background: none; border: none; font-size: 1.5rem; cursor: pointer;">&times;</button>
        </div>
        <form id="milestoneForm" onsubmit="saveMilestone(event)">
            <input type="hidden" id="milestoneId">
            <div class="form-group">
                <label>Tytuł *</label>
                <input type="text" id="title" required>
            </div>
            <div class="form-group">
                <label>Opis</label>
                <textarea id="description" rows="3"></textarea>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label>Kategoria</label>
                    <select id="category">
                        <option value="nuclear">Energia jądrowa</option>
                        <option value="offshore">Offshore wind</option>
                        <option value="infrastructure">Infrastruktura</option>
                        <option value="defense">Obronność</option>
                        <option value="other">Inne</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Status</label>
                    <select id="status">
                        <option value="planned">Planowane</option>
                        <option value="in_progress">W trakcie</option>
                        <option value="completed">Zakończone</option>
                        <option value="delayed">Opóźnione</option>
                    </select>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label>Data planowana</label>
                    <input type="date" id="targetDate">
                </div>
                <div class="form-group">
                    <label>Data rzeczywista</label>
                    <input type="date" id="actualDate">
                </div>
            </div>
            <div class="form-group">
                <label>Źródło (URL)</label>
                <input type="url" id="sourceUrl">
            </div>
            <div style="display: flex; justify-content: flex-end; gap: var(--spacing-sm);">
                <button type="button" class="btn" onclick="closeModal()">Anuluj</button>
                <button type="submit" class="btn btn-primary">Zapisz</button>
            </div>
        </form>
    </div>
</div>

<!-- Modal sugestii z bazy wiedzy -->
<div class="modal" id="suggestionsModal">
    <div class="modal-content modal-large">
        <div class="modal-header">
            <h3>🧠 Sugestie kamieni milowych z bazy wiedzy</h3>
            <button onclick="closeSuggestionsModal()" style="background: none; border: none; font-size: 1.5rem; cursor: pointer;">&times;</button>
        </div>

        <div class="suggestions-stats" id="suggestionsStats">
            <div class="stat-item">
                <div class="stat-value" id="statTotalFacts">-</div>
                <div class="stat-label">Faktów typu milestone</div>
            </div>
            <div class="stat-item">
                <div class="stat-value" id="statInTimeline">-</div>
                <div class="stat-label">Już w Timeline</div>
            </div>
            <div class="stat-item">
                <div class="stat-value" id="statSuggestions">-</div>
                <div class="stat-label">Sugestii do dodania</div>
            </div>
        </div>

        <div id="suggestionsList">
            <div class="empty-state">Kliknij przycisk aby załadować sugestie...</div>
        </div>
    </div>
</div>

<!-- Modal AI Analysis -->
<div class="modal" id="aiAnalysisModal">
    <div class="modal-content modal-large">
        <div class="modal-header">
            <h3>🤖 AI Analiza roadmapy</h3>
            <button onclick="closeAIModal()" style="background: none; border: none; font-size: 1.5rem; cursor: pointer;">&times;</button>
        </div>

        <div class="suggestions-stats" id="aiStats">
            <div class="stat-item">
                <div class="stat-value" id="aiStatMilestones">-</div>
                <div class="stat-label">Kamieni milowych</div>
            </div>
            <div class="stat-item">
                <div class="stat-value" id="aiStatFacts">-</div>
                <div class="stat-label">Faktów przeanalizowanych</div>
            </div>
            <div class="stat-item">
                <div class="stat-value" id="aiStatNew">-</div>
                <div class="stat-label">Nowych sugestii</div>
            </div>
            <div class="stat-item">
                <div class="stat-value" id="aiStatUpdates">-</div>
                <div class="stat-label">Aktualizacji statusu</div>
            </div>
            <div class="stat-item">
                <div class="stat-value" id="aiStatGaps">-</div>
                <div class="stat-label">Braków w roadmapie</div>
            </div>
        </div>

        <div class="ai-tabs">
            <div class="ai-tab active" onclick="switchAITab('new')">Nowe kamienie milowe <span class="ai-tab-badge" id="badgeNew">0</span></div>
            <div class="ai-tab" onclick="switchAITab('updates')">Aktualizacje statusu <span class="ai-tab-badge" id="badgeUpdates">0</span></div>
            <div class="ai-tab" onclick="switchAITab('gaps')">Braki w roadmapie <span class="ai-tab-badge" id="badgeGaps">0</span></div>
        </div>

        <div class="ai-tab-content active" id="tabNew">
            <div class="empty-state">Ładowanie...</div>
        </div>
        <div class="ai-tab-content" id="tabUpdates">
            <div class="empty-state">Ładowanie...</div>
        </div>
        <div class="ai-tab-content" id="tabGaps">
            <div class="empty-state">Ładowanie...</div>
        </div>
    </div>
</div>

<!-- Toast container -->
<div class="toast-container" id="toastContainer"></div>
{% endblock %}

{% block extra_js %}
let milestones = [];
let editingId = null;

async function loadMilestones() {
    try {
        const response = await fetch('/admin/zopk-api/milestones');
        const data = await response.json();

        if (data.success) {
            milestones = data.milestones;
            renderTimeline();
        }
    } catch (error) {
        document.getElementById('timelineItems').innerHTML = '<div class="empty-state">Błąd ładowania: ' + error + '</div>';
    }
}

function renderTimeline() {
    if (milestones.length === 0) {
        document.getElementById('timelineItems').innerHTML = '<div class="empty-state">Brak kamieni milowych. Dodaj pierwszy!</div>';
        return;
    }

    const statusLabels = {planned: 'Planowane', in_progress: 'W trakcie', completed: 'Zakończone', delayed: 'Opóźnione'};
    const categoryLabels = {nuclear: 'Energia jądrowa', offshore: 'Offshore', infrastructure: 'Infrastruktura', defense: 'Obronność', other: 'Inne'};

    const html = milestones.map(m => `
        <div class="timeline-item">
            <div class="timeline-content">
                <div class="timeline-card">
                    <div class="timeline-date">${formatDate(m.target_date)}</div>
                    <div class="timeline-title">${escapeHtml(m.title)}</div>
                    <div class="timeline-desc">${escapeHtml(m.description || '')}</div>
                    <div class="timeline-meta">
                        <span class="timeline-badge status-${m.status}">${statusLabels[m.status] || m.status}</span>
                        <span class="timeline-badge" style="background: var(--cat-color);">${categoryLabels[m.category] || m.category}</span>
                        <button class="btn btn-sm" onclick="editMilestone(${m.id})">✏️</button>
                        <button class="btn btn-sm" onclick="deleteMilestone(${m.id})">🗑️</button>
                    </div>
                </div>
            </div>
            <div class="timeline-dot category-${m.category}"></div>
        </div>
    `).join('');

    document.getElementById('timelineItems').innerHTML = html;
}

function formatDate(dateStr) {
    if (!dateStr) return 'Brak daty';
    const d = new Date(dateStr);
    return d.toLocaleDateString('pl-PL', {year: 'numeric', month: 'long'});
}

function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text || '';
    return div.innerHTML;
}

function openAddModal() {
    editingId = null;
    document.getElementById('modalTitle').textContent = 'Dodaj kamień milowy';
    document.getElementById('milestoneForm').reset();
    document.getElementById('addModal').classList.add('active');
}

function editMilestone(id) {
    const m = milestones.find(x => x.id === id);
    if (!m) return;

    editingId = id;
    document.getElementById('modalTitle').textContent = 'Edytuj kamień milowy';
    document.getElementById('title').value = m.title;
    document.getElementById('description').value = m.description || '';
    document.getElementById('category').value = m.category;
    document.getElementById('status').value = m.status;
    document.getElementById('targetDate').value = m.target_date || '';
    document.getElementById('actualDate').value = m.actual_date || '';
    document.getElementById('sourceUrl').value = m.source_url || '';
    document.getElementById('addModal').classList.add('active');
}

function closeModal() {
    document.getElementById('addModal').classList.remove('active');
}

async function saveMilestone(e) {
    e.preventDefault();

    const data = {
        title: document.getElementById('title').value,
        description: document.getElementById('description').value,
        category: document.getElementById('category').value,
        status: document.getElementById('status').value,
        target_date: document.getElementById('targetDate').value || null,
        actual_date: document.getElementById('actualDate').value || null,
        source_url: document.getElementById('sourceUrl').value || null
    };

    try {
        const url = editingId ? `/admin/zopk-api/milestones/${editingId}` : '/admin/zopk-api/milestones';
        const method = editingId ? 'PUT' : 'POST';

        const response = await fetch(url, {
            method: method,
            headers: {'Content-Type': 'application/json', 'X-CSRFToken': '{{ csrf_token() }}'},
            body: JSON.stringify(data)
        });
        const result = await response.json();

        if (result.success) {
            closeModal();
            loadMilestones();
        } else {
            alert('Błąd: ' + result.error);
        }
    } catch (error) {
        alert('Błąd: ' + error);
    }
}

async function deleteMilestone(id) {
    if (!confirm('Usunąć ten kamień milowy?')) return;

    try {
        const response = await fetch(`/admin/zopk-api/milestones/${id}`, {
            method: 'DELETE',
            headers: {'X-CSRFToken': '{{ csrf_token() }}'}
        });
        const result = await response.json();

        if (result.success) {
            loadMilestones();
        } else {
            alert('Błąd: ' + result.error);
        }
    } catch (error) {
        alert('Błąd: ' + error);
    }
}

// ========== SUGGESTIONS ==========
let suggestionsData = [];

async function loadSuggestions() {
    document.getElementById('suggestionsModal').classList.add('active');
    document.getElementById('suggestionsList').innerHTML = '<div class="empty-state">⏳ Ładowanie sugestii...</div>';

    try {
        const response = await fetch('/admin/zopk-api/timeline/suggestions?limit=30');
        const data = await response.json();

        if (data.success) {
            suggestionsData = data.suggestions;

            // Update stats
            document.getElementById('statTotalFacts').textContent = data.total_milestone_facts || 0;
            document.getElementById('statInTimeline').textContent = data.already_in_timeline || 0;
            document.getElementById('statSuggestions').textContent = data.suggestions_count || 0;

            renderSuggestions();
        } else {
            document.getElementById('suggestionsList').innerHTML = '<div class="empty-state">❌ Błąd: ' + (data.error || 'Nieznany błąd') + '</div>';
        }
    } catch (error) {
        document.getElementById('suggestionsList').innerHTML = '<div class="empty-state">❌ Błąd połączenia: ' + error + '</div>';
    }
}

function renderSuggestions() {
    if (suggestionsData.length === 0) {
        document.getElementById('suggestionsList').innerHTML = '<div class="empty-state">✅ Brak nowych sugestii - wszystkie fakty typu milestone są już w Timeline!</div>';
        return;
    }

    const categoryLabels = {nuclear: '⚛️ Energia jądrowa', offshore: '🌊 Offshore', infrastructure: '🛣️ Infrastruktura', defense: '🛡️ Obronność', other: '📌 Inne'};
    const statusLabels = {completed: '✅ Zakończone', planned: '📅 Planowane', in_progress: '🔄 W trakcie'};

    const html = suggestionsData.map((s, idx) => `
        <div class="suggestion-card" id="suggestion-${idx}">
            <div class="suggestion-text">${escapeHtml(s.full_text)}</div>
            <div class="suggestion-meta">
                <span>${categoryLabels[s.suggested_category] || s.suggested_category}</span>
                <span>${statusLabels[s.suggested_status] || s.suggested_status}</span>
                ${s.suggested_date ? `<span>📅 ${s.suggested_date}</span>` : ''}
                ${s.source_name ? `<span>📰 ${s.source_name}</span>` : ''}
                <span>🎯 ${Math.round(s.confidence_score * 100)}%</span>
            </div>
            <div class="suggestion-actions">
                <input type="text" class="suggestion-input" id="title-${idx}" value="${escapeHtml(s.suggested_title)}" placeholder="Tytuł">
                <select id="category-${idx}" style="padding: 6px; border-radius: var(--radius);">
                    <option value="nuclear" ${s.suggested_category === 'nuclear' ? 'selected' : ''}>⚛️ Energia jądrowa</option>
                    <option value="offshore" ${s.suggested_category === 'offshore' ? 'selected' : ''}>🌊 Offshore</option>
                    <option value="infrastructure" ${s.suggested_category === 'infrastructure' ? 'selected' : ''}>🛣️ Infrastruktura</option>
                    <option value="defense" ${s.suggested_category === 'defense' ? 'selected' : ''}>🛡️ Obronność</option>
                    <option value="other" ${s.suggested_category === 'other' ? 'selected' : ''}>📌 Inne</option>
                </select>
                <button class="btn btn-success btn-sm" onclick="approveSuggestion(${idx})">✅ Dodaj</button>
                <button class="btn btn-sm" onclick="skipSuggestion(${idx})">⏭️</button>
            </div>
        </div>
    `).join('');

    document.getElementById('suggestionsList').innerHTML = html;
}

async function approveSuggestion(idx) {
    const s = suggestionsData[idx];
    if (!s) return;

    const title = document.getElementById(`title-${idx}`).value;
    const category = document.getElementById(`category-${idx}`).value;

    try {
        const response = await fetch('/admin/zopk-api/timeline/suggestions/approve', {
            method: 'POST',
            headers: {'Content-Type': 'application/json', 'X-CSRFToken': '{{ csrf_token() }}'},
            body: JSON.stringify({
                fact_id: s.fact_id,
                title: title,
                description: s.full_text,
                category: category,
                target_date: s.suggested_date,
                status: s.suggested_status,
                source_url: s.news_url
            })
        });
        const result = await response.json();

        if (result.success) {
            showToast('success', `✅ Dodano: ${title}`);
            document.getElementById(`suggestion-${idx}`).classList.add('approved');
            suggestionsData.splice(idx, 1);

            // Refresh timeline
            loadMilestones();

            // Update stats
            const current = parseInt(document.getElementById('statInTimeline').textContent) || 0;
            document.getElementById('statInTimeline').textContent = current + 1;
            document.getElementById('statSuggestions').textContent = suggestionsData.length;
        } else {
            showToast('error', `❌ Błąd: ${result.error}`);
        }
    } catch (error) {
        showToast('error', `❌ Błąd: ${error}`);
    }
}

function skipSuggestion(idx) {
    document.getElementById(`suggestion-${idx}`).remove();
    suggestionsData.splice(idx, 1);
    document.getElementById('statSuggestions').textContent = suggestionsData.length;

    if (suggestionsData.length === 0) {
        document.getElementById('suggestionsList').innerHTML = '<div class="empty-state">✅ Przejrzano wszystkie sugestie!</div>';
    }
}

function closeSuggestionsModal() {
    document.getElementById('suggestionsModal').classList.remove('active');
}

// ========== TOASTS ==========
function showToast(type, message, duration = 4000) {
    const container = document.getElementById('toastContainer');
    const toast = document.createElement('div');
    toast.className = `toast ${type}`;
    toast.innerHTML = message;
    container.appendChild(toast);

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

// ========== AI ANALYSIS ==========
let aiData = null;

async function loadAIAnalysis() {
    document.getElementById('aiAnalysisModal').classList.add('active');
    document.getElementById('tabNew').innerHTML = '<div class="empty-state">🤖 AI analizuje roadmapę... (może potrwać 10-15 sekund)</div>';
    document.getElementById('tabUpdates').innerHTML = '<div class="empty-state">Oczekiwanie na wyniki...</div>';
    document.getElementById('tabGaps').innerHTML = '<div class="empty-state">Oczekiwanie na wyniki...</div>';

    try {
        const response = await fetch('/admin/zopk-api/timeline/ai-analyze');
        const data = await response.json();

        if (data.success) {
            aiData = data;

            // Update stats
            document.getElementById('aiStatMilestones').textContent = data.total_milestones || 0;
            document.getElementById('aiStatFacts').textContent = data.total_facts_analyzed || 0;
            document.getElementById('aiStatNew').textContent = (data.new_milestones || []).length;
            document.getElementById('aiStatUpdates').textContent = (data.status_updates || []).length;
            document.getElementById('aiStatGaps').textContent = (data.gaps || []).length;

            // Update badges
            updateBadge('badgeNew', (data.new_milestones || []).length);
            updateBadge('badgeUpdates', (data.status_updates || []).length);
            updateBadge('badgeGaps', (data.gaps || []).length);

            renderAINewMilestones(data.new_milestones || []);
            renderAIStatusUpdates(data.status_updates || []);
            renderAIGaps(data.gaps || []);
        } else {
            document.getElementById('tabNew').innerHTML = '<div class="empty-state">Błąd: ' + (data.error || 'Nieznany') + '</div>';
        }
    } catch (error) {
        document.getElementById('tabNew').innerHTML = '<div class="empty-state">Błąd połączenia: ' + error + '</div>';
    }
}

function updateBadge(id, count) {
    const badge = document.getElementById(id);
    badge.textContent = count;
    badge.className = count > 0 ? 'ai-tab-badge' : 'ai-tab-badge zero';
}

function switchAITab(tab) {
    document.querySelectorAll('.ai-tab').forEach(t => t.classList.remove('active'));
    document.querySelectorAll('.ai-tab-content').forEach(t => t.classList.remove('active'));

    const tabs = {new: 0, updates: 1, gaps: 2};
    document.querySelectorAll('.ai-tab')[tabs[tab]].classList.add('active');
    document.getElementById('tab' + tab.charAt(0).toUpperCase() + tab.slice(1)).classList.add('active');
}

const statusLabelsAI = {planned: 'Planowane', in_progress: 'W trakcie', completed: 'Zakończone', delayed: 'Opóźnione'};
const categoryLabelsAI = {nuclear: 'Energia jądrowa', offshore: 'Offshore', infrastructure: 'Infrastruktura', defense: 'Obronność', other: 'Inne'};

function renderAINewMilestones(items) {
    if (items.length === 0) {
        document.getElementById('tabNew').innerHTML = '<div class="empty-state">AI nie znalazło nowych kandydatów na kamienie milowe</div>';
        return;
    }

    const html = items.map((item, idx) => `
        <div class="suggestion-card" id="ai-new-${idx}">
            <div class="suggestion-text">${escapeHtml(item.full_text || item.reason || '')}</div>
            <div class="suggestion-meta">
                <span>Kategoria: ${categoryLabelsAI[item.category] || item.category}</span>
                <span>Status: ${statusLabelsAI[item.status] || item.status}</span>
                ${item.target_date ? '<span>Data: ' + item.target_date + '</span>' : ''}
                ${item.news_title ? '<span>Źródło: ' + escapeHtml(item.news_title) + '</span>' : ''}
            </div>
            <div class="suggestion-meta" style="margin-bottom: var(--spacing-xs);"><em>AI: ${escapeHtml(item.reason || '')}</em></div>
            <div class="suggestion-actions">
                <input type="text" class="suggestion-input" id="ai-new-title-${idx}" value="${escapeHtml(item.title)}" placeholder="Tytuł">
                <select id="ai-new-cat-${idx}" style="padding: 6px; border-radius: var(--radius);">
                    <option value="nuclear" ${item.category === 'nuclear' ? 'selected' : ''}>Energia jądrowa</option>
                    <option value="offshore" ${item.category === 'offshore' ? 'selected' : ''}>Offshore</option>
                    <option value="infrastructure" ${item.category === 'infrastructure' ? 'selected' : ''}>Infrastruktura</option>
                    <option value="defense" ${item.category === 'defense' ? 'selected' : ''}>Obronność</option>
                    <option value="other" ${item.category === 'other' ? 'selected' : ''}>Inne</option>
                </select>
                <button class="btn btn-success btn-sm" onclick="approveAINew(${idx})">Dodaj</button>
            </div>
        </div>
    `).join('');

    document.getElementById('tabNew').innerHTML = html;
}

function renderAIStatusUpdates(items) {
    if (items.length === 0) {
        document.getElementById('tabUpdates').innerHTML = '<div class="empty-state">AI nie znalazło potrzebnych aktualizacji statusu</div>';
        return;
    }

    const html = items.map((item, idx) => `
        <div class="update-card" id="ai-update-${idx}">
            <div style="font-weight: 600; margin-bottom: var(--spacing-xs);">${escapeHtml(item.milestone_title || 'Milestone #' + item.milestone_id)}</div>
            <div class="suggestion-meta">
                <span class="status-arrow">
                    <span class="timeline-badge status-${item.current_status}">${statusLabelsAI[item.current_status]}</span>
                    &rarr;
                    <span class="timeline-badge status-${item.suggested_status}">${statusLabelsAI[item.suggested_status]}</span>
                </span>
                ${item.milestone_category ? '<span>Kategoria: ' + (categoryLabelsAI[item.milestone_category] || item.milestone_category) + '</span>' : ''}
            </div>
            <div class="suggestion-meta"><em>AI: ${escapeHtml(item.reason || '')}</em></div>
            <div class="suggestion-actions" style="margin-top: var(--spacing-sm);">
                <button class="btn btn-success btn-sm" onclick="applyStatusUpdate(${idx})">Zastosuj zmianę</button>
                <button class="btn btn-sm" onclick="skipUpdate(${idx})">Pomiń</button>
            </div>
        </div>
    `).join('');

    document.getElementById('tabUpdates').innerHTML = html;
}

function renderAIGaps(items) {
    if (items.length === 0) {
        document.getElementById('tabGaps').innerHTML = '<div class="empty-state">AI nie zidentyfikowało braków w roadmapie</div>';
        return;
    }

    const html = items.map((item, idx) => `
        <div class="gap-card" id="ai-gap-${idx}">
            <div style="font-weight: 600; margin-bottom: var(--spacing-xs);">${escapeHtml(item.suggested_title)}</div>
            <div class="suggestion-text">${escapeHtml(item.description)}</div>
            <div class="suggestion-meta">
                <span>Kategoria: ${categoryLabelsAI[item.category] || item.category}</span>
            </div>
            <div class="suggestion-meta"><em>AI: ${escapeHtml(item.reason || '')}</em></div>
            <div class="suggestion-actions" style="margin-top: var(--spacing-sm);">
                <input type="text" class="suggestion-input" id="ai-gap-title-${idx}" value="${escapeHtml(item.suggested_title)}" placeholder="Tytuł">
                <button class="btn btn-success btn-sm" onclick="createFromGap(${idx})">Utwórz</button>
                <button class="btn btn-sm" onclick="skipGap(${idx})">Pomiń</button>
            </div>
        </div>
    `).join('');

    document.getElementById('tabGaps').innerHTML = html;
}

async function approveAINew(idx) {
    const item = aiData.new_milestones[idx];
    if (!item) return;

    const title = document.getElementById('ai-new-title-' + idx).value;
    const category = document.getElementById('ai-new-cat-' + idx).value;

    const body = {
        title: title,
        description: item.full_text || item.reason,
        category: category,
        target_date: item.target_date || null,
        status: item.status || 'planned',
        source_url: item.news_url || null,
        source_news_id: item.source_news_id || null
    };

    // If fact_id exists, use suggestion approve endpoint
    if (item.fact_id) {
        body.fact_id = item.fact_id;
        try {
            const response = await fetch('/admin/zopk-api/timeline/suggestions/approve', {
                method: 'POST',
                headers: {'Content-Type': 'application/json', 'X-CSRFToken': '{{ csrf_token() }}'},
                body: JSON.stringify(body)
            });
            const result = await response.json();
            if (result.success) {
                showToast('success', 'Dodano: ' + title);
                document.getElementById('ai-new-' + idx).classList.add('approved');
                loadMilestones();
            } else {
                showToast('error', 'Błąd: ' + result.error);
            }
        } catch (error) {
            showToast('error', 'Błąd: ' + error);
        }
    } else {
        // Create directly
        try {
            const response = await fetch('/admin/zopk-api/milestones', {
                method: 'POST',
                headers: {'Content-Type': 'application/json', 'X-CSRFToken': '{{ csrf_token() }}'},
                body: JSON.stringify(body)
            });
            const result = await response.json();
            if (result.success) {
                showToast('success', 'Dodano: ' + title);
                document.getElementById('ai-new-' + idx).classList.add('approved');
                loadMilestones();
            } else {
                showToast('error', 'Błąd: ' + result.error);
            }
        } catch (error) {
            showToast('error', 'Błąd: ' + error);
        }
    }
}

async function applyStatusUpdate(idx) {
    const item = aiData.status_updates[idx];
    if (!item) return;

    try {
        const response = await fetch('/admin/zopk-api/milestones/' + item.milestone_id + '/status', {
            method: 'PATCH',
            headers: {'Content-Type': 'application/json', 'X-CSRFToken': '{{ csrf_token() }}'},
            body: JSON.stringify({status: item.suggested_status})
        });
        const result = await response.json();
        if (result.success) {
            showToast('success', 'Status zmieniony: ' + (item.milestone_title || '#' + item.milestone_id));
            document.getElementById('ai-update-' + idx).classList.add('approved');
            loadMilestones();
        } else {
            showToast('error', 'Błąd: ' + result.error);
        }
    } catch (error) {
        showToast('error', 'Błąd: ' + error);
    }
}

function skipUpdate(idx) {
    document.getElementById('ai-update-' + idx).remove();
}

async function createFromGap(idx) {
    const item = aiData.gaps[idx];
    if (!item) return;

    const title = document.getElementById('ai-gap-title-' + idx).value;

    try {
        const response = await fetch('/admin/zopk-api/milestones', {
            method: 'POST',
            headers: {'Content-Type': 'application/json', 'X-CSRFToken': '{{ csrf_token() }}'},
            body: JSON.stringify({
                title: title,
                description: item.description,
                category: item.category || 'other',
                status: 'planned'
            })
        });
        const result = await response.json();
        if (result.success) {
            showToast('success', 'Utworzono: ' + title);
            document.getElementById('ai-gap-' + idx).classList.add('approved');
            loadMilestones();
        } else {
            showToast('error', 'Błąd: ' + result.error);
        }
    } catch (error) {
        showToast('error', 'Błąd: ' + error);
    }
}

function skipGap(idx) {
    document.getElementById('ai-gap-' + idx).remove();
}

function closeAIModal() {
    document.getElementById('aiAnalysisModal').classList.remove('active');
}

// Init
loadMilestones();
{% endblock %}
