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

{% block title %}{{ task.nome }} - {{ 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">{{ task.nome }}</li>
        </ol>
    </div>
</nav>
{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1>
            <i class="bi bi-list-task"></i> {{ task.nome }}
            <span class="badge bg-{{ task.status|yesno:'success,warning,danger,info,secondary' }}">
                {{ task.get_status_display }}
            </span>
        </h1>
        <p class="text-muted mb-0">
            {% if task.group %}
                <i class="bi bi-kanban"></i> {{ task.group.board.project.nome }} - {{ task.group.board.nome }} - {{ task.group.nome }}
            {% else %}
                <i class="bi bi-kanban"></i> <span class="text-muted">Sem grupo atribuído</span>
            {% endif %}
            {% if task.responsavel %}
                - <i class="bi bi-person"></i> {{ task.responsavel.nome }}
            {% endif %}
        </p>
    </div>
    <div class="btn-group">
        <a href="{% url 'task:edit' task.pk %}" class="btn btn-outline-secondary">
            <i class="bi bi-pencil"></i> Editar
        </a>
        <a href="{% url 'task:delete' task.pk %}" 
           class="btn btn-outline-danger delete-btn"
           data-item-name="{{ task.nome }}">
            <i class="bi bi-trash"></i> Excluir
        </a>
    </div>
</div>

<div class="row">
    <!-- Informações da Tarefa -->
    <div class="col-lg-4">
        <div class="card mb-4">
            <div class="card-header bg-gradient-warning text-white">
                <h5 class="mb-0"><i class="bi bi-info-circle"></i> Informações da Tarefa</h5>
            </div>
            <div class="card-body">
                {% if task.descricao %}
                    <div class="mb-3">
                        <strong>Descrição:</strong>
                        <p class="mb-0">{{ task.descricao }}</p>
                    </div>
                {% endif %}
                
                {% if task.group %}
                    <div class="mb-3">
                        <strong><i class="bi bi-kanban"></i> Projeto:</strong><br>
                        <a href="{% url 'project:detail' task.group.board.project.pk %}">
                            {{ task.group.board.project.nome }}
                        </a>
                    </div>
                    
                    <div class="mb-3">
                        <strong><i class="bi bi-collection"></i> Board:</strong><br>
                        <a href="{% url 'board:detail' task.group.board.pk %}">
                            {{ task.group.board.nome }}
                        </a>
                    </div>
                    
                    <div class="mb-3">
                        <strong><i class="bi bi-list-group"></i> Grupo:</strong><br>
                        {{ task.group.nome }}
                    </div>
                {% else %}
                    <div class="mb-3">
                        <strong><i class="bi bi-kanban"></i> Projeto:</strong><br>
                        <span class="text-muted">N/A</span>
                    </div>
                    
                    <div class="mb-3">
                        <strong><i class="bi bi-collection"></i> Board:</strong><br>
                        <span class="text-muted">N/A</span>
                    </div>
                    
                    <div class="mb-3">
                        <strong><i class="bi bi-list-group"></i> Grupo:</strong><br>
                        <span class="text-muted">Nenhum grupo atribuído</span>
                    </div>
                {% endif %}
                
                {% if task.responsavel %}
                <div class="mb-3">
                    <strong><i class="bi bi-person"></i> Responsável:</strong><br>
                    <a href="{% url 'collaborator:detail' task.responsavel.pk %}">
                        {{ task.responsavel.nome }} ({{ task.responsavel.area.nome }})
                    </a>
                </div>
                {% endif %}
                
                <div class="mb-3">
                    <strong><i class="bi bi-flag"></i> Status:</strong><br>
                    <span class="badge bg-{{ task.status|yesno:'success,warning,danger,info,secondary' }}">
                        {{ task.get_status_display }}
                    </span>
                </div>
                
                <div class="mb-3">
                    <strong><i class="bi bi-star"></i> Prioridade:</strong><br>
                    <span class="badge bg-{{ task.prioridade|yesno:'success,warning,danger' }}">
                        {{ task.get_prioridade_display }}
                    </span>
                </div>
                
                <div class="mb-3">
                    <strong><i class="bi bi-calendar-check"></i> Cronograma:</strong><br>
                    {{ task.cronograma_inicio|date:"d/m/Y" }} a {{ task.cronograma_fim|date:"d/m/Y" }}
                    {% if task.is_atrasada %}
                        <span class="badge bg-danger">Atrasada ({{ task.dias_atraso }} dias)</span>
                    {% endif %}
                </div>
                
                <div class="mb-3">
                    <strong><i class="bi bi-clock"></i> Duração:</strong><br>
                    {{ task.duracao_dias }} dia(s)
                </div>
                
                <div class="mb-3">
                    <strong><i class="bi bi-hourglass-split"></i> Esforço:</strong><br>
                    {{ task.esforco_utilizado|floatformat:2 }}h / {{ task.esforco_previsto|floatformat:1 }}h
                </div>
                
                <div class="mb-3">
                    <strong><i class="bi bi-clock-history"></i> Criada em:</strong><br>
                    {{ task.created_at|date:"d/m/Y H:i" }}
                </div>
                
                {% if task.data_conclusao %}
                <div class="mb-0">
                    <strong><i class="bi bi-check-circle"></i> Concluída em:</strong><br>
                    {{ task.data_conclusao|date:"d/m/Y H:i" }}
                </div>
                {% endif %}
            </div>
        </div>
        
        <!-- Ações Rápidas -->
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-lightning"></i> Ações Rápidas</h5>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    {% if task.status != 'concluida' and task.status != 'cancelada' %}
                        <button class="btn btn-success" onclick="marcarConcluida()">
                            <i class="bi bi-check-circle"></i> Marcar como Concluída
                        </button>
                    {% endif %}
                    
                    <a href="{% url 'task:edit' task.pk %}" class="btn btn-outline-primary">
                        <i class="bi bi-pencil"></i> Editar Tarefa
                    </a>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Detalhes e Progresso -->
    <div class="col-lg-8">
        <!-- Progresso da Tarefa -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-graph-up"></i> Progresso da Tarefa</h5>
            </div>
            <div class="card-body">
                <div class="row text-center mb-3">
                    <div class="col-md-3">
                        <div class="border-end">
                            <h4 class="text-primary mb-0">{{ task.progresso_percentual|floatformat:1 }}%</h4>
                            <small class="text-muted">Progresso</small>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="border-end">
                            <h4 class="text-info mb-0">
                                {% if task.is_atrasada %}
                                    <span class="text-danger">Atrasada</span>
                                {% else %}
                                    <span class="text-success">No Prazo</span>
                                {% endif %}
                            </h4>
                            <small class="text-muted">Status do Prazo</small>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="border-end">
                            <h4 class="text-warning mb-0">{{ task.get_prioridade_display }}</h4>
                            <small class="text-muted">Prioridade</small>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <h4 class="text-success mb-0">{{ task.esforco_utilizado|floatformat:2 }}h</h4>
                        <small class="text-muted">Tempo Utilizado</small>
                    </div>
                </div>
                
                <div class="progress mb-3" style="height: 25px;">
                    <div class="progress-bar bg-success" role="progressbar" 
                         style="width: {{ task.progresso_percentual }}%">
                        {{ task.progresso_percentual|floatformat:1 }}%
                    </div>
                </div>
                
                <!-- Controle de Tempo -->
                <div class="row mb-3">
                    <div class="col-md-3">
                        <div class="text-center">
                            <small class="text-muted">Tempo Total Trabalhado</small>
                            <div class="h5" id="tempo-total">{{ task.tempo_total_formatado }}</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-center">
                            <small class="text-muted">Tempo Trabalhado Hoje</small>
                            <div class="h5" id="tempo-hoje">{{ task.tempo_hoje_formatado }}</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-center">
                            <small class="text-muted">Tempo da Sessão</small>
                            <div class="h5" id="tempo-sessao">
                                {% if task.esta_trabalhando %}
                                    <span class="text-success" id="cronometro">00:00:00</span>
                                {% else %}
                                    00:00:00
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-center">
                            <small class="text-muted">Status do Trabalho</small>
                            <div class="h5">
                                {% if task.esta_trabalhando %}
                                    <span class="text-success" id="status-trabalho">
                                        <i class="bi bi-play-circle"></i> Trabalhando
                                    </span>
                                {% elif task.status == 'pausada' %}
                                    <span class="text-warning" id="status-trabalho">
                                        <i class="bi bi-pause-circle"></i> Pausada
                                    </span>
                                {% else %}
                                    <span class="text-secondary" id="status-trabalho">
                                        <i class="bi bi-stop-circle"></i> Parada
                                    </span>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Controles de Tempo -->
                <div class="row">
                    <div class="col-12">
                        <div class="d-flex justify-content-center gap-2" id="controles-tempo">
                            {% if task.status != 'concluida' and task.status != 'cancelada' %}
                                {% if task.status == 'nao_iniciada' %}
                                    <button class="btn btn-success" onclick="iniciarTarefa()" id="btn-iniciar">
                                        <i class="bi bi-play-circle"></i> Iniciar Trabalho
                                    </button>
                                {% elif task.status == 'em_andamento' and task.esta_trabalhando %}
                                    <button class="btn btn-warning" onclick="pausarTarefa()" id="btn-pausar">
                                        <i class="bi bi-pause-circle"></i> Pausar
                                    </button>
                                {% elif task.status == 'pausada' %}
                                    <button class="btn btn-info" onclick="retomarTarefa()" id="btn-retomar">
                                        <i class="bi bi-play-circle"></i> Retomar
                                    </button>
                                {% else %}
                                    <button class="btn btn-success" onclick="iniciarTarefa()" id="btn-iniciar">
                                        <i class="bi bi-play-circle"></i> Iniciar Trabalho
                                    </button>
                                {% endif %}
                            {% endif %}
                        </div>
                        
                        <!-- Botão de Logs de Sessões -->
                        <div class="d-flex justify-content-center mt-3">
                            <button class="btn btn-outline-secondary" onclick="abrirModalLogs()">
                                <i class="bi bi-clock-history"></i> Ver Logs de Sessões
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Dependências -->
        {% if task.dependencias.exists %}
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-diagram-3"></i> Dependências</h5>
            </div>
            <div class="card-body">
                <div class="list-group">
                    {% for dependencia in task.dependencias.all %}
                    <div class="list-group-item d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-1">{{ dependencia.nome }}</h6>
                            <small class="text-muted">{{ dependencia.group.board.project.nome }}</small>
                        </div>
                        <div>
                            <span class="badge bg-{{ dependencia.status|yesno:'success,warning,danger,info,secondary' }}">
                                {{ dependencia.get_status_display }}
                            </span>
                            <a href="{% url 'task:detail' dependencia.pk %}" class="btn btn-sm btn-outline-primary ms-2">
                                <i class="bi bi-eye"></i>
                            </a>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        {% endif %}
        
        <!-- Tarefas Dependentes -->
        {% if task.dependentes.exists %}
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-diagram-3-fill"></i> Tarefas Dependentes</h5>
            </div>
            <div class="card-body">
                <div class="list-group">
                    {% for dependente in task.dependentes.all %}
                    <div class="list-group-item d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-1">{{ dependente.nome }}</h6>
                            <small class="text-muted">{{ dependente.group.board.project.nome }}</small>
                        </div>
                        <div>
                            <span class="badge bg-{{ dependente.status|yesno:'success,warning,danger,info,secondary' }}">
                                {{ dependente.get_status_display }}
                            </span>
                            <a href="{% url 'task:detail' dependente.pk %}" class="btn btn-sm btn-outline-primary ms-2">
                                <i class="bi bi-eye"></i>
                            </a>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        {% endif %}
        
        <!-- Histórico de Alterações -->
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-clock-history"></i> Histórico de Alterações</h5>
            </div>
            <div class="card-body">
                <div class="timeline">
                    <div class="timeline-item">
                        <div class="timeline-marker bg-primary"></div>
                        <div class="timeline-content">
                            <h6 class="mb-1">Tarefa Criada</h6>
                            <p class="text-muted mb-0">{{ task.created_at|date:"d/m/Y H:i" }}</p>
                        </div>
                    </div>
                    
                    {% if task.data_conclusao %}
                    <div class="timeline-item">
                        <div class="timeline-marker bg-success"></div>
                        <div class="timeline-content">
                            <h6 class="mb-1">Tarefa Concluída</h6>
                            <p class="text-muted mb-0">{{ task.data_conclusao|date:"d/m/Y H:i" }}</p>
                        </div>
                    </div>
                    {% endif %}
                    
                    {% if task.tempo_iniciado %}
                    <div class="timeline-item">
                        <div class="timeline-marker bg-info"></div>
                        <div class="timeline-content">
                            <h6 class="mb-1">Trabalho Iniciado</h6>
                            <p class="text-muted mb-0">{{ task.tempo_iniciado|date:"d/m/Y H:i" }}</p>
                        </div>
                    </div>
                    {% endif %}
                    
                    {% if task.updated_at != task.created_at %}
                    <div class="timeline-item">
                        <div class="timeline-marker bg-warning"></div>
                        <div class="timeline-content">
                            <h6 class="mb-1">Última Atualização</h6>
                            <p class="text-muted mb-0">{{ task.updated_at|date:"d/m/Y H:i" }}</p>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal de Logs de Sessões -->
{% include 'task/modal_logs_sessoes.html' %}

{% endblock %}

{% block extra_js %}
<script src="{% static 'js/debug_task.js' %}"></script>
<script src="{% static 'js/task_time_control_enhanced.js' %}"></script>
<script>
// Verificar se os scripts foram carregados
document.addEventListener('DOMContentLoaded', function() {
    console.log('🔧 Verificando carregamento dos scripts...');
    
    if (typeof debugTarefaAtual === 'function') {
        console.log('✅ debug_task.js carregado com sucesso');
    } else {
        console.error('❌ debug_task.js não foi carregado corretamente');
    }
    
    if (typeof TaskTimeController === 'function') {
        console.log('✅ task_time_control_enhanced.js carregado com sucesso');
    } else {
        console.error('❌ task_time_control_enhanced.js não foi carregado corretamente');
    }
    
    // Tornar funções globais para acesso via console
    window.debugTarefaAtual = debugTarefaAtual;
    window.debugTarefa = debugTarefa;
    window.testarIniciarTarefa = testarIniciarTarefa;
    window.resetTarefa = resetTarefa;
    
    console.log('🔧 Funções disponíveis no console:');
    console.log('- debugTarefaAtual()');
    console.log('- debugTarefa(ID)');
    console.log('- testarIniciarTarefa(ID)');
    console.log('- resetTarefa()');
});
</script>
<script>
// Confirmação para exclusão
document.addEventListener('DOMContentLoaded', function() {
    const deleteButtons = document.querySelectorAll('.delete-btn');
    deleteButtons.forEach(button => {
        button.addEventListener('click', function(e) {
            const itemName = this.getAttribute('data-item-name');
            if (!confirm(`Tem certeza que deseja excluir a tarefa "${itemName}"?`)) {
                e.preventDefault();
            }
        });
    });
});

// Funções wrapper para compatibilidade com os botões existentes
function iniciarTarefa() {
    if (taskController) {
        taskController.iniciarTarefa();
    }
}

function pausarTarefa() {
    if (taskController) {
        taskController.pausarTarefa();
    }
}

function retomarTarefa() {
    if (taskController) {
        taskController.retomarTarefa();
    }
}



function concluirTarefa() {
    if (taskController) {
        taskController.concluirTarefa();
    }
}

function marcarConcluida() {
    if (taskController) {
        taskController.concluirTarefa();
    }
}

function resetTarefa() {
    if (taskController) {
        taskController.resetTarefa();
    }
}

// Funções de debug adicionais
function debugTarefaAtual() {
    const url = window.location.pathname;
    const match = url.match(/\/tasks\/(\d+)\//);
    if (match) {
        const taskId = match[1];
        debugTarefa(taskId);
    } else {
        console.log('❌ Não foi possível identificar o ID da tarefa na URL');
        console.log('URL atual:', url);
    }
}

function debugTarefa(taskId) {
    console.log(`🔍 Debugando tarefa ${taskId}...`);
    
    fetch(`/tasks/${taskId}/debug/`, {
        method: 'GET',
        headers: {
            'X-CSRFToken': getCookie('csrftoken'),
        }
    })
    .then(response => response.json())
    .then(data => {
        console.log('📊 Informações da Tarefa:', data);
        console.log('🔍 Análise:');
        console.log(`- Status: ${data.status} (${data.status_display})`);
        console.log(`- Está trabalhando: ${data.esta_trabalhando}`);
        console.log(`- Pode iniciar: ${data.pode_iniciar}`);
        console.log(`- Responsável: ${data.responsavel || 'Nenhum'}`);
        console.log(`- Usuário atual: ${data.user_atual}`);
        console.log(`- É responsável: ${data.user_is_responsavel}`);
    })
    .catch(error => {
        console.error('❌ Erro ao debugar tarefa:', error);
    });
}

function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

// Função para abrir modal de logs
function abrirModalLogs() {
    const modalElement = document.getElementById('logsSessoesModal');
    if (modalElement) {
        const modal = new bootstrap.Modal(modalElement);
        modal.show();
        // Carregar logs automaticamente
        if (typeof carregarLogs === 'function') {
            carregarLogs();
        }
    } else {
        console.error('❌ Modal de logs não encontrado');
    }
}
</script>

<style>
.timeline {
    position: relative;
    padding-left: 30px;
}

.timeline-item {
    position: relative;
    margin-bottom: 20px;
}

.timeline-marker {
    position: absolute;
    left: -35px;
    top: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.timeline-content {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border-left: 3px solid #007bff;
}
</style>
{% endblock %}