{% extends "layouts/mobile_base.twig" %}

{% set active_nav = 'tasks' %}
{% set net     = data.network ?? {} %}
{% set shops   = data.shops   ?? [] %}
{% set today_date = 'now' | date('Y-m-d') %}

{% block title %}{{ translations.tasks ?? 'Tasks' }}{% endblock %}
{% block page_title %}{{ translations.daily_tasks ?? 'Daily Tasks' }}{% endblock %}
{% block page_subtitle %}
    {{- date | date('l, d M Y') -}}
    {%- if date != today_date %}&nbsp;<span style="font-size:.68rem;background:#fff3cd;color:#856404;border-radius:8px;padding:1px 6px;font-weight:700;vertical-align:middle;">{{ translations.historical ?? 'historical' }}</span>{%- endif %}
{% endblock %}

{% block topbar_actions %}
<div class="d-flex align-items-center gap-1">
    {% set prev_date = date | date_modify('-1 day') | date('Y-m-d') %}
    <a href="{{ ROOT }}/tasks?date={{ prev_date }}"
       class="btn btn-sm btn-light rounded-circle p-0 d-flex align-items-center justify-content-center"
       style="width:32px;height:32px;">
        <i class="bi bi-chevron-left" style="font-size:.8rem;"></i>
    </a>

    <button type="button" class="btn btn-sm btn-light rounded-pill px-2"
            style="font-size:.75rem;font-weight:700;min-width:80px;"
            onclick="document.getElementById('taskDatePicker').showPicker()">
        <i class="bi bi-calendar3 me-1"></i>{{ date | date('d.m.Y') }}
    </button>
    <input type="date" id="taskDatePicker" value="{{ date }}" max="{{ today_date }}"
           style="position:absolute;opacity:0;pointer-events:none;width:0;height:0;"
           onchange="window.location.href='{{ ROOT }}/tasks?date='+this.value">

    {% set next_date = date | date_modify('+1 day') | date('Y-m-d') %}
    {% if next_date <= today_date %}
        <a href="{{ ROOT }}/tasks?date={{ next_date }}"
           class="btn btn-sm btn-light rounded-circle p-0 d-flex align-items-center justify-content-center"
           style="width:32px;height:32px;">
            <i class="bi bi-chevron-right" style="font-size:.8rem;"></i>
        </a>
    {% else %}
        <span class="btn btn-sm btn-light rounded-circle p-0 d-flex align-items-center justify-content-center disabled"
              style="width:32px;height:32px;opacity:.3;">
            <i class="bi bi-chevron-right" style="font-size:.8rem;"></i>
        </span>
    {% endif %}
    {% if date != today_date %}
        <a href="{{ ROOT }}/tasks" class="btn btn-sm btn-primary rounded-pill px-2"
           style="font-size:.72rem;font-weight:700;">{{ translations.today ?? 'Today' }}</a>
    {% endif %}
</div>
{% endblock %}

{% block head %}
<style>
    /* ── HERO ── */
    .tasks-hero {
        background: linear-gradient(135deg, #1b4332 0%, #2d6a4f 100%);
        border-radius: 20px; color: #fff;
        padding: 18px 20px; margin-bottom: 12px;
        position: relative; overflow: hidden;
    }
    .tasks-hero::before {
        content:''; position:absolute; top:-40px; right:-40px;
        width:160px; height:160px;
        background:rgba(255,255,255,.07); border-radius:50%;
    }
    .hero-rate {
        font-size: 2.6rem; font-weight: 900;
        letter-spacing: -.04em; line-height: 1;
    }
    .hero-label { font-size:.72rem; opacity:.65; text-transform:uppercase; letter-spacing:.06em; }
    .hero-pills { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
    .h-pill {
        display:inline-flex; align-items:center; gap:4px;
        padding:3px 10px; border-radius:20px;
        font-size:.72rem; font-weight:700;
        background:rgba(255,255,255,.12);
    }
    .h-pill.done    { background:rgba(52,199,89,.25);  color:#b7f5cc; }
    .h-pill.skipped { background:rgba(255,214,10,.2);  color:#ffe68a; }
    .h-pill.failed  { background:rgba(255,69,58,.25);  color:#ffb3ae; }

    /* ── PROGRESS ARC — CSS-only ── */
    .arc-wrap { position:relative; width:64px; height:64px; flex-shrink:0; }
    .arc-wrap svg { transform:rotate(-90deg); }
    .arc-bg   { fill:none; stroke:rgba(255,255,255,.15); stroke-width:7; }
    .arc-fill { fill:none; stroke-width:7; stroke-linecap:round; transition:stroke-dashoffset .6s ease; }
    .arc-text {
        position:absolute; inset:0;
        display:flex; align-items:center; justify-content:center;
        font-size:.78rem; font-weight:900; color:#fff;
    }

    /* ── SECTION TITLE ── */
    .section-title {
        font-size:.72rem; font-weight:700;
        text-transform:uppercase; letter-spacing:.08em;
        color:#6c757d; padding:10px 4px 6px;
    }

    /* ── SHOP TASK CARD ── */
    .stc {
        background:#fff; border-radius:16px;
        padding:14px 16px; margin-bottom:10px;
        box-shadow:0 2px 8px rgba(0,0,0,.06);
        display:block; text-decoration:none; color:inherit;
        transition: transform .12s, box-shadow .12s;
    }
    .stc:active { transform:scale(.98); box-shadow:0 1px 4px rgba(0,0,0,.08); color:inherit; }

    .stc-header { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
    .stc-rank {
        width:32px; height:32px; border-radius:10px;
        display:flex; align-items:center; justify-content:center;
        font-size:.82rem; font-weight:800; flex-shrink:0;
        background:#f2f7ff; color:#435ebe;
    }
    .stc-rank.gold   { background:#fff3cd; color:#856404; }
    .stc-rank.silver { background:#f0f0f0; color:#6c757d; }
    .stc-rank.bronze { background:#fde6d8; color:#a0522d; }

    .stc-name  { font-size:.92rem; font-weight:700; }
    .stc-city  { font-size:.72rem; color:#6c757d; }

    /* Pasek postępu */
    .prog-bar  { height:6px; border-radius:3px; background:#eef0f5; overflow:hidden; margin:8px 0 6px; }
    .prog-fill { height:100%; border-radius:3px; transition:width .5s ease; }
    .prog-fill.excellent { background:linear-gradient(90deg,#27ae60,#2ecc71); }
    .prog-fill.good      { background:linear-gradient(90deg,#f39c12,#f1c40f); }
    .prog-fill.bad       { background:linear-gradient(90deg,#e74c3c,#c0392b); }

    .stc-stats { display:flex; gap:10px; }
    .stc-stat  { flex:1; background:#f8f9fa; border-radius:10px; padding:7px 10px; }
    .stc-stat-val { font-size:.88rem; font-weight:800; }
    .stc-stat-lbl { font-size:.63rem; color:#6c757d; }

    .closed-badge {
        display:inline-flex; align-items:center; gap:4px;
        padding:2px 8px; border-radius:10px;
        font-size:.68rem; font-weight:700;
        background:#d1fae5; color:#065f46;
    }
    .open-badge {
        display:inline-flex; align-items:center; gap:4px;
        padding:2px 8px; border-radius:10px;
        font-size:.68rem; font-weight:700;
        background:#fef3c7; color:#92400e;
    }
    .mandatory-badge {
        display:inline-flex; align-items:center; gap:3px;
        padding:2px 7px; border-radius:10px;
        font-size:.65rem; font-weight:700;
        background:#fee2e2; color:#991b1b;
        margin-left:4px;
    }

    .empty-state { text-align:center; padding:40px 20px; color:#adb5bd; }
    .empty-state i { font-size:2.5rem; display:block; margin-bottom:8px; }
</style>
{% endblock %}

{% block content %}

{# ── PAGE LOAD SKELETON (znika natychmiast po załadowaniu DOM) ── #}
<div id="tasks-skeleton" aria-hidden="true">
    <div class="skeleton-hero" style="min-height:120px;"></div>
    <div class="skeleton-card"><div class="skeleton-line" style="width:40%;height:13px;"></div><div class="skeleton-line"></div><div class="skeleton-line" style="width:80%;"></div></div>
    <div class="skeleton-card"><div class="skeleton-line" style="width:40%;height:13px;"></div><div class="skeleton-line"></div><div class="skeleton-line" style="width:80%;"></div></div>
    <div class="skeleton-card"><div class="skeleton-line" style="width:40%;height:13px;"></div><div class="skeleton-line"></div><div class="skeleton-line" style="width:80%;"></div></div>
</div>

{# ── WŁAŚCIWA TREŚĆ (ukryta do gotowości DOM) ── #}
<div id="tasks-content" style="display:none;" class="page-content-loaded">

{# ──────────────── HERO: SIEĆ ──────────────── #}
{% set rate = net.completion_rate ?? null %}
{% set rate_int = rate is not null ? rate | round : 0 %}
{% set circumference = 163 %}{# 2*pi*26 ≈ 163 #}
{% set dash_offset   = rate is not null ? (circumference - (rate / 100 * circumference)) | round(2) : circumference %}
{% set arc_color = rate is not null ? (rate >= 80 ? '#2ecc71' : (rate >= 50 ? '#f1c40f' : '#e74c3c')) : '#aaaaaa' %}

<div class="tasks-hero mb-3">
    <div class="d-flex align-items-center gap-3">
        <div class="arc-wrap">
            <svg width="64" height="64" viewBox="0 0 64 64">
                <circle class="arc-bg"   cx="32" cy="32" r="26"/>
                <circle class="arc-fill" cx="32" cy="32" r="26"
                    stroke="{{ arc_color }}"
                    stroke-dasharray="{{ circumference }}"
                    stroke-dashoffset="{{ dash_offset }}"/>
            </svg>
            <div class="arc-text">{{ rate is not null ? rate_int ~ '%' : '—' }}</div>
        </div>
        <div>
            <div class="hero-label">{{ translations.network_completion ?? 'Network completion' }}</div>
            <div class="hero-rate">
                {{ rate is not null ? rate_int ~ '%' : '—' }}
            </div>
            <div style="font-size:.75rem;opacity:.7;margin-top:2px;">
                {{ net.tasks_done ?? 0 }}/{{ net.tasks_total ?? 0 }} {{ translations.tasks_done ?? 'tasks done' }}
                &middot; {{ net.shops_closed ?? 0 }}/{{ net.shops_total ?? 0 }} {{ translations.shops_closed ?? 'shops closed' }}
            </div>
        </div>
    </div>
    <div class="hero-pills mt-2">
        <span class="h-pill done"><i class="bi bi-check2-circle"></i> {{ net.tasks_done ?? 0 }} {{ translations.done ?? 'done' }}</span>
        {% if (net.tasks_skipped ?? 0) > 0 %}
        <span class="h-pill skipped"><i class="bi bi-skip-forward-circle"></i> {{ net.tasks_skipped }} {{ translations.skipped ?? 'skipped' }}</span>
        {% endif %}
        {% if (net.tasks_failed ?? 0) > 0 %}
        <span class="h-pill failed"><i class="bi bi-x-circle"></i> {{ net.tasks_failed }} {{ translations.failed ?? 'failed' }}</span>
        {% endif %}
    </div>
</div>

{# ──────────────── RANKING SKLEPÓW ──────────────── #}
{% if shops | length > 0 %}
    <div class="section-title">
        <i class="bi bi-trophy me-1"></i>{{ translations.shops_ranking ?? 'Shops ranking' }}
        <span style="font-weight:400;opacity:.6;">&mdash; {{ translations.completion_rate ?? 'completion rate' }}</span>
    </div>

    {% for s in shops %}
        {% set rank = loop.index %}
        {% set cr = s.completion_rate ?? 0 %}
        {% set prog_class = cr >= 80 ? 'excellent' : (cr >= 50 ? 'good' : 'bad') %}

        <a href="{{ ROOT }}/shops/{{ s.shop_id }}/tasks?date={{ date }}" class="stc">
            <div class="stc-header">
                <div class="stc-rank {{ rank == 1 ? 'gold' : (rank == 2 ? 'silver' : (rank == 3 ? 'bronze' : '')) }}">
                    {{ rank == 1 ? '🥇' : (rank == 2 ? '🥈' : (rank == 3 ? '🥉' : rank)) }}
                </div>
                <div class="flex-grow-1">
                    <div class="d-flex align-items-center gap-1 flex-wrap">
                        <span class="stc-name">{{ s.shop_name }}</span>
                        {% if s.day_closed %}
                            <span class="closed-badge"><i class="bi bi-lock-fill"></i> {{ translations.closed ?? 'Closed' }}</span>
                        {% else %}
                            <span class="open-badge"><i class="bi bi-unlock-fill"></i> {{ translations.open ?? 'Open' }}</span>
                        {% endif %}
                        {% if (s.mandatory_missed ?? 0) > 0 %}
                            <span class="mandatory-badge"><i class="bi bi-exclamation-triangle-fill"></i> {{ s.mandatory_missed }} {{ translations.mandatory ?? 'mandatory' }}</span>
                        {% endif %}
                    </div>
                    <div class="stc-city"><i class="bi bi-geo-alt me-1"></i>{{ s.shop_city }}</div>
                </div>
                <div style="text-align:right;flex-shrink:0;">
                    <div style="font-size:1.1rem;font-weight:900;color:{{ cr >= 80 ? '#27ae60' : (cr >= 50 ? '#e67e22' : '#e74c3c') }}">
                        {{ s.completion_rate is not null ? s.completion_rate ~ '%' : '—' }}
                    </div>
                </div>
            </div>

            <div class="prog-bar">
                <div class="prog-fill {{ prog_class }}" style="width:{{ cr }}%"></div>
            </div>

            <div class="stc-stats">
                <div class="stc-stat">
                    <div class="stc-stat-val" style="color:#27ae60;"><i class="bi bi-check2-circle me-1"></i>{{ s.tasks_done }}</div>
                    <div class="stc-stat-lbl">{{ translations.done ?? 'done' }}</div>
                </div>
                <div class="stc-stat">
                    <div class="stc-stat-val" style="color:#6c757d;"><i class="bi bi-hourglass-split me-1"></i>{{ s.tasks_total - s.tasks_done - s.tasks_skipped - s.tasks_failed }}</div>
                    <div class="stc-stat-lbl">{{ translations.pending ?? 'pending' }}</div>
                </div>
                {% if s.tasks_skipped > 0 %}
                <div class="stc-stat">
                    <div class="stc-stat-val" style="color:#e67e22;"><i class="bi bi-skip-forward me-1"></i>{{ s.tasks_skipped }}</div>
                    <div class="stc-stat-lbl">{{ translations.skipped ?? 'skipped' }}</div>
                </div>
                {% endif %}
                {% if s.tasks_failed > 0 %}
                <div class="stc-stat">
                    <div class="stc-stat-val" style="color:#e74c3c;"><i class="bi bi-x-circle me-1"></i>{{ s.tasks_failed }}</div>
                    <div class="stc-stat-lbl">{{ translations.failed ?? 'failed' }}</div>
                </div>
                {% endif %}
            </div>
        </a>
    {% endfor %}

{% else %}
    <div class="empty-state">
        <i class="bi bi-check2-square"></i>
        {{ translations.no_task_data ?? 'No task data for this day.' }}
    </div>
{% endif %}

</div>{# end #tasks-content #}

{% endblock %}

{% block scripts %}
<script>
// Skeleton znika natychmiast po załadowaniu DOM — dane już są w HTML
document.getElementById('tasks-skeleton').style.display = 'none';
document.getElementById('tasks-content').style.display  = '';
</script>
{% endblock %}