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

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

{% block title %}{{ translations.tasks ?? 'Tasks' }}{% endblock %}
{% block page_title %}{{ translations.tasks ?? '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;">{{ 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 }}/shops/{{ id_shop }}/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('stDatePicker').showPicker()">
        <i class="bi bi-calendar3 me-1"></i>{{ date | date('d.m.Y') }}
    </button>
    <input type="date" id="stDatePicker" value="{{ date }}" max="{{ today_date }}"
           style="position:absolute;opacity:0;pointer-events:none;width:0;height:0;"
           onchange="window.location.href='{{ ROOT }}/shops/{{ id_shop }}/tasks?date='+this.value">
    {% set next_date = date | date_modify('+1 day') | date('Y-m-d') %}
    {% if next_date <= today_date %}
        <a href="{{ ROOT }}/shops/{{ id_shop }}/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 }}/shops/{{ id_shop }}/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>
    /* ── SUMMARY PILLS ── */
    .summary-grid {
        display:grid; grid-template-columns:repeat(4,1fr);
        gap:8px; margin-bottom:12px;
    }
    .sum-cell {
        background:#fff; border-radius:14px;
        padding:12px 8px; text-align:center;
        box-shadow:0 2px 6px rgba(0,0,0,.05);
    }
    .sum-val { font-size:1.4rem; font-weight:900; line-height:1; }
    .sum-lbl { font-size:.62rem; color:#6c757d; margin-top:2px; }
    .sum-cell.done    .sum-val { color:#27ae60; }
    .sum-cell.pending .sum-val { color:#435ebe; }
    .sum-cell.skipped .sum-val { color:#e67e22; }
    .sum-cell.failed  .sum-val { color:#e74c3c; }

    /* ── RATE BAR ── */
    .rate-bar-wrap { background:#fff; border-radius:16px; padding:14px 16px; margin-bottom:12px; box-shadow:0 2px 8px rgba(0,0,0,.06); }
    .rate-num { font-size:2rem; font-weight:900; letter-spacing:-.03em; }
    .rate-prog { height:8px; border-radius:4px; background:#eef0f5; overflow:hidden; margin:6px 0; }
    .rate-fill { height:100%; border-radius:4px; }
    .rate-fill.ex { background:linear-gradient(90deg,#27ae60,#2ecc71); }
    .rate-fill.ok { background:linear-gradient(90deg,#f39c12,#f1c40f); }
    .rate-fill.no { background:linear-gradient(90deg,#e74c3c,#c0392b); }

    /* ── TREND ── */
    .trend-wrap { background:#fff; border-radius:16px; padding:14px 16px; margin-bottom:12px; box-shadow:0 2px 8px rgba(0,0,0,.06); }
    .trend-bars { display:flex; gap:6px; align-items:flex-end; height:56px; }
    .tbar-col   { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; }
    .tbar       { width:100%; border-radius:4px 4px 0 0; min-height:4px; transition:height .4s ease; }
    .tbar.ex    { background:#2ecc71; }
    .tbar.ok    { background:#f1c40f; }
    .tbar.no    { background:#e74c3c; }
    .tbar.none  { background:#e9ecef; }
    .tbar-lbl   { font-size:.56rem; color:#adb5bd; text-transform:uppercase; }
    .tbar-dot   { width:6px; height:6px; border-radius:50%; }
    .tbar-dot.closed { background:#27ae60; }
    .tbar-dot.open   { background:#ffc107; }

    /* ── TASK LIST ── */
    .section-title {
        font-size:.72rem; font-weight:700;
        text-transform:uppercase; letter-spacing:.08em;
        color:#6c757d; padding:10px 4px 6px;
        display:flex; justify-content:space-between; align-items:center;
    }
    .task-card {
        background:#fff; border-radius:14px; padding:12px 14px;
        margin-bottom:8px; box-shadow:0 1px 5px rgba(0,0,0,.05);
        display:flex; align-items:flex-start; gap:12px;
    }
    .task-status-icon {
        width:34px; height:34px; border-radius:10px; flex-shrink:0;
        display:flex; align-items:center; justify-content:center;
        font-size:1rem;
    }
    .status-done    { background:#d1fae5; color:#065f46; }
    .status-skipped { background:#fef3c7; color:#92400e; }
    .status-failed  { background:#fee2e2; color:#991b1b; }
    .status-pending { background:#f0f0f5; color:#6c757d; }

    .task-name  { font-size:.88rem; font-weight:700; }
    .task-meta  { font-size:.7rem; color:#adb5bd; margin-top:2px; }
    .task-badge {
        display:inline-flex; align-items:center; gap:3px;
        padding:1px 6px; border-radius:8px;
        font-size:.62rem; font-weight:700; margin-right:4px;
    }
    .badge-mandatory { background:#fee2e2; color:#991b1b; }
    .badge-photo     { background:#e0e7ff; color:#3730a3; }
    .badge-priority  { background:#f0fdf4; color:#166534; }

    .task-by { font-size:.68rem; color:#6c757d; margin-top:4px; }
    .task-note { font-size:.72rem; color:#6c757d; background:#f8f9fa; border-radius:6px; padding:4px 8px; margin-top:4px; font-style:italic; }

    .empty-state { text-align:center; padding:30px 20px; color:#adb5bd; font-size:.85rem; }
    .empty-state i { font-size:2rem; display:block; margin-bottom:8px; }

    /* ── BACK LINK ── */
    .back-link {
        display:inline-flex; align-items:center; gap:6px;
        font-size:.78rem; font-weight:700; color:#435ebe;
        text-decoration:none; margin-bottom:10px;
    }
</style>
{% endblock %}

{% block content %}

{# ── SKELETON ── #}
<div id="shop-tasks-skeleton" aria-hidden="true">
    <div class="skeleton-hero" style="min-height:90px;border-radius:16px;"></div>
    <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px;">
        <div class="skeleton-card" style="padding:12px;min-height:70px;"></div>
        <div class="skeleton-card" style="padding:12px;min-height:70px;"></div>
        <div class="skeleton-card" style="padding:12px;min-height:70px;"></div>
        <div class="skeleton-card" style="padding:12px;min-height:70px;"></div>
    </div>
    <div class="skeleton-card" style="min-height:70px;margin-bottom:8px;"></div>
    <div class="skeleton-card"><div class="skeleton-line"></div><div class="skeleton-line" style="width:80%;"></div><div class="skeleton-line" style="width:60%;"></div></div>
    <div class="skeleton-card"><div class="skeleton-line"></div><div class="skeleton-line" style="width:80%;"></div></div>
    <div class="skeleton-card"><div class="skeleton-line"></div><div class="skeleton-line" style="width:80%;"></div></div>
</div>

<div id="shop-tasks-content" style="display:none;" class="page-content-loaded">

<a href="{{ ROOT }}/tasks?date={{ date }}" class="back-link">
    <i class="bi bi-arrow-left-circle-fill"></i>{{ translations.back_to_ranking ?? 'Back to ranking' }}
</a>

{# ──────────────── COMPLETION RATE ──────────────── #}
{% set cr = summary.completion_rate ?? null %}
{% set rate_class = cr is not null ? (cr >= 80 ? 'ex' : (cr >= 50 ? 'ok' : 'no')) : 'none' %}

<div class="rate-bar-wrap">
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <div style="font-size:.7rem;color:#6c757d;text-transform:uppercase;letter-spacing:.06em;">{{ translations.completion_rate ?? 'Completion rate' }}</div>
            <div class="rate-num" style="color:{{ cr is not null ? (cr >= 80 ? '#27ae60' : (cr >= 50 ? '#e67e22' : '#e74c3c')) : '#adb5bd' }}">
                {{ cr is not null ? cr ~ '%' : '—' }}
            </div>
        </div>
        <div style="text-align:right;font-size:.78rem;color:#6c757d;">
            {{ summary.tasks_done ?? 0 }} / {{ summary.tasks_total ?? 0 }}
            <br>{{ translations.tasks_done ?? 'tasks done' }}
        </div>
    </div>
    <div class="rate-prog">
        <div class="rate-fill {{ rate_class }}" style="width:{{ cr ?? 0 }}%"></div>
    </div>
    <div style="font-size:.7rem;color:#adb5bd;">
        {{ summary.tasks_pending ?? 0 }} {{ translations.still_pending ?? 'still pending' }}
        {% if (summary.tasks_skipped ?? 0) > 0 %}&middot; {{ summary.tasks_skipped }} {{ translations.skipped ?? 'skipped' }}{% endif %}
        {% if (summary.tasks_failed ?? 0) > 0 %}&middot; <span style="color:#e74c3c;">{{ summary.tasks_failed }} {{ translations.failed ?? 'failed' }}</span>{% endif %}
    </div>
</div>

{# ──────────────── SUMMARY GRID ──────────────── #}
<div class="summary-grid">
    <div class="sum-cell done">
        <div class="sum-val">{{ summary.tasks_done ?? 0 }}</div>
        <div class="sum-lbl"><i class="bi bi-check2-circle"></i><br>{{ translations.done ?? 'Done' }}</div>
    </div>
    <div class="sum-cell pending">
        <div class="sum-val">{{ summary.tasks_pending ?? 0 }}</div>
        <div class="sum-lbl"><i class="bi bi-hourglass-split"></i><br>{{ translations.pending ?? 'Pending' }}</div>
    </div>
    <div class="sum-cell skipped">
        <div class="sum-val">{{ summary.tasks_skipped ?? 0 }}</div>
        <div class="sum-lbl"><i class="bi bi-skip-forward"></i><br>{{ translations.skipped ?? 'Skipped' }}</div>
    </div>
    <div class="sum-cell failed">
        <div class="sum-val">{{ summary.tasks_failed ?? 0 }}</div>
        <div class="sum-lbl"><i class="bi bi-x-circle"></i><br>{{ translations.failed ?? 'Failed' }}</div>
    </div>
</div>

{# ──────────────── TREND 7 DNI ──────────────── #}
{% if trend | length > 0 %}
<div class="trend-wrap">
    <div style="font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#6c757d;margin-bottom:10px;">
        <i class="bi bi-bar-chart-line me-1"></i>{{ translations.last_7_days ?? 'Last 7 days' }}
    </div>
    <div class="trend-bars">
        {% for tr in trend %}
            {% set tr_class = tr.completion_rate >= 80 ? 'ex' : (tr.completion_rate >= 50 ? 'ok' : (tr.completion_rate > 0 ? 'no' : 'none')) %}
            {% set bar_h = (tr.completion_rate * 0.56) | round %}
            <div class="tbar-col">
                <div class="tbar {{ tr_class }}" style="height:{{ bar_h }}px;"></div>
                <div class="tbar-dot {{ tr.day_closed ? 'closed' : 'open' }}"></div>
                <div class="tbar-lbl">{{ tr.day | date('D') | slice(0,1) }}</div>
            </div>
        {% endfor %}
    </div>
    <div style="font-size:.63rem;color:#adb5bd;margin-top:6px;display:flex;gap:12px;">
        <span><span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#27ae60;margin-right:3px;"></span>{{ translations.day_closed ?? 'Day closed' }}</span>
        <span><span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#ffc107;margin-right:3px;"></span>{{ translations.day_open ?? 'Day open / no data' }}</span>
    </div>
</div>
{% endif %}

{# ──────────────── LISTA ZADAŃ ──────────────── #}
{% if tasks | length > 0 %}

    {# Grupuj: najpierw mandatory, potem reszta #}
    {% set mandatory_tasks = tasks | filter(t => t.is_mandatory) %}
    {% set optional_tasks  = tasks | filter(t => not t.is_mandatory) %}

    {% if mandatory_tasks | length > 0 %}
    <div class="section-title">
        <span><i class="bi bi-exclamation-circle-fill text-danger me-1"></i>{{ translations.mandatory_tasks ?? 'Mandatory tasks' }}</span>
        <span style="font-weight:400;color:#adb5bd;">{{ mandatory_tasks | length }}</span>
    </div>
    {% for t in mandatory_tasks %}
        {% include 'task/_task_item.twig' %}
    {% endfor %}
    {% endif %}

    {% if optional_tasks | length > 0 %}
    <div class="section-title">
        <span><i class="bi bi-list-task me-1"></i>{{ translations.optional_tasks ?? 'Optional tasks' }}</span>
        <span style="font-weight:400;color:#adb5bd;">{{ optional_tasks | length }}</span>
    </div>
    {% for t in optional_tasks %}
        {% include 'task/_task_item.twig' %}
    {% endfor %}
    {% endif %}

{% else %}
    <div class="empty-state">
        <i class="bi bi-check2-all"></i>
        {{ translations.no_tasks_for_day ?? 'No tasks scheduled for this day.' }}
    </div>
{% endif %}

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

{% endblock %}

{% block scripts %}
<script>
document.getElementById('shop-tasks-skeleton').style.display = 'none';
document.getElementById('shop-tasks-content').style.display  = '';
</script>
{% endblock %}