// Database schema design với Prisma
model User {
  id            String         @id @default(uuid())
  email         String         @unique
  name          String
  role          Role           @default(EMPLOYEE)
  enrollments   Enrollment[]
  quizAttempts  QuizAttempt[]
  certificates  Certificate[]
  createdAt     DateTime       @default(now())
  updatedAt     DateTime       @updatedAt
}
 
model Course {
  id          String       @id @default(uuid())
  title       String
  description String       @db.Text
  thumbnail   String?
  modules     Module[]
  enrollments Enrollment[]
  published   Boolean      @default(false)
  createdAt   DateTime     @default(now())
  updatedAt   DateTime     @updatedAt
}
 
model Module {
  id        String   @id @default(uuid())
  courseId  String
  course    Course   @relation(fields: [courseId], references: [id])
  title     String
  order     Int
  lessons   Lesson[]
  createdAt DateTime @default(now())
}
 
model Lesson {
  id          String           @id @default(uuid())
  moduleId    String
  module      Module           @relation(fields: [moduleId], references: [id])
  title       String
  type        LessonType       // VIDEO, QUIZ, READING
  videoUrl    String?
  content     String?          @db.Text
  duration    Int?             // Duration in seconds
  order       Int
  progresses  LessonProgress[]
  createdAt   DateTime         @default(now())
}
 
model Enrollment {
  id             String           @id @default(uuid())
  userId         String
  user           User             @relation(fields: [userId], references: [id])
  courseId       String
  course         Course           @relation(fields: [courseId], references: [id])
  progress       Int              @default(0) // Percentage
  completedAt    DateTime?
  certificateId  String?
  lessonProgress LessonProgress[]
  enrolledAt     DateTime         @default(now())
}
 
model LessonProgress {
  id           String     @id @default(uuid())
  enrollmentId String
  enrollment   Enrollment @relation(fields: [enrollmentId], references: [id])
  lessonId     String
  lesson       Lesson     @relation(fields: [lessonId], references: [id])
  completed    Boolean    @default(false)
  timeSpent    Int        @default(0) // Seconds
  lastPosition Int?       // For video resume
  completedAt  DateTime?
  updatedAt    DateTime   @updatedAt
}

// NextAuth.js configuration với Azure AD
import NextAuth from 'next-auth';
import AzureADProvider from 'next-auth/providers/azure-ad';
 
export const authOptions = {
  providers: [
    AzureADProvider({
      clientId: process.env.AZURE_AD_CLIENT_ID!,
      clientSecret: process.env.AZURE_AD_CLIENT_SECRET!,
      tenantId: process.env.AZURE_AD_TENANT_ID!,
    }),
  ],
  callbacks: {
    async jwt({ token, user }) {
      if (user) {
        token.role = user.role;
      }
      return token;
    },
    async session({ session, token }) {
      if (session.user) {
        session.user.role = token.role;
      }
      return session;
    },
  },
};
 
export default NextAuth(authOptions);

// API route cho video upload
import { NextRequest, NextResponse } from 'next/server';
import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';
import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
 
const s3Client = new S3Client({
  region: process.env.AWS_REGION!,
  credentials: {
    accessKeyId: process.env.AWS_ACCESS_KEY_ID!,
    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY!,
  },
});
 
export async function POST(req: NextRequest) {
  try {
    const { fileName, fileType } = await req.json();
    
    const key = `videos/${Date.now()}-${fileName}`;
    
    // Generate presigned URL cho upload
    const command = new PutObjectCommand({
      Bucket: process.env.AWS_S3_BUCKET!,
      Key: key,
      ContentType: fileType,
    });
    
    const uploadUrl = await getSignedUrl(s3Client, command, {
      expiresIn: 3600, // 1 hour
    });
    
    return NextResponse.json({
      uploadUrl,
      key,
    });
  } catch (error) {
    return NextResponse.json(
      { error: 'Upload failed' },
      { status: 500 }
    );
  }
}

// VideoPlayer component
'use client';
 
import { useRef, useEffect } from 'react';
import { useRouter } from 'next/navigation';
 
interface VideoPlayerProps {
  videoUrl: string;
  lessonId: string;
  lastPosition?: number;
  onProgress: (position: number) => void;
  onComplete: () => void;
}
 
export default function VideoPlayer({
  videoUrl,
  lessonId,
  lastPosition = 0,
  onProgress,
  onComplete,
}: VideoPlayerProps) {
  const videoRef = useRef<HTMLVideoElement>(null);
  const progressInterval = useRef<NodeJS.Timeout>();
 
  useEffect(() => {
    // Resume từ last position
    if (videoRef.current && lastPosition > 0) {
      videoRef.current.currentTime = lastPosition;
    }
 
    // Track progress mỗi 5 giây
    progressInterval.current = setInterval(() => {
      if (videoRef.current) {
        onProgress(videoRef.current.currentTime);
      }
    }, 5000);
 
    return () => {
      if (progressInterval.current) {
        clearInterval(progressInterval.current);
      }
    };
  }, [lastPosition, onProgress]);
 
  const handleEnded = () => {
    onComplete();
  };
 
  return (
    <div className="relative w-full aspect-video bg-black rounded-lg overflow-hidden">
      <video
        ref={videoRef}
        src={videoUrl}
        controls
        className="w-full h-full"
        onEnded={handleEnded}
      >
        Your browser does not support video playback.
      </video>
    </div>
  );
}

// Quiz component
'use client';
 
import { useState } from 'react';
import { useRouter } from 'next/navigation';
 
interface QuizProps {
  questions: Question[];
  lessonId: string;
  passingScore: number;
}
 
export default function Quiz({ questions, lessonId, passingScore }: QuizProps) {
  const [currentQuestion, setCurrentQuestion] = useState(0);
  const [answers, setAnswers] = useState<Record<string, string>>({});
  const [showResults, setShowResults] = useState(false);
  const router = useRouter();
 
  const handleAnswer = (questionId: string, answerId: string) => {
    setAnswers(prev => ({
      ...prev,
      [questionId]: answerId,
    }));
  };
 
  const handleSubmit = async () => {
    // Calculate score
    let correct = 0;
    questions.forEach(q => {
      if (answers[q.id] === q.correctAnswerId) {
        correct++;
      }
    });
 
    const score = (correct / questions.length) * 100;
    const passed = score >= passingScore;
 
    // Save attempt
    await fetch('/api/quiz/attempt', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        lessonId,
        answers,
        score,
        passed,
      }),
    });
 
    if (passed) {
      // Mark lesson as complete
      await fetch(`/api/lessons/${lessonId}/complete`, {
        method: 'POST',
      });
      
      router.push('/dashboard');
    } else {
      setShowResults(true);
    }
  };
 
  if (showResults) {
    return (
      <div className="text-center py-12">
        <h2 className="text-2xl font-bold text-red-600 mb-4">
          Score too low. Please try again.
        </h2>
        <button
          onClick={() => {
            setAnswers({});
            setCurrentQuestion(0);
            setShowResults(false);
          }}
          className="bg-blue-600 text-white px-6 py-2 rounded-lg"
        >
          Retry Quiz
        </button>
      </div>
    );
  }
 
  const question = questions[currentQuestion];
 
  return (
    <div className="max-w-2xl mx-auto py-8">
      <div className="mb-4">
        <span className="text-sm text-gray-600">
          Question {currentQuestion + 1} of {questions.length}
        </span>
        <div className="w-full bg-gray-200 h-2 rounded-full mt-2">
          <div
            className="bg-blue-600 h-2 rounded-full transition-all"
            style={{
              width: `${((currentQuestion + 1) / questions.length) * 100}%`,
            }}
          />
        </div>
      </div>
 
      <h3 className="text-xl font-semibold mb-6">{question.text}</h3>
 
      <div className="space-y-3">
        {question.options.map(option => (
          <button
            key={option.id}
            onClick={() => handleAnswer(question.id, option.id)}
            className={`w-full text-left p-4 border-2 rounded-lg transition-all ${
              answers[question.id] === option.id
                ? 'border-blue-600 bg-blue-50'
                : 'border-gray-300 hover:border-gray-400'
            }`}
          >
            {option.text}
          </button>
        ))}
      </div>
 
      <div className="mt-8 flex justify-between">
        <button
          onClick={() => setCurrentQuestion(prev => Math.max(0, prev - 1))}
          disabled={currentQuestion === 0}
          className="px-6 py-2 bg-gray-200 rounded-lg disabled:opacity-50"
        >
          Previous
        </button>
        
        {currentQuestion === questions.length - 1 ? (
          <button
            onClick={handleSubmit}
            className="px-6 py-2 bg-blue-600 text-white rounded-lg"
          >
            Submit Quiz
          </button>
        ) : (
          <button
            onClick={() => setCurrentQuestion(prev => prev + 1)}
            className="px-6 py-2 bg-blue-600 text-white rounded-lg"
          >
            Next
          </button>
        )}
      </div>
    </div>
  );
}

// Certificate generation API
import { NextRequest, NextResponse } from 'next/server';
import PDFDocument from 'pdfkit';
import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';
 
export async function POST(req: NextRequest) {
  try {
    const { userId, courseId, userName, courseName } = await req.json();
 
    // Generate PDF certificate
    const doc = new PDFDocument({
      size: 'A4',
      layout: 'landscape',
    });
 
    const chunks: Buffer[] = [];
    doc.on('data', chunk => chunks.push(chunk));
 
    // Design certificate
    doc.fontSize(48)
       .font('Helvetica-Bold')
       .text('Certificate of Completion', 50, 100, { align: 'center' });
 
    doc.fontSize(20)
       .font('Helvetica')
       .text('This is to certify that', 50, 200, { align: 'center' });
 
    doc.fontSize(32)
       .font('Helvetica-Bold')
       .text(userName, 50, 250, { align: 'center' });
 
    doc.fontSize(20)
       .font('Helvetica')
       .text('has successfully completed the course', 50, 320, { align: 'center' });
 
    doc.fontSize(28)
       .font('Helvetica-Bold')
       .text(courseName, 50, 370, { align: 'center' });
 
    doc.fontSize(16)
       .font('Helvetica')
       .text(`Date: ${new Date().toLocaleDateString()}`, 50, 450, { align: 'center' });
 
    doc.end();
 
    // Wait for PDF generation
    await new Promise(resolve => doc.on('end', resolve));
    const pdfBuffer = Buffer.concat(chunks);
 
    // Upload to S3
    const s3Client = new S3Client({ region: process.env.AWS_REGION! });
    const key = `certificates/${userId}-${courseId}-${Date.now()}.pdf`;
 
    await s3Client.send(new PutObjectCommand({
      Bucket: process.env.AWS_S3_BUCKET!,
      Key: key,
      Body: pdfBuffer,
      ContentType: 'application/pdf',
    }));
 
    const certificateUrl = `https://${process.env.AWS_S3_BUCKET}.s3.${process.env.AWS_REGION}.amazonaws.com/${key}`;
 
    // Save certificate record
    // ... database logic ...
 
    return NextResponse.json({ certificateUrl });
  } catch (error) {
    return NextResponse.json(
      { error: 'Certificate generation failed' },
      { status: 500 }
    );
  }
}

// Admin dashboard với analytics
'use client';
 
import { useEffect, useState } from 'react';
import { Chart } from 'react-chartjs-2';
 
export default function AdminDashboard() {
  const [stats, setStats] = useState({
    totalUsers: 0,
    activeUsers: 0,
    completedCourses: 0,
    averageCompletionRate: 0,
  });
 
  useEffect(() => {
    fetch('/api/admin/stats')
      .then(res => res.json())
      .then(setStats);
  }, []);
 
  return (
    <div className="p-8">
      <h1 className="text-3xl font-bold mb-8">Admin Dashboard</h1>
 
      {/* Stats cards */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <StatsCard
          title="Total Users"
          value={stats.totalUsers}
          icon="👥"
        />
        <StatsCard
          title="Active Users"
          value={stats.activeUsers}
          icon="✅"
        />
        <StatsCard
          title="Completed Courses"
          value={stats.completedCourses}
          icon="🎓"
        />
        <StatsCard
          title="Avg Completion Rate"
          value={`${stats.averageCompletionRate}%`}
          icon="📊"
        />
      </div>
 
      {/* Charts and detailed analytics */}
      {/* ... more components ... */}
    </div>
  );
}