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

<!-- Stats -->
<div class="dashboard-grid mb-4">
    <a href="/tasks/?status=open" class="stat-card-link">
        <div class="stat-card">
            <div class="stat-value">{{ stats.open_tasks or 0 }}</div>
            <div class="stat-label">Open Tasks</div>
        </div>
    </a>
    <a href="/tasks/?status=in_progress" class="stat-card-link">
        <div class="stat-card">
            <div class="stat-value">{{ stats.in_progress or 0 }}</div>
            <div class="stat-label">In Progress</div>
        </div>
    </a>
    <a href="/tasks/?status=done" class="stat-card-link">
        <div class="stat-card">
            <div class="stat-value">{{ stats.done_this_week or 0 }}</div>
            <div class="stat-label">Done This Week</div>
        </div>
    </a>
    <a href="/focus/" class="stat-card-link">
        <div class="stat-card">
            <div class="stat-value">{{ focus_items|length }}</div>
            <div class="stat-label">Today's Focus</div>
        </div>
    </a>
</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>

<!-- Project Deadlines -->
{% if overdue_projects or upcoming_projects %}
<div class="card mt-4">
    <div class="card-header">
        <h2 class="card-title">Project Deadlines</h2>
        <a href="/projects/" class="btn btn-ghost btn-sm">All Projects</a>
    </div>

    {% if overdue_projects %}
    <div class="text-xs text-muted mb-2" style="font-weight:600; color: var(--red);">OVERDUE</div>
    {% for p in overdue_projects %}
    <div class="list-row">
        <span class="priority-dot priority-{{ p.priority }}"></span>
        <span class="row-title"><a href="/projects/{{ p.id }}">{{ p.name }}</a></span>
        {% if p.domain_name %}
        <span class="row-meta">{{ p.domain_name }}</span>
        {% endif %}
        <div class="project-progress-mini">
            <div class="project-progress-bar" style="width: {{ ((p.done_count / p.task_count * 100) if p.task_count else 0)|int }}%"></div>
        </div>
        <span class="row-meta" style="min-width: 32px; text-align: right; font-size: 0.72rem;">{{ p.done_count }}/{{ p.task_count }}</span>
        <span class="row-meta overdue">{{ p.target_date }}</span>
    </div>
    {% endfor %}
    {% endif %}

    {% if upcoming_projects %}
    <div class="text-xs text-muted mb-2 {{ 'mt-3' if overdue_projects }}" style="font-weight:600;">NEXT 30 DAYS</div>
    {% for p in upcoming_projects %}
    <div class="list-row">
        <span class="priority-dot priority-{{ p.priority }}"></span>
        <span class="row-title"><a href="/projects/{{ p.id }}">{{ p.name }}</a></span>
        {% if p.domain_name %}
        <span class="row-meta">{{ p.domain_name }}</span>
        {% endif %}
        <div class="project-progress-mini">
            <div class="project-progress-bar" style="width: {{ ((p.done_count / p.task_count * 100) if p.task_count else 0)|int }}%"></div>
        </div>
        <span class="row-meta" style="min-width: 32px; text-align: right; font-size: 0.72rem;">{{ p.done_count }}/{{ p.task_count }}</span>
        <span class="row-meta">{{ p.target_date }}</span>
    </div>
    {% endfor %}
    {% endif %}
</div>
{% endif %}
{% endblock %}