{% extends 'layout.html' %}

{% block head %}
<style>
    body {
        margin: 20px;
        font-family: monospace;
        background: #fff;
    }

    .nav-tabs {
        display: flex;
        gap: 20px;
        margin-bottom: 20px;
        border-bottom: 2px solid #333;
        padding-bottom: 10px;
    }

    .nav-tabs a {
        text-decoration: none;
        color: #666;
        font-size: 16pt;
        padding: 5px 10px;
    }

    .nav-tabs a.active {
        color: #000;
        font-weight: bold;
        border-bottom: 3px solid #000;
    }

    .date-nav {
        margin: 20px 0;
        font-size: 14pt;
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .date-nav a {
        text-decoration: none;
        color: #2563eb;
        font-size: 18pt;
    }

    .date-info {
        font-weight: bold;
    }

    .calendar-grid {
        display: flex;
        border: 1px solid #ddd;
        min-height: 600px;
    }

    .time-column {
        width: 60px;
        border-right: 1px solid #ddd;
        background: #f9f9f9;
    }

    .time-slot {
        height: 60px;
        border-bottom: 1px solid #eee;
        padding: 5px;
        font-size: 10pt;
        color: #666;
        text-align: right;
    }

    .days-grid {
        flex: 1;
        display: flex;
    }

    .day-column {
        flex: 1;
        border-right: 1px solid #ddd;
        position: relative;
    }

    .day-column:last-child {
        border-right: none;
    }

    .day-header {
        height: 40px;
        border-bottom: 2px solid #ddd;
        background: #f0f0f0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 11pt;
    }

    .day-grid {
        position: relative;
        height: 1440px; /* 24 hours * 60px */
    }

    .hour-line {
        position: absolute;
        left: 0;
        right: 0;
        height: 60px;
        border-bottom: 1px solid #eee;
    }

    .task-block {
        position: absolute;
        left: 2px;
        right: 2px;
        border-radius: 4px;
        padding: 4px;
        font-size: 9pt;
        color: white;
        overflow: hidden;
        cursor: pointer;
        transition: all 0.2s;
        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }

    .task-block:hover {
        z-index: 100;
        transform: scale(1.05);
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }

    .task-label {
        font-weight: bold;
        margin-bottom: 2px;
    }

    .task-time {
        font-size: 8pt;
        opacity: 0.9;
    }

    .block-tooltip {
        display: none;
        position: absolute;
        background: #333;
        color: white;
        padding: 8px 12px;
        border-radius: 4px;
        font-size: 10pt;
        z-index: 1000;
        white-space: nowrap;
        pointer-events: none;
        left: 100%;
        top: 0;
        margin-left: 10px;
    }

    .task-block:hover .block-tooltip {
        display: block;
    }
</style>
{% endblock head %}

{% block content %}

<div class="nav-tabs">
    <a href="/calendar/daily/{{ base_date.year }}/{{ base_date.month }}/{{ base_date.day }}"
       class="{% if scope == 'daily' %}active{% endif %}">Daily</a>
    <a href="/calendar/weekly/{{ base_date.year }}/{{ base_date.month }}/{{ base_date.day }}"
       class="{% if scope == 'weekly' %}active{% endif %}">Weekly</a>
    <a href="/calendar/monthly/{{ base_date.year }}/{{ base_date.month }}/{{ base_date.day }}"
       class="{% if scope == 'monthly' %}active{% endif %}">Monthly</a>
    <span style="margin-left: auto;">
        <a href="/switches/{{ scope }}/{{ base_date.year }}/{{ base_date.month }}/{{ base_date.day }}">View Switches</a>
    </span>
</div>

<div class="date-nav">
    <a href="/calendar/{{ scope }}/{{ prev_date.year }}/{{ prev_date.month }}/{{ prev_date.day }}">←</a>
    {% if scope == 'daily' %}
        <span class="date-info">{{ base_date.strftime('%Y-%m-%d %A') }}</span>
    {% elif scope == 'weekly' %}
        <span class="date-info">Week of {{ start.strftime('%Y-%m-%d') }}</span>
    {% elif scope == 'monthly' %}
        <span class="date-info">{{ base_date.strftime('%B %Y') }}</span>
    {% endif %}
    <a href="/calendar/{{ scope }}/{{ next_date.year }}/{{ next_date.month }}/{{ next_date.day }}">→</a>
</div>

<div class="calendar-grid">
    <div class="time-column">
        <div class="day-header" style="height: 40px;"></div>
        {% for hour in range(24) %}
        <div class="time-slot">{{ '%02d:00'|format(hour) }}</div>
        {% endfor %}
    </div>

    <div class="days-grid">
        {% for day in days %}
        <div class="day-column">
            <div class="day-header">
                {{ day.strftime('%a %d') if scope != 'daily' else day.strftime('%A') }}
            </div>
            <div class="day-grid">
                {% for hour in range(24) %}
                <div class="hour-line" style="top: {{ hour * 60 }}px;"></div>
                {% endfor %}

                {% for block in blocks %}
                    {% if block.start.date() == day.date() %}
                        {% set start_hour = block.start.hour + block.start.minute / 60.0 %}
                        {% set duration_hours = block.duration / 3600.0 %}
                        {% set top_px = start_hour * 60 %}
                        {% set height_px = duration_hours * 60 %}
                        {% if height_px < 2 %}{% set height_px = 2 %}{% endif %}

                        {% set task_hash = block.task_path|hash if block.task_path else 0 %}
                        {% set base_color_hue = task_hash % 360 %}

                        {# Create gradient: active color on left (0% to active_ratio%), idle color on right #}
                        {% set active_pct = (block.active_ratio * 100)|int %}
                        {% set active_color = 'hsl(%d, 70%%, 50%%)'|format(base_color_hue) %}
                        {% set idle_color = 'hsl(%d, 30%%, 70%%)'|format(base_color_hue) %}

                        <div class="task-block"
                             style="top: {{ top_px }}px; height: {{ height_px }}px;
                                    background: linear-gradient(to right, {{ active_color }} 0%, {{ active_color }} {{ active_pct }}%, {{ idle_color }} {{ active_pct }}%, {{ idle_color }} 100%);">
                            <div class="task-label">{{ block.task_path }}</div>
                            <div class="task-time">{{ block.start.strftime('%H:%M') }} ({{ (block.duration // 60)|int }}m)</div>
                            <div class="block-tooltip">
                                <strong>{{ block.task_path }}</strong><br>
                                {{ block.start.strftime('%H:%M') }} - {{ block.end.strftime('%H:%M') }}<br>
                                Duration: {{ (block.duration // 60)|int }} minutes<br>
                                Active: {{ (block.active_seconds // 60)|int }}m ({{ active_pct }}%)<br>
                                Idle: {{ (block.idle_seconds // 60)|int }}m
                            </div>
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
        </div>
        {% endfor %}
    </div>
</div>

{% endblock content %}