{% extends "layout.twig" %}

{% block content %}
<section class="space-y-6">
    {% if authError|default(false) %}
        <div class="rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800 dark:bg-red-900 dark:border-red-800 dark:text-red-200">
            Sign-in failed. Check the server logs or the audit log for details.
        </div>
    {% endif %}

    {% if currentUser is null %}
        <div class="rounded-lg border bg-white p-6 dark:bg-slate-800 dark:border-slate-700">
            <h1 class="text-2xl font-semibold tracking-tight">Sprint Planner</h1>
            <p class="text-slate-600 mt-2 max-w-prose dark:text-slate-400">
                Sign in with your Microsoft account to get started. The first person
                to sign in becomes the admin automatically.
            </p>
            <div class="mt-4 flex flex-wrap items-center gap-3">
                {% if oidcConfigured %}
                    <a href="/auth/login"
                       class="inline-flex items-center gap-2 rounded-md bg-slate-900 text-white px-4 py-2 text-sm font-medium hover:bg-slate-800 dark:bg-slate-700 dark:hover:bg-slate-600">
                        Sign in with Microsoft
                    </a>
                {% endif %}
                {% if localAdminEnabled %}
                    <a href="/auth/local"
                       class="inline-flex items-center gap-2 rounded-md border border-slate-300 bg-white text-slate-700 px-4 py-2 text-sm font-medium hover:bg-slate-100 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-200 dark:hover:bg-slate-700">
                        Sign in as local admin
                    </a>
                {% endif %}
                {% if not oidcConfigured and not localAdminEnabled %}
                    <span class="inline-block rounded-md bg-slate-100 text-slate-600 px-3 py-2 text-sm dark:bg-slate-700 dark:text-slate-300">
                        No sign-in method configured. Set <code>ENTRA_*</code> or
                        <code>LOCAL_ADMIN_*</code> in <code>.env</code>.
                    </span>
                {% endif %}
            </div>
        </div>
    {% else %}
        <div class="flex items-end justify-between gap-4">
            <div>
                <h1 class="text-2xl font-semibold tracking-tight">Sprints</h1>
                <p class="text-slate-600 mt-1 text-sm dark:text-slate-400">
                    {{ sprintRows|length }} sprint{{ sprintRows|length == 1 ? '' : 's' }}.
                </p>
            </div>
            {% if currentUser.isAdmin %}
                <a href="/sprints/new"
                   class="inline-flex items-center gap-2 rounded-md bg-slate-900 text-white px-4 py-2 text-sm font-medium hover:bg-slate-800 dark:bg-slate-700 dark:hover:bg-slate-600">
                    New sprint
                </a>
            {% endif %}
        </div>

        <div class="rounded-lg border bg-white overflow-hidden dark:bg-slate-800 dark:border-slate-700">
            {% if sprintRows is empty %}
                <div class="p-8 text-center text-slate-500 text-sm dark:text-slate-400">
                    No sprints yet.
                    {% if currentUser.isAdmin %}
                        <a href="/sprints/new" class="text-blue-700 hover:underline dark:text-blue-400 dark:hover:text-blue-300">Create the first one</a>.
                    {% endif %}
                </div>
            {% else %}
                <table class="min-w-full text-sm">
                    <thead class="bg-slate-50 text-slate-600 text-xs uppercase tracking-wider dark:bg-slate-700 dark:text-slate-300">
                        <tr>
                            <th class="text-left px-4 py-2 font-semibold">Name</th>
                            <th class="text-left px-4 py-2 font-semibold">Dates</th>
                            <th class="text-right px-4 py-2 font-semibold">Workers</th>
                            <th class="text-right px-4 py-2 font-semibold">Tasks</th>
                            <th class="text-right px-4 py-2 font-semibold">Reserve</th>
                            <th class="text-left px-4 py-2 font-semibold">Status</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-slate-700">
                        {% for row in sprintRows %}
                            {% set s = row.sprint %}
                            <tr class="hover:bg-slate-50 cursor-pointer dark:hover:bg-slate-700"
                                data-href="/sprints/{{ s.id }}">
                                <td class="px-4 py-2 font-medium">
                                    <a href="/sprints/{{ s.id }}" class="hover:underline">{{ s.name }}</a>
                                </td>
                                <td class="px-4 py-2 text-slate-600 dark:text-slate-400">
                                    {{ s.startDate }} – {{ s.endDate }}
                                </td>
                                <td class="px-4 py-2 text-right font-mono">{{ row.nWorkers }}</td>
                                <td class="px-4 py-2 text-right font-mono">{{ row.nTasks }}</td>
                                <td class="px-4 py-2 text-right font-mono">
                                    {{ (s.reserveFraction * 100)|number_format(0) }}%
                                </td>
                                <td class="px-4 py-2">
                                    {% if s.isArchived %}
                                        <span class="inline-block px-2 py-0.5 text-xs bg-slate-100 text-slate-600 rounded dark:bg-slate-700 dark:text-slate-300">archived</span>
                                    {% else %}
                                        <span class="inline-block px-2 py-0.5 text-xs bg-green-100 text-green-800 rounded dark:bg-green-900 dark:text-green-200">active</span>
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            {% endif %}
        </div>
    {% endif %}

    {% if currentUser is null or currentUser.isAdmin %}
    <details class="rounded-lg border bg-white p-4 dark:bg-slate-800 dark:border-slate-700">
        <summary class="text-sm font-semibold text-slate-700 uppercase tracking-wider cursor-pointer dark:text-slate-200">Runtime</summary>
        <dl class="mt-3 grid grid-cols-[max-content_1fr] gap-x-6 gap-y-1 text-sm">
            <dt class="text-slate-500 dark:text-slate-400">PHP</dt>
            <dd class="font-mono">{{ constant('PHP_VERSION') }}</dd>

            <dt class="text-slate-500 dark:text-slate-400">APP_ENV</dt>
            <dd class="font-mono">{{ appEnv }}</dd>

            <dt class="text-slate-500 dark:text-slate-400">SQLite file</dt>
            <dd class="font-mono break-all">{{ dbPath }}</dd>

            <dt class="text-slate-500 dark:text-slate-400">Schema version</dt>
            <dd class="font-mono">{{ schemaVersion }}</dd>

            <dt class="text-slate-500 dark:text-slate-400">OIDC</dt>
            <dd class="font-mono">{{ oidcConfigured ? 'configured' : 'not configured' }}</dd>

            <dt class="text-slate-500 dark:text-slate-400">Local admin</dt>
            <dd class="font-mono">{{ localAdminEnabled ? 'enabled' : 'disabled' }}</dd>
        </dl>
        <p class="mt-4 text-xs text-slate-500 dark:text-slate-400">
            Liveness probe: <a class="text-blue-700 hover:underline dark:text-blue-400 dark:hover:text-blue-300" href="/healthz"><code>/healthz</code></a>
        </p>
    </details>
    {% endif %}
</section>
{% endblock %}