{% extends 'base.html' %}
{% load static %}

{% block title %}Minhas Tarefas - {{ block.super }}{% endblock %}

{% block breadcrumb %}
<nav aria-label="breadcrumb" class="bg-light">
    <div class="container-fluid">
        <ol class="breadcrumb mb-0 py-2">
            <li class="breadcrumb-item"><a href="{% url 'home' %}">Início</a></li>
            <li class="breadcrumb-item"><a href="{% url 'task:list' %}">Tarefas</a></li>
            <li class="breadcrumb-item active" aria-current="page">Minhas Tarefas</li>
        </ol>
    </div>
</nav>
{% endblock %}

{% block content %}
<!-- CSRF Token -->
{% csrf_token %}

<!-- Container para o modal -->
<div id="modalContainer"></div>

<div class="d-flex justify-content-between align-items-center mb-4">
    <h1><i class="bi bi-person-check"></i> Minhas Tarefas</h1>
    <div class="btn-group">
        <a href="{% url 'task:list' %}" class="btn btn-outline-primary">
            <i class="bi bi-list-task"></i> Todas as Tarefas
        </a>
        <button class="btn btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#filters">
            <i class="bi bi-funnel"></i> Filtros
        </button>
    </div>
</div>

<!-- Estatísticas -->
<div class="row mb-4">
    <div class="col-md-3">
        <div class="card text-center">
            <div class="card-body">
                <i class="bi bi-list-task display-4 text-primary"></i>
                <h3 class="text-primary">{{ total_my_tasks|default:0 }}</h3>
                <p class="text-muted mb-0">Total</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-center">
            <div class="card-body">
                <i class="bi bi-check-circle display-4 text-success"></i>
                <h3 class="text-success">{{ my_tasks_concluidas|default:0 }}</h3>
                <p class="text-muted mb-0">Concluídas</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-center">
            <div class="card-body">
                <i class="bi bi-clock display-4 text-warning"></i>
                <h3 class="text-warning">{{ my_tasks_em_andamento|default:0 }}</h3>
                <p class="text-muted mb-0">Em Andamento</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-center">
            <div class="card-body">
                <i class="bi bi-hourglass-split display-4 text-info"></i>
                <h3 class="text-info">{{ my_tasks_pendentes|default:0 }}</h3>
                <p class="text-muted mb-0">Pendentes</p>
            </div>
        </div>
    </div>
</div>

<!-- Filtros -->
<div class="collapse mb-4" id="filters">
    <div class="card">
        <div class="card-header">
            <h5 class="mb-0"><i class="bi bi-funnel"></i> Filtros</h5>
        </div>
        <div class="card-body">
            <form method="get" class="row">
                <div class="col-md-3">
                    <label for="status" class="form-label">Status</label>
                    <select class="form-select" id="status" name="status">
                        <option value="">Todos</option>
                        <option value="nao_iniciada" {% if status == 'nao_iniciada' %}selected{% endif %}>Não Iniciada</option>
                        <option value="em_andamento" {% if status == 'em_andamento' %}selected{% endif %}>Em Andamento</option>
                        <option value="pausada" {% if status == 'pausada' %}selected{% endif %}>Pausada</option>
                        <option value="concluida" {% if status == 'concluida' %}selected{% endif %}>Concluída</option>
                        <option value="cancelada" {% if status == 'cancelada' %}selected{% endif %}>Cancelada</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="prioridade" class="form-label">Prioridade</label>
                    <select class="form-select" id="prioridade" name="prioridade">
                        <option value="">Todas</option>
                        <option value="baixa" {% if prioridade == 'baixa' %}selected{% endif %}>Baixa</option>
                        <option value="media" {% if prioridade == 'media' %}selected{% endif %}>Média</option>
                        <option value="alta" {% if prioridade == 'alta' %}selected{% endif %}>Alta</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="atrasadas" class="form-label">Atrasadas</label>
                    <select class="form-select" id="atrasadas" name="atrasadas">
                        <option value="">Todas</option>
                        <option value="sim" {% if atrasadas == 'sim' %}selected{% endif %}>Sim</option>
                        <option value="nao" {% if atrasadas == 'nao' %}selected{% endif %}>Não</option>
                    </select>
                </div>
                <div class="col-md-3 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary me-2">
                        <i class="bi bi-search"></i> Filtrar
                    </button>
                    <a href="{% url 'task:my_tasks' %}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-clockwise"></i> Limpar
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Lista de Tarefas -->
{% if tasks %}
<div class="table-responsive">
    <table class="table table-hover">
        <thead class="table-dark">
            <tr>
                <th>Nome</th>
                <th>Grupo/Board</th>
                <th>Status</th>
                <th>Prioridade</th>
                <th>Prazo</th>
                <th>Progresso</th>
                <th>Ações</th>
            </tr>
        </thead>
        <tbody>
            {% for task in tasks %}
            <tr>
                <td>
                    <div class="d-flex align-items-center">
                        <div class="me-2">
                            <span class="badge bg-{{ task.prioridade }}">{{ task.get_prioridade_display }}</span>
                        </div>
                        <div>
                            <strong>{{ task.nome }}</strong>
                            {% if task.descricao %}
                                <br><small class="text-muted">{{ task.descricao|truncatewords:10 }}</small>
                            {% endif %}
                        </div>
                    </div>
                </td>
                <td>
                    {% if task.group %}
                        <span class="badge bg-info">{{ task.group.nome }}</span>
                        <br><small class="text-muted">{{ task.group.board.nome }}</small>
                    {% else %}
                        <span class="text-muted">Sem grupo</span>
                    {% endif %}
                </td>
                <td>
                    <span class="badge bg-{{ task.status|yesno:'success,warning,danger,info,secondary' }}">
                        {{ task.get_status_display }}
                    </span>
                    {% if task.is_atrasada %}
                        <br><small class="text-danger">Atrasada</small>
                    {% endif %}
                </td>
                <td>
                    <span class="badge bg-{{ task.prioridade }}">
                        {{ task.get_prioridade_display }}
                    </span>
                </td>
                <td>
                    <div class="d-flex flex-column">
                        <small class="text-muted">Início: {{ task.cronograma_inicio|date:"d/m/Y" }}</small>
                        <strong>Fim: {{ task.cronograma_fim|date:"d/m/Y" }}</strong>
                        {% if task.is_atrasada %}
                            <small class="text-danger">{{ task.dias_atraso }} dias atrasada</small>
                        {% endif %}
                    </div>
                </td>
                <td>
                    <div class="d-flex align-items-center">
                        <div class="progress me-2" style="width: 60px; height: 8px;">
                            <div class="progress-bar bg-{{ task.status|yesno:'success,warning,danger,info,secondary' }}" 
                                 role="progressbar" 
                                 style="width: {{ task.progresso_percentual }}%"
                                 aria-valuenow="{{ task.progresso_percentual }}" 
                                 aria-valuemin="0" 
                                 aria-valuemax="100">
                            </div>
                        </div>
                        <small>{{ task.progresso_percentual }}%</small>
                    </div>
                    <small class="text-muted">
                        {{ task.esforco_utilizado }}/{{ task.esforco_previsto }}h
                    </small>
                </td>
                <td>
                    <div class="btn-group btn-group-sm" role="group">
                        <a href="{% url 'task:detail' task.id %}" class="btn btn-outline-primary" title="Ver detalhes">
                            <i class="bi bi-eye"></i>
                        </a>
                        <a href="{% url 'task:edit' task.id %}" class="btn btn-outline-warning" title="Editar">
                            <i class="bi bi-pencil"></i>
                        </a>
                        {% if task.status == 'nao_iniciada' %}
                            <button class="btn btn-outline-success" title="Iniciar tarefa" 
                                    onclick="iniciarTarefa({{ task.id }})">
                                <i class="bi bi-play-circle"></i>
                            </button>
                        {% elif task.status == 'em_andamento' %}
                            <button class="btn btn-outline-warning" title="Pausar tarefa" 
                                    onclick="pausarTarefa({{ task.id }})">
                                <i class="bi bi-pause-circle"></i>
                            </button>
                            <button class="btn btn-outline-success" title="Concluir tarefa" 
                                    onclick="concluirTarefa({{ task.id }})">
                                <i class="bi bi-check-circle"></i>
                            </button>
                        {% elif task.status == 'pausada' %}
                            <button class="btn btn-outline-success" title="Retomar tarefa" 
                                    onclick="iniciarTarefa({{ task.id }})">
                                <i class="bi bi-play-circle"></i>
                            </button>
                        {% endif %}
                    </div>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<!-- Paginação -->
{% if is_paginated %}
<nav aria-label="Paginação das tarefas">
    <ul class="pagination justify-content-center">
        {% if page_obj.has_previous %}
            <li class="page-item">
                <a class="page-link" href="?page=1{% if status %}&status={{ status }}{% endif %}{% if prioridade %}&prioridade={{ prioridade }}{% endif %}{% if atrasadas %}&atrasadas={{ atrasadas }}{% endif %}">
                    <i class="bi bi-chevron-double-left"></i>
                </a>
            </li>
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if status %}&status={{ status }}{% endif %}{% if prioridade %}&prioridade={{ prioridade }}{% endif %}{% if atrasadas %}&atrasadas={{ atrasadas }}{% endif %}">
                    <i class="bi bi-chevron-left"></i>
                </a>
            </li>
        {% endif %}

        {% for num in page_obj.paginator.page_range %}
            {% if page_obj.number == num %}
                <li class="page-item active">
                    <span class="page-link">{{ num }}</span>
                </li>
            {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ num }}{% if status %}&status={{ status }}{% endif %}{% if prioridade %}&prioridade={{ prioridade }}{% endif %}{% if atrasadas %}&atrasadas={{ atrasadas }}{% endif %}">{{ num }}</a>
                </li>
            {% endif %}
        {% endfor %}

        {% if page_obj.has_next %}
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if status %}&status={{ status }}{% endif %}{% if prioridade %}&prioridade={{ prioridade }}{% endif %}{% if atrasadas %}&atrasadas={{ atrasadas }}{% endif %}">
                    <i class="bi bi-chevron-right"></i>
                </a>
            </li>
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if status %}&status={{ status }}{% endif %}{% if prioridade %}&prioridade={{ prioridade }}{% endif %}{% if atrasadas %}&atrasadas={{ atrasadas }}{% endif %}">
                    <i class="bi bi-chevron-double-right"></i>
                </a>
            </li>
        {% endif %}
    </ul>
</nav>

<div class="text-center text-muted">
    Página {{ page_obj.number }} de {{ page_obj.paginator.num_pages }} 
    ({{ page_obj.paginator.count }} tarefas no total)
</div>
{% endif %}

{% else %}
<div class="text-center py-5">
    <i class="bi bi-inbox display-1 text-muted"></i>
    <h3 class="text-muted mt-3">Nenhuma tarefa encontrada</h3>
    <p class="text-muted">Você não tem tarefas atribuídas ou os filtros aplicados não retornaram resultados.</p>
    <a href="{% url 'task:list' %}" class="btn btn-primary">
        <i class="bi bi-list-task"></i> Ver Todas as Tarefas
    </a>
</div>
{% endif %}
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Função para iniciar tarefa
    window.iniciarTarefa = function(taskId) {
        if (confirm('Deseja iniciar esta tarefa?')) {
            fetch(`/tasks/${taskId}/iniciar/`, {
                method: 'POST',
                headers: {
                    'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showAlert('success', data.message);
                    setTimeout(() => window.location.reload(), 1000);
                } else {
                    showAlert('danger', data.message || 'Erro ao iniciar tarefa');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showAlert('danger', 'Erro ao iniciar tarefa');
            });
        }
    };

    // Função para pausar tarefa
    window.pausarTarefa = function(taskId) {
        if (confirm('Deseja pausar esta tarefa?')) {
            fetch(`/tasks/${taskId}/pausar/`, {
                method: 'POST',
                headers: {
                    'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showAlert('success', data.message);
                    setTimeout(() => window.location.reload(), 1000);
                } else {
                    showAlert('danger', data.message || 'Erro ao pausar tarefa');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showAlert('danger', 'Erro ao pausar tarefa');
            });
        }
    };

    // Função para concluir tarefa
    window.concluirTarefa = function(taskId) {
        if (confirm('Deseja concluir esta tarefa?')) {
            fetch(`/tasks/${taskId}/concluir/`, {
                method: 'POST',
                headers: {
                    'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showAlert('success', data.message);
                    setTimeout(() => window.location.reload(), 1000);
                } else {
                    showAlert('danger', data.message || 'Erro ao concluir tarefa');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showAlert('danger', 'Erro ao concluir tarefa');
            });
        }
    };

    // Função para mostrar alertas
    function showAlert(type, message) {
        const alertDiv = document.createElement('div');
        alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
        alertDiv.innerHTML = `
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;
        
        const container = document.querySelector('.container-fluid');
        container.insertBefore(alertDiv, container.firstChild);
        
        // Auto remove after 5 seconds
        setTimeout(() => {
            alertDiv.remove();
        }, 5000);
    }
});
</script>
{% endblock %}