{% extends "base.html" %}
{% block title %}Личный кабинет{% endblock %}
{% block content %}
<div class="profile-container">

    <!-- User Info -->
    <div class="profile-header">
        <div class="user-info">
            <div class="user-avatar">
                <img src="{{ url_for('static', filename='avatars/' ~ current_user.avatar) }}" alt="Avatar"
                     class="avatar-img">
            </div>
            <div class="user-details">
                <h2>Логин: {{ current_user.username }}</h2>
                <p>Почта: {{ current_user.email }}</p>
                <a href="{{ url_for('edit_profile') }}" class="btn btn-primary edit-profile-btn">
                    <i class="fas fa-user-edit"></i> Редактировать профиль
                </a>
            </div>
        </div>
        <div class="stats-cards">
            <div class="stat-card">
                <div class="stat-icon"><i class="fas fa-chart-bar"></i></div>
                <div class="stat-content">
                    <h3>Всего анализов</h3>
                    <p class="stat-value">{{ total_reports }}</p>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon"><i class="fas fa-smile"></i></div>
                <div class="stat-content">
                    <h3>Преобладающая эмоция</h3>
                    <p class="stat-value">{{ emotion_map.get(most_common_emotion, most_common_emotion) }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Reports History -->
    <div class="reports-section">
        <h3 class="section-title"><i class="fas fa-history"></i> История анализов</h3>

        {% if reports %}
        <div class="reports-list" id="reports-list">
            {% set page_size = 6 %}
            {% set current_page = request.args.get('page', default='1') | int %}
            {% set start_index = (current_page - 1) * page_size %}
            {% set end_index = [start_index + page_size, reports|length] | min %}

            {% for report in reports[start_index:end_index] %}
            <div class="report-card">
                <div class="report-header">
                <span class="report-date">
                    {{ report['created_at'] if report['created_at'] is string else report['created_at'].strftime('%d.%m.%Y %H:%M') }}
                </span>
                    <span class="report-emotion {{ report['emotion'] }}">
                    {{ emotion_map.get(report['emotion'], report['emotion']) }}
                </span>
                </div>
                <div class="report-content">
                    <p>{{ report['content'][:200] }}{% if report['content']|length > 200 %}...{% endif %}</p>
                </div>
                <div class="report-footer">
                    <div class="confidence-meter">
                        <div class="confidence-fill" style="width: {{ (report['confidence'] * 100)|round(1) }}%"></div>
                    </div>
                    <span class="confidence-value">{{ (report['confidence'] * 100)|round(1) }}%</span>
                </div>
            </div>
            {% endfor %}
        </div>

        <!-- Пагинация -->
        {% if reports|length > page_size %}
        <div class="pagination">
            {% set total_pages = (reports|length / page_size)|round(0, 'ceil')|int %}

            <!-- Кнопка "Назад" -->
            <a href="?page={{ current_page - 1 }}" class="pagination-btn {% if current_page == 1 %}disabled{% endif %}">&laquo;
                Назад</a>

            <!-- Номера страниц -->
            {% for i in range(1, total_pages + 1) %}
            <a href="?page={{ i }}" class="pagination-btn {% if current_page == i %}active{% endif %}">{{ i }}</a>
            {% endfor %}

            <!-- Кнопка "Вперед" -->
            <a href="?page={{ current_page + 1 }}"
               class="pagination-btn {% if current_page >= total_pages %}disabled{% endif %}">Вперед &raquo;</a>
        </div>
        {% endif %}
        {% else %}
        <div class="empty-state">
            <i class="fas fa-comment-slash"></i>
            <h4>У вас пока нет анализов</h4>
            <p>Начните использовать систему на главной странице</p>
            <a href="{{ url_for('index') }}" class="btn-primary">
                <i class="fas fa-arrow-right"></i> Перейти к анализу
            </a>
        </div>
        {% endif %}
    </div>

    <!-- Telegram Analysis Section -->
    <div class="telegram-analysis-section">
        <h3 class="section-title"><i class="fab fa-telegram"></i> Анализ Telegram чатов</h3>
        <div class="chat-import-section">
            <form id="telegram-upload-form" enctype="multipart/form-data">
                <div class="file-upload">
                    <label for="telegram-file" class="file-upload-btn">
                        <i class="fas fa-file-import"></i> Выбрать файл чата
                    </label>
                    <input type="file" id="telegram-file" accept=".json" required/>
                    <div class="file-info" style="display: none;">
                        <span id="selected-file-name">Файл не выбран</span>
                        <button type="button" id="clear-file" class="clear-file-btn">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    <button type="submit" class="btn-primary mt-3">
                        <i class="fas fa-chart-bar"></i> Анализировать
                    </button>
                </div>
                <p class="hint">Экспортируйте чат через Telegram Desktop (JSON format)</p>
            </form>

        </div>

        <!-- Фильтры -->
        <div class="chart-header">
            <h4><i class="fas fa-chart-line"></i> Изменение эмоционального фона</h4>
            <div class="time-filter">
                <button class="time-btn active" data-range="week">Неделя</button>
                <button class="time-btn" data-range="month">Месяц</button>
                <button class="time-btn" data-range="year">Год</button>
                <button class="time-btn" data-range="all">Все время</button>
            </div>
            <div class="user-filter">
                <label for="user-select" style="color: white;"><i class="fas fa-user-friends"></i> Участник:</label>
                <select id="user-select" class="form-control">
                    <option value="all">Все участники</option>
                </select>
            </div>
        </div>

        <!-- Блок автоматического анализа -->
        <div id="analysis-summary" class="analysis-summary">
            <h4><i class="fas fa-lightbulb"></i> Автоматический анализ</h4>
            <ul id="summary-content"></ul>
        </div>

        <!-- Основной график -->
        <div class="chart-container" id="emotion-timeline"></div>

        <!-- Тепловая карта -->
        <div class="chart-container" id="calendar-heatmap"></div>

        <!-- Дополнительная статистика -->
        <div class="chart-row">
            <div class="chart-col">
                <h4><i class="fas fa-chart-pie"></i> Распределение эмоций</h4>
                <div class="chart-container" id="emotion-distribution-pie"></div>
            </div>
            <div class="chart-col">
                <h4><i class="fas fa-percentage"></i> Статистика по эмоциям</h4>
                <div class="emotion-stats" id="emotion-distribution"></div>
            </div>
        </div>
    </div>
</div>


<!-- Plotly -->
<script src="https://cdn.plot.ly/plotly-2.24.1.min.js "></script>

<!-- Main Script -->
<script src="{{ url_for('static', filename='script.js') }}"></script>

<!-- File upload handler -->
<script>
    const telegramFileInput = document.getElementById('telegram-file');
    if (telegramFileInput) {
        telegramFileInput.addEventListener('change', function(e) {
            const fileName = e.target.files[0]?.name || 'Файл не выбран';
            const selectedFileName = document.getElementById('selected-file-name');
            const fileInfo = document.querySelector('.file-info');

            if (selectedFileName) {
                selectedFileName.textContent = fileName;
            }
            if (fileInfo) {
                fileInfo.style.display = 'flex';
            }
        });
    }
</script>

<style>
    .edit-profile-btn {
        display: inline-flex;
        align-items: center;
        font-size: 0.85rem;
        padding: 5px 10px;
        border-radius: 5px;
    }

    .edit-profile-btn i {
        font-size: 0.9rem;
        margin-right: 6px;
    }

        .avatar-img {
        width: 100px;
        height: 100px;
        border-radius: 10%;
        object-fit: cover;
    }
        .detailed-analysis {
        margin-top: 10px;
        padding: 10px;
        background: rgba(255,255,255,0.05);
        border-radius: 8px;
    }

    .detailed-analysis-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
    }

    .emotion-bar {
        height: 8px;
        background: rgba(255,255,255,0.1);
        border-radius: 4px;
        margin-top: 3px;
    }

    .emotion-fill {
        height: 100%;
        border-radius: 4px;
    }

    .advice-box {
        margin-top: 10px;
        padding: 10px;
        background: rgba(74, 74, 232, 0.1);
        border-left: 3px solid var(--primary-color);
        font-style: italic;
    }

    .pagination {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 20px;
        flex-wrap: wrap;
    }
    .pagination-btn {
        padding: 8px 12px;
        border-radius: 4px;
        background: #3c3c5a;
        color: white;
        text-decoration: none;
        transition: 0.2s;
    }
    .pagination-btn:hover:not(.disabled):not(.active) {
        background: #5a5a7e;
    }
    .pagination-btn.active {
        background: #6c63ff;
        font-weight: bold;
        color: #fff;
    }
    .pagination-btn.disabled {
        opacity: 0.5;
        pointer-events: none;
    }

        /* В секции style в profile.html */
    .chat-controls {
        margin: 15px 0;
        display: flex;
        gap: 10px;
    }

    .btn-danger {
        background-color: #d63031;
        color: white;
        border: none;
        padding: 8px 15px;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.2s;
    }

    .btn-danger:hover {
        background-color: #ff4757;
    }

        .report-emotion.anger {
        color: #d63031; /* Красный для злости */
    }
    .report-emotion.joy {
        color: #00b894; /* Зеленый для радости */
    }
    .report-emotion.sadness {
        color: #0984e3; /* Синий для грусти */
    }
    .report-emotion.surprise {
        color: #fdcb6e; /* Желтый для удивления */
    }
    .report-emotion.fear {
        color: #a29bfe; /* Фиолетовый для страха */
    }
    .report-emotion.neutral {
        color: #636e72; /* Серый для нейтрального */
    }

        .report-emotion.no_emotion {
        color: #636e72; /* Серый цвет для нейтрального состояния */
    }
</style>

{% endblock %}