{% extends "base.html" %}
{% block title %}Project Timeline - ICDEV™ Dashboard{% endblock %}

{% block content %}
<div class="page-header">
    <div class="breadcrumbs">
        <a href="/">Home</a>
        <span class="separator">/</span>
        <span class="current">Project Timeline</span>
    </div>
    <h1>{{ timeline.name }}</h1>
    <p class="subtitle">{{ timeline.description }}</p>
</div>

<!-- Summary Stats -->
<div class="stat-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; margin-bottom: 1.5rem;">
    <div class="stat-card" style="background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; padding: 1rem; text-align: center;">
        <div style="font-size: 2rem; font-weight: 700; color: var(--text-primary);">{{ timeline.total_months }}</div>
        <div style="font-size: 0.8rem; color: var(--text-secondary);">Total Months</div>
    </div>
    <div class="stat-card" style="background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; padding: 1rem; text-align: center;">
        <div style="font-size: 2rem; font-weight: 700; color: #58a6ff;">{{ timeline.timeline|length }}</div>
        <div style="font-size: 0.8rem; color: var(--text-secondary);">Program Increments</div>
    </div>
    <div class="stat-card" style="background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; padding: 1rem; text-align: center;">
        <div style="font-size: 2rem; font-weight: 700; color: #a371f7;">3</div>
        <div style="font-size: 0.8rem; color: var(--text-secondary);">Phase Groups</div>
    </div>
</div>

<!-- Phase Group Legend -->
<div style="display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem;">
    {% for group_id, group_info in timeline.phase_groups.items() %}
    <div style="display: inline-flex; align-items: center; gap: 6px; background: var(--bg-secondary); border: 1px solid {{ group_info.color }}40; border-radius: 6px; padding: 6px 12px;">
        <span style="width: 12px; height: 12px; border-radius: 3px; background: {{ group_info.color }};"></span>
        <span style="font-size: 0.85rem; font-weight: 600; color: {{ group_info.color }};">{{ group_info.label }}</span>
        <span style="font-size: 0.75rem; color: var(--text-secondary);">{{ group_info.month_range[0] }}-{{ group_info.month_range[1] }} months</span>
    </div>
    {% endfor %}
</div>

<!-- Timeline Visualization -->
<div style="background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; padding: 1.5rem; margin-bottom: 2rem;">
    <h2 style="font-size: 1.1rem; margin-bottom: 1rem;">18-Month Timeline</h2>

    <!-- Horizontal timeline bar -->
    <div style="position: relative; margin-bottom: 2rem;">
        <div style="display: flex; height: 48px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border-color);">
            {% for pi in timeline.timeline %}
            {% set group = timeline.phase_groups.get(pi.phase_group, {}) %}
            <div style="flex: 1; background: {{ group.get('color', '#8b949e') }}20; border-right: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; position: relative;" title="{{ pi.pi_name }}">
                <span style="font-size: 0.7rem; font-weight: 600; color: {{ group.get('color', '#8b949e') }};">{{ pi.pi_number }}</span>
            </div>
            {% endfor %}
        </div>
        <div style="display: flex; margin-top: 4px;">
            {% for pi in timeline.timeline %}
            <div style="flex: 1; text-align: center; font-size: 0.65rem; color: var(--text-secondary);">M{{ pi.month_start }}-M{{ pi.month_end }}</div>
            {% endfor %}
        </div>
    </div>

    <!-- Phase Group Blocks -->
    {% for group_id, group_info in timeline.phase_groups.items() %}
    <div style="margin-bottom: 1.5rem;">
        <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 0.75rem;">
            <span style="width: 14px; height: 14px; border-radius: 3px; background: {{ group_info.color }};"></span>
            <h3 style="font-size: 1rem; margin: 0; color: {{ group_info.color }};">{{ group_info.label }}</h3>
            <span style="font-size: 0.75rem; color: var(--text-secondary);">Months {{ group_info.month_range[0] }}-{{ group_info.month_range[1] }}</span>
        </div>
        <p style="font-size: 0.8rem; color: var(--text-secondary); margin: 0 0 0.75rem 0;">{{ group_info.description }}</p>

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem;">
            {% for pi in timeline.timeline %}
            {% if pi.phase_group == group_id %}
            <div style="background: var(--bg-tertiary, #21262d); border: 1px solid {{ group_info.color }}40; border-radius: 8px; padding: 1rem; border-left: 4px solid {{ group_info.color }};">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
                    <span style="font-weight: 600; font-size: 0.9rem; color: var(--text-primary);">{{ pi.pi_number }}</span>
                    <span style="font-size: 0.7rem; color: var(--text-secondary); background: var(--bg-secondary); padding: 2px 8px; border-radius: 12px;">M{{ pi.month_start }}-M{{ pi.month_end }}</span>
                </div>
                <div style="font-size: 0.85rem; color: var(--text-primary); margin-bottom: 0.25rem;">{{ pi.pi_name }}</div>
                <div style="font-size: 0.75rem; color: var(--text-secondary); margin-bottom: 0.5rem;">{{ pi.pi_theme }}</div>
                {% if pi.milestones %}
                <ul style="margin: 0; padding-left: 1.2rem; font-size: 0.75rem; color: var(--text-secondary);">
                    {% for milestone in pi.milestones %}
                    <li>{{ milestone }}</li>
                    {% endfor %}
                </ul>
                {% endif %}
            </div>
            {% endif %}
            {% endfor %}
        </div>
    </div>
    {% endfor %}
</div>

<!-- PI Detail Table -->
<div class="table-container">
    <table class="table" aria-label="Program Increment Timeline">
        <thead>
            <tr>
                <th style="width: 60px;">PI</th>
                <th>Name</th>
                <th style="width: 140px;">Phase</th>
                <th style="width: 100px;">Months</th>
                <th>Milestones</th>
            </tr>
        </thead>
        <tbody>
            {% for pi in timeline.timeline %}
            {% set group = timeline.phase_groups.get(pi.phase_group, {}) %}
            <tr>
                <td style="font-weight: 600; color: {{ group.get('color', '#8b949e') }};">{{ pi.pi_number }}</td>
                <td>
                    <div style="font-weight: 600;">{{ pi.pi_name }}</div>
                    <div style="font-size: 0.75rem; color: var(--text-secondary);">{{ pi.pi_theme }}</div>
                </td>
                <td>
                    <span style="display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 0.75rem; background: {{ group.get('color', '#8b949e') }}20; color: {{ group.get('color', '#8b949e') }}; border: 1px solid {{ group.get('color', '#8b949e') }}40;">
                        {{ group.get('label', pi.phase_group) }}
                    </span>
                </td>
                <td style="font-size: 0.8rem; color: var(--text-secondary);">M{{ pi.month_start }}-M{{ pi.month_end }}</td>
                <td>
                    {% if pi.milestones %}
                    <ul style="margin: 0; padding-left: 1.2rem; font-size: 0.75rem; color: var(--text-secondary);">
                        {% for milestone in pi.milestones %}
                        <li>{{ milestone }}</li>
                        {% endfor %}
                    </ul>
                    {% else %}
                    <span style="color: var(--text-secondary); font-size: 0.75rem;">—</span>
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}