import React from 'react';
import { Tag } from 'primereact/tag';
import Image from 'next/image';
import { useImageProxy } from '@/hooks/useImageProxy';

const CourseSidebar = ({
  lessons,
  activeIndex,
  onLessonSelect,
  completedLessons,
  isMobileView,
  onClose,
  sidebarVisible,
}) => {
  const { returnImageProxy } = useImageProxy();

  const LessonItem = ({ lesson, index }) => (
    <li
      className={`
                rounded-lg overflow-hidden transition-all duration-200
                ${
                  activeIndex === index
                    ? 'bg-blue-900/40 border-l-4 border-blue-500'
                    : 'hover:bg-gray-700/50 active:bg-gray-700/80 border-l-4 border-transparent'
                }
                ${isMobileView ? 'mb-3' : 'mb-2'}
            `}
      onClick={() => onLessonSelect(index)}
    >
      <div className={`flex items-start p-3 cursor-pointer ${isMobileView ? 'p-4' : 'p-3'}`}>
        {lesson.image && (
          <div
            className={`relative rounded-md overflow-hidden flex-shrink-0 mr-3 ${isMobileView ? 'w-16 h-16' : 'w-12 h-12'}`}
          >
            <Image
              src={returnImageProxy(lesson.image)}
              alt={`Lesson ${index + 1} thumbnail`}
              fill
              className="object-cover"
            />
          </div>
        )}
        <div className="flex-1 min-w-0">
          <div className="flex justify-between items-start w-full">
            <span
              className={`font-medium block mb-1 text-gray-300 ${isMobileView ? 'text-base' : 'text-sm'}`}
            >
              Lesson {index + 1}
            </span>
            {completedLessons.includes(lesson.id) && (
              <Tag severity="success" value="Completed" className="ml-1 py-1 text-xs" />
            )}
          </div>
          <h3
            className={`font-medium leading-tight line-clamp-2 text-[#f8f8ff] ${isMobileView ? 'text-base' : ''}`}
          >
            {lesson.title}
          </h3>
        </div>
      </div>
    </li>
  );

  // Desktop sidebar implementation
  if (!isMobileView) {
    return (
      <div className="w-80 h-[calc(100vh-400px)] sticky top-8 overflow-hidden rounded-lg border border-gray-800 shadow-sm bg-gray-900">
        <div className="h-full overflow-y-auto">
          <div className="flex flex-col p-4 h-full bg-gray-800 text-[#f8f8ff]">
            <div className="flex items-center justify-between border-b border-gray-700 pb-4 mb-4">
              <h2 className="font-bold text-white text-lg">Course Lessons</h2>
            </div>
            <div className="overflow-y-auto flex-1">
              <ul className="space-y-2">
                {lessons.map((lesson, index) => (
                  <LessonItem key={index} lesson={lesson} index={index} />
                ))}
              </ul>
            </div>
          </div>
        </div>
      </div>
    );
  }

  // Mobile sidebar implementation - completely restructured for better scrolling
  if (isMobileView && sidebarVisible) {
    return (
      <div className="w-full bg-gray-900 rounded-lg border border-gray-800 shadow-md overflow-hidden mb-4">
        <div className="bg-gray-800 p-4 border-b border-gray-700">
          <h2 className="font-bold text-white text-xl">Course Lessons</h2>
        </div>
        
        {/* Scrollable container with fixed height */}
        <div className="overflow-y-scroll" style={{ maxHeight: '60vh', WebkitOverflowScrolling: 'touch' }}>
          <div className="p-4 bg-gray-900">
            <ul>
              {lessons.map((lesson, index) => (
                <LessonItem key={index} lesson={lesson} index={index} />
              ))}
            </ul>
          </div>
        </div>
      </div>
    );
  }

  return null;
};

export default CourseSidebar;