{% extends "base.html" %}

{% block title %}Focus · Steady{% endblock %}

{% block content %}
{% if celebrate %}
<div class="celebration" role="status" data-celebrate="true" data-chime="{{ 'true' if current_user.completion_chime else 'false' }}">
    <span class="celebration__mark" aria-hidden="true">✓</span>
    <div>
        <h1>That step is complete</h1>
        <p>Pause for a moment. Progress still counts without perfection.</p>
    </div>
</div>
{% endif %}

<div class="focus-heading">
    <div>
        <p class="eyebrow">One primary action</p>
        <h1>Focus Mode</h1>
    </div>
    <aside class="streak-card" aria-label="Forgiving completion streak">
        <strong>{{ streak.days }} steady {{ 'day' if streak.days == 1 else 'days' }}</strong>
        {% if streak.freeze_used %}
            <span>A rest day was protected.</span>
        {% elif streak.days == 0 %}
            <span>Any completion can begin again.</span>
        {% else %}
            <span>No pressure to be perfect.</span>
        {% endif %}
    </aside>
</div>

{% if task %}
<article class="focus-task" aria-labelledby="focus-task-title">
    <div class="task-card__header">
        <div>
            <span class="badge badge--{{ task.priority }}">{{ task.priority|capitalize }}</span>
            <span class="status">{{ task.status|replace('_', ' ')|title }}</span>
        </div>
        {% if task.due_date %}
            <time datetime="{{ task.due_date.isoformat() }}">Due {{ task.due_date.strftime('%d %b, %H:%M') }}</time>
        {% endif %}
    </div>
    <h2 id="focus-task-title">{{ task.title }}</h2>
    {% if task.description %}<p class="task-description">{{ task.description }}</p>{% endif %}

    {% if task.context %}
    <aside class="context-cue">
        <strong>Helpful context</strong>
        <span>{{ task.context }}</span>
        <small>Context reminder automation will arrive in a later integration.</small>
    </aside>
    {% endif %}

    {% if task.timer_seconds %}
    <section class="timer" aria-labelledby="timer-heading"
             data-focus-timer data-task-id="{{ task.id }}"
             data-duration="{{ task.timer_seconds }}"
             data-chime="{{ 'true' if current_user.completion_chime else 'false' }}">
        <h3 id="timer-heading">Visual countdown</h3>
        <output class="timer__display" aria-live="off">{{ '%02d:%02d'|format(task.timer_seconds // 60, task.timer_seconds % 60) }}</output>
        <progress class="timer__progress" max="{{ task.timer_seconds }}" value="{{ task.timer_seconds }}" aria-label="Countdown remaining"></progress>
        <p class="timer__announcement visually-hidden" aria-live="polite"></p>
        <div class="timer__actions">
            <button class="button" type="button" data-timer-start>Start</button>
            <button class="button button--quiet" type="button" data-timer-pause>Pause</button>
            <button class="button button--quiet" type="button" data-timer-reset>Reset</button>
        </div>
    </section>
    {% endif %}

    {% if task.chunk_sessions %}
    <section aria-labelledby="blocks-heading">
        <h3 id="blocks-heading">Focus blocks</h3>
        <ol class="chunk-list">
            {% for session in task.chunk_sessions %}
            <li class="chunk {% if session.completed %}chunk--done{% endif %}">
                <form method="post" action="{{ url_for('tasks.toggle_focus_chunk', task_id=task.id, chunk_index=loop.index0) }}">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <button type="submit" aria-label="Mark {{ session.minutes }} minute block as {{ 'not completed' if session.completed else 'completed' }}">
                        <span aria-hidden="true">{{ '✓' if session.completed else loop.index }}</span>
                        <span>{{ session.minutes }} min</span>
                    </button>
                </form>
            </li>
            {% endfor %}
        </ol>
    </section>
    {% endif %}

    <div class="focus-task__actions">
        <form method="post" action="{{ url_for('tasks.complete', task_id=task.id) }}">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <button class="button button--complete" type="submit">Mark this task complete</button>
        </form>
        <a href="{{ url_for('tasks.detail', task_id=task.id) }}">View all details</a>
    </div>
</article>

<details class="focus-settings">
    <summary>Adjust focus setup</summary>
    <form method="post" action="{{ url_for('tasks.update_focus_settings', task_id=task.id) }}">
        {{ focus_form.hidden_tag() }}
        <div class="field">
            {{ focus_form.timer_minutes.label }}
            {{ focus_form.timer_minutes(min=1, max=180, inputmode="numeric") }}
            <p class="field__help">Optional. Choose 1–180 minutes.</p>
        </div>
        <div class="field">
            {{ focus_form.context.label }}
            {{ focus_form.context(placeholder="For example: at my desk with headphones") }}
            <p class="field__help">A visible cue only; no automatic location tracking.</p>
        </div>
        <div class="field">
            {{ focus_form.chunk_plan.label }}
            {{ focus_form.chunk_plan(placeholder="5, 5, 10") }}
            <p class="field__help">Comma-separated minutes, with at most 12 blocks.</p>
        </div>
        {{ focus_form.submit(class="button") }}
    </form>
</details>
{% else %}
<section class="empty-state focus-empty">
    <h2>Your focus space is clear</h2>
    <p>There is no current task to surface. Rest or capture one small next step.</p>
    <a class="button" href="{{ url_for('tasks.create') }}">Add a task</a>
</section>
{% endif %}
{% endblock %}