'use client';

import React from 'react';
import { CheckCircle, Lock, Play, Clock, FileText, MessageCircle, Award, ChevronRight } from 'lucide-react';
import Link from 'next/link';
import { cn } from '@/utils/cn';

export interface Module {
  id: string;
  title: string;
  description: string;
  duration: string;
  isUnlocked: boolean;
  isCompleted: boolean;
  progress?: number; // 0-100
  type: 'video' | 'reading' | 'quiz' | 'assignment';
  hasQuiz?: boolean;
  hasAssignment?: boolean;
  videoUrl?: string;
  estimatedTime?: number; // in minutes
}

export interface Course {
  id: string;
  title: string;
  description: string;
  totalModules: number;
  completedModules: number;
  totalDuration: string;
  modules: Module[];
}

interface ModuleNavigationProps {
  course: Course;
  currentModuleId?: string;
  onModuleSelect?: (moduleId: string) => void;
  className?: string;
}

export default function ModuleNavigation({
  course,
  currentModuleId,
  onModuleSelect,
  className
}: ModuleNavigationProps) {
  const getModuleIcon = (module: Module) => {
    if (module.isCompleted) {
      return <CheckCircle className="w-5 h-5 text-green-600" />;
    }
    if (!module.isUnlocked) {
      return <Lock className="w-5 h-5 text-gray-400" />;
    }
    
    switch (module.type) {
      case 'video':
        return <Play className="w-5 h-5 text-blue-600" />;
      case 'reading':
        return <FileText className="w-5 h-5 text-purple-600" />;
      case 'quiz':
        return <MessageCircle className="w-5 h-5 text-orange-600" />;
      case 'assignment':
        return <Award className="w-5 h-5 text-red-600" />;
      default:
        return <FileText className="w-5 h-5 text-gray-600" />;
    }
  };

  const getModuleTypeLabel = (module: Module) => {
    switch (module.type) {
      case 'video':
        return 'Video';
      case 'reading':
        return 'Bacaan';
      case 'quiz':
        return 'Kuis';
      case 'assignment':
        return 'Tugas';
      default:
        return 'Modul';
    }
  };

  const calculateOverallProgress = () => {
    if (course.modules.length === 0) return 0;
    const totalProgress = course.modules.reduce((sum, module) => {
      if (module.isCompleted) return sum + 100;
      return sum + (module.progress || 0);
    }, 0);
    return Math.round(totalProgress / course.modules.length);
  };

  const getNextUnlockedModule = () => {
    return course.modules.find(module => module.isUnlocked && !module.isCompleted);
  };

  const handleModuleClick = (module: Module) => {
    if (module.isUnlocked) {
      onModuleSelect?.(module.id);
    }
  };

  const overallProgress = calculateOverallProgress();
  const nextModule = getNextUnlockedModule();

  return (
    <div className={cn("bg-white rounded-xl shadow-sm", className)}>
      {/* Course Header */}
      <div className="p-6 border-b border-gray-200">
        <div className="flex items-start justify-between mb-4">
          <div className="flex-1">
            <h2 className="text-lg font-bold text-gray-900 mb-1">{course.title}</h2>
            <p className="text-sm text-gray-600 line-clamp-2">{course.description}</p>
          </div>
        </div>
        
        {/* Progress Overview */}
        <div className="space-y-3">
          <div className="flex items-center justify-between text-sm">
            <span className="text-gray-600">Progress Keseluruhan</span>
            <span className="font-medium text-gray-900">{overallProgress}%</span>
          </div>
          
          <div className="w-full bg-gray-200 rounded-full h-2">
            <div 
              className="bg-gradient-to-r from-blue-500 to-green-500 h-2 rounded-full transition-all duration-500"
              style={{ width: `${overallProgress}%` }}
            />
          </div>
          
          <div className="flex items-center justify-between text-xs text-gray-500">
            <span>{course.completedModules} dari {course.totalModules} modul selesai</span>
            <span>{course.totalDuration}</span>
          </div>
        </div>

        {/* Next Module Suggestion */}
        {nextModule && (
          <div className="mt-4 p-3 bg-blue-50 rounded-lg border border-blue-200">
            <div className="flex items-center gap-2 mb-1">
              <div className="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></div>
              <span className="text-xs font-medium text-blue-700">Lanjutkan Belajar</span>
            </div>
            <button
              onClick={() => handleModuleClick(nextModule)}
              className="text-sm text-blue-600 hover:text-blue-700 font-medium"
            >
              {nextModule.title}
            </button>
          </div>
        )}
      </div>

      {/* Module List */}
      <div className="p-6">
        <h3 className="text-sm font-semibold text-gray-900 mb-4 flex items-center gap-2">
          <FileText className="w-4 h-4" />
          Daftar Modul
        </h3>
        
        <div className="space-y-2">
          {course.modules.map((module, index) => {
            const isActive = module.id === currentModuleId;
            const isClickable = module.isUnlocked;
            
            return (
              <div key={module.id} className="relative">
                {/* Connection Line */}
                {index < course.modules.length - 1 && (
                  <div className="absolute left-6 top-12 w-0.5 h-8 bg-gray-200"></div>
                )}
                
                <div
                  className={cn(
                    "relative p-4 rounded-lg border-2 transition-all duration-200",
                    isActive && "border-blue-500 bg-blue-50",
                    !isActive && module.isUnlocked && "border-gray-200 hover:border-gray-300 hover:bg-gray-50",
                    !module.isUnlocked && "border-gray-100 bg-gray-50",
                    isClickable && "cursor-pointer",
                    !isClickable && "cursor-not-allowed"
                  )}
                  onClick={() => handleModuleClick(module)}
                >
                  <div className="flex items-start gap-3">
                    {/* Module Icon */}
                    <div className={cn(
                      "flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center",
                      module.isCompleted && "bg-green-100",
                      !module.isCompleted && module.isUnlocked && "bg-blue-100",
                      !module.isUnlocked && "bg-gray-100"
                    )}>
                      {getModuleIcon(module)}
                    </div>
                    
                    {/* Module Content */}
                    <div className="flex-1 min-w-0">
                      <div className="flex items-start justify-between mb-1">
                        <h4 className={cn(
                          "font-medium text-sm leading-tight",
                          module.isUnlocked ? "text-gray-900" : "text-gray-400"
                        )}>
                          {module.title}
                        </h4>
                        
                        {isClickable && (
                          <ChevronRight className={cn(
                            "w-4 h-4 flex-shrink-0 ml-2",
                            isActive ? "text-blue-600" : "text-gray-400"
                          )} />
                        )}
                      </div>
                      
                      <div className="flex items-center gap-2 mb-2">
                        <span className={cn(
                          "text-xs px-2 py-1 rounded-full font-medium",
                          module.type === 'video' && "bg-blue-100 text-blue-700",
                          module.type === 'reading' && "bg-purple-100 text-purple-700",
                          module.type === 'quiz' && "bg-orange-100 text-orange-700",
                          module.type === 'assignment' && "bg-red-100 text-red-700"
                        )}>
                          {getModuleTypeLabel(module)}
                        </span>
                        
                        <div className="flex items-center gap-1 text-xs text-gray-500">
                          <Clock className="w-3 h-3" />
                          <span>{module.duration}</span>
                        </div>
                      </div>
                      
                      {/* Module Progress */}
                      {module.isUnlocked && !module.isCompleted && module.progress !== undefined && (
                        <div className="mb-2">
                          <div className="flex items-center justify-between text-xs text-gray-600 mb-1">
                            <span>Progress</span>
                            <span>{module.progress}%</span>
                          </div>
                          <div className="w-full bg-gray-200 rounded-full h-1">
                            <div 
                              className="bg-blue-500 h-1 rounded-full transition-all duration-300"
                              style={{ width: `${module.progress}%` }}
                            />
                          </div>
                        </div>
                      )}
                      
                      {/* Module Description */}
                      <p className={cn(
                        "text-xs leading-relaxed line-clamp-2",
                        module.isUnlocked ? "text-gray-600" : "text-gray-400"
                      )}>
                        {module.description}
                      </p>
                      
                      {/* Module Features */}
                      {module.isUnlocked && (
                        <div className="flex items-center gap-3 mt-2">
                          {module.hasQuiz && (
                            <div className="flex items-center gap-1 text-xs text-orange-600">
                              <MessageCircle className="w-3 h-3" />
                              <span>Kuis</span>
                            </div>
                          )}
                          {module.hasAssignment && (
                            <div className="flex items-center gap-1 text-xs text-red-600">
                              <Award className="w-3 h-3" />
                              <span>Tugas</span>
                            </div>
                          )}
                        </div>
                      )}
                    </div>
                  </div>
                  
                  {/* Completion Badge */}
                  {module.isCompleted && (
                    <div className="absolute -top-1 -right-1 w-6 h-6 bg-green-500 rounded-full flex items-center justify-center">
                      <CheckCircle className="w-4 h-4 text-white" />
                    </div>
                  )}
                  
                  {/* Lock Overlay */}
                  {!module.isUnlocked && (
                    <div className="absolute inset-0 bg-gray-100/80 rounded-lg flex items-center justify-center">
                      <div className="text-center">
                        <Lock className="w-6 h-6 text-gray-400 mx-auto mb-1" />
                        <span className="text-xs text-gray-500">Terkunci</span>
                      </div>
                    </div>
                  )}
                </div>
              </div>
            );
          })}
        </div>
      </div>
      
      {/* Course Completion */}
      {course.completedModules === course.totalModules && (
        <div className="p-6 border-t border-gray-200">
          <div className="text-center p-4 bg-green-50 rounded-lg border border-green-200">
            <div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3">
              <Award className="w-6 h-6 text-green-600" />
            </div>
            <h4 className="font-semibold text-green-900 mb-1">Selamat!</h4>
            <p className="text-sm text-green-700 mb-3">Anda telah menyelesaikan semua modul dalam kursus ini.</p>
            <button className="px-4 py-2 bg-green-600 text-white text-sm rounded-lg hover:bg-green-700 transition-colors">
              Dapatkan Sertifikat
            </button>
          </div>
        </div>
      )}
    </div>
  );
}