import React, { useState, useEffect } from 'react';
import { useAppSelector } from '../store/hooks';
import { useNavigate } from 'react-router-dom';
import { 
  Play, 
  BookOpen, 
  Download, 
  ExternalLink, 
  CheckCircle, 
  Clock, 
  Users, 
  Award,
  Video,
  FileText,
  Headphones,
  Globe,
  ChevronDown,
  ChevronUp,
  Plus,
  Edit,
  Trash2,
  Settings,
  Save,
  X,
  Upload,
  Eye,
  EyeOff,
  Search,
  Filter
} from 'lucide-react';
import toast from 'react-hot-toast';

interface TrainingCourse {
  id: number;
  title: string;
  description: string;
  level: string;
  category: string;
  totalVideos: number;
  totalDuration: number;
  isActive: boolean;
  createdAt: string;
  vendor: {
    firstName: string;
    lastName: string;
    company?: string;
  };
  videos?: TrainingVideo[]; // Added for expanded view
}

interface TrainingVideo {
  id: number;
  title: string;
  description: string;
  videoType: 'youtube' | 'manual_upload';
  youtubeUrl?: string;
  videoFile?: string;
  duration: number;
  requiredForCompletion: boolean;
  sortOrder: number;
}

interface CourseProgress {
  courseId: number;
  status: 'not_started' | 'in_progress' | 'completed';
  progressPercentage: number;
  completedVideos: number;
  totalVideos: number;
  lastActivity?: string;
}

const Training: React.FC = () => {
  const { user } = useAppSelector((state) => state.auth);
  const navigate = useNavigate();
  const [courses, setCourses] = useState<TrainingCourse[]>([]);
  const [courseProgress, setCourseProgress] = useState<CourseProgress[]>([]);
  const [selectedCourse, setSelectedCourse] = useState<TrainingCourse | null>(null);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState('');
  const [selectedCategory, setSelectedCategory] = useState<string>('all');
  const [selectedLevel, setSelectedLevel] = useState<string>('all');
  const [expandedCourse, setExpandedCourse] = useState<number | null>(null);
  
  // Modal states
  const [isCreateCourseModalOpen, setIsCreateCourseModalOpen] = useState(false);
  const [isAddVideoModalOpen, setIsAddVideoModalOpen] = useState(false);
  const [isEditCourseModalOpen, setIsEditCourseModalOpen] = useState(false);
  const [isVideoPreviewModalOpen, setIsVideoPreviewModalOpen] = useState(false);
  const [selectedVideo, setSelectedVideo] = useState<TrainingVideo | null>(null);
  
  // Form states
  const [courseForm, setCourseForm] = useState({
    title: '',
    description: '',
      level: 'Beginner',
    category: '',
    completionCriteria: 'all_videos',
    completionPercentage: 100
  });
  
  const [videoForm, setVideoForm] = useState({
    title: '',
    description: '',
    videoType: 'youtube' as 'youtube' | 'manual_upload',
    youtubeUrl: '',
    requiredForCompletion: true
  });

  useEffect(() => {
    console.log('Training component - User state:', user);
    console.log('Training component - User role:', user?.role);
    console.log('Training component - User roles:', user?.roles);
    console.log('Training component - Is authenticated:', !!localStorage.getItem('accessToken'));
    
    if (!user) {
      console.log('No user found, checking if we need to redirect to login');
      // If no user but we have a token, we might need to fetch user data
      const token = localStorage.getItem('accessToken');
      if (token) {
        console.log('Token found but no user, might need to fetch user data');
        // You might want to dispatch an action to fetch user data here
      } else {
        console.log('No token, redirecting to login');
        navigate('/login');
        return;
      }
    }
    
    // Check if user has the right role for vendor access
    const isVendor = user?.role === 'channel_partner_admin' || 
                     user?.roles?.some(r => r.name === 'channel_partner_admin');
    
    console.log('Is vendor:', isVendor);
    
    if (isVendor) {
      console.log('Fetching vendor courses...');
      fetchVendorCourses();
    } else {
      console.log('Fetching available courses for reseller...');
      fetchAvailableCourses();
    }
  }, [user, navigate]);

  const fetchVendorCourses = async () => {
    try {
      setLoading(true);
      const token = localStorage.getItem('accessToken');
      console.log('Fetching vendor courses with token:', token ? 'Token exists' : 'No token');
      
      if (!token) {
        console.error('No access token found');
        toast.error('Authentication required. Please log in.');
        return;
      }
      
      const response = await fetch(`${process.env.REACT_APP_API_URL || 'http://localhost:5000/api'}/training-new/courses`, {
        headers: {
          'Authorization': `Bearer ${token}`,
          'Content-Type': 'application/json'
        }
      });

      console.log('API response status:', response.status);
      console.log('API response headers:', response.headers);

      if (response.ok) {
        const data = await response.json();
        console.log('API response data:', data);
        console.log('Courses received:', data.data.courses);
        console.log('First course videos:', data.data.courses[0]?.videos);
        setCourses(data.data.courses || []);
      } else {
        const errorData = await response.json().catch(() => ({ message: 'Unknown error' }));
        console.error('API error response:', errorData);
        toast.error(errorData.message || 'Failed to fetch courses');
      }
    } catch (error) {
      console.error('Error fetching courses:', error);
      toast.error('Failed to fetch courses');
    } finally {
      setLoading(false);
    }
  };

  const fetchAvailableCourses = async () => {
    try {
      setLoading(true);
      const token = localStorage.getItem('accessToken');
      console.log('Fetching available courses with token:', token ? 'Token exists' : 'No token');
      
      if (!token) {
        console.error('No access token found');
        toast.error('Authentication required. Please log in.');
        return;
      }
      
      const response = await fetch(`${process.env.REACT_APP_API_URL || 'http://localhost:5000/api'}/training-new/courses`, {
        headers: {
          'Authorization': `Bearer ${token}`,
          'Content-Type': 'application/json'
        }
      });

      console.log('API response status:', response.status);
      console.log('API response headers:', response.headers);

      if (response.ok) {
        const data = await response.json();
        console.log('API response data:', data);
        console.log('Courses received:', data.data.courses);
        console.log('First course videos:', data.data.courses[0]?.videos);
        setCourses(data.data.courses || []);
        
        // Fetch progress for each course
        const progressPromises = data.data.courses.map((course: TrainingCourse) => 
          fetchCourseProgress(course.id)
        );
        
        const progressResults = await Promise.all(progressPromises);
        setCourseProgress(progressResults.filter(Boolean));
      } else {
        const errorData = await response.json().catch(() => ({ message: 'Unknown error' }));
        console.error('API error response:', errorData);
        toast.error(errorData.message || 'Failed to fetch courses');
      }
    } catch (error) {
      console.error('Error fetching courses:', error);
      toast.error('Failed to fetch courses');
    } finally {
      setLoading(false);
    }
  };

  const fetchCourseProgress = async (courseId: number): Promise<CourseProgress | null> => {
    try {
      const token = localStorage.getItem('accessToken');
      const response = await fetch(`${process.env.REACT_APP_API_URL || 'http://localhost:5000/api'}/training-new/courses/${courseId}/progress`, {
        headers: {
          'Authorization': `Bearer ${token}`,
          'Content-Type': 'application/json'
        }
      });

      if (response.ok) {
        const data = await response.json();
        return data.data.userProgress || null;
      }
    } catch (error) {
      console.error('Error fetching course progress:', error);
    }
    return null;
  };

  const handleCreateCourse = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      const token = localStorage.getItem('accessToken');
      const response = await fetch(`${process.env.REACT_APP_API_URL || 'http://localhost:5000/api'}/training-new/courses`, {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${token}`,
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(courseForm)
      });

      if (response.ok) {
        const data = await response.json();
        toast.success('Course created successfully');
        setIsCreateCourseModalOpen(false);
        setCourseForm({
          title: '',
          description: '',
          level: 'Beginner',
          category: '',
          completionCriteria: 'all_videos',
          completionPercentage: 100
        });
        fetchVendorCourses();
      } else {
        const errorData = await response.json();
        toast.error(errorData.message || 'Failed to create course');
      }
    } catch (error) {
      console.error('Error creating course:', error);
      toast.error('Failed to create course');
    }
  };

  const handleAddVideo = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!selectedCourse) return;

    try {
      const token = localStorage.getItem('accessToken');
      const formData = new FormData();
      
      // Handle form data properly for different types
      Object.keys(videoForm).forEach(key => {
        const value = videoForm[key as keyof typeof videoForm];
        if (typeof value === 'string') {
          formData.append(key, value);
        } else if (typeof value === 'boolean') {
          formData.append(key, value.toString());
        }
      });

      const response = await fetch(`${process.env.REACT_APP_API_URL || 'http://localhost:5000/api'}/training-new/courses/${selectedCourse.id}/videos`, {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${token}`
        },
        body: formData
      });

      if (response.ok) {
        const data = await response.json();
        toast.success('Video added successfully');
        setIsAddVideoModalOpen(false);
        setVideoForm({
          title: '',
          description: '',
          videoType: 'youtube',
          youtubeUrl: '',
          requiredForCompletion: true
        });
        fetchVendorCourses();
      } else {
        const errorData = await response.json();
        toast.error(errorData.message || 'Failed to add video');
      }
    } catch (error) {
      console.error('Error adding video:', error);
      toast.error('Failed to add video');
    }
  };

  const getLevelColor = (level: string) => {
    switch (level) {
      case 'Beginner': return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200';
      case 'Intermediate': return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200';
      case 'Advanced': return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200';
      default: return 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200';
    }
  };

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'completed': return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200';
      case 'in_progress': return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200';
      case 'not_started': return 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200';
      default: return 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200';
    }
  };

  const getStatusIcon = (status: string) => {
    switch (status) {
      case 'completed': return <CheckCircle className="w-5 h-5 text-green-600" />;
      case 'in_progress': return <Clock className="w-5 h-5 text-yellow-600" />;
      default: return <Play className="w-5 h-5 text-gray-400" />;
    }
  };

  const filteredCourses = courses.filter(course => {
    const matchesSearch = course.title.toLowerCase().includes(search.toLowerCase()) ||
                         course.description.toLowerCase().includes(search.toLowerCase());
    const matchesCategory = selectedCategory === 'all' || course.category === selectedCategory;
    const matchesLevel = selectedLevel === 'all' || course.level === selectedLevel;
    
    return matchesSearch && matchesCategory && matchesLevel;
  });

  const uniqueCategories = Array.from(new Set(courses.map(course => course.category).filter(Boolean)));
  const uniqueLevels = ['Beginner', 'Intermediate', 'Advanced'];

  if (loading) {
  return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-primary-600"></div>
          </div>
    );
  }

  return (
    <div className="p-6 space-y-8">
      {/* Header */}
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-secondary-900 dark:text-white mb-3">
              Training Center
            </h1>
        <p className="text-secondary-600 dark:text-secondary-400 text-lg">
              Master the Cloudtopiaa platform and maximize your success
            </p>
          </div>

      {/* Action Bar for Vendors */}
      {user?.role === 'channel_partner_admin' && (
        <div className="flex justify-between items-center mb-6">
          <div className="text-sm text-gray-600 dark:text-gray-400">
            {courses.length} course{courses.length !== 1 ? 's' : ''} created
        </div>
            <button
            onClick={() => setIsCreateCourseModalOpen(true)}
            className="btn btn-primary"
          >
            <Plus className="w-4 h-4 mr-2" />
            Create Course
            </button>
          </div>
      )}

      {/* Search and Filters */}
      <div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 p-6">
        <div className="flex flex-col lg:flex-row gap-4 items-center justify-between">
          <div className="flex flex-col sm:flex-row gap-4 flex-1">
            <form onSubmit={(e) => e.preventDefault()} className="flex-1">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                <input
                  type="text"
                  placeholder="Search courses..."
                  value={search}
                  onChange={(e) => setSearch(e.target.value)}
                  className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500"
                />
              </div>
            </form>

            <div className="flex items-center space-x-2">
              <Filter className="w-4 h-4 text-gray-400" />
              <select
                value={selectedCategory}
                onChange={(e) => setSelectedCategory(e.target.value)}
                className="px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500"
              >
                <option value="all">All Categories</option>
                {uniqueCategories.map((category) => (
                  <option key={category} value={category}>
                    {category}
                  </option>
                ))}
              </select>

              <select
                value={selectedLevel}
                onChange={(e) => setSelectedLevel(e.target.value)}
                className="px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500"
              >
                <option value="all">All Levels</option>
                {uniqueLevels.map((level) => (
                  <option key={level} value={level}>
                    {level}
                  </option>
                ))}
              </select>
            </div>
          </div>
        </div>
      </div>

      {/* How Training Works Section */}
      <div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 p-6">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-6">
          How Training Works
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div className="text-center">
            <div className="w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mx-auto mb-4">
              <BookOpen className="w-8 h-8 text-blue-600 dark:text-blue-400" />
                </div>
            <div className="text-2xl font-bold text-blue-600 dark:text-blue-400 mb-2">1</div>
            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
              Choose Your Path
            </h3>
            <p className="text-gray-600 dark:text-gray-400">
              Select from beginner, intermediate, or advanced training modules based on your experience level.
            </p>
              </div>

              <div className="text-center">
            <div className="w-16 h-16 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mx-auto mb-4">
              <Video className="w-8 h-8 text-green-600 dark:text-green-400" />
                </div>
            <div className="text-2xl font-bold text-green-600 dark:text-green-400 mb-2">2</div>
            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
              Watch & Learn
            </h3>
            <p className="text-gray-600 dark:text-gray-400">
              Access high-quality video tutorials, webinars, and interactive content designed for resellers.
            </p>
              </div>

              <div className="text-center">
            <div className="w-16 h-16 bg-orange-100 dark:bg-orange-900 rounded-full flex items-center justify-center mx-auto mb-4">
              <Award className="w-8 h-8 text-orange-600 dark:text-orange-400" />
                </div>
            <div className="text-2xl font-bold text-orange-600 dark:text-orange-400 mb-2">3</div>
            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
              Get Certified
            </h3>
            <p className="text-gray-600 dark:text-gray-400">
              Complete assessments and earn certifications to demonstrate your expertise to customers.
            </p>
              </div>
            </div>
          </div>

      {/* Training Courses */}
      <div className="space-y-6">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
          Training Modules
        </h2>

        {filteredCourses.length > 0 ? (
          <div className="space-y-4">
            {filteredCourses.map((course) => {
              const progress = courseProgress.find(p => p.courseId === course.id);
              const status = progress ? progress.status : 'not_started';
              const progressPercentage = progress ? progress.progressPercentage : 0;
              const isExpanded = expandedCourse === course.id;

              return (
                <div key={course.id} className="bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
                  <div className="p-6">
                    <div className="flex items-start justify-between">
                      <div className="flex-1">
                        <div className="flex items-center space-x-3 mb-3">
                          <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                            {course.title}
                          </h3>
                          <span className={`px-2 py-1 rounded-full text-xs font-medium ${getLevelColor(course.level)}`}>
                            {course.level}
                          </span>
                          {user?.role !== 'channel_partner_admin' && (
                            <div className="flex items-center space-x-2">
                              {getStatusIcon(status)}
                              <span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(status)}`}>
                                {status.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase())}
                          </span>
                        </div>
                          )}
                        </div>
                        
                        <p className="text-gray-600 dark:text-gray-400 mb-4">
                          {course.description}
                        </p>

                        <div className="flex items-center space-x-6 text-sm text-gray-500 dark:text-gray-400">
                          <div className="flex items-center space-x-1">
                            <Clock className="w-4 h-4" />
                            <span>{Math.round(course.totalDuration / 60)} hours</span>
                          </div>
                          <div className="flex items-center space-x-1">
                            <Video className="w-4 h-4" />
                            <span>{course.totalVideos} videos</span>
                          </div>
                          <div className="flex items-center space-x-1">
                            <FileText className="w-4 h-4" />
                            <span>{course.totalVideos} materials</span>
                          </div>
                          {user?.role !== 'channel_partner_admin' && progress && (
                            <div className="flex items-center space-x-1">
                              <CheckCircle className="w-4 h-4" />
                              <span>{progressPercentage}% complete</span>
                        </div>
                          )}
                      </div>

                        {user?.role !== 'channel_partner_admin' && progress && (
                          <div className="mt-4">
                            <div className="flex items-center justify-between text-sm mb-2">
                              <span className="text-gray-600 dark:text-gray-400">Progress</span>
                              <span className="text-gray-900 dark:text-white font-medium">
                                {progressPercentage}%
                              </span>
                    </div>
                            <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                              <div 
                                className="bg-primary-600 h-2 rounded-full transition-all duration-300"
                                style={{ width: `${progressPercentage}%` }}
                              ></div>
                            </div>
                          </div>
                        )}
                      </div>

                      <div className="flex items-center space-x-2 ml-4">
                        {user?.role === 'channel_partner_admin' && (
                          <>
                          <button
                              onClick={() => {
                                setSelectedCourse(course);
                                setIsEditCourseModalOpen(true);
                              }}
                              className="p-2 text-gray-400 hover:text-blue-600 transition-colors"
                              title="Edit Course"
                          >
                            <Edit className="w-4 h-4" />
                          </button>
                          <button
                              onClick={() => {
                                setSelectedCourse(course);
                                setIsAddVideoModalOpen(true);
                              }}
                              className="p-2 text-gray-400 hover:text-green-600 transition-colors"
                              title="Add Video"
                            >
                              <Plus className="w-4 h-4" />
                          </button>
                          </>
                        )}
                        <button
                          onClick={() => setExpandedCourse(isExpanded ? null : course.id)}
                          className="p-2 text-gray-400 hover:text-gray-600 transition-colors"
                          title={isExpanded ? "Collapse" : "Expand"}
                        >
                          {isExpanded ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
                        </button>
                  </div>
                </div>

                {/* Expanded Content */}
                    {isExpanded && (
                      <div className="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
                        <div className="space-y-4">
                          <h4 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                            Course Content
                        </h4>
                          
                          {/* Debug info */}
                          <div className="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg text-sm">
                            <p><strong>Debug Info:</strong></p>
                            <p>Course ID: {course.id}</p>
                            <p>Videos count: {course.videos?.length || 0}</p>
                            <p>Videos data: {JSON.stringify(course.videos, null, 2)}</p>
                      </div>
                          
                          {/* Video List */}
                          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                            {course.videos && course.videos.length > 0 ? (
                              course.videos.map((video) => (
                                <div key={video.id} className="bg-gray-50 dark:bg-gray-700 rounded-lg p-4 border border-gray-200 dark:border-gray-600">
                                  {/* Video Thumbnail/Preview */}
                                  <div className="relative mb-3">
                                    {video.videoType === 'youtube' && video.youtubeUrl ? (
                                      <div className="aspect-video bg-gray-200 dark:bg-gray-600 rounded-lg overflow-hidden">
                                        <img
                                          src={`https://img.youtube.com/vi/${video.youtubeUrl?.split('v=')[1] || ''}/maxresdefault.jpg`}
                                alt={video.title}
                                className="w-full h-full object-cover"
                                          onError={(e) => {
                                            // Fallback to medium quality if maxresdefault fails
                                            const target = e.target as HTMLImageElement;
                                            const videoId = video.youtubeUrl?.split('v=')[1] || '';
                                            target.src = `https://img.youtube.com/vi/${videoId}/mqdefault.jpg`;
                                          }}
                                        />
                                        {/* Play Button Overlay */}
                                        <div 
                                          className="absolute inset-0 flex items-center justify-center bg-black bg-opacity-20 hover:bg-opacity-30 transition-all cursor-pointer"
                                          onClick={() => {
                                            setSelectedVideo(video);
                                            setIsVideoPreviewModalOpen(true);
                                          }}
                                        >
                                          <div className="w-16 h-16 bg-red-600 rounded-full flex items-center justify-center hover:bg-red-700 transition-colors">
                                            <Play className="w-8 h-8 text-white ml-1" />
                              </div>
                            </div>
                                      </div>
                                    ) : video.videoFile ? (
                                      <div className="aspect-video bg-gray-200 dark:bg-gray-600 rounded-lg overflow-hidden flex items-center justify-center">
                                        <video
                                          className="w-full h-full object-cover"
                                          preload="metadata"
                                        >
                                          <source src={video.videoFile} type="video/mp4" />
                                          Your browser does not support the video tag.
                                        </video>
                                        {/* Play Button Overlay */}
                                        <div 
                                          className="absolute inset-0 flex items-center justify-center bg-black bg-opacity-20 hover:bg-opacity-30 transition-all cursor-pointer"
                                          onClick={() => {
                                            setSelectedVideo(video);
                                            setIsVideoPreviewModalOpen(true);
                                          }}
                                        >
                                          <div className="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center hover:bg-blue-700 transition-colors">
                                            <Play className="w-8 h-8 text-white ml-1" />
                                </div>
                              </div>
                            </div>
                                    ) : (
                                      <div className="aspect-video bg-gray-200 dark:bg-gray-600 rounded-lg overflow-hidden flex items-center justify-center">
                                        <Video className="w-12 h-12 text-gray-400" />
                          </div>
                                    )}
                                    
                                    {/* Video Duration Badge */}
                                    {video.duration && (
                                      <div className="absolute bottom-2 right-2 bg-black bg-opacity-75 text-white text-xs px-2 py-1 rounded">
                                        {Math.floor(video.duration / 60)}:{(video.duration % 60).toString().padStart(2, '0')}
                      </div>
                                    )}
                                    
                                    {/* Required Badge */}
                                    {video.requiredForCompletion && (
                                      <div className="absolute top-2 left-2 bg-red-500 text-white text-xs px-2 py-1 rounded">
                                        Required
                                      </div>
                                    )}
                    </div>

                                  {/* Video Info */}
                    <div>
                                    <h5 className="font-medium text-gray-900 dark:text-white mb-1">
                                      {video.title}
                                    </h5>
                                    {video.description && (
                                      <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
                                        {video.description}
                                      </p>
                                    )}
                                    
                                    {/* Video Type Badge */}
                                    <div className="flex items-center justify-between">
                                      <span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
                                        video.videoType === 'youtube' 
                                          ? 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
                                          : 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'
                                      }`}>
                                        {video.videoType === 'youtube' ? (
                                          <>
                                            <svg className="w-3 h-3 mr-1" viewBox="0 0 24 24" fill="currentColor">
                                              <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
                                            </svg>
                                            YouTube
                                          </>
                                        ) : (
                                          <>
                                            <Upload className="w-3 h-3 mr-1" />
                                            Uploaded
                                          </>
                                        )}
                                      </span>
                                      
                                      {/* Play Button */}
                          <button
                            onClick={() => {
                                          setSelectedVideo(video);
                                          setIsVideoPreviewModalOpen(true);
                            }}
                                        className="inline-flex items-center px-3 py-1 bg-primary-600 text-white text-sm rounded-md hover:bg-primary-700 transition-colors"
                          >
                                        <Play className="w-3 h-3 mr-1" />
                                        Play
                          </button>
                      </div>
                                </div>
                              </div>
                              ))
                            ) : (
                              <div className="col-span-full text-center py-8">
                                <Video className="w-16 h-16 mx-auto mb-4 text-gray-400" />
                                <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
                                  No videos added yet
                                </h3>
                                <p className="text-gray-500 dark:text-gray-400 mb-4">
                                  {user?.role === 'channel_partner_admin' 
                                    ? 'Add videos to this course to get started'
                                    : 'This course will have videos added soon'
                                  }
                                </p>
                                {user?.role === 'channel_partner_admin' && (
                                        <button
                                    onClick={() => {
                                      setSelectedCourse(course);
                                      setIsAddVideoModalOpen(true);
                                    }}
                                    className="btn btn-primary"
                                  >
                                    <Plus className="w-4 h-4 mr-2" />
                                    Add Video
                                        </button>
                                    )}
                                  </div>
                            )}
                                </div>
                              </div>
                            </div>
                    )}
                          </div>
                      </div>
              );
            })}
                    </div>
        ) : (
          <div className="text-center py-12">
            <div className="w-16 h-16 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center mx-auto mb-4">
              <BookOpen className="w-8 h-8 text-gray-400" />
                  </div>
            <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
              {search || selectedCategory !== 'all' || selectedLevel !== 'all' 
                ? 'No courses found' 
                : 'No courses available yet'}
            </h3>
            <p className="text-gray-500 dark:text-gray-400 mb-6">
              {search || selectedCategory !== 'all' || selectedLevel !== 'all'
                ? 'Try adjusting your search or filters'
                : user?.role === 'channel_partner_admin'
                  ? 'Create your first training course to get started'
                  : 'Check back later for new training courses'}
            </p>
            {user?.role === 'channel_partner_admin' && (
              <button
                onClick={() => setIsCreateCourseModalOpen(true)}
                className="btn btn-primary"
              >
                <Plus className="w-4 h-4 mr-2" />
                Create Your First Course
              </button>
                )}
              </div>
        )}
          </div>

      {/* Create Course Modal */}
      {isCreateCourseModalOpen && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
          <div className="bg-white dark:bg-gray-800 rounded-xl shadow-2xl max-w-md w-full">
            <div className="p-6">
              <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">
                Create New Course
              </h2>
              
              <form onSubmit={handleCreateCourse} className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Course Title
                  </label>
                  <input
                    type="text"
                    value={courseForm.title}
                    onChange={(e) => setCourseForm({ ...courseForm, title: e.target.value })}
                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500"
                    required
                  />
      </div>

              <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Description
                  </label>
                  <textarea
                    value={courseForm.description}
                    onChange={(e) => setCourseForm({ ...courseForm, description: e.target.value })}
                    rows={3}
                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500"
                  />
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div>
                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                      Level
                    </label>
                    <select
                      value={courseForm.level}
                      onChange={(e) => setCourseForm({ ...courseForm, level: e.target.value })}
                      className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500"
                    >
                      <option value="Beginner">Beginner</option>
                      <option value="Intermediate">Intermediate</option>
                      <option value="Advanced">Advanced</option>
                  </select>
                </div>

              <div>
                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                      Category
                    </label>
                    <input
                      type="text"
                      value={courseForm.category}
                      onChange={(e) => setCourseForm({ ...courseForm, category: e.target.value })}
                      className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500"
                      placeholder="e.g., Sales, Technical"
                    />
              </div>
              </div>

                <div className="flex space-x-3 pt-4">
                <button
                  type="button"
                    onClick={() => setIsCreateCourseModalOpen(false)}
                    className="flex-1 btn btn-outline"
                >
                  Cancel
                </button>
                <button
                  type="submit"
                    className="flex-1 btn btn-primary"
                >
                    Create Course
                </button>
              </div>
            </form>
            </div>
          </div>
        </div>
      )}

      {/* Add Video Modal */}
      {isAddVideoModalOpen && selectedCourse && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
          <div className="bg-white dark:bg-gray-800 rounded-xl shadow-2xl max-w-md w-full">
            <div className="p-6">
              <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">
                Add Video to {selectedCourse.title}
              </h2>
              
              <form onSubmit={handleAddVideo} className="space-y-4">
              <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Video Title
                  </label>
                  <input
                    type="text"
                    value={videoForm.title}
                    onChange={(e) => setVideoForm({ ...videoForm, title: e.target.value })}
                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500"
                    required
                  />
              </div>

              <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Description
                  </label>
                  <textarea
                    value={videoForm.description}
                    onChange={(e) => setVideoForm({ ...videoForm, description: e.target.value })}
                    rows={3}
                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500"
                  />
              </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Video Type
                  </label>
                  <div className="space-y-2">
                    <label className="flex items-center">
                      <input
                        type="radio"
                        value="youtube"
                        checked={videoForm.videoType === 'youtube'}
                        onChange={(e) => setVideoForm({ ...videoForm, videoType: e.target.value as 'youtube' | 'manual_upload' })}
                        className="mr-2"
                      />
                      <span className="text-sm text-gray-700 dark:text-gray-300">YouTube Link</span>
                    </label>
                    <label className="flex items-center">
                      <input
                        type="radio"
                        value="manual_upload"
                        checked={videoForm.videoType === 'manual_upload'}
                        onChange={(e) => setVideoForm({ ...videoForm, videoType: e.target.value as 'youtube' | 'manual_upload' })}
                        className="mr-2"
                      />
                      <span className="text-sm text-gray-700 dark:text-gray-300">Manual Upload</span>
                    </label>
                </div>
                </div>

                {videoForm.videoType === 'youtube' && (
              <div>
                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                      YouTube URL
                    </label>
                    <input
                      type="url"
                      value={videoForm.youtubeUrl}
                      onChange={(e) => setVideoForm({ ...videoForm, youtubeUrl: e.target.value })}
                      className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500"
                      placeholder="https://www.youtube.com/watch?v=..."
                      required
                    />
        </div>
      )}

                {videoForm.videoType === 'manual_upload' && (
              <div>
                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                      Video File
                    </label>
                    <input
                      type="file"
                      accept="video/*"
                      className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500"
                      required
                    />
                    <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                      Supported formats: MP4, AVI, MOV, WMV, FLV (Max: 500MB)
                    </p>
              </div>
                )}

              <div>
                  <label className="flex items-center">
                    <input
                      type="checkbox"
                      checked={videoForm.requiredForCompletion}
                      onChange={(e) => setVideoForm({ ...videoForm, requiredForCompletion: e.target.checked })}
                      className="mr-2"
                    />
                    <span className="text-sm text-gray-700 dark:text-gray-300">
                      Required for course completion
                    </span>
                  </label>
              </div>

                <div className="flex space-x-3 pt-4">
                <button
                  type="button"
                    onClick={() => setIsAddVideoModalOpen(false)}
                    className="flex-1 btn btn-outline"
                >
                  Cancel
                </button>
                <button
                  type="submit"
                    className="flex-1 btn btn-primary"
                >
                    Add Video
                </button>
              </div>
            </form>
            </div>
          </div>
        </div>
      )}

      {/* Video Preview Modal */}
      {isVideoPreviewModalOpen && selectedVideo && (
        <div className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 p-4">
          <div className="bg-white dark:bg-gray-800 rounded-xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-hidden">
            <div className="p-6">
              <div className="flex items-center justify-between mb-4">
                <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
                  {selectedVideo.title}
                </h2>
                <button
                  onClick={() => setIsVideoPreviewModalOpen(false)}
                  className="p-2 text-gray-400 hover:text-gray-600 transition-colors"
                >
                  <X className="w-5 h-5" />
                </button>
              </div>
              
              {/* Video Player */}
              <div className="mb-4">
                {selectedVideo.videoType === 'youtube' && selectedVideo.youtubeUrl ? (
                  <div className="aspect-video bg-gray-200 dark:bg-gray-600 rounded-lg overflow-hidden">
                    <iframe
                      src={selectedVideo.youtubeUrl.replace('watch?v=', 'embed/')}
                      title={selectedVideo.title}
                      className="w-full h-full"
                      frameBorder="0"
                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                      allowFullScreen
                    />
          </div>
                ) : selectedVideo.videoFile ? (
                  <div className="aspect-video bg-gray-200 dark:bg-gray-600 rounded-lg overflow-hidden">
                    <video
                      className="w-full h-full"
                      controls
                      autoPlay
                    >
                      <source src={selectedVideo.videoFile} type="video/mp4" />
                      Your browser does not support the video tag.
                    </video>
                  </div>
                ) : (
                  <div className="aspect-video bg-gray-200 dark:bg-gray-600 rounded-lg flex items-center justify-center">
                    <Video className="w-16 h-16 text-gray-400" />
                    <p className="text-gray-500 dark:text-gray-400 ml-3">Video not available</p>
        </div>
      )}
              </div>
              
              {/* Video Details */}
              <div className="space-y-3">
                {selectedVideo.description && (
              <div>
                    <h3 className="font-medium text-gray-900 dark:text-white mb-2">Description</h3>
                    <p className="text-gray-600 dark:text-gray-400">{selectedVideo.description}</p>
              </div>
                )}
                
                <div className="grid grid-cols-2 gap-4 text-sm">
              <div>
                    <span className="font-medium text-gray-900 dark:text-white">Type:</span>
                    <span className={`ml-2 px-2 py-1 rounded-full text-xs font-medium ${
                      selectedVideo.videoType === 'youtube' 
                        ? 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
                        : 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'
                    }`}>
                      {selectedVideo.videoType === 'youtube' ? 'YouTube' : 'Uploaded'}
                    </span>
              </div>
                  
                  {selectedVideo.duration && (
                <div>
                      <span className="font-medium text-gray-900 dark:text-white">Duration:</span>
                      <span className="ml-2 text-gray-600 dark:text-gray-400">
                        {Math.floor(selectedVideo.duration / 60)}:{(selectedVideo.duration % 60).toString().padStart(2, '0')}
                      </span>
                </div>
                  )}
                  
                <div>
                    <span className="font-medium text-gray-900 dark:text-white">Required:</span>
                    <span className={`ml-2 px-2 py-1 rounded-full text-xs font-medium ${
                      selectedVideo.requiredForCompletion
                        ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
                        : 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200'
                    }`}>
                      {selectedVideo.requiredForCompletion ? 'Yes' : 'No'}
                    </span>
                </div>
              </div>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default Training;