{% extends "layout.html" %}

{% block content %}
<div class="page-container kanban-overview-container">
    <div class="page-header overview-header">
        <h2>Unified Kanban Boards</h2>
        <p class="overview-description">Organize tasks from any project on shared company-wide boards</p>
    </div>

    {% if create_board %}
    <!-- Create Board Form -->
    <div class="create-board-form">
        <div class="form-header">
            <h3>Create New Kanban Board</h3>
            <button type="button" id="cancel-create-board" class="btn btn-secondary">Cancel</button>
        </div>
        <form id="create-board-form" class="board-form">
            <div class="form-group">
                <label for="board-name">Board Name <span class="required">*</span></label>
                <input type="text" id="board-name" name="name" required placeholder="Enter board name">
            </div>
            <div class="form-group">
                <label for="board-description">Description</label>
                <textarea id="board-description" name="description" placeholder="Optional description"></textarea>
            </div>
            <div class="form-group">
                <label>
                    <input type="checkbox" id="board-is-default" name="is_default">
                    Set as default board
                </label>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn btn-primary">Create Board</button>
            </div>
        </form>
    </div>
    {% endif %}

    {% if boards %}
    <div class="boards-grid">
        {% for board in boards %}
        <div class="card board-card">
            <div class="card-header board-header">
                <div class="board-info">
                    <h3 class="board-name">
                        {{ board.name }}
                        {% if board.is_default %}
                        <span class="default-badge">Default</span>
                        {% endif %}
                    </h3>
                    {% if board.description %}
                    <p class="board-description">{{ board.description }}</p>
                    {% endif %}
                </div>
                <div class="board-actions">
                    <a href="{{ url_for('kanban_overview') }}?board={{ board.id }}" class="btn btn-primary">Open Board</a>
                    {% if g.user.role.value in ['Team Leader', 'Supervisor', 'Administrator', 'System Administrator'] %}
                    <button class="btn btn-secondary" onclick="editBoard({{ board.id }})">Edit</button>
                    {% endif %}
                </div>
            </div>

            <div class="board-stats-section">
                <div class="stat-grid">
                    <div class="stat-item">
                        <span class="stat-number">{{ board.columns|length }}</span>
                        <span class="stat-label">Columns</span>
                    </div>
                    <div class="stat-item">
                        {% set board_cards = 0 %}
                        {% for column in board.columns %}
                            {% set board_cards = board_cards + column.cards|selectattr('is_active')|list|length %}
                        {% endfor %}
                        <span class="stat-number">{{ board_cards }}</span>
                        <span class="stat-label">Cards</span>
                    </div>
                    <div class="stat-item">
                        {% set project_contexts = [] %}
                        {% for column in board.columns %}
                            {% for card in column.cards %}
                                {% if card.is_active and card.project_id and card.project_id not in project_contexts %}
                                    {% set _ = project_contexts.append(card.project_id) %}
                                {% endif %}
                            {% endfor %}
                        {% endfor %}
                        <span class="stat-number">{{ project_contexts|length }}</span>
                        <span class="stat-label">Projects</span>
                    </div>
                </div>
            </div>

            <!-- Quick Board Preview -->
            <div class="board-preview">
                {% if board.columns %}
                <h5>Board Preview</h5>
                <div class="preview-columns">
                    {% for column in board.columns %}
                    {% if loop.index <= 4 %}
                    <div class="preview-column" style="border-top: 3px solid {{ column.color }};">
                        <div class="preview-column-header">
                            <span class="preview-column-name">{{ column.name }}</span>
                            <span class="preview-card-count">{{ column.cards|selectattr('is_active')|list|length }}</span>
                        </div>
                        <div class="preview-cards">
                            {% set active_cards = column.cards|selectattr('is_active')|list %}
                            {% for card in active_cards %}
                            {% if loop.index <= 3 %}
                            <div class="preview-card" {% if card.color %}style="background-color: {{ card.color }};"{% endif %}>
                                <div class="preview-card-title">
                                    {% if card.project %}
                                    <span class="preview-card-project">[{{ card.project.code }}]</span>
                                    {% endif %}
                                    {% if card.title|length > 25 %}
                                        {{ card.title|truncate(25, True) }}
                                    {% else %}
                                        {{ card.title }}
                                    {% endif %}
                                </div>
                                {% if card.assigned_to %}
                                <div class="preview-card-assignee">{{ card.assigned_to.username }}</div>
                                {% endif %}
                            </div>
                            {% endif %}
                            {% endfor %}
                            {% if active_cards|length > 3 %}
                            <div class="preview-more">+{{ active_cards|length - 3 }} more</div>
                            {% endif %}
                        </div>
                    </div>
                    {% endif %}
                    {% endfor %}
                    {% if board.columns|length > 4 %}
                    <div class="preview-more-columns">
                        +{{ board.columns|length - 4 }} more columns
                    </div>
                    {% endif %}
                </div>
                {% endif %}
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- Quick Stats -->
    <div class="quick-stats">
        <div class="stat-card">
            <h3>{{ boards|length }}</h3>
            <p>Company Boards</p>
        </div>
        <div class="stat-card">
            {% set total_cards = 0 %}
            {% for board in boards %}
                {% for column in board.columns %}
                    {% set total_cards = total_cards + column.cards|selectattr('is_active')|list|length %}
                {% endfor %}
            {% endfor %}
            <h3>{{ total_cards }}</h3>
            <p>Total Cards</p>
        </div>
        <div class="stat-card">
            {% set total_projects = [] %}
            {% for board in boards %}
                {% for column in board.columns %}
                    {% for card in column.cards %}
                        {% if card.is_active and card.project_id and card.project_id not in total_projects %}
                            {% set _ = total_projects.append(card.project_id) %}
                        {% endif %}
                    {% endfor %}
                {% endfor %}
            {% endfor %}
            <h3>{{ total_projects|length }}</h3>
            <p>Active Projects</p>
        </div>
    </div>

    {% else %}
    <!-- No Kanban Boards -->
    <div class="no-kanban">
        <div class="no-kanban-content">
            <div class="no-kanban-icon">📋</div>
            <h3>No Kanban Boards Yet</h3>
            <p>Create unified boards to organize tasks from any project.</p>
            <div class="getting-started">
                <h4>Getting Started:</h4>
                <ol>
                    <li>Click the <strong>"Create Board"</strong> button</li>
                    <li>Set up columns for your workflow (To Do, In Progress, Done)</li>
                    <li>Add cards from any project to organize your work</li>
                </ol>
            </div>
            {% if g.user.role.value in ['Team Leader', 'Supervisor', 'Administrator', 'System Administrator'] %}
            <button id="create-first-unified-board" class="btn btn-primary">Create First Board</button>
            {% endif %}
        </div>
    </div>
    {% endif %}
</div>

<style>
/* Container and header styles now inherited from common styles.css */
.overview-header {
    text-align: center;
}

.overview-description {
    color: #666;
    margin: 0;
}

.boards-grid {
    display: grid;
    gap: 2rem;
    margin-bottom: 2rem;
}

.board-card {
    /* Card styling now inherited from common .card class */
    border-radius: 12px;
}

.board-header {
    padding: 1.5rem;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.board-info {
    flex: 1;
}

.board-name {
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
}

.board-description {
    color: #666;
    margin: 0.5rem 0 0 0;
    font-size: 0.9rem;
}

.board-actions {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.board-stats-section {
    padding: 1.5rem;
    border-bottom: 1px solid #dee2e6;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 1rem;
}

.stat-item {
    text-align: center;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.stat-number {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #007bff;
    margin-bottom: 0.25rem;
}

.stat-label {
    font-size: 0.8rem;
    color: #666;
    font-weight: 500;
}

.boards-section h4 {
    margin: 0 0 1rem 0;
    color: #333;
}

.boards-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.board-item {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.board-item:hover {
    background: #e7f3ff;
    border-color: #007bff;
    transform: translateY(-1px);
}

.board-info {
    flex: 1;
}

.board-name {
    font-weight: 600;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.default-badge {
    background: #28a745;
    color: white;
    padding: 0.15rem 0.4rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 500;
}

.board-description {
    color: #666;
    font-size: 0.9rem;
}

.board-stats {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: #666;
    text-align: right;
}

.board-preview {
    padding: 1.5rem;
}

.board-preview h5 {
    margin: 0 0 1rem 0;
    color: #333;
}

.preview-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.preview-column {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    overflow: hidden;
}

.preview-column-header {
    padding: 0.75rem;
    background: white;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.preview-column-name {
    font-weight: 600;
    font-size: 0.9rem;
}

.preview-card-count {
    background: #e9ecef;
    padding: 0.2rem 0.4rem;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 500;
}

.preview-cards {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.preview-card {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 0.5rem;
    font-size: 0.8rem;
}

.preview-card-title {
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.preview-card-project {
    background: #f3e8ff;
    color: #7c3aed;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-size: 0.6rem;
    font-weight: 600;
    margin-right: 0.25rem;
}

.preview-card-assignee {
    color: #666;
    font-size: 0.7rem;
}

.preview-more {
    color: #666;
    font-size: 0.8rem;
    text-align: center;
    padding: 0.25rem;
}

.preview-more-columns {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 0.9rem;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 1rem;
}

.quick-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    text-align: center;
}

.stat-card h3 {
    margin: 0 0 0.5rem 0;
    font-size: 2rem;
    color: #007bff;
}

.stat-card p {
    margin: 0;
    color: #666;
    font-weight: 500;
}

.no-kanban {
    text-align: center;
    padding: 4rem 2rem;
}

.no-kanban-content {
    max-width: 500px;
    margin: 0 auto;
}

.no-kanban-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.no-kanban h3 {
    color: #666;
    margin-bottom: 1rem;
}

.no-kanban p {
    color: #999;
    margin-bottom: 2rem;
}

.getting-started {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    text-align: left;
}

.getting-started h4 {
    margin: 0 0 1rem 0;
    color: #333;
}

.getting-started ol {
    margin: 0;
    padding-left: 1.5rem;
}

.getting-started li {
    margin-bottom: 0.5rem;
    color: #666;
}

.create-board-form {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.form-header h3 {
    margin: 0;
    color: #333;
}

.board-form {
    max-width: 600px;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #333;
}

.form-group input[type="text"],
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.2s ease;
}

.form-group input[type="text"]:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}

.form-group textarea {
    height: 80px;
    resize: vertical;
}

.form-group input[type="checkbox"] {
    margin-right: 0.5rem;
}

.form-actions {
    margin-top: 1.5rem;
}

.required {
    color: #dc3545;
}

.category-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

@media (max-width: 768px) {
    .board-header {
        flex-direction: column;
        gap: 1rem;
    }
    
    .board-actions {
        width: 100%;
        justify-content: flex-start;
    }
    
    .preview-columns {
        grid-template-columns: 1fr;
    }
    
    .quick-stats {
        grid-template-columns: 1fr;
    }
    
    .stat-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
</style>

<script>
function openBoard(boardId) {
    window.location.href = `/kanban?board=${boardId}`;
}

function editBoard(boardId) {
    // Implement board editing functionality
    alert('Board editing functionality to be implemented');
}

// Handle create first board button
document.addEventListener('DOMContentLoaded', function() {
    const createFirstBoardBtn = document.getElementById('create-first-unified-board');
    if (createFirstBoardBtn) {
        createFirstBoardBtn.addEventListener('click', function() {
            // Redirect to a page where they can create a board
            window.location.href = '/kanban?create=true';
        });
    }

    // Handle cancel create board
    const cancelCreateBoardBtn = document.getElementById('cancel-create-board');
    if (cancelCreateBoardBtn) {
        cancelCreateBoardBtn.addEventListener('click', function() {
            window.location.href = '/kanban';
        });
    }

    // Handle create board form submission
    const createBoardForm = document.getElementById('create-board-form');
    if (createBoardForm) {
        createBoardForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const formData = new FormData(createBoardForm);
            const data = {
                name: formData.get('name'),
                description: formData.get('description'),
                is_default: formData.get('is_default') === 'on'
            };

            fetch('/api/kanban/boards', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(data)
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Redirect to the kanban overview page
                    window.location.href = '/kanban';
                } else {
                    alert('Error creating board: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Error creating board. Please try again.');
            });
        });
    }
});
</script>

{% endblock %}