magistr/frontend/react/shared/ui/ScheduleOverview.jsx

import {
    buildScheduleOverviewModel,
    formatLongDate,
    lessonMeta,
    lessonStart,
    pluralLessons,
    relativeDate,
    trimTime
} from '../../../schedule-overview.js';

export function ScheduleOverview({ lessons, now = new Date(), onGoToday, role = 'student' }) {
    const { todayIso, todayLessons, nextLesson } = buildScheduleOverviewModel(lessons, now);

    return (
        <section className="schedule-overview" aria-live="polite">
            <header className="schedule-overview-head">
                <div>
                    <span className="schedule-overview-kicker">Быстрый обзор</span>
                    <h2>{formatLongDate(now)}</h2>
                </div>
                <button className="btn btn-md btn-secondary" type="button" onClick={onGoToday}>
                    Открыть текущую неделю
                </button>
            </header>
            <div className="schedule-overview-grid">
                <article className="schedule-overview-card is-today">
                    <div className="schedule-overview-card-head">
                        <div>
                            <span>Сегодня</span>
                            <h3>{todayLessons.length ? pluralLessons(todayLessons.length) : 'Свободный день'}</h3>
                        </div>
                        <span className="schedule-overview-count">{todayLessons.length}</span>
                    </div>
                    <div className="schedule-overview-list">
                        {todayLessons.length > 0
                            ? todayLessons.map((lesson, index) => (
                                <CompactLesson
                                    key={`${lesson.date}-${trimTime(lesson.startTime)}-${index}`}
                                    lesson={lesson}
                                    role={role}
                                />
                            ))
                            : <p className="schedule-overview-empty">На сегодня занятий нет.</p>}
                    </div>
                </article>
                <article className="schedule-overview-card is-next">
                    <div className="schedule-overview-card-head">
                        <div>
                            <span>Следующая пара</span>
                            <h3>{nextLesson ? relativeDate(nextLesson.date, todayIso) : 'Пока ничего не запланировано'}</h3>
                        </div>
                        {nextLesson && (
                            <span className="schedule-overview-badge">
                                {lessonStart(nextLesson) <= now ? 'Идёт сейчас' : trimTime(nextLesson.startTime)}
                            </span>
                        )}
                    </div>
                    {nextLesson
                        ? <NextLessonCard lesson={nextLesson} role={role} />
                        : <p className="schedule-overview-empty">В ближайшие 14 дней занятий нет.</p>}
                </article>
            </div>
        </section>
    );
}

function CompactLesson({ lesson, role }) {
    return (
        <div className="schedule-overview-lesson">
            <time>{trimTime(lesson.startTime)}</time>
            <div>
                <strong>{lesson.subjectName || 'Занятие'}</strong>
                <small>{lessonMeta(lesson, role).join(' · ') || 'Подробности уточняются'}</small>
            </div>
        </div>
    );
}

function NextLessonCard({ lesson, role }) {
    return (
        <div className="schedule-overview-next">
            <div className="schedule-overview-next-time">
                <strong>{trimTime(lesson.startTime)}</strong>
                <span>до {trimTime(lesson.endTime)}</span>
            </div>
            <div>
                <h4>{lesson.subjectName || 'Занятие'}</h4>
                <p>{lessonMeta(lesson, role).join(' · ') || 'Подробности уточняются'}</p>
                {lesson.lessonTypeName && <span className="schedule-overview-type">{lesson.lessonTypeName}</span>}
            </div>
        </div>
    );
}