src/pages/Lessons.jsx

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { createPageUrl } from '@/utils';
import { motion, AnimatePresence } from 'framer-motion';
import { Eye, Activity, Smile, ArrowLeft, BookOpen } from 'lucide-react';
import { Button } from '@/components/ui/button';
import SlideNavigation from '@/components/lessons/SlideNavigation';
import SlideContainer from '@/components/lessons/SlideContainer';
import { chapter1Slides } from '@/components/lessons/Chapter1Slides';
import { chapter2Slides } from '@/components/lessons/Chapter2Slides';
import { chapter3Slides } from '@/components/lessons/Chapter3Slides';

const chapters = [
  {
    id: 1,
    title: "Object Detection",
    subtitle: "How computers find things",
    icon: Eye,
    color: "from-blue-500 to-cyan-500",
    slides: chapter1Slides
  },
  {
    id: 2,
    title: "Pose Estimation",
    subtitle: "Tracking body movement",
    icon: Activity,
    color: "from-purple-500 to-pink-500",
    slides: chapter2Slides
  },
  {
    id: 3,
    title: "Emotion Recognition",
    subtitle: "Understanding feelings",
    icon: Smile,
    color: "from-emerald-500 to-teal-500",
    slides: chapter3Slides
  }
];

// 60-minute TTL storage (localStorage has no built-in expiration) [web:17]
const COMPLETED_KEY = 'completedChapters_v1';
const TTL_MS = 60 * 60 * 1000;

function loadCompletedChapters() {
  try {
    const raw = localStorage.getItem(COMPLETED_KEY);
    if (!raw) return [];

    const parsed = JSON.parse(raw);
    const savedAt = parsed?.savedAt;
    const value = parsed?.value;

    if (!Array.isArray(value) || typeof savedAt !== 'number') return [];

    if (Date.now() - savedAt > TTL_MS) {
      localStorage.removeItem(COMPLETED_KEY); // remove expired key [web:16]
      return [];
    }

    return value;
  } catch {
    return [];
  }
}

function saveCompletedChapters(next) {
  localStorage.setItem(
    COMPLETED_KEY,
    JSON.stringify({ value: next, savedAt: Date.now() })
  );
}

export default function Lessons() {
  const [selectedChapter, setSelectedChapter] = useState(null);
  const [currentSlide, setCurrentSlide] = useState(0);
  const [completedChapters, setCompletedChapters] = useState(loadCompletedChapters);

  useEffect(() => {
    const urlParams = new URLSearchParams(window.location.search);
    const chapterParam = urlParams.get('chapter');
    if (chapterParam) {
      const chapterIndex = parseInt(chapterParam) - 1;
      if (chapterIndex >= 0 && chapterIndex < chapters.length) {
        setSelectedChapter(chapterIndex);
      }
    }
  }, []);

  const handleChapterSelect = (index) => {
    setSelectedChapter(index);
    setCurrentSlide(0);
  };

  const handleNext = () => {
    const chapter = chapters[selectedChapter];
    if (currentSlide < chapter.slides.length - 1) {
      setCurrentSlide(currentSlide + 1);
    }
  };

  const handleMarkComplete = () => {
    if (!completedChapters.includes(selectedChapter)) {
      const updated = [...completedChapters, selectedChapter];
      setCompletedChapters(updated);
      saveCompletedChapters(updated);
    }
    // Return to chapter selection
    setSelectedChapter(null);
    setCurrentSlide(0);
  };

  const handlePrev = () => {
    if (currentSlide > 0) {
      setCurrentSlide(currentSlide - 1);
    }
  };

  const handleHome = () => {
    setSelectedChapter(null);
    setCurrentSlide(0);
  };

  const allChaptersCompleted = completedChapters.length === chapters.length;

  // Chapter Selection View
  if (selectedChapter === null) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 pt-24 pb-12 px-6">

        {/* Background Effects */}

        <div className="fixed inset-0 overflow-hidden pointer-events-none">

          <div className="absolute top-20 left-10 w-72 h-72 bg-blue-500/20 rounded-full blur-3xl animate-pulse" />

          <div className="absolute bottom-20 right-10 w-96 h-96 bg-purple-500/20 rounded-full blur-3xl animate-pulse" />

        </div>



        <div className="max-w-4xl mx-auto relative">

          <motion.div

            initial={{ opacity: 0, y: -20 }}

            animate={{ opacity: 1, y: 0 }}

            className="text-center mb-12"

          >

            <Link to={createPageUrl('Home')}>

              <Button variant="ghost" className="text-white/70 hover:text-white mb-6">

                <ArrowLeft className="w-4 h-4 mr-2" />

                Back to Home

              </Button>

            </Link>



            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 mb-6">

              <BookOpen className="w-4 h-4 text-cyan-400" />

              <span className="text-white/90 text-sm font-medium">Choose a Lesson</span>

            </div>



            <h1 className="text-4xl md:text-5xl font-black text-white mb-4">

              AI Vision Lessons

            </h1>

            <p className="text-xl text-white/70">

              Select a chapter to start learning

            </p>

          </motion.div>



          <div className="grid gap-6">

            {chapters.map((chapter, index) => {

              const isCompleted = completedChapters.includes(index);

              return (

                <motion.div

                  key={chapter.id}

                  initial={{ opacity: 0, y: 30 }}

                  animate={{ opacity: 1, y: 0 }}

                  transition={{ delay: 0.1 + index * 0.1 }}

                >

                  <motion.button

                    onClick={() => handleChapterSelect(index)}

                    className="w-full text-left"

                    whileHover={{ scale: 1.02 }}

                    whileTap={{ scale: 0.98 }}

                  >

                    <div className={`relative overflow-hidden rounded-3xl p-8 bg-gradient-to-br ${chapter.color} shadow-2xl`}>

                      <div className="absolute top-0 right-0 w-40 h-40 bg-white/10 rounded-full -translate-y-1/2 translate-x-1/2" />



                      {isCompleted && (

                        <div className="absolute top-4 right-4 w-10 h-10 rounded-full bg-emerald-500 flex items-center justify-center shadow-lg">

                          <svg className="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">

                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />

                          </svg>

                        </div>

                      )}



                      <div className="flex items-center gap-6">

                        <div className="w-20 h-20 rounded-2xl bg-white/20 flex items-center justify-center">

                          <chapter.icon className="w-10 h-10 text-white" />

                        </div>

                        <div className="flex-1">

                          <div className="text-white/80 text-sm font-medium mb-1">

                            Chapter {chapter.id}

                          </div>

                          <h2 className="text-2xl md:text-3xl font-bold text-white mb-2">

                            {chapter.title}

                          </h2>

                          <p className="text-white/80">

                            {chapter.subtitle} • {chapter.slides.length} slides

                          </p>

                        </div>

                        <div className="hidden md:block">

                          <div className="w-12 h-12 rounded-full bg-white/20 flex items-center justify-center">

                            <ArrowLeft className="w-6 h-6 text-white rotate-180" />

                          </div>

                        </div>

                      </div>

                    </div>

                  </motion.button>

                </motion.div>

              );

            })}

          </div>



          {/* Quick Quiz Link */}

          <motion.div

            initial={{ opacity: 0 }}

            animate={{ opacity: 1 }}

            transition={{ delay: 0.5 }}

            className="mt-16 text-center"

          >

            {allChaptersCompleted ? (

              <>

                <div className="inline-flex items-center gap-2 px-5 py-2 rounded-full bg-emerald-500/20 border border-emerald-500/30 mb-6">

                  <span className="text-2xl">🎉</span>

                  <span className="text-emerald-400 font-semibold">All Lessons Completed!</span>

                </div>

                <p className="text-white/80 mb-6 text-lg">Ready to test your knowledge?</p>

                <Link to={createPageUrl('Quiz')}>

                  <Button className="bg-gradient-to-r from-yellow-500 to-orange-500 hover:from-yellow-600 hover:to-orange-600 rounded-2xl px-12 py-7 text-xl font-bold text-white border-0 shadow-2xl shadow-orange-500/30 transition-all hover:scale-105">

                    🎯 Take the Quiz Now

                  </Button>

                </Link>

              </>

            ) : (

              <>

                <div className="inline-flex items-center gap-2 px-5 py-2 rounded-full bg-blue-500/20 border border-blue-500/30 mb-6">

                  <span className="text-lg">📚</span>

                  <span className="text-blue-400 font-semibold">

                    {completedChapters.length} / {chapters.length} Chapters Completed

                  </span>

                </div>

                <p className="text-white/60 mb-6">Complete all lessons to unlock the quiz!</p>

                <Button disabled className="bg-slate-700 text-slate-400 rounded-2xl px-12 py-7 text-xl font-bold border-0 cursor-not-allowed opacity-60">

                  🔒 Quiz Locked

                </Button>

              </>

            )}

          </motion.div>
        </div>
      </div>
    );
  }

  // Lesson View
  const chapter = chapters[selectedChapter];
  const slide = chapter.slides[currentSlide];

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">

      {/* Background Effects */}

      <div className="fixed inset-0 overflow-hidden pointer-events-none">

        <div className="absolute top-20 left-10 w-72 h-72 bg-blue-500/20 rounded-full blur-3xl animate-pulse" />

        <div className="absolute bottom-20 right-10 w-96 h-96 bg-purple-500/20 rounded-full blur-3xl animate-pulse" />

      </div>



      {/* Chapter Header */}

      <div className="fixed top-0 left-0 right-0 z-40 bg-slate-900/80 backdrop-blur-xl border-b border-white/10">

        <div className="max-w-4xl mx-auto px-6 py-4">

          <div className="flex items-center gap-4">

            <div className={`w-10 h-10 rounded-xl bg-gradient-to-br ${chapter.color} flex items-center justify-center`}>

              <chapter.icon className="w-5 h-5 text-white" />

            </div>

            <div>

              <p className="text-white/60 text-sm">Chapter {chapter.id}</p>

              <h2 className="text-white font-bold">{chapter.title}</h2>

            </div>

          </div>

        </div>

      </div>



      {/* Slide Content */}

      <SlideContainer slideKey={currentSlide}>

        {slide.content}



        {/* Mark as Complete Button - Only on last slide */}

        {currentSlide === chapter.slides.length - 1 && (

          <motion.div

            initial={{ opacity: 0, y: 20 }}

            animate={{ opacity: 1, y: 0 }}

            transition={{ delay: 0.5 }}

            className="mt-12 text-center"

          >

            {completedChapters.includes(selectedChapter) ? (

              <div className="inline-flex items-center gap-3 px-8 py-4 rounded-2xl bg-emerald-500/20 border-2 border-emerald-500/40">

                <motion.div

                  initial={{ scale: 0 }}

                  animate={{ scale: 1 }}

                  transition={{ type: "spring" }}

                >

                  <svg className="w-8 h-8 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">

                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />

                  </svg>

                </motion.div>

                <span className="text-emerald-400 font-bold text-xl">Chapter Already Completed!</span>

              </div>

            ) : (

              <motion.button

                onClick={handleMarkComplete}

                className="px-12 py-6 rounded-2xl bg-gradient-to-r from-emerald-500 to-teal-500 hover:from-emerald-600 hover:to-teal-600 text-white font-bold text-xl border-0 shadow-2xl shadow-emerald-500/30 transition-all"

                whileHover={{ scale: 1.05 }}

                whileTap={{ scale: 0.95 }}

              >

                <span className="flex items-center gap-3">

                  <svg className="w-7 h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">

                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />

                  </svg>

                  Mark as Complete

                </span>

              </motion.button>

            )}

          </motion.div>

        )}

      </SlideContainer>



      {/* Navigation */}

      <SlideNavigation

        currentSlide={currentSlide}

        totalSlides={chapter.slides.length}

        onPrev={handlePrev}

        onNext={handleNext}

        onHome={handleHome}

        chapterTitle={chapter.title}

      />

    </div>
  );
}