{% extends "tasks/base.html" %}
{% load tasks_tags %}

{% block title %}Dashboard — Staff Panel{% endblock %}
{% block topbar_title %}Dashboard{% endblock %}

{% block content %}
<!-- Stats -->
<div class="s-stats-grid">
    <div class="s-stat-card">
        <div class="s-stat-label">Active Projects</div>
        <div class="s-stat-value">{{ active_projects_count }}</div>
        <div class="s-stat-detail">Currently in progress</div>
    </div>
    <div class="s-stat-card">
        <div class="s-stat-label">Overdue Tasks</div>
        <div class="s-stat-value" style="color:{% if overdue_tasks_count > 0 %}var(--s-red){% else %}var(--s-navy){% endif %};">{{ overdue_tasks_count }}</div>
        <div class="s-stat-detail">Past their due date</div>
    </div>
    <div class="s-stat-card">
        <div class="s-stat-label">My Tasks</div>
        <div class="s-stat-value">{{ my_tasks_count }}</div>
        <div class="s-stat-detail">Assigned to you</div>
    </div>
    <div class="s-stat-card">
        <div class="s-stat-label">Due This Week</div>
        <div class="s-stat-value">{{ upcoming_deadlines|length }}</div>
        <div class="s-stat-detail">Next 7 days</div>
    </div>
</div>

<div style="display:grid;grid-template-columns:1fr;gap:14px;">

    <!-- My Tasks -->
    <div class="s-card s-card-pad">
        <div class="s-card-header">
            <div>
                <div class="s-card-title">My Tasks</div>
                <div class="s-card-sub">Currently assigned to you</div>
            </div>
            {% if request.user|has_perm:"view_projects" %}
            <a href="{% url 'task_management:project_list' %}" class="s-btn s-btn-outline s-btn-sm">All Projects</a>
            {% endif %}
        </div>

        {% for task in my_tasks %}
        <div style="display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--s-border);">
            <span class="s-badge s-badge-{% if task.priority == 'urgent' %}red{% elif task.priority == 'high' %}amber{% else %}blue{% endif %}" style="font-size:9px;white-space:nowrap;">{{ task.get_priority_display }}</span>
            <a href="{% url 'task_management:task_detail' task.id %}" class="s-table-link" style="flex:1;font-size:13px;">{{ task.title }}</a>
            <span style="font-size:10px;color:var(--s-text3);white-space:nowrap;">{{ task.project.name }}</span>
            {% if task.due_date %}
            <span style="font-size:10px;white-space:nowrap;{% if task.is_overdue %}color:var(--s-red);font-weight:700;{% else %}color:var(--s-text3);{% endif %}">
                {{ task.due_date|date:"d M" }}
            </span>
            {% endif %}
        </div>
        {% empty %}
        <div class="s-empty"><p>No active tasks assigned to you.</p></div>
        {% endfor %}
    </div>

    <!-- Overdue Tasks -->
    {% if overdue_tasks %}
    <div class="s-card s-card-pad">
        <div class="s-card-header">
            <div class="s-card-title" style="color:var(--s-red);">⚠ Overdue Tasks</div>
        </div>
        {% for task in overdue_tasks %}
        <div style="display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--s-border);">
            <a href="{% url 'task_management:task_detail' task.id %}" class="s-table-link" style="flex:1;font-size:13px;">{{ task.title }}</a>
            <span style="font-size:10px;color:var(--s-text3);">{{ task.project.name }}</span>
            <span style="font-size:10px;color:var(--s-red);font-weight:700;white-space:nowrap;">Due {{ task.due_date|date:"d M" }}</span>
        </div>
        {% endfor %}
    </div>
    {% endif %}

    <!-- Projects Overview -->
    <div class="s-card s-card-pad">
        <div class="s-card-header">
            <div>
                <div class="s-card-title">Active Projects</div>
                <div class="s-card-sub">Progress overview</div>
            </div>
            {% if request.user|has_perm:"view_projects" %}
            <a href="{% url 'task_management:project_list' %}" class="s-btn s-btn-outline s-btn-sm">View All</a>
            {% endif %}
        </div>

        {% for project in projects_overview %}
        <div style="padding:10px 0;border-bottom:1px solid var(--s-border);">
            <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;gap:8px;">
                <a href="{% url 'task_management:project_detail' project.id %}" class="s-table-link" style="font-size:13px;">{{ project.name }}</a>
                <div style="display:flex;align-items:center;gap:8px;flex-shrink:0;">
                    <span style="font-size:10px;color:var(--s-text3);">{{ project.client.company_name }}</span>
                    <span style="font-size:12px;font-weight:700;color:var(--s-navy);">{{ project.progress_percentage }}%</span>
                </div>
            </div>
            <div class="s-progress-bar">
                <div class="s-progress-fill" style="width:{{ project.progress_percentage }}%;background:{% if project.progress_percentage >= 80 %}var(--s-green){% elif project.progress_percentage >= 40 %}var(--s-blue){% else %}var(--s-amber){% endif %};"></div>
            </div>
            <div style="display:flex;gap:8px;margin-top:4px;font-size:10px;color:var(--s-text3);">
                <span>{{ project.completed_tasks_count }}/{{ project.total_tasks_count }} tasks</span>
                <span>·</span>
                <span>{{ project.days_remaining }} days left</span>
            </div>
        </div>
        {% empty %}
        <div class="s-empty"><p>No active projects.</p></div>
        {% endfor %}
    </div>

    <!-- Recent Activity -->
    <div class="s-card s-card-pad">
        <div class="s-card-header">
            <div class="s-card-title">Recent Activity</div>
        </div>
        {% for log in recent_activity %}
        <div class="s-activity-item">
            <div class="s-avatar s-avatar-sm" style="background:{{ log.user|avatar_color }};">{{ log.user|initials }}</div>
            <div class="s-activity-text">
                <strong>{{ log.user.get_full_name }}</strong> {{ log.get_action_display|lower }}
                <strong>{{ log.target_title }}</strong>
                {% if log.project %}<span style="color:var(--s-text3);">in {{ log.project.name }}</span>{% endif %}
            </div>
            <div class="s-activity-time">{{ log.created_at|timesince }} ago</div>
        </div>
        {% empty %}
        <div class="s-empty"><p>No recent activity.</p></div>
        {% endfor %}
    </div>

</div>
{% endblock %}