{% extends "base.html" %}

{% block title %}{{ _('My Tasks') }} - Time Tracker{% endblock %}

{% block head_extra %}
<!-- Prevent page caching for kanban board -->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate, max-age=0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
{% endblock %}

{% block content %}
<div class="container mt-4">
    {% from "_components.html" import page_header %}
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                {% set actions %}
                <a href="{{ url_for('tasks.create_task') }}" class="btn btn-outline-light btn-sm">
                    <i class="fas fa-plus"></i> {{ _('New Task') }}
                </a>
                {% endset %}
                {{ page_header('fas fa-user', _('My Tasks'), _('Tasks assigned to or created by you') ~ ' • ' ~ (tasks|length) ~ ' ' ~ _('total'), actions) }}
            </div>
        </div>
    </div>

    <!-- Summary Cards (Invoices-style) -->
    <div class="row mb-4">
        <div class="col-md-3 col-sm-6 mb-3">
            <div class="card border-0 shadow-sm h-100 summary-card">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="summary-icon bg-primary bg-opacity-10 text-primary">
                                <i class="fas fa-list-check"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <div class="summary-label">{{ _('To Do') }}</div>
                            <div class="summary-value">{{ tasks|selectattr('status', 'equalto', 'todo')|list|length }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 mb-3">
            <div class="card border-0 shadow-sm h-100 summary-card">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="summary-icon bg-warning bg-opacity-10 text-warning">
                                <i class="fas fa-spinner"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <div class="summary-label">{{ _('In Progress') }}</div>
                            <div class="summary-value">{{ tasks|selectattr('status', 'equalto', 'in_progress')|list|length }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 mb-3">
            <div class="card border-0 shadow-sm h-100 summary-card">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="summary-icon bg-info bg-opacity-10 text-info">
                                <i class="fas fa-user-check"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <div class="summary-label">{{ _('Review') }}</div>
                            <div class="summary-value">{{ tasks|selectattr('status', 'equalto', 'review')|list|length }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 mb-3">
            <div class="card border-0 shadow-sm h-100 summary-card">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="summary-icon bg-success bg-opacity-10 text-success">
                                <i class="fas fa-check-circle"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <div class="summary-label">{{ _('Completed') }}</div>
                            <div class="summary-value">{{ tasks|selectattr('status', 'equalto', 'done')|list|length }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="card mobile-card mb-4">
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center">
                <h6 class="mb-0">
                    <i class="fas fa-filter me-2 text-muted"></i>{{ _('Filter My Tasks') }}
                </h6>
                <button type="button" class="btn btn-sm btn-outline-primary" id="toggleFilters" onclick="toggleFilterVisibility()" title="{{ _('Toggle Filters') }}">
                    <i class="fas fa-chevron-up" id="filterToggleIcon"></i>
                </button>
            </div>
        </div>
        <div class="card-body" id="filterBody">
            <form method="GET" class="row g-3">
                <div class="col-md-4 col-sm-6">
                    <label for="search" class="form-label">{{ _('Search') }}</label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="fas fa-search"></i></span>
                        <input type="text" class="form-control" id="search" name="search" 
                               value="{{ search }}" placeholder="{{ _('Task name or description') }}">
                    </div>
                </div>
                <div class="col-md-2 col-sm-6">
                    <label for="status" class="form-label">{{ _('Status') }}</label>
                    <select class="form-select" id="status" name="status">
                        <option value="">{{ _('All Statuses') }}</option>
                        <option value="todo" {% if status == 'todo' %}selected{% endif %}>{{ _('To Do') }}</option>
                        <option value="in_progress" {% if status == 'in_progress' %}selected{% endif %}>{{ _('In Progress') }}</option>
                        <option value="review" {% if status == 'review' %}selected{% endif %}>{{ _('Review') }}</option>
                        <option value="done" {% if status == 'done' %}selected{% endif %}>{{ _('Done') }}</option>
                        <option value="cancelled" {% if status == 'cancelled' %}selected{% endif %}>{{ _('Cancelled') }}</option>
                    </select>
                </div>
                <div class="col-md-2 col-sm-6">
                    <label for="priority" class="form-label">{{ _('Priority') }}</label>
                    <select class="form-select" id="priority" name="priority">
                        <option value="">{{ _('All Priorities') }}</option>
                        <option value="low" {% if priority == 'low' %}selected{% endif %}>{{ _('Low') }}</option>
                        <option value="medium" {% if priority == 'medium' %}selected{% endif %}>{{ _('Medium') }}</option>
                        <option value="high" {% if priority == 'high' %}selected{% endif %}>{{ _('High') }}</option>
                        <option value="urgent" {% if priority == 'urgent' %}selected{% endif %}>{{ _('Urgent') }}</option>
                    </select>
                </div>
                <div class="col-md-2 col-sm-6">
                    <label for="project_id" class="form-label">{{ _('Project') }}</label>
                    <select class="form-select" id="project_id" name="project_id">
                        <option value="">{{ _('All Projects') }}</option>
                        {% for project in projects %}
                        <option value="{{ project.id }}" {% if project_id == project.id %}selected{% endif %}>
                            {{ project.name }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-2 col-sm-6">
                    <label for="task_type" class="form-label">{{ _('Task Type') }}</label>
                    <select class="form-select" id="task_type" name="task_type">
                        <option value="">{{ _('All Types') }}</option>
                        <option value="assigned" {% if task_type == 'assigned' %}selected{% endif %}>{{ _('Assigned to Me') }}</option>
                        <option value="created" {% if task_type == 'created' %}selected{% endif %}>{{ _('Created by Me') }}</option>
                    </select>
                </div>
                <div class="col-md-2 col-sm-6 d-flex align-items-end">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="1" id="overdue" name="overdue" {% if overdue %}checked{% endif %}>
                        <label class="form-check-label" for="overdue">
                            {{ _('Show overdue only') }}
                        </label>
                    </div>
                </div>
                <div class="col-12">
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-search me-2"></i>{{ _('Apply Filters') }}
                        </button>
                        <a href="{{ url_for('tasks.my_tasks') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-times me-2"></i>{{ _('Clear') }}
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Tasks Grid -->
    {% if tasks %}
    <div class="row g-4">
        {% for task in tasks %}
        <div class="col-xl-4 col-lg-6 col-md-6">
            <div class="card mobile-card task-card h-100 {{ task.priority_class }}">
                <!-- Card Header -->
                <div class="card-header border-0 pb-0">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <div class="d-flex align-items-center">
                            <span class="status-badge status-{{ task.status }} me-2"><span class="whitespace-nowrap">{{ task.status_display }}</span></span>
                            <span class="priority-badge priority-{{ task.priority }}"><span class="whitespace-nowrap">{{ task.priority_display }}</span></span>
                        </div>
                        <div class="dropdown">
                            <button class="btn btn-sm btn-outline-secondary border-0" type="button" data-bs-toggle="dropdown">
                                <i class="fas fa-ellipsis-v"></i>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end">
                                <li><a class="dropdown-item" href="{{ url_for('tasks.view_task', task_id=task.id) }}">
                                    <i class="fas fa-eye me-2"></i>View Details
                                </a></li>
                                {% if current_user.is_admin or task.created_by == current_user.id %}
                                <li><a class="dropdown-item" href="{{ url_for('tasks.edit_task', task_id=task.id) }}">
                                    <i class="fas fa-edit me-2"></i>Edit Task
                                </a></li>
                                {% endif %}
                                <li><hr class="dropdown-divider"></li>
                                <!-- Start Timer removed on tasks page -->
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- Card Body -->
                <div class="card-body pt-0">
                    <h5 class="card-title">
                        <a href="{{ url_for('tasks.view_task', task_id=task.id) }}" class="text-decoration-none text-dark">
                            {{ task.name }}
                        </a>
                    </h5>
                    
                    {% if task.description %}
                    <p class="card-text text-muted small mb-3">
                        {{ task.description[:120] }}{% if task.description|length > 120 %}...{% endif %}
                    </p>
                    {% endif %}
                    
                    <!-- Project Info -->
                    <div class="d-flex align-items-center mb-3">
                        <div class="bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 24px; height: 24px;">
                            <i class="fas fa-project-diagram text-primary fa-xs"></i>
                        </div>
                        <span class="text-muted small">{{ task.project.name }}</span>
                    </div>

                    <!-- Task Meta -->
                    <div class="task-meta mb-3">
                        {% if task.assigned_user %}
                        <div class="d-flex align-items-center mb-2">
                            <div class="bg-info bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 20px; height: 20px;">
                                <i class="fas fa-user text-info fa-xs"></i>
                            </div>
                            <span class="text-muted small">{{ task.assigned_user.display_name }}</span>
                        </div>
                        {% endif %}
                        
                        {% if task.due_date %}
                        <div class="d-flex align-items-center mb-2">
                            <div class="bg-{% if task.is_overdue %}danger{% else %}secondary{% endif %} bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 20px; height: 20px;">
                                <i class="fas fa-calendar text-{% if task.is_overdue %}danger{% else %}secondary{% endif %} fa-xs"></i>
                            </div>
                            <span class="text-muted small {% if task.is_overdue %}text-danger fw-bold{% endif %}">
                                Due: {{ task.due_date.strftime('%b %d, %Y') }}
                                {% if task.is_overdue %}<i class="fas fa-exclamation-triangle text-warning ms-1"></i>{% endif %}
                            </span>
                        </div>
                        {% endif %}
                        
                        {% if task.estimated_hours %}
                        <div class="d-flex align-items-center mb-2">
                            <div class="bg-warning bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 20px; height: 20px;">
                                <i class="fas fa-clock text-warning fa-xs"></i>
                            </div>
                            <span class="text-muted small">Est: {{ task.estimated_hours }}h</span>
                        </div>
                        {% endif %}
                        
                        {% if task.total_hours > 0 %}
                        <div class="d-flex align-items-center mb-2">
                            <div class="bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 20px; height: 20px;">
                                <i class="fas fa-stopwatch text-success fa-xs"></i>
                            </div>
                            <span class="text-muted small">Actual: {{ task.total_hours }}h</span>
                        </div>
                        {% endif %}
                        
                        <!-- Task Type Indicator -->
                        <div class="d-flex align-items-center mb-2">
                            <div class="bg-secondary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 20px; height: 20px;">
                                <i class="fas fa-{% if task.assigned_to == current_user.id %}user-check{% else %}user-plus{% endif %} text-secondary fa-xs"></i>
                            </div>
                            <span class="text-muted small">
                                {% if task.assigned_to == current_user.id %}
                                    Assigned to me
                                {% else %}
                                    {{ _('Created by me') }}
                                {% endif %}
                            </span>
                        </div>
                    </div>
                    
                    <!-- Progress Bar -->
                    {% if task.estimated_hours and task.total_hours > 0 %}
                    <div class="mb-3">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <small class="text-muted">{{ _('Progress') }}</small>
                            <small class="text-muted fw-bold">{{ task.progress_percentage }}%</small>
                        </div>
                        <div class="progress" style="height: 6px;">
                            <div class="progress-bar bg-primary" role="progressbar" 
                                 style="width: {{ task.progress_percentage }}%"
                                 aria-valuenow="{{ task.progress_percentage }}" 
                                 aria-valuemin="0" aria-valuemax="100">
                            </div>
                        </div>
                    </div>
                    {% endif %}
                </div>

                <!-- Card Footer -->
                <div class="card-footer border-0 pt-0">
                    <div class="d-grid gap-2">
                        <a href="{{ url_for('tasks.view_task', task_id=task.id) }}" class="btn btn-outline-primary btn-sm">
                            <i class="fas fa-eye me-2"></i>{{ _('View Details') }}
                        </a>
                        {% if current_user.active_timer and current_user.active_timer.task_id == task.id %}
                        <form method="POST" action="{{ url_for('timer.stop_timer') }}" class="d-inline">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            <button type="submit" class="btn btn-danger btn-sm">
                                <i class="fas fa-stop me-2"></i>{{ _('Stop Timer') }}
                            </button>
                        </form>
                        {% elif not current_user.active_timer %}
                        <a href="{{ url_for('timer.start_timer_for_project', project_id=task.project_id, task_id=task.id) }}" class="btn btn-success btn-sm">
                            <i class="fas fa-play me-2"></i>{{ _('Start Timer') }}
                        </a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- Pagination -->
    {% if pagination.pages > 1 %}
    <nav aria-label="{{ _('My tasks pagination') }}" class="mt-5">
        <ul class="pagination justify-content-center">
            {% if pagination.has_prev %}
            <li class="page-item">
                <a class="page-link" href="{{ url_for('tasks.my_tasks', page=pagination.prev_num, **request.args) }}">
                    <i class="fas fa-chevron-left"></i> {{ _('Previous') }}
                </a>
            </li>
            {% endif %}
            
            {% for page_num in pagination.iter_pages() %}
                {% if page_num %}
                    {% if page_num != pagination.page %}
                    <li class="page-item">
                        <a class="page-link" href="{{ url_for('tasks.my_tasks', page=page_num, **request.args) }}">{{ page_num }}</a>
                    </li>
                    {% else %}
                    <li class="page-item active">
                        <span class="page-link">{{ page_num }}</span>
                    </li>
                    {% endif %}
                {% else %}
                <li class="page-item disabled">
                    <span class="page-link">{{ _('...') }}</span>
                </li>
                {% endif %}
            {% endfor %}
            
            {% if pagination.has_next %}
            <li class="page-item">
                <a class="page-link" href="{{ url_for('tasks.my_tasks', page=pagination.next_num, **request.args) }}">
                    {{ _('Next') }} <i class="fas fa-chevron-right"></i>
                </a>
            </li>
            {% endif %}
        </ul>
    </nav>
    {% endif %}
    {% else %}
    <!-- Empty State -->
    <div class="row">
        <div class="col-12">
            <div class="card mobile-card">
                <div class="card-body text-center py-5">
                    <div class="bg-light rounded-circle d-flex align-items-center justify-content-center mx-auto mb-4" style="width: 80px; height: 80px;">
                        <i class="fas fa-user fa-2x text-muted"></i>
                    </div>
                    <h3 class="text-muted mb-3">{{ _('No tasks found') }}</h3>
                    <p class="text-muted mb-4">{{ _("You don't have any tasks assigned to you or created by you yet.") }}</p>
                    <div class="d-flex flex-column flex-sm-row gap-2 justify-content-center">
                        <a href="{{ url_for('tasks.create_task') }}" class="btn btn-primary">
                            <i class="fas fa-plus me-2"></i>{{ _('Create Your First Task') }}
                        </a>
                        <a href="{{ url_for('tasks.list_tasks') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-list me-2"></i>{{ _('View All Tasks') }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>

<style>
/* Task Card Styling */
.task-card {
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}

.task-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    border-color: var(--primary-color);
}

/* Status Badges */
.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-todo {
    background-color: #e2e8f0;
    color: #475569;
}

.status-in_progress {
    background-color: #fef3c7;
    color: #92400e;
}

.status-review {
    background-color: #dbeafe;
    color: #1e40af;
}

.status-done {
    background-color: #dcfce7;
    color: #166534;
}

.status-cancelled {
    background-color: #fee2e2;
    color: #991b1b;
}

/* Priority Badges */
.priority-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.priority-low {
    background-color: #dcfce7;
    color: #166534;
}

.priority-medium {
    background-color: #fef3c7;
    color: #92400e;
}

.priority-high {
    background-color: #fed7aa;
    color: #c2410c;
}

.priority-urgent {
    background-color: #fee2e2;
    color: #991b1b;
}

/* Priority Card Borders */
.task-card.priority-low {
    border-left: 4px solid #22c55e;
}

.task-card.priority-medium {
    border-left: 4px solid #eab308;
}

.task-card.priority-high {
    border-left: 4px solid #f97316;
}

.task-card.priority-urgent {
    border-left: 4px solid #ef4444;
}

/* Task Meta Styling */
.task-meta .d-flex {
    transition: all 0.2s ease;
}

.task-meta .d-flex:hover {
    transform: translateX(4px);
}

/* Progress Bar */
.progress {
    background-color: #f1f5f9;
    border-radius: 10px;
    overflow: hidden;
}

.progress-bar {
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    border-radius: 10px;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .task-card {
        margin-bottom: 1rem;
    }
    
    .card-header {
        padding: 1rem 1rem 0.5rem 1rem;
    }
    
    .card-body {
        padding: 0.75rem 1rem;
    }
    
    .card-footer {
        padding: 0.75rem 1rem 1rem 1rem;
    }
    
    .status-badge, .priority-badge {
        font-size: 0.7rem;
        padding: 0.2rem 0.6rem;
    }
}

/* Hover Effects */
.task-card .card-title a:hover {
    color: var(--primary-color) !important;
}

.task-card .btn:hover {
    transform: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* Animation for stats cards */
.card.bg-primary.bg-opacity-10,
.card.bg-warning.bg-opacity-10,
.card.bg-info.bg-opacity-10,
.card.bg-success.bg-opacity-10 {
    transition: all 0.3s ease;
}

.card.bg-primary.bg-opacity-10:hover,
.card.bg-warning.bg-opacity-10:hover,
.card.bg-info.bg-opacity-10:hover,
.card.bg-success.bg-opacity-10:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Filter toggle styles */
.filter-collapsed {
    display: none !important;
}

.filter-toggle-transition {
    transition: all 0.3s ease-in-out;
}
</style>

<script>
function toggleFilterVisibility() {
    const filterBody = document.getElementById('filterBody');
    const toggleIcon = document.getElementById('filterToggleIcon');
    const toggleButton = document.getElementById('toggleFilters');
    
    const isCollapsed = filterBody.classList.contains('filter-collapsed');
    
    if (isCollapsed) {
        // Show filters
        filterBody.classList.remove('filter-collapsed');
        toggleIcon.classList.remove('fa-chevron-down');
        toggleIcon.classList.add('fa-chevron-up');
        toggleButton.title = '{{ _('Hide Filters') }}';
        localStorage.setItem('myTaskFiltersVisible', 'true');
    } else {
        // Hide filters
        filterBody.classList.add('filter-collapsed');
        toggleIcon.classList.remove('fa-chevron-up');
        toggleIcon.classList.add('fa-chevron-down');
        toggleButton.title = '{{ _('Show Filters') }}';
        localStorage.setItem('myTaskFiltersVisible', 'false');
    }
}

// Initialize filter visibility based on localStorage
document.addEventListener('DOMContentLoaded', function() {
    const filterBody = document.getElementById('filterBody');
    const toggleIcon = document.getElementById('filterToggleIcon');
    const toggleButton = document.getElementById('toggleFilters');
    
    // Check if user previously hid filters
    const filtersVisible = localStorage.getItem('myTaskFiltersVisible');
    if (filtersVisible === 'false') {
        filterBody.classList.add('filter-collapsed');
        toggleIcon.classList.remove('fa-chevron-up');
        toggleIcon.classList.add('fa-chevron-down');
        toggleButton.title = '{{ _('Show Filters') }}';
    } else {
        // Explicitly set the icon to chevron-up when filter is visible
        filterBody.classList.remove('filter-collapsed');
        toggleIcon.classList.remove('fa-chevron-down');
        toggleIcon.classList.add('fa-chevron-up');
        toggleButton.title = '{{ _('Hide Filters') }}';
    }
    
    // Add transition class after initial setup
    setTimeout(() => {
        filterBody.classList.add('filter-toggle-transition');
    }, 100);
});

// Kanban column updates are handled by global socket in base.html
console.log('My tasks page loaded - listening for kanban updates via global socket');
</script>
{% endblock %}