{% extends "base.html" %}

{% block title %}Мои отчёты - DataAudit Platform{% endblock %}

{% block content %}
<div class="page-content">

<div class="page-content">
    <div class="page-description">
        <p>Сохраняйте ссылки на часто используемые отчёты из DataMax, SharePoint, Superset и других систем.</p>
    </div>

    <!-- Reports Grid -->
    <div id="reports-grid" class="reports-grid">
        <!-- Loaded via JS -->
    </div>

    <!-- Empty State -->
    <div id="empty-state" class="empty-state" style="display: none;">
        <div class="empty-icon">
            <i data-lucide="bookmark" style="width: 64px; height: 64px; color: #d1d5db;"></i>
        </div>
        <h3>Нет сохранённых отчётов</h3>
        <p>Добавьте ссылки на часто используемые отчёты</p>
        <button class="btn btn-primary" onclick="openAddModal()">
            <i data-lucide="plus" style="width: 18px; height: 18px;"></i>
            Добавить отчёт
        </button>
    </div>

    <!-- Loading State -->
    <div id="loading-state" class="loading-placeholder">
        <p>Загрузка...</p>
    </div>
</div>

<!-- Add/Edit Modal -->
<div id="report-modal" class="modal" style="display: none;">
    <div class="modal-overlay" onclick="closeModal()"></div>
    <div class="modal-content">
        <div class="modal-header">
            <h2 id="modal-title">Добавить отчёт</h2>
            <button class="modal-close" onclick="closeModal()">
                <i data-lucide="x" style="width: 20px; height: 20px;"></i>
            </button>
        </div>
        <form id="report-form" onsubmit="saveReport(event)">
            <input type="hidden" id="report-id" value="">
            <div class="form-group">
                <label for="report-title">Название <span class="required">*</span></label>
                <input type="text" id="report-title" name="title" required maxlength="255" 
                       placeholder="Например: Отчёт по рискам Q4">
            </div>
            <div class="form-group">
                <label for="report-url">Ссылка <span class="required">*</span></label>
                <input type="url" id="report-url" name="url" required 
                       placeholder="https://...">
            </div>
            <div class="form-group">
                <label for="report-description">Описание</label>
                <textarea id="report-description" name="description" rows="2" maxlength="500"
                          placeholder="Краткое описание отчёта"></textarea>
            </div>
            <div class="modal-actions">
                <button type="button" class="btn btn-secondary" onclick="closeModal()">Отмена</button>
                <button type="submit" class="btn btn-primary" id="submit-btn">Добавить</button>
            </div>
        </form>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div id="delete-modal" class="modal" style="display: none;">
    <div class="modal-overlay" onclick="closeDeleteModal()"></div>
    <div class="modal-content modal-small">
        <div class="modal-header">
            <h2>Удалить отчёт?</h2>
            <button class="modal-close" onclick="closeDeleteModal()">
                <i data-lucide="x" style="width: 20px; height: 20px;"></i>
            </button>
        </div>
        <div class="modal-body">
            <p>Вы уверены, что хотите удалить отчёт "<span id="delete-report-name"></span>"?</p>
        </div>
        <div class="modal-actions">
            <button type="button" class="btn btn-secondary" onclick="closeDeleteModal()">Отмена</button>
            <button type="button" class="btn btn-danger" onclick="confirmDelete()">Удалить</button>
        </div>
    </div>
</div>

<style>
/* Page Header */
.page-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-description {
    margin-bottom: 2rem;
    color: var(--color-text-secondary);
}

/* Reports Grid */
.reports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

/* Report Card */
.report-card {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.report-card:hover {
    border-color: var(--color-primary-light);
    box-shadow: 0 2px 8px rgba(30, 64, 175, 0.1);
}

.report-card-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.report-card-icon {
    width: 40px;
    height: 40px;
    background: #eff6ff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.report-card-icon svg {
    width: 20px;
    height: 20px;
    color: var(--color-primary);
}

.report-card-title {
    flex: 1;
    min-width: 0;
}

.report-card-title h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.report-card-description {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-bottom: 1rem;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.report-card-actions {
    display: flex;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.report-card-actions .btn {
    flex: 1;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--color-text-secondary);
}

.empty-state h3 {
    margin: 1rem 0 0.5rem;
    color: var(--color-text);
}

.empty-state p {
    margin-bottom: 1.5rem;
}

/* Loading */
.loading-placeholder {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--color-text-secondary);
}

/* Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.modal-content {
    position: relative;
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 500px;
    margin: 1rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.modal-small {
    max-width: 400px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.modal-header h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-secondary);
    padding: 0.25rem;
    border-radius: 4px;
    transition: background 0.2s;
}

.modal-close:hover {
    background: var(--color-bg-secondary);
}

.modal-body {
    padding: 1.5rem;
}

#report-form {
    padding: 1.5rem;
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.875rem;
}

.form-group .required {
    color: #dc2626;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--color-border);
    background: #f9fafb;
    border-radius: 0 0 12px 12px;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s;
    text-decoration: none;
}

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

.btn-primary:hover {
    background: var(--color-primary-dark);
}

.btn-secondary {
    background: white;
    border-color: var(--color-border);
    color: var(--color-text);
}

.btn-secondary:hover {
    background: var(--color-bg-secondary);
}

.btn-danger {
    background: #dc2626;
    color: white;
}

.btn-danger:hover {
    background: #b91c1c;
}

.btn-sm {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
}

.btn-icon {
    padding: 0.5rem;
}
</style>

<script>
let reports = [];
let deleteTargetId = null;

document.addEventListener('DOMContentLoaded', function() {
    loadReports();
});

async function loadReports() {
    const grid = document.getElementById('reports-grid');
    const emptyState = document.getElementById('empty-state');
    const loadingState = document.getElementById('loading-state');
    
    try {
        const response = await fetch('/api/my-reports');
        const data = await response.json();
        
        loadingState.style.display = 'none';
        
        if (data.error) {
            grid.innerHTML = '<p class="error">Ошибка загрузки</p>';
            return;
        }
        
        reports = data.reports || [];
        
        if (reports.length === 0) {
            grid.style.display = 'none';
            emptyState.style.display = 'block';
            lucide.createIcons();
            return;
        }
        
        grid.style.display = 'grid';
        emptyState.style.display = 'none';
        
        grid.innerHTML = reports.map(report => `
            <div class="report-card" data-id="${report.id}">
                <div class="report-card-header">
                    <div class="report-card-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                            <polyline points="14 2 14 8 20 8"></polyline>
                            <line x1="16" y1="13" x2="8" y2="13"></line>
                            <line x1="16" y1="17" x2="8" y2="17"></line>
                            <polyline points="10 9 9 9 8 9"></polyline>
                        </svg>
                    </div>
                    <div class="report-card-title">
                        <h3 title="${escapeHtml(report.title)}">${escapeHtml(report.title)}</h3>
                    </div>
                </div>
                ${report.description ? `<div class="report-card-description">${escapeHtml(report.description)}</div>` : '<div class="report-card-description" style="color: #9ca3af; font-style: italic;">Без описания</div>'}
                <div class="report-card-actions">
                    <a href="${escapeHtml(report.url)}" target="_blank" class="btn btn-primary btn-sm">Открыть</a>
                    <button class="btn btn-secondary btn-sm" onclick="editReport(${report.id})">Изменить</button>
                    <button class="btn btn-secondary btn-sm btn-icon" onclick="deleteReport(${report.id}, '${escapeHtml(report.title)}')" title="Удалить">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <polyline points="3 6 5 6 21 6"></polyline>
                            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                        </svg>
                    </button>
                </div>
            </div>
        `).join('');
        
    } catch (error) {
        console.error('Failed to load reports:', error);
        loadingState.innerHTML = '<p>Ошибка загрузки отчётов</p>';
    }
}

function openAddModal() {
    document.getElementById('modal-title').textContent = 'Добавить отчёт';
    document.getElementById('submit-btn').textContent = 'Добавить';
    document.getElementById('report-id').value = '';
    document.getElementById('report-form').reset();
    document.getElementById('report-modal').style.display = 'flex';
    document.getElementById('report-title').focus();
    lucide.createIcons();
}

function editReport(id) {
    const report = reports.find(r => r.id === id);
    if (!report) return;
    
    document.getElementById('modal-title').textContent = 'Редактировать отчёт';
    document.getElementById('submit-btn').textContent = 'Сохранить';
    document.getElementById('report-id').value = id;
    document.getElementById('report-title').value = report.title;
    document.getElementById('report-url').value = report.url;
    document.getElementById('report-description').value = report.description || '';
    document.getElementById('report-modal').style.display = 'flex';
    document.getElementById('report-title').focus();
    lucide.createIcons();
}

function closeModal() {
    document.getElementById('report-modal').style.display = 'none';
}

async function saveReport(event) {
    event.preventDefault();
    
    const id = document.getElementById('report-id').value;
    const data = {
        title: document.getElementById('report-title').value.trim(),
        url: document.getElementById('report-url').value.trim(),
        description: document.getElementById('report-description').value.trim() || null
    };
    
    const isEdit = !!id;
    const url = isEdit ? `/api/my-reports/${id}` : '/api/my-reports';
    const method = isEdit ? 'PUT' : 'POST';
    
    try {
        const response = await fetch(url, {
            method: method,
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(data)
        });
        
        if (response.ok) {
            closeModal();
            loadReports();
        } else {
            const error = await response.json();
            alert(error.detail || 'Ошибка сохранения');
        }
    } catch (error) {
        console.error('Save error:', error);
        alert('Ошибка сохранения');
    }
}

function deleteReport(id, title) {
    deleteTargetId = id;
    document.getElementById('delete-report-name').textContent = title;
    document.getElementById('delete-modal').style.display = 'flex';
    lucide.createIcons();
}

function closeDeleteModal() {
    document.getElementById('delete-modal').style.display = 'none';
    deleteTargetId = null;
}

async function confirmDelete() {
    if (!deleteTargetId) return;
    
    try {
        const response = await fetch(`/api/my-reports/${deleteTargetId}`, {
            method: 'DELETE'
        });
        
        if (response.ok) {
            closeDeleteModal();
            loadReports();
        } else {
            alert('Ошибка удаления');
        }
    } catch (error) {
        console.error('Delete error:', error);
        alert('Ошибка удаления');
    }
}

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

// Close modals on Escape key
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closeModal();
        closeDeleteModal();
    }
});
</script>
{% endblock %}