@using TaskTracker.Core.Enums
@model TaskTracker.Core.Entities.WorkTask

@functions {
    static string FormatRelativeTime(DateTime dt)
    {
        var diff = DateTime.UtcNow - dt;
        if (diff.TotalMinutes < 1) return "just now";
        if (diff.TotalMinutes < 60) return $"{(int)diff.TotalMinutes}m ago";
        if (diff.TotalHours < 24) return $"{(int)diff.TotalHours}h ago";
        if (diff.TotalDays < 2) return "yesterday";
        if (diff.TotalDays < 7) return $"{(int)diff.TotalDays}d ago";
        if (diff.TotalDays < 30) return $"{(int)(diff.TotalDays / 7)}w ago";
        return dt.ToLocalTime().ToString("MMM d, yyyy");
    }

    static string GetNoteTypeCssClass(NoteType type)
    {
        return type switch
        {
            NoteType.PauseNote => "note-type-badge--pause",
            NoteType.ResumeNote => "note-type-badge--resume",
            _ => "note-type-badge--general"
        };
    }

    static string GetNoteTypeLabel(NoteType type)
    {
        return type switch
        {
            NoteType.PauseNote => "Pause",
            NoteType.ResumeNote => "Resume",
            _ => "General"
        };
    }
}

<div id="notes-list-@Model.Id">
    <h3 class="detail-section-label">Notes</h3>

    @foreach (var note in Model.Notes.OrderBy(n => n.CreatedAt))
    {
        <div class="note">
            <div class="note-header">
                <span class="note-type-badge @GetNoteTypeCssClass(note.Type)">
                    @GetNoteTypeLabel(note.Type)
                </span>
                <span class="note-time">@FormatRelativeTime(note.CreatedAt)</span>
            </div>
            <div class="note-content">@note.Content</div>
        </div>
    }

    <!-- Add note form -->
    <form hx-post="/board?handler=AddNote&id=@Model.Id"
          hx-target="#notes-list-@Model.Id"
          hx-swap="outerHTML"
          class="note-add-form"
          style="margin-top: 8px;">
        <input type="text" name="content" placeholder="Add a note..." class="input"
               style="font-size: 13px; padding: 6px 10px;"
               autocomplete="off" />
    </form>
</div>