{% extends "base.html" %}
{% block content %}
<div class="page-header">
    <h1 class="page-title">Dashboard</h1>
</div>

<!-- Stats -->
<div class="dashboard-grid mb-4">
    <div class="stat-card">
        <div class="stat-value">{{ stats.open_tasks or 0 }}</div>
        <div class="stat-label">Open Tasks</div>
    </div>
    <div class="stat-card">
        <div class="stat-value">{{ stats.in_progress or 0 }}</div>
        <div class="stat-label">In Progress</div>
    </div>
    <div class="stat-card">
        <div class="stat-value">{{ stats.done_this_week or 0 }}</div>
        <div class="stat-label">Done This Week</div>
    </div>
    <div class="stat-card">
        <div class="stat-value">{{ focus_items|length }}</div>
        <div class="stat-label">Today's Focus</div>
    </div>
</div>

<div class="dashboard-grid">
    <!-- Today's Focus -->
    <div class="card">
        <div class="card-header">
            <h2 class="card-title">Today's Focus</h2>
            <a href="/focus" class="btn btn-ghost btn-sm">View All</a>
        </div>
        {% if focus_items %}
            {% for item in focus_items %}
            <div class="focus-item {{ 'completed' if item.completed }}">
                <span class="priority-dot priority-{{ item.priority }}"></span>
                <a href="/tasks/{{ item.task_id }}" class="focus-title">{{ item.title }}</a>
                {% if item.project_name %}
                <span class="row-meta">{{ item.project_name }}</span>
                {% endif %}
            </div>
            {% endfor %}
        {% else %}
            <div class="empty-state">
                <div class="empty-state-text">No focus items for today</div>
                <a href="/focus" class="btn btn-primary btn-sm">Set Focus</a>
            </div>
        {% endif %}
    </div>

    <!-- Overdue + Upcoming -->
    <div class="card">
        <div class="card-header">
            <h2 class="card-title">Upcoming</h2>
        </div>
        {% if overdue_tasks %}
        <div class="text-xs text-muted mb-2" style="font-weight:600; color: var(--red);">OVERDUE</div>
        {% for t in overdue_tasks %}
        <div class="list-row">
            <span class="priority-dot priority-{{ t.priority }}"></span>
            <span class="row-title"><a href="/tasks/{{ t.id }}">{{ t.title }}</a></span>
            <span class="row-meta overdue">{{ t.due_date }}</span>
        </div>
        {% endfor %}
        {% endif %}

        {% if upcoming_tasks %}
        <div class="text-xs text-muted mb-2 {{ 'mt-3' if overdue_tasks }}" style="font-weight:600;">NEXT 7 DAYS</div>
        {% for t in upcoming_tasks %}
        <div class="list-row">
            <span class="priority-dot priority-{{ t.priority }}"></span>
            <span class="row-title"><a href="/tasks/{{ t.id }}">{{ t.title }}</a></span>
            <span class="row-meta">{{ t.due_date }}</span>
        </div>
        {% endfor %}
        {% endif %}

        {% if not overdue_tasks and not upcoming_tasks %}
        <div class="empty-state">
            <div class="empty-state-text">No upcoming deadlines</div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}