@page "/routines"
@page "/{UserId}/routines"

@inject ApiClient Api
@inject NavigationManager Navigation
@inject UserContext UserContext
@inject IJSRuntime JS

<PageTitle>Routines</PageTitle>

<div class="page">
    <header class="page-header">
        <h1>Routines</h1>
        <p>Build routines from your exercise list.</p>
        <button class="primary" @onclick="ToggleCreate">@(ShowCreateRoutine ? "Close" : "+")</button>
    </header>

    @if (ActiveRun is null)
    {
        @if (ExerciseList.Count == 0)
        {
            <section class="card">
                <h2>No exercises yet</h2>
                <p class="muted">Add exercises first, then create routines.</p>
                <button class="primary" @onclick="GoToExercises">Go to Exercises</button>
            </section>
        }

        @if (EditingRoutine is null)
        {
            @if (ShowCreateRoutine)
            {
                <section class="card">
                    <h2>Create Routine</h2>
                    <input class="input" placeholder="Routine name" @bind="NewRoutineName" @bind:event="oninput" />
                    <div class="list">
                        @foreach (var exercise in ExerciseList)
                        {
                            <label class="checkbox-row">
                                <input type="checkbox" checked="@SelectedExerciseIds.Contains(exercise.Id)" @onchange="() => ToggleExercise(exercise.Id)" />
                                <span>@exercise.Name</span>
                            </label>
                        }
                    </div>
                    <button class="primary" @onclick="CreateRoutineAsync" disabled="@string.IsNullOrWhiteSpace(NewRoutineName)">Save Routine</button>
                </section>
            }

            @if (ExerciseList.Count > 0 || RoutineList.Count > 0)
            {
                <section class="card">
                    <h2>Your Routines</h2>
                    @if (IsLoading)
                    {
                        <p>Loading...</p>
                    }
                    else if (RoutineList.Count == 0)
                    {
                        <p class="muted">No routines yet. Create one above.</p>
                    }
                    else
                    {
                        <div class="list">
                            @foreach (var routine in RoutineList)
                            {
                                <div class="list-item">
                                    <div>
                                        <div class="item-title">@routine.Name</div>
                                        <div class="item-subtitle">@string.Join(" · ", routine.Exercises.Select(e => e.Name))</div>
                                    </div>
                                    <div class="actions">
                                        <button class="ghost" @onclick="() => StartEdit(routine)" aria-label="Edit routine">✏️</button>
                                        <button class="ghost" @onclick="() => DeleteRoutineAsync(routine.Id)" aria-label="Delete routine">🗑️</button>
                                        <button class="primary" @onclick="() => StartRun(routine)">Start</button>
                                    </div>
                                </div>
                            }
                        </div>
                    }
                </section>
            }
        }

        @if (EditingRoutine is not null)
        {
            <section class="card">
                <h2>Edit Routine</h2>
                <input class="input" @bind="EditingName" @bind:event="oninput" />
                <div class="list">
                    @foreach (var exercise in ExerciseList)
                    {
                        <label class="checkbox-row">
                            <input type="checkbox" checked="@EditingExerciseIds.Contains(exercise.Id)" @onchange="() => ToggleEditExercise(exercise.Id)" />
                            <span>@exercise.Name</span>
                        </label>
                    }
                </div>
                <div class="actions">
                    <button class="primary" @onclick="SaveEditAsync">Save Changes</button>
                    <button class="ghost" @onclick="CancelEdit">Cancel</button>
                </div>
            </section>
        }
    }
    else
    {
        <section class="card">
            <h2>Routine Run: @ActiveRun.Name</h2>
            <div class="list">
                @foreach (var entry in RunEntries)
                {
                    <div class="list-item @(entry.Completed ? "done" : string.Empty)">
                        <label class="checkbox-row">
                            <input type="checkbox" checked="@entry.Completed" @onchange="() => ToggleRunCompleted(entry.ExerciseId)" />
                            <span>@GetExerciseName(entry.ExerciseId)</span>
                        </label>
                        <div class="input-unit">
                            <input class="input input-sm" type="number" step="0.5" @bind="entry.Weight" @bind:event="oninput" />
                            <span class="unit">kg</span>
                        </div>
                    </div>
                }
            </div>
            <div class="actions">
                <button class="ghost" @onclick="AbortRun">Abort</button>
                <button class="primary" @onclick="SaveRunAsync">Save Run</button>
            </div>
        </section>
    }
</div>