import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head, Link, router } from '@inertiajs/react';
import { useState } from 'react';
import { Plyr } from 'plyr-react';
import { CheckCircle2, ChevronLeft, Circle, FileText, Play, Video } from 'lucide-react';
import { Button } from '@/Components/ui/button';
import { Progress } from '@/Components/ui/progress';

interface LessonData {
    id: string;
    title: string;
    slug: string;
    type: 'video' | 'text' | 'pdf';
    is_completed: boolean;
}

interface ModuleData {
    id: string;
    title: string;
    lessons: LessonData[];
}

interface CourseData {
    id: string;
    title: string;
    slug: string;
    modules: ModuleData[];
}

interface CurrentLessonData {
    id: string;
    title: string;
    slug: string;
    type: 'video' | 'text' | 'pdf';
    content: string | null;
    video_url: string | null;
    content_pdf: string | null;
}

interface ProgressData {
    completed_count: number;
    total_count: number;
    percentage: number;
}

interface PlayerProps {
    course: CourseData;
    currentLesson: CurrentLessonData;
    progress: ProgressData;
}

// Helper to get YouTube video ID
function getYouTubeId(url: string): string | null {
    const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
    const match = url.match(regExp);
    return (match && match[2].length === 11) ? match[2] : null;
}

export default function Player({ course, currentLesson, progress }: PlayerProps) {
    const [sidebarOpen, setSidebarOpen] = useState(true);

    const handleComplete = () => {
        router.post(route('lessons.complete', { lesson: currentLesson.id }));
    };

    const videoSource = currentLesson.video_url ? {
        type: 'video' as const,
        sources: [{
            src: getYouTubeId(currentLesson.video_url) || currentLesson.video_url,
            provider: currentLesson.video_url.includes('youtube') ? 'youtube' as const : 'html5' as const,
        }],
    } : null;

    return (
        <AuthenticatedLayout
            header={
                <div className="flex items-center justify-between">
                    <div className="flex items-center gap-4">
                        <Link href={route('dashboard')} className="p-2 rounded-xl bg-gray-100 hover:bg-gray-200 transition-colors">
                            <ChevronLeft className="w-5 h-5 text-gray-600" />
                        </Link>
                        <div>
                            <h2 className="text-lg font-bold text-gray-900 line-clamp-1">{course.title}</h2>
                            <p className="text-xs text-gray-500">{progress.completed_count}/{progress.total_count} Materi Selesai</p>
                        </div>
                    </div>
                    <Progress value={progress.percentage} className="w-32 h-2" />
                </div>
            }
        >
            <Head title={`${currentLesson.title} - ${course.title}`} />

            <div className="flex h-[calc(100vh-80px)]">
                {/* Main Content Area */}
                <div className={`flex-1 overflow-y-auto p-6 lg:p-10 transition-all ${sidebarOpen ? 'lg:mr-80' : ''}`}>
                    <div className="max-w-4xl mx-auto space-y-8">
                        {/* Lesson Title */}
                        <div className="flex items-center gap-3">
                            {currentLesson.type === 'video' && <Video className="w-6 h-6 text-nihonbuzz-red" />}
                            {currentLesson.type === 'text' && <FileText className="w-6 h-6 text-blue-500" />}
                            {currentLesson.type === 'pdf' && <FileText className="w-6 h-6 text-orange-500" />}
                            <h1 className="text-2xl font-black text-gray-900">{currentLesson.title}</h1>
                        </div>

                        {/* Video Player */}
                        {currentLesson.type === 'video' && videoSource && (
                            <div className="aspect-video rounded-2xl overflow-hidden shadow-2xl bg-black">
                                <Plyr source={videoSource} />
                            </div>
                        )}

                        {/* Text Content */}
                        {currentLesson.type === 'text' && currentLesson.content && (
                            <div 
                                className="prose prose-lg max-w-none bg-white p-8 rounded-2xl shadow-sm border border-gray-100"
                                dangerouslySetInnerHTML={{ __html: currentLesson.content }}
                            />
                        )}

                        {/* PDF Content */}
                        {currentLesson.type === 'pdf' && currentLesson.content_pdf && (
                            <div className="aspect-[3/4] w-full">
                                <iframe
                                    src={currentLesson.content_pdf}
                                    className="w-full h-full rounded-2xl shadow-lg border border-gray-200"
                                    title={currentLesson.title}
                                />
                            </div>
                        )}

                        {/* Mark as Complete Button */}
                        <div className="flex justify-center pt-6">
                            <Button 
                                onClick={handleComplete}
                                size="lg"
                                className="bg-nihonbuzz-red hover:bg-nihonbuzz-red/90 text-white font-bold rounded-full px-10 py-6 text-base shadow-xl shadow-nihonbuzz-red/30"
                            >
                                <CheckCircle2 className="w-5 h-5 mr-2" />
                                Tandai Selesai & Lanjutkan
                            </Button>
                        </div>
                    </div>
                </div>

                {/* Sidebar - Module & Lesson Navigation */}
                <aside className={`fixed right-0 top-16 bottom-0 w-80 bg-white border-l border-gray-100 overflow-y-auto transition-transform ${sidebarOpen ? 'translate-x-0' : 'translate-x-full'} hidden lg:block`}>
                    <div className="p-6 space-y-6">
                        <h3 className="text-sm font-black text-gray-400 uppercase tracking-widest">Daftar Materi</h3>
                        
                        {course.modules.map((module) => (
                            <div key={module.id} className="space-y-2">
                                <h4 className="font-bold text-gray-700 text-sm">{module.title}</h4>
                                <ul className="space-y-1">
                                    {module.lessons.map((lesson) => (
                                        <li key={lesson.id}>
                                            <Link
                                                href={route('courses.learn', { course: course.slug, lesson: lesson.slug })}
                                                className={`flex items-center gap-3 p-3 rounded-xl transition-all text-sm ${
                                                    lesson.id === currentLesson.id
                                                        ? 'bg-nihonbuzz-red/10 text-nihonbuzz-red font-bold'
                                                        : 'hover:bg-gray-50 text-gray-600'
                                                }`}
                                            >
                                                {lesson.is_completed ? (
                                                    <CheckCircle2 className="w-5 h-5 text-green-500 shrink-0" />
                                                ) : lesson.id === currentLesson.id ? (
                                                    <Play className="w-5 h-5 text-nihonbuzz-red shrink-0 fill-current" />
                                                ) : (
                                                    <Circle className="w-5 h-5 text-gray-300 shrink-0" />
                                                )}
                                                <span className="line-clamp-1">{lesson.title}</span>
                                            </Link>
                                        </li>
                                    ))}
                                </ul>
                            </div>
                        ))}
                    </div>
                </aside>
            </div>
        </AuthenticatedLayout>
    );
}
