veza/apps/web/src/components/education/course-learning-view/CourseLearningView.tsx

/**
 * CourseLearningView — orchestration: hook + Header, Player, Tabs, Sidebar, modals.
 */
import React from 'react';
import { useToast } from '@/components/feedback/ToastProvider';
import { QuizModal } from '../modals/QuizModal';
import { CertificateModal } from '../modals/CertificateModal';
import { useCourseLearningView } from './useCourseLearningView';
import { CourseLearningViewHeader } from './CourseLearningViewHeader';
import { CourseLearningViewPlayer } from './CourseLearningViewPlayer';
import { CourseLearningViewTabs } from './CourseLearningViewTabs';
import { CourseLearningViewSidebar } from './CourseLearningViewSidebar';
import { CourseLearningViewSkeleton } from './CourseLearningViewSkeleton';
import type { CourseLearningViewProps } from './types';

export const CourseLearningView: React.FC<CourseLearningViewProps> = ({
  course,
  onBack,
  isLoading = false,
}) => {
  const { addToast } = useToast();
  const {
    allLessons,
    currentLesson,
    currentLessonIndex,
    activeLessonId,
    setActiveLessonId,
    completedLessons,
    sidebarOpen,
    setSidebarOpen,
    activeTab,
    setActiveTab,
    progress,
    showQuiz,
    setShowQuiz,
    activeQuiz,
    showCertificate,
    setShowCertificate,
    markComplete,
    handleNext,
    handlePrev,
    startQuiz,
  } = useCourseLearningView(course);

  if (isLoading) {
    return <CourseLearningViewSkeleton />;
  }

  return (
    <div className="flex flex-col min-h-layout-main -m-6 md:-m-12 bg-background">
      <CourseLearningViewHeader
        course={course}
        progress={progress}
        sidebarOpen={sidebarOpen}
        onBack={onBack}
        onToggleSidebar={() => setSidebarOpen((o) => !o)}
      />

      <div className="flex flex-1 overflow-hidden">
        <div className="flex-1 flex flex-col min-w-0 overflow-y-auto custom-scrollbar">
          <CourseLearningViewPlayer
            lesson={currentLesson}
            onStartQuiz={startQuiz}
          />
          <CourseLearningViewTabs
            lesson={currentLesson}
            currentIndex={currentLessonIndex}
            totalLessons={allLessons.length}
            onPrev={handlePrev}
            onNext={handleNext}
            activeTab={activeTab}
            onTabChange={setActiveTab}
          />
        </div>

        {sidebarOpen && (
          <CourseLearningViewSidebar
            course={course}
            activeLessonId={activeLessonId}
            completedLessons={completedLessons}
            onSelectLesson={setActiveLessonId}
          />
        )}
      </div>

      {showQuiz && activeQuiz && (
        <QuizModal
          quiz={activeQuiz}
          onClose={() => setShowQuiz(false)}
          onComplete={(score) => {
            addToast(`Quiz Completed. Score: ${score}%`, 'info');
            if (currentLesson) markComplete(currentLesson.id);
          }}
        />
      )}

      {showCertificate && (
        <CertificateModal
          studentName="Cyber Producer"
          courseName={course.title}
          completionDate={new Date().toLocaleDateString()}
          onClose={() => setShowCertificate(false)}
        />
      )}
    </div>
  );
};