{% extends "layout.html" %}

{% block content %}
<div class="kanban-overview-container">
    <div class="overview-header">
        <h2>Kanban Board Overview</h2>
        <p class="overview-description">Manage your tasks visually across all projects</p>
    </div>

    {% if project_boards %}
    <div class="projects-grid">
        {% for project, boards in project_boards.items() %}
        <div class="project-card">
            <div class="project-header">
                <div class="project-info">
                    <h3 class="project-name">
                        <span class="project-code">{{ project.code }}</span>
                        {{ project.name }}
                    </h3>
                    {% if project.category %}
                    <span class="category-badge" style="background-color: {{ project.category.color }}20; color: {{ project.category.color }};">
                        {{ project.category.icon or '📁' }} {{ project.category.name }}
                    </span>
                    {% endif %}
                    {% if project.description %}
                    <p class="project-description">{{ project.description }}</p>
                    {% endif %}
                </div>
                <div class="project-actions">
                    <a href="{{ url_for('project_kanban', project_id=project.id) }}" class="btn btn-primary">Open Kanban</a>
                    <a href="{{ url_for('manage_project_tasks', project_id=project.id) }}" class="btn btn-secondary">Task List</a>
                </div>
            </div>

            <div class="boards-section">
                <h4>Kanban Boards ({{ boards|length }})</h4>
                <div class="boards-list">
                    {% for board in boards %}
                    <div class="board-item" onclick="openBoard({{ project.id }}, {{ board.id }})">
                        <div class="board-info">
                            <div class="board-name">
                                {{ board.name }}
                                {% if board.is_default %}
                                <span class="default-badge">Default</span>
                                {% endif %}
                            </div>
                            {% if board.description %}
                            <div class="board-description">{{ board.description }}</div>
                            {% endif %}
                        </div>
                        <div class="board-stats">
                            <span class="column-count">{{ board.columns|length }} columns</span>
                            <span class="card-count">
                                {% set board_cards = 0 %}
                                {% for column in board.columns %}
                                    {% set board_cards = board_cards + column.cards|selectattr('is_active')|list|length %}
                                {% endfor %}
                                {{ board_cards }} cards
                            </span>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>

            <!-- Quick Board Preview -->
            <div class="board-preview">
                {% set default_board = boards|selectattr('is_default')|first %}
                {% if not default_board %}
                    {% set default_board = boards|first %}
                {% endif %}
                {% if default_board and default_board.columns %}
                <h5>{{ default_board.name }} Preview</h5>
                <div class="preview-columns">
                    {% for column in default_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.title|length > 30 %}
                                        {{ card.title|truncate(30, 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 default_board.columns|length > 4 %}
                    <div class="preview-more-columns">
                        +{{ default_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>{{ project_boards.keys()|list|length }}</h3>
            <p>Projects with Kanban</p>
        </div>
        <div class="stat-card">
            {% set total_boards = 0 %}
            {% for project, boards in project_boards.items() %}
                {% set total_boards = total_boards + boards|length %}
            {% endfor %}
            <h3>{{ total_boards }}</h3>
            <p>Total Boards</p>
        </div>
        <div class="stat-card">
            {% set total_cards = 0 %}
            {% for project, boards in project_boards.items() %}
                {% for board in boards %}
                    {% for column in board.columns %}
                        {% set total_cards = total_cards + column.cards|selectattr('is_active')|list|length %}
                    {% endfor %}
                {% endfor %}
            {% endfor %}
            <h3>{{ total_cards }}</h3>
            <p>Total Cards</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>Start organizing your projects with visual Kanban boards.</p>
            <div class="getting-started">
                <h4>Getting Started:</h4>
                <ol>
                    <li>Go to a project from <a href="{{ url_for('admin_projects') }}">Project Management</a></li>
                    <li>Click the <strong>"Kanban"</strong> button</li>
                    <li>Create your first board and start organizing tasks</li>
                </ol>
            </div>
            {% if g.user.role.value in ['Team Leader', 'Supervisor', 'Administrator', 'System Administrator'] %}
            <a href="{{ url_for('admin_projects') }}" class="btn btn-primary">Go to Projects</a>
            {% endif %}
        </div>
    </div>
    {% endif %}
</div>

<style>
.kanban-overview-container {
    padding: 1rem;
}

.overview-header {
    margin-bottom: 2rem;
    text-align: center;
}

.overview-header h2 {
    margin: 0 0 0.5rem 0;
    color: #333;
}

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

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

.project-card {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: box-shadow 0.2s ease;
}

.project-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

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

.project-info {
    flex: 1;
}

.project-name {
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.project-code {
    background: #007bff;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

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

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

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

.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-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;
}

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

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

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

{% endblock %}