@page
@model IndexModel
@{
    ViewData["Title"] = "Courses";
}

<section class="fs-hero">
    <div class="fs-hero-copy">
        <p class="fs-eyebrow">Your library</p>
        <h1 class="fs-hero-title">Remember what matters.</h1>
        <p class="fs-hero-text">
            Courses hold lessons, lessons hold decks, decks hold cards. Cards are written by your agents
            over MCP, then reviewed here one card at a time.
        </p>
    </div>
    <div class="fs-hero-deck" aria-hidden="true">
        <span class="fs-ghost-card fs-ghost-card-3"></span>
        <span class="fs-ghost-card fs-ghost-card-2"></span>
        <span class="fs-ghost-card fs-ghost-card-1">?</span>
    </div>
</section>

<section class="fs-stat-strip" aria-label="Study summary">
    <div class="fs-stat">
        <span class="fs-stat-value">@Model.Stats.DueNow</span>
        <span class="fs-stat-label">due now</span>
    </div>
    <div class="fs-stat">
        <span class="fs-stat-value">@Model.Stats.ReviewsToday</span>
        <span class="fs-stat-label">reviewed today</span>
    </div>
    <div class="fs-stat">
        <span class="fs-stat-value">@Model.Stats.StreakDays</span>
        <span class="fs-stat-label">day streak</span>
    </div>
    <div class="fs-stat">
        <span class="fs-stat-value">@Model.Stats.Retention30d%</span>
        <span class="fs-stat-label">30-day retention</span>
    </div>
</section>

@if (Model.Courses.Count == 0)
{
    <section class="fs-empty">
        <p class="fs-eyebrow">Nothing here yet</p>
        <h2 class="title is-4">Build your first course with an agent.</h2>
        <p>
            Cards are created through the MCP server. Point your agent at
            <code>@Model.McpUrl</code>, create a token on the <a asp-page="/Tokens">Tokens</a> page,
            then ask it to create a course, a lesson and a deck.
        </p>
    </section>
}
else
{
    <div class="fs-course-grid">
        @foreach (var course in Model.Courses)
        {
            <a class="fs-course-card" asp-page="/Courses/Details" asp-route-id="@course.Id">
                <div class="fs-course-card-top">
                    <h2 class="fs-course-name" dir="auto">@course.Name</h2>
                    @if (course.DueCount > 0)
                    {
                        <span class="fs-due-pill">@course.DueCount due</span>
                    }
                </div>
                @if (!string.IsNullOrWhiteSpace(course.Description))
                {
                    <p class="fs-course-description" dir="auto">@Display.Preview(course.Description, 120)</p>
                }
                <dl class="fs-course-meta">
                    <div><dt>@course.LessonCount</dt><dd>lessons</dd></div>
                    <div><dt>@course.DeckCount</dt><dd>decks</dd></div>
                    <div><dt>@course.CardCount</dt><dd>cards</dd></div>
                </dl>
            </a>
        }
    </div>
}