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

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

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

<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1>
            <i class="bi bi-house"></i> {{ workspace.nome }}
            {% if workspace.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-people"></i> Cliente: {{ workspace.cliente.nome }}
        </p>
    </div>
    <div class="btn-group">
        {% if can_manage %}
            <button class="btn btn-outline-secondary edit-workspace-btn" 
                    data-workspace-id="{{ workspace.pk }}">
                <i class="bi bi-pencil"></i> Editar
            </button>
            <a href="{% url 'workspace:delete' workspace.pk %}" 
               class="btn btn-outline-danger delete-btn"
               data-item-name="{{ workspace.nome }}">
                <i class="bi bi-trash"></i> Excluir
            </a>
            <a href="{% url 'permissions:workspace_permissions' workspace.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 Workspace -->
    <div class="col-lg-4">
        <div class="card mb-4">
            <div class="card-header" style="background-color: {{ workspace.cor }}; color: white;">
                <h5 class="mb-0"><i class="bi bi-info-circle"></i> Informações</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <strong>Nome:</strong><br>
                    {{ workspace.nome }}
                </div>
                
                <div class="mb-3">
                    <strong>Cliente:</strong><br>
                                            <a href="{% url 'client:detail' workspace.cliente.pk %}">
                            {{ workspace.cliente.nome }}
                    </a>
                </div>
                
                {% if workspace.descricao %}
                <div class="mb-3">
                    <strong>Descrição:</strong><br>
                    {{ workspace.descricao|linebreaks }}
                </div>
                {% endif %}
                
                <div class="mb-3">
                    <strong>Cor:</strong><br>
                    <span class="badge" style="background-color: {{ workspace.cor }}; color: white;">
                        {{ workspace.cor }}
                    </span>
                </div>
                
                <div class="mb-3">
                    <strong>Status:</strong><br>
                    {% if workspace.ativo %}
                        <span class="badge bg-success">Ativo</span>
                    {% else %}
                        <span class="badge bg-secondary">Inativo</span>
                    {% endif %}
                </div>
                
                <div class="mb-3">
                    <strong>Criado em:</strong><br>
                    {{ workspace.created_at|date:"d/m/Y H:i" }}
                </div>
                
                <div class="mb-0">
                    <strong>Atualizado em:</strong><br>
                    {{ workspace.updated_at|date:"d/m/Y H:i" }}
                </div>
            </div>
        </div>
    </div>
    
    <!-- Estatísticas -->
    <div class="col-lg-8">
        <div class="row">
            <div class="col-md-4 mb-4">
                <div class="card text-center">
                    <div class="card-body">
                        <i class="bi bi-folder display-4 text-primary"></i>
                        <h3 class="text-primary">{{ workspace.total_portfolios|default:0 }}</h3>
                        <p class="text-muted mb-0">Portfolios</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4 mb-4">
                <div class="card text-center">
                    <div class="card-body">
                        <i class="bi bi-kanban display-4 text-success"></i>
                        <h3 class="text-success">{{ workspace.total_projects|default:0 }}</h3>
                        <p class="text-muted mb-0">Projetos</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4 mb-4">
                <div class="card text-center">
                    <div class="card-body">
                        <i class="bi bi-grid display-4 text-info"></i>
                        <h3 class="text-info">{{ workspace.total_boards|default:0 }}</h3>
                        <p class="text-muted mb-0">Quadros</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Portfolios -->
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="bi bi-folder"></i> Portfolios</h5>
                <a href="{% url 'portfolio:list' %}" class="btn btn-primary btn-sm">
                    <i class="bi bi-plus-circle"></i> Novo Portfolio
                </a>
            </div>
            <div class="card-body">
                {% if portfolios %}
                    <div class="list-group list-group-flush">
                        {% for portfolio in portfolios %}
                        <div class="list-group-item d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="mb-1">
                                    <i class="bi bi-folder text-primary"></i>
                                    <a href="{% url 'portfolio:detail' portfolio.pk %}" class="text-decoration-none">
                                        {{ portfolio.nome }}
                                    </a>
                                </h6>
                                <small class="text-muted">
                                    Status: 
                                    <span class="badge bg-{{ portfolio.get_status_display|lower }}">
                                        {{ portfolio.get_status_display }}
                                    </span>
                                    {% if portfolio.progresso %}
                                        • Progresso: {{ portfolio.progresso }}%
                                    {% endif %}
                                </small>
                            </div>
                            <div class="btn-group btn-group-sm">
                                <a href="{% url 'portfolio:detail' portfolio.pk %}" class="btn btn-outline-primary">
                                    <i class="bi bi-eye"></i>
                                </a>
                                <button class="btn btn-outline-secondary edit-portfolio-btn" 
                                        data-portfolio-id="{{ portfolio.pk }}">
                                    <i class="bi bi-pencil"></i>
                                </button>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    {% if workspace.total_portfolios > 5 %}
                        <div class="text-center mt-3">
                            <a href="{% url 'portfolio:list' %}?workspace={{ workspace.pk }}" class="btn btn-outline-primary btn-sm">
                                <i class="bi bi-eye"></i> Ver Todos os Portfolios ({{ workspace.total_portfolios }})
                            </a>
                        </div>
                    {% endif %}
                {% else %}
                    <div class="text-center py-4">
                        <i class="bi bi-folder text-muted display-4"></i>
                        <h6 class="text-muted mt-2">Nenhum portfolio criado</h6>
                        <p class="text-muted">Este workspace ainda não possui portfolios.</p>
                        <a href="{% url 'portfolio:list' %}" class="btn btn-primary btn-sm">
                            <i class="bi bi-plus-circle"></i> Criar Primeiro Portfolio
                        </a>
                    </div>
                {% endif %}
            </div>
        </div>
        
        <!-- Projetos Recentes -->
        <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> Projetos Recentes</h5>
                <a href="{% url 'project:list' %}" class="btn btn-primary btn-sm">
                    <i class="bi bi-plus-circle"></i> Novo Projeto
                </a>
            </div>
            <div class="card-body">
                {% if projects %}
                    <div class="list-group list-group-flush">
                        {% for project in projects %}
                        <div class="list-group-item d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="mb-1">
                                    <i class="bi bi-kanban text-success"></i>
                                    <a href="{% url 'project:detail' project.pk %}" class="text-decoration-none">
                                        {{ project.nome }}
                                    </a>
                                </h6>
                                <small class="text-muted">
                                    Portfolio: 
                                    <a href="{% url 'portfolio:detail' project.portfolio.pk %}" class="text-decoration-none">
                                        {{ project.portfolio.nome }}
                                    </a>
                                    • Status: 
                                    <span class="badge bg-{{ project.get_status_display|lower }}">
                                        {{ project.get_status_display }}
                                    </span>
                                    {% if project.progresso %}
                                        • Progresso: {{ project.progresso }}%
                                    {% endif %}
                                </small>
                            </div>
                            <div class="btn-group btn-group-sm">
                                <a href="{% url 'project:detail' project.pk %}" class="btn btn-outline-success">
                                    <i class="bi bi-eye"></i>
                                </a>
                                <button class="btn btn-outline-secondary edit-project-btn" 
                                        data-project-id="{{ project.pk }}">
                                    <i class="bi bi-pencil"></i>
                                </button>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    {% if workspace.total_projects > 5 %}
                        <div class="text-center mt-3">
                            <a href="{% url 'project:list' %}?workspace={{ workspace.pk }}" class="btn btn-outline-success btn-sm">
                                <i class="bi bi-eye"></i> Ver Todos os Projetos ({{ workspace.total_projects }})
                            </a>
                        </div>
                    {% endif %}
                {% else %}
                    <div class="text-center py-4">
                        <i class="bi bi-kanban text-muted display-4"></i>
                        <h6 class="text-muted mt-2">Nenhum projeto criado</h6>
                        <p class="text-muted">Este workspace ainda não possui projetos.</p>
                        <a href="{% url 'project:list' %}" class="btn btn-success btn-sm">
                            <i class="bi bi-plus-circle"></i> Criar Primeiro Projeto
                        </a>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<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 o workspace "${itemName}"?`)) {
                e.preventDefault();
            }
        });
    });

    // Modal de edição de workspace
    const editWorkspaceBtn = document.querySelector('.edit-workspace-btn');
    if (editWorkspaceBtn) {
        editWorkspaceBtn.addEventListener('click', function() {
            const workspaceId = this.getAttribute('data-workspace-id');
            loadWorkspaceEditModal(workspaceId);
        });
    }

    function loadWorkspaceEditModal(workspaceId) {
        fetch(`/workspaces/${workspaceId}/edit-modal/`)
            .then(response => response.text())
            .then(html => {
                const modalContainer = document.getElementById('modalContainer');
                modalContainer.innerHTML = html;
                
                const modal = new bootstrap.Modal(document.getElementById('editWorkspaceModal'));
                modal.show();
                
                setupWorkspaceEditForm();
            })
            .catch(error => {
                console.error('Erro ao carregar modal:', error);
                showAlert('Erro ao carregar formulário', 'danger');
            });
    }

    function setupWorkspaceEditForm() {
        const form = document.getElementById('workspaceEditForm');
        if (form) {
            // Preview da cor em tempo real
            const colorInput = form.querySelector('input[type="color"]');
            const colorPreview = form.querySelector('#colorPreview');
            if (colorInput && colorPreview) {
                colorInput.addEventListener('input', function() {
                    colorPreview.style.backgroundColor = this.value;
                    colorPreview.textContent = this.value;
                });
            }

            form.addEventListener('submit', function(e) {
                e.preventDefault();
                
                const formData = new FormData(form);
                const workspaceId = document.querySelector('.edit-workspace-btn').getAttribute('data-workspace-id');
                
                fetch(`/workspaces/${workspaceId}/edit-modal/`, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showAlert(data.message, 'success');
                        const modal = bootstrap.Modal.getInstance(document.getElementById('editWorkspaceModal'));
                        if (modal) {
                            modal.hide();
                        }
                        // Recarregar a página para mostrar as alterações
                        setTimeout(() => {
                            window.location.reload();
                        }, 1500);
                    } else {
                        showFormErrors(data.errors);
                    }
                })
                .catch(error => {
                    console.error('Erro:', error);
                    showAlert('Erro ao atualizar workspace', 'danger');
                });
            });
        }
    }

    function showAlert(message, type) {
        const alertDiv = document.createElement('div');
        alertDiv.className = `alert alert-${type} alert-dismissible fade show position-fixed`;
        alertDiv.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
        alertDiv.innerHTML = `
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;
        document.body.appendChild(alertDiv);
        
        setTimeout(() => {
            if (alertDiv.parentNode) {
                alertDiv.remove();
            }
        }, 5000);
    }

    function showFormErrors(errors) {
        // Limpar erros anteriores
        document.querySelectorAll('.invalid-feedback').forEach(el => el.remove());
        document.querySelectorAll('.is-invalid').forEach(el => el.classList.remove('is-invalid'));
        
        // Mostrar novos erros
        Object.keys(errors).forEach(fieldName => {
            const field = document.querySelector(`[name="${fieldName}"]`);
            if (field) {
                field.classList.add('is-invalid');
                const errorDiv = document.createElement('div');
                errorDiv.className = 'invalid-feedback d-block';
                errorDiv.textContent = errors[fieldName].join(', ');
                field.parentNode.appendChild(errorDiv);
            }
        });
    }
});
</script>
{% endblock %}