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

{% block title %}{{ board.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 'board:list' %}">Boards</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ board.nome }}</li>
        </ol>
    </div>
</nav>
{% endblock %}

{% block content %}
<!-- Container para o modal -->
<div id="modalContainer"></div>

<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1>
            <i class="bi bi-kanban"></i> {{ board.nome }}
            {% if board.ativo %}
                <span class="badge bg-success">Ativo</span>
            {% else %}
                <span class="badge bg-secondary">Inativo</span>
            {% endif %}
        </h1>
        <p class="text-muted mb-0">
            <i class="bi bi-house"></i> {{ board.workspace.nome }}
        </p>
    </div>
    <div class="btn-group">
        {% if user.is_superuser %}
            <button type="button" 
                    class="btn btn-outline-secondary edit-board-btn"
                    data-board-id="{{ board.pk }}"
                    data-board-name="{{ board.nome }}">
                <i class="bi bi-pencil"></i> Editar
            </button>
            <a href="{% url 'board:delete' board.pk %}" 
               class="btn btn-outline-danger delete-btn"
               data-item-name="{{ board.nome }}">
                <i class="bi bi-trash"></i> Excluir
            </a>
            <a href="{% url 'permissions:board_permissions' board.pk %}" 
               class="btn btn-outline-info">
                <i class="bi bi-shield-lock"></i> Gerenciar Permissões
            </a>
        {% endif %}
    </div>
</div>

<div class="row">
    <!-- Informações do Board -->
    <div class="col-lg-4">
        <div class="card mb-4">
            <div class="card-header bg-gradient-dark text-white">
                <h5 class="mb-0"><i class="bi bi-info-circle"></i> Informações do Board</h5>
            </div>
            <div class="card-body">
                {% if board.descricao %}
                    <div class="mb-3">
                        <strong>Descrição:</strong>
                        <p class="mb-0">{{ board.descricao }}</p>
                    </div>
                {% endif %}
                
                <div class="mb-3">
                    <strong><i class="bi bi-house"></i> Workspace:</strong><br>
                    {{ board.workspace.nome }}
                </div>
                
                <div class="mb-3">
                    <strong><i class="bi bi-project"></i> Projeto:</strong><br>
                    {{ board.project.nome }}
                </div>
                
                {% if board.cor %}
                <div class="mb-3">
                    <strong><i class="bi bi-palette"></i> Cor:</strong><br>
                    <div class="d-flex align-items-center">
                        <div class="rounded me-2" style="width: 20px; height: 20px; background-color: {{ board.cor }};"></div>
                        <span>{{ board.cor }}</span>
                    </div>
                </div>
                {% endif %}
                
                <div class="mb-3">
                    <strong><i class="bi bi-clock"></i> Status:</strong><br>
                    {% if board.ativo %}
                        <span class="badge bg-success">Ativo</span>
                    {% else %}
                        <span class="badge bg-secondary">Inativo</span>
                    {% endif %}
                </div>
                
                <div class="mb-0">
                    <strong><i class="bi bi-calendar"></i> Data de Criação:</strong><br>
                    {{ board.created_at|date:"d/m/Y H:i" }}
                </div>
            </div>
        </div>
        
        <!-- Estatísticas -->
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-graph-up"></i> Estatísticas</h5>
            </div>
            <div class="card-body">
                <div class="row text-center">
                    <div class="col-6 mb-3">
                        <h4 class="text-primary">{{ board.total_groups }}</h4>
                        <small class="text-muted">Grupos</small>
                    </div>
                    <div class="col-6 mb-3">
                        <h4 class="text-success">{{ board.total_tasks }}</h4>
                        <small class="text-muted">Tarefas</small>
                    </div>
                </div>
                
                <div class="progress mb-2" style="height: 8px;">
                    <div class="progress-bar bg-success" role="progressbar" 
                         style="width: {{ board.progresso_percentual }}%">
                    </div>
                </div>
                <small class="text-muted">{{ board.progresso_percentual }}% concluído</small>
            </div>
        </div>
    </div>
    
    <!-- Board Kanban -->
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="bi bi-kanban"></i> Visualização do Board</h5>
                <div class="btn-group">
                    <button type="button" class="btn btn-primary btn-sm" id="openGroupModal">
                        <i class="bi bi-plus-circle"></i> Novo Grupo
                    </button>
                    <button type="button" class="btn btn-success btn-sm" id="openTaskModal">
                        <i class="bi bi-plus-circle"></i> Nova Tarefa
                    </button>
                </div>
            </div>
            <div class="card-body">
                {% if board.groups.all %}
                <div class="kanban-board">
                    <div class="row">
                        {% for group in board.groups.all %}
                        <div class="col-md-4 mb-3">
                            <div class="kanban-column">
                                <div class="kanban-column-header" style="background-color: {{ group.cor|default:'#6c757d' }};">
                                    <div>
                                        <h6 class="text-white mb-0">{{ group.nome }}</h6>
                                        <small class="text-white-50">{{ group.get_tipo_display }}</small>
                                    </div>
                                    <div class="text-end">
                                        <span class="badge bg-light text-dark">{{ group.total_tasks }}</span>
                                        {% if group.limite_tarefas %}
                                            <small class="text-white-50 d-block">/{{ group.limite_tarefas }}</small>
                                        {% endif %}
                                    </div>
                                </div>
                                
                                <!-- Estatísticas do Grupo -->
                                <div class="kanban-column-stats p-2 bg-light border-bottom">
                                    <div class="row text-center">
                                        <div class="col-4">
                                            <small class="text-muted d-block">{{ group.tasks_nao_iniciadas }}</small>
                                            <small class="text-muted">Pendentes</small>
                                        </div>
                                        <div class="col-4">
                                            <small class="text-muted d-block">{{ group.tasks_em_andamento }}</small>
                                            <small class="text-muted">Em Andamento</small>
                                        </div>
                                        <div class="col-4">
                                            <small class="text-muted d-block">{{ group.tasks_concluidas }}</small>
                                            <small class="text-muted">Concluídas</small>
                                        </div>
                                    </div>
                                    <div class="progress mt-1" style="height: 4px;">
                                        <div class="progress-bar bg-success" style="width: {{ group.progresso_percentual }}%"></div>
                                    </div>
                                </div>
                                
                                <div class="kanban-column-body">
                                    {% for task in group.get_tarefas_ordenadas %}
                                    <div class="kanban-task">
                                        <div class="d-flex justify-content-between align-items-start mb-1">
                                            <h6 class="mb-0">{{ task.nome }}</h6>
                                            <span class="badge bg-{{ task.prioridade }} small">
                                                {{ task.get_prioridade_display }}
                                            </span>
                                        </div>
                                        
                                        {% if task.descricao %}
                                            <p class="text-muted small mb-2">{{ task.descricao|truncatewords:8 }}</p>
                                        {% endif %}
                                        
                                        <div class="d-flex justify-content-between align-items-center">
                                            {% if task.responsavel %}
                                                <small class="text-muted">{{ task.responsavel.nome }}</small>
                                            {% else %}
                                                <small class="text-muted">Sem responsável</small>
                                            {% endif %}
                                            
                                            <div class="text-end">
                                                <span class="badge bg-{{ task.status|yesno:'success,warning,danger,info,secondary' }} small">
                                                    {{ task.get_status_display }}
                                                </span>
                                                {% if task.is_atrasada %}
                                                    <span class="badge bg-danger small ms-1">Atrasada</span>
                                                {% endif %}
                                            </div>
                                        </div>
                                        
                                        <!-- Progresso da tarefa -->
                                        {% if task.esforco_previsto > 0 %}
                                        <div class="mt-2">
                                            <div class="d-flex justify-content-between small text-muted">
                                                <span>{{ task.esforco_utilizado|floatformat:1 }}h</span>
                                                <span>{{ task.esforco_previsto|floatformat:1 }}h</span>
                                            </div>
                                            <div class="progress" style="height: 3px;">
                                                <div class="progress-bar bg-info" style="width: {{ task.progresso_percentual }}%"></div>
                                            </div>
                                        </div>
                                        {% endif %}
                                    </div>
                                    {% empty %}
                                    <div class="text-center py-3">
                                        <i class="bi bi-list-task text-muted"></i>
                                        <p class="text-muted small mb-0">Nenhuma tarefa</p>
                                    </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                {% else %}
                <div class="text-center py-5">
                    <i class="bi bi-collection text-muted display-4"></i>
                    <h6 class="text-muted mt-2">Nenhum grupo encontrado</h6>
                    <p class="text-muted">Este board ainda não possui grupos.</p>
                    <button type="button" class="btn btn-primary" id="openGroupModalEmpty">
                        <i class="bi bi-plus-circle"></i> Criar Primeiro Grupo
                    </button>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM carregado - Detalhes do Board');
    console.log('Bootstrap disponível:', typeof bootstrap !== 'undefined');
    
    // Confirmação para exclusão
    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 o board "${itemName}"?`)) {
                e.preventDefault();
            }
        });
    });
    
    // Abrir modal de edição de board via AJAX
    const editBoardBtn = document.querySelector('.edit-board-btn');
    if (editBoardBtn) {
        editBoardBtn.addEventListener('click', function() {
            const boardId = this.getAttribute('data-board-id');
            const boardName = this.getAttribute('data-board-name');
            console.log(`Abrindo modal de edição para board: ${boardName} (ID: ${boardId})`);
            
            // Carregar o modal via AJAX
            fetch(`/boards/${boardId}/edit-modal/`)
                .then(response => response.text())
                .then(html => {
                    // Criar um elemento temporário para extrair o modal
                    const tempDiv = document.createElement('div');
                    tempDiv.innerHTML = html;
                    
                    // Encontrar o modal no HTML retornado
                    const modalHtml = tempDiv.querySelector('.modal');
                    if (modalHtml) {
                        // Remover modal existente se houver
                        const existingModal = document.getElementById('editBoardModal');
                        if (existingModal) {
                            existingModal.remove();
                        }
                        
                        // Adicionar o novo modal ao body
                        document.body.appendChild(modalHtml);
                        
                        // Mostrar o modal
                        const modal = new bootstrap.Modal(modalHtml);
                        modal.show();
                        
                        // Adicionar event listener para o formulário
                        setupBoardEditForm();
                    } else {
                        console.error('Modal de edição não encontrado no HTML retornado');
                    }
                })
                .catch(error => {
                    console.error('Erro ao carregar modal de edição:', error);
                });
        });
    }
    
    // Setup board edit form function
    function setupBoardEditForm() {
        const boardEditForm = document.getElementById('boardEditForm');
        if (boardEditForm) {
            console.log('Formulário de edição de board encontrado');
            boardEditForm.addEventListener('submit', function(e) {
                e.preventDefault();
                console.log('Formulário de edição submetido');
                
                const formData = new FormData(this);
                
                fetch(this.action, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRFToken': formData.get('csrfmiddlewaretoken')
                    }
                })
                .then(response => response.json())
                .then(data => {
                    console.log('Resposta de edição:', data);
                    if (data.success) {
                        // Show success message
                        showAlert('success', data.message);
                        
                        // Close modal
                        const modalElement = document.getElementById('editBoardModal');
                        if (modalElement) {
                            const modal = bootstrap.Modal.getInstance(modalElement);
                            if (modal) {
                                modal.hide();
                            } else {
                                // Fallback: remove classes manually
                                modalElement.classList.remove('show');
                                modalElement.style.display = 'none';
                                document.body.classList.remove('modal-open');
                                const backdrop = document.querySelector('.modal-backdrop');
                                if (backdrop) backdrop.remove();
                            }
                        }
                        
                        // Reload page to show updated board
                        setTimeout(() => {
                            window.location.reload();
                        }, 1000);
                    } else {
                        // Show errors
                        showFormErrors(data.errors);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showAlert('danger', 'Erro ao atualizar board. Tente novamente.');
                });
            });
        }
    }
    
    // Abrir modal de grupo via AJAX
    const openGroupModalBtns = document.querySelectorAll('#openGroupModal, #openGroupModalEmpty');
    openGroupModalBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            console.log('Abrindo modal de grupo...');
            
            // Carregar o modal via AJAX
            fetch('{% url "task:create_group_modal" %}')
                .then(response => response.text())
                .then(html => {
                    // Criar um elemento temporário para extrair o modal
                    const tempDiv = document.createElement('div');
                    tempDiv.innerHTML = html;
                    
                    // Encontrar o modal no HTML retornado
                    const modalHtml = tempDiv.querySelector('.modal');
                    if (modalHtml) {
                        // Remover modal existente se houver
                        const existingModal = document.getElementById('createGroupModal');
                        if (existingModal) {
                            existingModal.remove();
                        }
                        
                        // Adicionar o novo modal ao body
                        document.body.appendChild(modalHtml);
                        
                        // Mostrar o modal
                        const modal = new bootstrap.Modal(modalHtml);
                        modal.show();
                        
                        // Adicionar event listener para o formulário
                        setupGroupForm();
                    } else {
                        console.error('Modal não encontrado no HTML retornado');
                    }
                })
                .catch(error => {
                    console.error('Erro ao carregar modal:', error);
                });
        });
    });
    
    // Setup group form function
    function setupGroupForm() {
        const groupForm = document.getElementById('groupForm');
        if (groupForm) {
            console.log('Formulário de grupo encontrado');
            
            // Pré-selecionar o board atual se disponível
            const boardSelect = groupForm.querySelector('[name="board"]');
            if (boardSelect) {
                const currentBoardId = '{{ board.pk }}';
                if (currentBoardId) {
                    boardSelect.value = currentBoardId;
                }
            }
            
            groupForm.addEventListener('submit', function(e) {
                e.preventDefault();
                console.log('Formulário submetido');
                
                const formData = new FormData(this);
                
                fetch('{% url "task:create_group_modal" %}', {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRFToken': formData.get('csrfmiddlewaretoken')
                    }
                })
                .then(response => response.json())
                .then(data => {
                    console.log('Resposta:', data);
                    if (data.success) {
                        // Show success message
                        showAlert('success', data.message);
                        
                        // Close modal
                        const modalElement = document.getElementById('createGroupModal');
                        if (modalElement) {
                            const modal = bootstrap.Modal.getInstance(modalElement);
                            if (modal) {
                                modal.hide();
                            } else {
                                // Fallback: remove classes manually
                                modalElement.classList.remove('show');
                                modalElement.style.display = 'none';
                                document.body.classList.remove('modal-open');
                                const backdrop = document.querySelector('.modal-backdrop');
                                if (backdrop) backdrop.remove();
                            }
                        }
                        
                        // Reset form
                        groupForm.reset();
                        
                        // Reload page to show new group
                        setTimeout(() => {
                            window.location.reload();
                        }, 1000);
                    } else {
                        // Show errors
                        showFormErrors(data.errors);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showAlert('danger', 'Erro ao criar grupo. Tente novamente.');
                });
            });
        }
    }
    
    // Abrir modal de tarefa via AJAX
    const openTaskModalBtn = document.querySelector('#openTaskModal');
    if (openTaskModalBtn) {
        openTaskModalBtn.addEventListener('click', function() {
            console.log('Abrindo modal de tarefa...');
            
            // Carregar o modal via AJAX
            fetch('{% url "task:create_modal" %}?board={{ board.pk }}')
                .then(response => response.text())
                .then(html => {
                    // Criar um elemento temporário para extrair o modal
                    const tempDiv = document.createElement('div');
                    tempDiv.innerHTML = html;
                    
                    // Encontrar o modal no HTML retornado
                    const modalHtml = tempDiv.querySelector('.modal');
                    if (modalHtml) {
                        // Remover modal existente se houver
                        const existingModal = document.getElementById('createTaskModal');
                        if (existingModal) {
                            existingModal.remove();
                        }
                        
                        // Adicionar o novo modal ao body
                        document.body.appendChild(modalHtml);
                        
                        // Mostrar o modal
                        const modal = new bootstrap.Modal(modalHtml);
                        modal.show();
                        
                        // Adicionar event listener para o formulário
                        setupTaskForm();
                    } else {
                        console.error('Modal não encontrado no HTML retornado');
                    }
                })
                .catch(error => {
                    console.error('Erro ao carregar modal:', error);
                });
        });
    }
    
    // Setup task form function
    function setupTaskForm() {
        const taskForm = document.getElementById('taskForm');
        if (taskForm) {
            console.log('Formulário de tarefa encontrado');
            
            // Filtrar grupos apenas do board atual se disponível
            const groupSelect = taskForm.querySelector('[name="group"]');
            if (groupSelect) {
                const currentBoardId = '{{ board.pk }}';
                if (currentBoardId) {
                    // Filtrar apenas grupos do board atual
                    const options = groupSelect.querySelectorAll('option');
                    options.forEach(option => {
                        const boardId = option.getAttribute('data-board-id');
                        if (boardId && boardId !== currentBoardId) {
                            option.style.display = 'none';
                        }
                    });
                }
            }
            
            taskForm.addEventListener('submit', function(e) {
                e.preventDefault();
                console.log('Formulário submetido');
                
                const formData = new FormData(this);
                
                fetch('{% url "task:create_modal" %}', {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRFToken': formData.get('csrfmiddlewaretoken')
                    }
                })
                .then(response => response.json())
                .then(data => {
                    console.log('Resposta:', data);
                    if (data.success) {
                        // Show success message
                        showAlert('success', data.message);
                        
                        // Close modal
                        const modalElement = document.getElementById('createTaskModal');
                        if (modalElement) {
                            const modal = bootstrap.Modal.getInstance(modalElement);
                            if (modal) {
                                modal.hide();
                            } else {
                                // Fallback: remove classes manually
                                modalElement.classList.remove('show');
                                modalElement.style.display = 'none';
                                document.body.classList.remove('modal-open');
                                const backdrop = document.querySelector('.modal-backdrop');
                                if (backdrop) backdrop.remove();
                            }
                        }
                        
                        // Reset form
                        taskForm.reset();
                        
                        // Reload page to show new task
                        setTimeout(() => {
                            window.location.reload();
                        }, 1000);
                    } else {
                        // Show errors
                        showFormErrors(data.errors);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showAlert('danger', 'Erro ao criar tarefa. Tente novamente.');
                });
            });
        }
    }
    
    // Show alert function
    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);
    }
    
    // Show form errors function
    function showFormErrors(errors) {
        // Clear previous errors
        document.querySelectorAll('.is-invalid').forEach(el => {
            el.classList.remove('is-invalid');
        });
        document.querySelectorAll('.invalid-feedback').forEach(el => {
            el.remove();
        });
        
        // Show new errors
        Object.keys(errors).forEach(field => {
            const input = document.querySelector(`[name="${field}"]`);
            if (input) {
                input.classList.add('is-invalid');
                
                const errorDiv = document.createElement('div');
                errorDiv.className = 'invalid-feedback';
                errorDiv.textContent = errors[field][0];
                input.parentNode.appendChild(errorDiv);
            }
        });
    }
});
</script>

<style>
.kanban-board {
    overflow-x: auto;
}

.kanban-column {
    background: #f8f9fa;
    border-radius: 8px;
    min-height: 400px;
}

.kanban-column-header {
    padding: 15px;
    border-radius: 8px 8px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kanban-column-body {
    padding: 15px;
    min-height: 300px;
}

.kanban-task {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

.kanban-task:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
</style>
{% endblock %}