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

{% block title %}Workspaces - {{ 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 active" aria-current="page">Workspaces</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">
    <h1><i class="bi bi-house"></i> Workspaces</h1>
    <div class="btn-group">
        {% if user.is_superuser %}
            <button id="openWorkspaceModal" class="btn btn-primary">
                <i class="bi bi-plus-circle"></i> Novo Workspace
            </button>
        {% endif %}
        <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-house display-4 text-primary"></i>
                <h3 class="text-primary">{{ workspaces.count|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">{{ workspaces_ativos|default:0 }}</h3>
                <p class="text-muted mb-0">Ativos</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-center">
            <div class="card-body">
                <i class="bi bi-people display-4 text-info"></i>
                <h3 class="text-info">{{ total_clientes|default:0 }}</h3>
                <p class="text-muted mb-0">Clientes</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-center">
            <div class="card-body">
                <i class="bi bi-kanban display-4 text-warning"></i>
                <h3 class="text-warning">{{ total_projetos|default:0 }}</h3>
                <p class="text-muted mb-0">Projetos</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-4">
                    <label for="search" class="form-label">Buscar</label>
                    <input type="text" class="form-control" id="search" name="search" 
                           value="{{ search }}" placeholder="Nome do workspace ou cliente...">
                </div>
                <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="ativo" {% if status == 'ativo' %}selected{% endif %}>Ativo</option>
                        <option value="inativo" {% if status == 'inativo' %}selected{% endif %}>Inativo</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="cliente" class="form-label">Cliente</label>
                    <select class="form-select" id="cliente" name="cliente">
                        <option value="">Todos</option>
                        {% for cliente in clientes %}
                            <option value="{{ cliente.id }}" {% if cliente_id == cliente.id|stringformat:"s" %}selected{% endif %}>
                                {{ cliente.nome }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-2 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary me-2">
                        <i class="bi bi-search"></i> Buscar
                    </button>
                    <a href="{% url 'workspace:list' %}" class="btn btn-outline-secondary">
                        <i class="bi bi-x-circle"></i> Limpar
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Lista de Workspaces -->
{% if workspaces %}
<div class="row">
    {% for workspace in workspaces %}
    <div class="col-lg-4 col-md-6 mb-4">
        <div class="card h-100 shadow-sm">
            <div class="card-header" style="background-color: {{ workspace.cor }}; color: white;">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        <i class="bi bi-house"></i> {{ workspace.nome }}
                    </h5>
                    {% if workspace.ativo %}
                        <span class="badge bg-success">Ativo</span>
                    {% else %}
                        <span class="badge bg-secondary">Inativo</span>
                    {% endif %}
                </div>
            </div>
            <div class="card-body">
                <p class="text-muted mb-2">
                                                    <i class="bi bi-people"></i> {{ workspace.cliente.nome }}
                </p>
                
                {% if workspace.descricao %}
                    <p class="card-text">{{ workspace.descricao|truncatewords:20 }}</p>
                {% else %}
                    <p class="text-muted">Sem descrição</p>
                {% endif %}
                
                <div class="row text-center mb-3">
                    <div class="col-4">
                        <div class="border-end">
                            <h6 class="text-primary mb-0">{{ workspace.total_portfolios|default:0 }}</h6>
                            <small class="text-muted">Portfolios</small>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="border-end">
                            <h6 class="text-success mb-0">{{ workspace.total_projects|default:0 }}</h6>
                            <small class="text-muted">Projetos</small>
                        </div>
                    </div>
                    <div class="col-4">
                        <h6 class="text-info mb-0">{{ workspace.total_boards|default:0 }}</h6>
                        <small class="text-muted">Quadros</small>
                    </div>
                </div>
                
                <div class="mb-2">
                    <small class="text-muted">
                        <i class="bi bi-calendar"></i> Criado: {{ workspace.created_at|date:"d/m/Y" }}
                    </small>
                </div>
                
                {% if workspace.updated_at != workspace.created_at %}
                <div class="mb-0">
                    <small class="text-muted">
                        <i class="bi bi-clock"></i> Atualizado: {{ workspace.updated_at|date:"d/m/Y" }}
                    </small>
                </div>
                {% endif %}
            </div>
            <div class="card-footer bg-transparent">
                <div class="btn-group w-100" role="group">
                    <a href="{% url 'workspace:detail' workspace.pk %}" 
                       class="btn btn-outline-primary btn-sm">
                        <i class="bi bi-eye"></i> Ver
                    </a>
                    {% if user.is_superuser %}
                        <button class="btn btn-outline-secondary btn-sm 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 btn-sm delete-btn"
                           data-item-name="{{ workspace.nome }}">
                            <i class="bi bi-trash"></i> Excluir
                        </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

<!-- Paginação -->
{% if is_paginated %}
<nav aria-label="Paginação" class="mt-4">
    <ul class="pagination justify-content-center">
        {% if page_obj.has_previous %}
            <li class="page-item">
                <a class="page-link" href="?page=1{% if search %}&search={{ search }}{% endif %}{% if status %}&status={{ status }}{% endif %}{% if cliente_id %}&cliente={{ cliente_id }}{% 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 search %}&search={{ search }}{% endif %}{% if status %}&status={{ status }}{% endif %}{% if cliente_id %}&cliente={{ cliente_id }}{% endif %}">
                    <i class="bi bi-chevron-left"></i>
                </a>
            </li>
        {% endif %}
        
        <li class="page-item active">
            <span class="page-link">
                {{ page_obj.number }} de {{ page_obj.paginator.num_pages }}
            </span>
        </li>
        
        {% if page_obj.has_next %}
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if search %}&search={{ search }}{% endif %}{% if status %}&status={{ status }}{% endif %}{% if cliente_id %}&cliente={{ cliente_id }}{% 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 search %}&search={{ search }}{% endif %}{% if status %}&status={{ status }}{% endif %}{% if cliente_id %}&cliente={{ cliente_id }}{% endif %}">
                    <i class="bi bi-chevron-double-right"></i>
                </a>
            </li>
        {% endif %}
    </ul>
</nav>
{% endif %}

{% else %}
<!-- Estado vazio -->
<div class="text-center py-5">
    <i class="bi bi-house display-1 text-muted"></i>
    <h4 class="text-muted mt-3">
        {% if search or status or cliente_id %}
            Nenhum workspace encontrado
        {% else %}
            Nenhum workspace criado ainda
        {% endif %}
    </h4>
    <p class="text-muted">
        {% if search or status or cliente_id %}
            Tente ajustar os filtros de busca.
        {% else %}
            Comece criando seu primeiro workspace.
        {% endif %}
    </p>
    {% if not search and not status and not cliente_id %}
        {% if user.is_superuser %}
            <button id="openWorkspaceModalEmpty" class="btn btn-primary">
                <i class="bi bi-plus-circle"></i> Criar Primeiro Workspace
            </button>
        {% endif %}
    {% endif %}
</div>
{% endif %}
{% 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 criação de workspace
    const openWorkspaceModal = document.getElementById('openWorkspaceModal');
    const openWorkspaceModalEmpty = document.getElementById('openWorkspaceModalEmpty');
    
    if (openWorkspaceModal) {
        openWorkspaceModal.addEventListener('click', function() {
            loadWorkspaceCreateModal();
        });
    }
    
    if (openWorkspaceModalEmpty) {
        openWorkspaceModalEmpty.addEventListener('click', function() {
            loadWorkspaceCreateModal();
        });
    }

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

    function loadWorkspaceCreateModal() {
        fetch('{% url "workspace:create_modal" %}')
            .then(function(response) {
                return response.text();
            })
            .then(function(html) {
                const modalContainer = document.getElementById('modalContainer');
                modalContainer.innerHTML = html;
                
                const modal = new bootstrap.Modal(document.getElementById('createWorkspaceModal'));
                modal.show();
                
                setupWorkspaceForm();
            })
            .catch(function(error) {
                console.error('Erro ao carregar modal:', error);
                showAlert('Erro ao carregar formulário', 'danger');
            });
    }

    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 setupWorkspaceForm() {
        const form = document.getElementById('workspaceForm');
        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);
                
                fetch('{% url "workspace:create_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('createWorkspaceModal'));
                        if (modal) {
                            modal.hide();
                        }
                        // Recarregar a página para mostrar o novo workspace
                        setTimeout(() => {
                            window.location.reload();
                        }, 1500);
                    } else {
                        showFormErrors(data.errors);
                    }
                })
                .catch(error => {
                    console.error('Erro:', error);
                    showAlert('Erro ao criar workspace', '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 %}