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

{% block title %}{{ project.name }} — Staff Panel{% endblock %}
{% block topbar_title %}{{ project.name }}{% endblock %}

{% block topbar_actions %}
{% if request.user|has_perm:"edit_project" %}
<a href="{% url 'task_management:project_edit' project.id %}" class="s-btn s-btn-outline s-btn-sm">Edit</a>
{% endif %}
{% if request.user|has_perm:"create_task" %}
<a href="{% url 'task_management:task_create' project.id %}" class="s-btn s-btn-primary s-btn-sm">+ Task</a>
{% endif %}
{% endblock %}

{% block content %}
<div class="s-tabs">
    <a href="{% url 'task_management:project_detail' project.id %}" class="s-tab active">Overview</a>
    <a href="{% url 'task_management:project_kanban' project.id %}" class="s-tab">Kanban</a>
    <a href="{% url 'task_management:project_gantt' project.id %}" class="s-tab">Gantt</a>
    <a href="{% url 'task_management:document_request_list' project.id %}" class="s-tab">Docs ({{ doc_requests|length }})</a>
    <a href="{% url 'task_management:asset_request_list' project.id %}" class="s-tab">Assets ({{ asset_requests|length }})</a>
</div>

<div class="s-card s-card-pad" style="margin-bottom:14px;">
    <div style="display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap;">
        <span class="s-badge" style="background:{{ project.status|status_color }}20;color:{{ project.status|status_color }};">{{ project.get_status_display }}</span>
        <span class="s-badge" style="background:{{ project.priority|priority_color }}20;color:{{ project.priority|priority_color }};">{{ project.get_priority_display }}</span>
        {% if project.is_overdue %}<span class="s-badge s-badge-red">Overdue</span>{% endif %}
    </div>
    {% if project.description %}
    <p style="font-size:13px;color:var(--s-text2);line-height:1.5;margin-bottom:14px;">{{ project.description }}</p>
    {% endif %}
    <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:10px;font-size:12px;">
        <div><span class="staff-form-label">Client</span><div style="font-weight:600;">{{ project.client.company_name }}</div></div>
        <div><span class="staff-form-label">Project Manager</span><div style="font-weight:600;">{{ project.project_manager.username }}</div></div>
        <div><span class="staff-form-label">Start Date</span><div>{{ project.start_date|date:"d M Y" }}</div></div>
        <div><span class="staff-form-label">End Date</span><div>{{ project.end_date|date:"d M Y" }}</div></div>
    </div>
    <div style="margin-top:14px;">
        <div style="display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px;">
            <span class="staff-form-label" style="margin-bottom:0;">Progress</span>
            <span style="font-weight:700;">{{ project.progress_percentage }}%</span>
        </div>
        <div class="s-progress-bar" style="height:8px;">
            <div class="s-progress-fill" style="width:{{ project.progress_percentage }}%;background:{{ project.status|status_color }};"></div>
        </div>
    </div>
</div>

<div class="s-stats-grid" style="margin-bottom:14px;">
    <div class="s-stat-card">
        <div class="s-stat-label">Total Tasks</div>
        <div class="s-stat-value" style="font-size:22px;">{{ project.total_tasks_count }}</div>
    </div>
    <div class="s-stat-card">
        <div class="s-stat-label">Completed</div>
        <div class="s-stat-value" style="font-size:22px;color:var(--s-green);">{{ project.completed_tasks_count }}</div>
    </div>
    <div class="s-stat-card">
        <div class="s-stat-label">Overdue</div>
        <div class="s-stat-value" style="font-size:22px;color:{% if project.overdue_tasks_count %}var(--s-red){% else %}var(--s-navy){% endif %};">{{ project.overdue_tasks_count }}</div>
    </div>
    <div class="s-stat-card">
        <div class="s-stat-label">Days Left</div>
        <div class="s-stat-value" style="font-size:22px;">{{ project.days_remaining }}</div>
    </div>
</div>

<div class="s-card s-card-pad" style="margin-bottom:14px;">
    <div class="s-card-header">
        <div class="s-card-title">Tasks</div>
        <a href="{% url 'task_management:project_kanban' project.id %}" class="s-btn s-btn-outline s-btn-sm">Kanban View</a>
    </div>
    <div class="s-table-wrap">
        <table class="s-table">
            <thead>
                <tr>
                    <th>Task</th>
                    <th>Status</th>
                    <th>Priority</th>
                    <th>Assigned</th>
                    <th>Due</th>
                    <th>Progress</th>
                </tr>
            </thead>
            <tbody>
                {% for task in tasks %}
                <tr>
                    <td><a href="{% url 'task_management:task_detail' task.id %}" class="s-table-link">{{ task.title }}</a></td>
                    <td><span class="s-badge" style="background:{{ task.status|status_color }}20;color:{{ task.status|status_color }};">{{ task.get_status_display }}</span></td>
                    <td><span class="s-badge" style="background:{{ task.priority|priority_color }}20;color:{{ task.priority|priority_color }};">{{ task.get_priority_display }}</span></td>
                    <td>
                        <div class="s-avatar-group">
                            {% for u in task.assigned_to.all %}
                            <div class="s-avatar s-avatar-sm" style="background:{{ u|avatar_color }};" title="{{ u.get_full_name }}">{{ u|initials }}</div>
                            {% empty %}
                            <span style="font-size:10px;color:var(--s-text3);">—</span>
                            {% endfor %}
                        </div>
                    </td>
                    <td>
                        {% if task.due_date %}
                        <span style="font-size:11px;{% if task.is_overdue %}color:var(--s-red);font-weight:700;{% else %}color:var(--s-text3);{% endif %}">
                            {{ task.due_date|date:"d M" }}
                        </span>
                        {% else %}—{% endif %}
                    </td>
                    <td>
                        <div style="display:flex;align-items:center;gap:6px;">
                            <div class="s-progress-bar" style="width:60px;">
                                <div class="s-progress-fill" style="width:{{ task.progress_percentage }}%;background:{{ task.status|status_color }};"></div>
                            </div>
                            <span style="font-size:10px;font-weight:700;">{{ task.progress_percentage }}%</span>
                        </div>
                    </td>
                </tr>
                {% empty %}
                <tr><td colspan="6"><div class="s-empty"><p>No tasks yet.</p></div></td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

{% if tasks_page and tasks_page.paginator.num_pages > 1 %}
<div style="display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:12px;">
    <div>Page {{ tasks_page.number }} of {{ tasks_page.paginator.num_pages }}</div>
    <div style="display:flex;gap:8px;">
        {% if tasks_page.has_previous %}
        <a class="s-btn s-btn-outline s-btn-sm" href="?tasks_page={{ tasks_page.previous_page_number }}">← Previous</a>
        {% endif %}
        {% if tasks_page.has_next %}
        <a class="s-btn s-btn-outline s-btn-sm" href="?tasks_page={{ tasks_page.next_page_number }}">Next →</a>
        {% endif %}
    </div>
</div>
{% endif %}

{% if activity %}
<div class="s-card s-card-pad" style="margin-top:14px;">
    <div class="s-card-header"><div class="s-card-title">Recent Activity</div></div>
    {% for log in 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>
        </div>
        <div class="s-activity-time">{{ log.created_at|timesince }} ago</div>
    </div>
    {% endfor %}
</div>
{% endif %}

{% if request.user|has_perm:"delete_project" %}
<div style="margin-top:16px;padding-top:14px;border-top:1px solid var(--s-border);">
    <button type="button" class="s-btn s-btn-outline s-btn-sm" style="color:var(--s-red);border-color:var(--s-red-light);"
            onclick="openDeleteModal('{% url 'task_management:project_delete' project.id %}', '{{ project.name|escapejs }}')">
        Archive Project
    </button>
</div>
{% endif %}
{% endblock %}