/* Course rail — always rendered; animates open/closed via .is-collapsed class */

function CourseRail({
  course, currentLessonId, performancesOpen, onTogglePerformances,
  collapsed, onToggleCollapse, onPickLesson, onCourseHome, completedIds,
}) {
  const flat = [];
  course.items.forEach(it => {
    if (it.children) it.children.forEach(c => flat.push(c));
    else flat.push(it);
  });
  const total = flat.length;
  const done = flat.filter(l => completedIds.has(l.id)).length;
  const pct = Math.round((done / total) * 100);

  return (
    <aside
      className={`course-rail ${collapsed ? "is-collapsed" : ""}`}
      aria-label="Course navigation"
      aria-hidden={collapsed ? "true" : "false"}
    >
      <div className="cr-inner">
        <div className="cr-header">
          <button
            className="cr-title cr-title-link"
            onClick={onCourseHome}
            title={`${course.title} — course home`}
            aria-label={`${course.title} — back to course home`}
            tabIndex={collapsed ? -1 : 0}
          >
            {course.title}
          </button>
          <div className="cr-progress">
            <div className="cr-progress-meta">
              <span className="cr-progress-label">
                <strong>{done}</strong> of {total} lessons
              </span>
              <span className="cr-progress-pct">{pct}%</span>
            </div>
            <div className="cr-bar"><span style={{ width: `${pct}%` }} /></div>
          </div>
          <button
            className="cr-collapse"
            onClick={onToggleCollapse}
            title="Hide navigation"
            aria-label="Hide navigation"
            tabIndex={collapsed ? -1 : 0}
          >
            <Icon.ChevronsLeft size={16} />
          </button>
        </div>

        <nav className="cr-body">
          {course.items.map(it => {
            if (it.isParent) {
              return (
                <div key={it.id} className="cr-group">
                  <button
                    className="cr-lesson cr-parent"
                    aria-expanded={performancesOpen}
                    onClick={onTogglePerformances}
                    tabIndex={collapsed ? -1 : 0}
                  >
                    <span className="cr-name">{it.title}</span>
                    <span className={`cr-chev ${performancesOpen ? "is-open" : ""}`}>
                      <Icon.ChevronDown size={13} />
                    </span>
                  </button>
                  {performancesOpen && (
                    <div className="cr-sublist">
                      {it.children.map(c => {
                        const status = c.id === currentLessonId
                          ? "current"
                          : (completedIds.has(c.id) ? "done" : "upcoming");
                        return (
                          <button
                            key={c.id}
                            className="cr-lesson cr-sub"
                            data-status={status}
                            onClick={() => onPickLesson(c.id)}
                            tabIndex={collapsed ? -1 : 0}
                          >
                            <span className="cr-name">{c.title}</span>
                          </button>
                        );
                      })}
                    </div>
                  )}
                </div>
              );
            }
            const status = it.id === currentLessonId
              ? "current"
              : (completedIds.has(it.id) ? "done" : "upcoming");
            return (
              <button
                key={it.id}
                className="cr-lesson"
                data-status={status}
                onClick={() => onPickLesson(it.id)}
                aria-current={status === "current" ? "true" : undefined}
                tabIndex={collapsed ? -1 : 0}
              >
                {it.num != null && <span className="cr-num">{String(it.num).padStart(2, "0")}</span>}
                <span className="cr-name">{it.title}</span>
              </button>
            );
          })}
        </nav>
      </div>
    </aside>
  );
}

/* "Show navigation" expander — double-chevron + label, sits in the residual
   collapsed lane to the right of the global rail. */
function CourseRailExpander({ onClick, mode }) {
  return (
    <button
      className="cr-expander"
      onClick={onClick}
      title="Show navigation"
      aria-label="Show navigation"
    >
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
           strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <path d="m6 6 6 6-6 6"/>
        <path d="m13 6 6 6-6 6"/>
      </svg>
      <span className="cr-expander-label">Navigation</span>
    </button>
  );
}

window.CourseRail = CourseRail;
window.CourseRailExpander = CourseRailExpander;