{% extends "base.html" %}
{% block title %}Профиль — Morozovka Portal{% endblock %}
{% block main_class %}container container-narrow{% endblock %}

{% block head %}
<style>
.profile-card { background: #161b22; border: 1px solid #30363d; border-radius: 10px; padding: 20px; margin-bottom: 20px; }
.profile-card h2 { color: #58a6ff; margin-top: 0; font-size: 1.3rem; }
.profile-card h3 { color: #e6edf3; margin-top: 0; font-size: 1.1rem; }
.field { margin-bottom: 15px; border-bottom: 1px solid #30363d; padding-bottom: 10px; }
.field:last-of-type { border-bottom: none; }
.label { color: #8b949e; font-size: 0.8rem; text-transform: uppercase; }
.value { font-size: 1.1rem; font-family: monospace; }
.btn-sessions { display: inline-block; padding: 8px 15px; background: #21262d; border: 1px solid #30363d; border-radius: 5px; color: #e6edf3; text-decoration: none; }
.btn-sessions:hover { background: #30363d; text-decoration: none; }
.profile-actions { margin-top: 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.profile-actions a { color: #58a6ff; text-decoration: none; }
.profile-actions a:hover { text-decoration: underline; }

.sub-status { padding: 12px 15px; border-radius: 6px; margin-bottom: 15px; font-size: .9rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sub-active { background: rgba(63,185,80,.15); border: 1px solid #238636; color: #3fb950; }
.sub-none { background: rgba(139,148,158,.15); border: 1px solid #8b949e; color: #8b949e; }
.sub-badge { font-size: .75rem; padding: 2px 8px; border-radius: 10px; background: rgba(63,185,80,.25); border: 1px solid #238636; color: #3fb950; }
.sub-form { display: flex; flex-direction: column; gap: 12px; }
.sub-checkbox { display: flex; align-items: center; gap: 8px; color: #c9d1d9; font-size: .9rem; cursor: pointer; }
.sub-checkbox input { width: 16px; height: 16px; }
.btn-primary { background: #238636; color: #fff; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-weight: bold; }
.btn-primary:hover { background: #2ea043; }
.btn-danger { background: #da3633; color: #fff; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-weight: 600; }
.btn-danger:hover { background: #f85149; }
.muted { color: #8b949e; font-size: .85rem; line-height: 1.5; }
</style>
{% endblock %}

{% block content %}
<div class="profile-card">
    <h2>Личный кабинет</h2>
    <div class="field">
        <div class="label">Логин</div>
        <div class="value">{{ user.username }}</div>
    </div>
    <div class="field">
        <div class="label">ФИО</div>
        <div class="value">{{ user.full_name or 'Не указано' }}</div>
    </div>
    <div class="field">
        <div class="label">Email</div>
        <div class="value">{{ user.email or 'Не указано' }}
            {% if user.is_verified %}<span style="color: #3fb950; font-size: 0.8rem;">✓ Подтвержден</span>{% endif %}
        </div>
    </div>
    <div class="field">
        <div class="label">Организация</div>
        <div class="value">{{ user.organization or 'Не указана' }}</div>
    </div>
    <div class="field">
        <div class="label">Роль в системе</div>
        <div class="value">{{ user.role }}</div>
    </div>
    <div class="field">
        <div class="label">Тур по платформе</div>
        <div class="value">
            {% if onboarding and onboarding.completed_at %}
                ✅ Пройден
            {% elif onboarding %}
                ⏳ В процессе — <a href="/onboarding">продолжить</a>
            {% else %}
                <a href="/onboarding">Пройти</a>
            {% endif %}
        </div>
    </div>
    <div class="profile-actions">
        <div>
            <a href="/">← На главную</a> |
            <a href="/onboarding">🎯 Тур</a> |
            <a href="/logout" style="color: #f85149;">Выйти</a>
        </div>
        <a href="/sessions" class="btn-sessions">Безопасность (сессии)</a>
    </div>
</div>

<div class="profile-card">
    <h3>📬 Уведомления о расписании</h3>

    {% if not user.email %}
        <div class="sub-status sub-none">⚠ Укажите email в профиле, чтобы получать уведомления.</div>
    {% elif subscription and subscription.is_confirmed %}
        <div class="sub-status sub-active">
            <span>✅ Подписка активна</span>
            <span class="sub-badge">{{ user.email }}</span>
        </div>
        <form method="POST" action="/subscribe/toggle" class="sub-form">
            <input type="hidden" name="action" value="unsubscribe">
            <input type="hidden" name="next" value="/profile">
            <label class="sub-checkbox">
                <input type="checkbox" name="notify_status" {% if subscription.notify_status %}checked{% endif %} disabled>
                Изменения статуса (опаздываю / на месте / отменено)
            </label>
            <label class="sub-checkbox">
                <input type="checkbox" name="notify_events" {% if subscription.notify_events %}checked{% endif %} disabled>
                Изменения событий в расписании
            </label>
            <div>
                <button type="submit" class="btn-danger">Отписаться</button>
            </div>
        </form>
        <p class="muted" style="margin-top: 12px;">
            Отписаться можно в один клик. Повторная подписка тоже в один клик — никаких подтверждений по почте.
        </p>
    {% else %}
        <div class="sub-status sub-none">Вы пока не подписаны на уведомления</div>
        <form method="POST" action="/subscribe/toggle" class="sub-form">
            <input type="hidden" name="action" value="subscribe">
            <input type="hidden" name="next" value="/profile">
            <label class="sub-checkbox">
                <input type="checkbox" name="notify_status" checked>
                Уведомлять об изменениях статуса
            </label>
            <label class="sub-checkbox">
                <input type="checkbox" name="notify_events" checked>
                Уведомлять об изменениях в расписании
            </label>
            <div>
                <button type="submit" class="btn-primary">Подписаться на {{ user.email }}</button>
            </div>
        </form>
        <p class="muted" style="margin-top: 12px;">
            Email берётся из вашего аккаунта — подтверждение не требуется.
        </p>
    {% endif %}
</div>
{% endblock %}