/* Lesson content — header (title+desc only), video, action row (Prev / Next / Fav), goals/notes/resources */

function LessonContent({
  lesson, course,
  goals, onToggleGoal, onJumpChapter, currentChapterId,
  favourited, onToggleFav,
  notes, onChangeNotes, notesState,
  onPrev, onNext, prevLesson, nextLesson,
  videoLoaded, onLoadVideo,
  mode,
}) {
  const completedGoals = goals.filter(g => g.done).length;
  const [descOpen, setDescOpen] = React.useState(false);

  // collapse description whenever the lesson changes
  React.useEffect(() => { setDescOpen(false); }, [lesson.id]);

  return (
    <main className="main">
      {/* Seamless video → title → actions */}
      <section className="card lesson-block">
        {/* video */}
        <div className="video-frame">
          {videoLoaded ? (
            <iframe
              src={`https://player.vimeo.com/video/${lesson.vimeoId}?h=${lesson.vimeoHash}&autoplay=1&title=0&byline=0&portrait=0&color=ED643B`}
              allow="autoplay; fullscreen; picture-in-picture"
              allowFullScreen
              title={lesson.displayTitle}
            />
          ) : (
            <button className="video-poster" onClick={onLoadVideo} aria-label="Play lesson video">
              <span className="play"><Icon.Play size={26} /></span>
              <div className="meta-strip">
                <span>{lesson.displayTitle}</span>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
                  <Icon.Clock size={12} /> {lesson.duration}
                </span>
              </div>
            </button>
          )}
        </div>

        {/* title with reveal-description chevron */}
        <button
          className={`lb-title-row ${descOpen ? "is-open" : ""}`}
          onClick={() => setDescOpen(o => !o)}
          aria-expanded={descOpen}
          aria-controls="lesson-desc"
        >
          <h1 className="lb-title">{lesson.displayTitle}</h1>
          <span className="lb-reveal" aria-hidden="true">
            <Icon.ChevronDown size={16} />
          </span>
        </button>

        {/* description (animated reveal) */}
        <div
          id="lesson-desc"
          className={`lb-desc ${descOpen ? "is-open" : ""}`}
          aria-hidden={!descOpen}
        >
          <div className="lb-desc-inner">
            <p>{lesson.description}</p>
          </div>
        </div>

        {/* Prev / Print Notation / Play Along / Favourite / Next */}
        <div className="lb-actions">
          <button className="btn btn-outline" onClick={onPrev} disabled={!prevLesson}>
            <Icon.ChevronLeft size={14} /> Previous Lesson
          </button>
          <span className="lb-actions-spacer" aria-hidden="true" />
          <button className="btn btn-outline">
            <Icon.Print size={14} /> Print Notation
          </button>
          <button className="btn btn-outline">
            <Icon.Headphones size={14} /> Play Along
          </button>
          <button
            className={`btn btn-outline btn-fav ${favourited ? "is-on" : ""}`}
            onClick={onToggleFav}
            aria-pressed={favourited}
          >
            <Icon.Star size={15} filled={favourited} /> Favourite
          </button>
          <button className="btn btn-primary" onClick={onNext} disabled={!nextLesson}>
            Next Lesson <Icon.ChevronRight size={14} />
          </button>
        </div>
      </section>

      {/* Lesson Objectives — full width */}
      <section className="card section-card goals-card">
        <div className="sc-head">
          <h3>Lesson Objectives</h3>
          <span className="sc-meta">
            <strong>{completedGoals}</strong> of {goals.length} complete
          </span>
        </div>
        <div className="sc-progress">
          <div className="cr-bar">
            <span style={{ width: `${goals.length ? (completedGoals / goals.length) * 100 : 0}%` }} />
          </div>
        </div>
        <div className="goals">
          {goals.map(g => (
            <div
              key={g.id}
              className={`goal ${g.id === currentChapterId ? "is-current" : ""}`}
              data-done={g.done}
            >
              <button
                className="check"
                role="checkbox"
                aria-checked={g.done}
                onClick={() => onToggleGoal(g.id)}
                title={g.done ? "Mark as not done" : "Mark as done"}
              >
                {g.done && <Icon.Check size={12} />}
              </button>
              <span className="g-title">{g.text}</span>
              {g.time && (
                <button
                  className="g-time-jump"
                  onClick={() => onJumpChapter(g.id)}
                  title={`Jump to ${g.time} in the video`}
                  aria-label={`Jump to ${g.time}`}
                >
                  <Icon.PlaySmall size={10} />
                  <span>{g.time}</span>
                </button>
              )}
            </div>
          ))}
        </div>
      </section>

      {/* Personal Lesson Notes — full width, below objectives */}
      <section className="card section-card notes-card">
        <div className="sc-head">
          <h3>Personal Lesson Notes</h3>
          <span className={`notes-status notes-status-${notesState}`} aria-live="polite">
            {notesState === "saving" && (<><span className="dot-spin" /> Saving…</>)}
            {notesState === "saved"  && (<><Icon.Check size={12} /> Saved</>)}
            {notesState === "idle"   && (<>Auto-saves to your account</>)}
          </span>
        </div>
        <textarea
          value={notes}
          onChange={(e) => onChangeNotes(e.target.value)}
          placeholder="Jot down anything that helps you — fingerings, things to revisit, a phrase that finally clicked, a tempo you want to come back to…"
          spellCheck={false}
        />
      </section>
    </main>
  );
}

window.LessonContent = LessonContent;