// CourseCurriculumCarousel.jsx — keyboard and touch-friendly course stage carousel.
const {
  useState: useCourseCarouselState,
  useRef: useCourseCarouselRef,
} = React;

function CourseCurriculumCarousel() {
  const stages = window.CourseFunnelData.stages;
  const [activeIndex, setActiveIndex] = useCourseCarouselState(0);
  const [direction, setDirection] = useCourseCarouselState('next');
  const pointerStart = useCourseCarouselRef(null);
  const activeStage = stages[activeIndex];

  function showStage(nextIndex, nextDirection = 'next') {
    const normalizedIndex = (nextIndex + stages.length) % stages.length;
    setDirection(nextDirection);
    setActiveIndex(normalizedIndex);
    trackCourseEvent('course_curriculum_change', {
      stage: normalizedIndex + 1,
      direction: nextDirection,
    });
  }

  function handleKeyDown(event) {
    if (event.key === 'ArrowLeft') {
      event.preventDefault();
      showStage(activeIndex - 1, 'previous');
    }

    if (event.key === 'ArrowRight') {
      event.preventDefault();
      showStage(activeIndex + 1, 'next');
    }
  }

  function handlePointerDown(event) {
    pointerStart.current = event.clientX;
  }

  function handlePointerUp(event) {
    if (pointerStart.current === null) return;
    const distance = event.clientX - pointerStart.current;
    pointerStart.current = null;

    if (Math.abs(distance) < 48) return;
    showStage(activeIndex + (distance < 0 ? 1 : -1), distance < 0 ? 'next' : 'previous');
  }

  return (
    <div
      className="course-carousel"
      tabIndex="0"
      onKeyDown={handleKeyDown}
      onPointerDown={handlePointerDown}
      onPointerUp={handlePointerUp}
      aria-label="Programa del curso"
    >
      <div className="course-carousel__progress" aria-hidden="true">
        <span style={{ width: `${((activeIndex + 1) / stages.length) * 100}%` }} />
      </div>

      <div className="course-carousel__viewport" aria-live="polite">
        <article
          className={`course-stage course-stage--${direction}`}
          key={activeStage.number}
        >
          <div className="course-stage__top">
            <div>
              <span className="course-stage__number">{activeStage.number}</span>
              <span className="course-stage__eyebrow">{activeStage.eyebrow}</span>
            </div>
            <i className={`ph ${activeStage.icon}`} aria-hidden="true" />
          </div>

          <div className="course-stage__main">
            <h3>{activeStage.title}</h3>
            <p>{activeStage.description}</p>
            <div className="course-stage__topics">
              {activeStage.topics.map((topic) => <span key={topic}>{topic}</span>)}
            </div>

            {activeStage.optionalModules?.length ? (
              <div className="course-stage__optional">
                <div>
                  <i className="ph ph-plus-circle" aria-hidden="true" />
                  <span>MÓDULOS OPCIONALES · SOLO SI TU APP LOS NECESITA</span>
                </div>
                <ul>
                  {activeStage.optionalModules.map((module) => (
                    <li key={module}>{module}</li>
                  ))}
                </ul>
              </div>
            ) : null}
          </div>

          <div className="course-stage__deliverable">
            <i className="ph ph-check-circle" aria-hidden="true" />
            <div>
              <span>LO QUE TE LLEVÁS</span>
              <p>{activeStage.deliverable}</p>
            </div>
          </div>
        </article>
      </div>

      <div className="course-carousel__controls">
        <button
          type="button"
          onClick={() => showStage(activeIndex - 1, 'previous')}
          aria-label="Ver etapa anterior"
        >
          <i className="ph ph-arrow-left" aria-hidden="true" />
        </button>

        <div className="course-carousel__tabs" role="tablist" aria-label="Elegir etapa">
          {stages.map((stage, index) => (
            <button
              type="button"
              role="tab"
              aria-selected={activeIndex === index}
              className={activeIndex === index ? 'is-active' : ''}
              key={stage.number}
              onClick={() => showStage(index, index >= activeIndex ? 'next' : 'previous')}
            >
              <span>{stage.number}</span>
              <small>{stage.eyebrow}</small>
            </button>
          ))}
        </div>

        <button
          type="button"
          onClick={() => showStage(activeIndex + 1, 'next')}
          aria-label="Ver siguiente etapa"
        >
          <i className="ph ph-arrow-right" aria-hidden="true" />
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { CourseCurriculumCarousel });