import { cn } from '@/lib/utils';
import CourseLayout from '@/Layouts/CourseLayout';
import { Head, router } from '@inertiajs/react';
import { useState, useEffect } from 'react';
import { Plyr } from 'plyr-react';
import 'plyr-react/plyr.css';
import {
    BookOpen,
    ArrowRight,
    Volume2,
    Play
} from 'lucide-react';
import { Button } from '@/Components/ui/button';
import { FuriganaText } from '@/lib/furigana';

interface VocabularyData {
    id: string;
    word: string;
    reading: string;
    romaji: string;
    meaning_id: string;
    meaning_en: string;
    type: string;
    audio_url: string | null;
}

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;
    progress_percentage: number;
    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;
    vocabularies: VocabularyData[];
    is_completed?: boolean;
    duration_seconds?: number;
}

interface PlayerProps {
    course: CourseData;
    currentLesson: CurrentLessonData;
    nextLesson?: LessonData | null;
    previousLesson?: LessonData | null;
    auth: {
        user: any;
    };
    [key: string]: any;
}

// Helper to get YouTube video ID (Original Regex Logic)
// Helper to get YouTube video ID (Robust)
function getYouTubeId(url: string | null): string | null {
    if (!url) return null;
    try {
        const urlObj = new URL(url.trim());
        let id = null;
        if (urlObj.hostname.includes('youtube.com')) {
            id = urlObj.searchParams.get('v');
        } else if (urlObj.hostname.includes('youtu.be')) {
            id = urlObj.pathname.slice(1);
        }
        return id;
    } catch (e) {
        const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
        const match = url.match(regExp);
        return (match && match[2]) ? match[2] : null;
    }
}

export default function Player({ course, currentLesson, nextLesson, previousLesson, auth }: PlayerProps) {
    const [isPlaying, setIsPlaying] = useState<string | null>(null);

    // ROBUST LOGIC:
    // Extract ID first. If valid ID, force provider 'youtube'.
    const youtubeId = getYouTubeId(currentLesson.video_url);
    const videoSource = currentLesson.type === 'video' && currentLesson.video_url ? {
        type: 'video' as const,
        sources: [{
            src: youtubeId || currentLesson.video_url,
            provider: youtubeId ? 'youtube' as const : 'html5' as const,
        }],
    } : null;

    // Learning Tracer - Heartbeat every 60 seconds
    useEffect(() => {
        const interval = setInterval(() => {
            // @ts-ignore
            router.post(route('lessons.heartbeat', { lesson: currentLesson.id }), {}, {
                preserveScroll: true,
                preserveState: true,
                only: [],
                // @ts-ignore
                onFinish: () => { }
            });
        }, 60000);

        return () => clearInterval(interval);
    }, [currentLesson.id]);

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

    const playAudio = (url: string, id: string) => {
        const audio = new Audio(url);
        setIsPlaying(id);
        audio.play();
        audio.onended = () => setIsPlaying(null);
    };

    return (
        <CourseLayout
            course={course}
            modules={course.modules as any}
            currentLesson={currentLesson as any}
            nextLesson={nextLesson as any}
            previousLesson={previousLesson as any}
        >
            <Head title={`${currentLesson.title} - ${course.title}`} />

            <div className="max-w-4xl mx-auto space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500 py-6 px-4 lg:py-10">

                {/* Video Player */}
                {currentLesson.type === 'video' && videoSource && (
                    <div className="relative group shadow-2xl rounded-3xl overflow-hidden ring-1 ring-black/5 bg-black aspect-video transition-transform hover:scale-[1.01] duration-500">
                        <Plyr source={videoSource} />
                    </div>
                )}

                {/* Title & Stats */}
                <div className="bg-white dark:bg-[#161618] p-6 lg:p-8 rounded-[32px] shadow-sm border border-black/5 dark:border-white/5 relative overflow-hidden group">
                    <div className="absolute top-0 right-0 w-32 h-32 bg-[#FF4500]/5 -mr-16 -mt-16 rounded-full opacity-50 group-hover:scale-110 transition-transform duration-700" />
                    <div className="relative space-y-3">
                        <div className="flex items-center gap-2 text-[10px] font-black tracking-widest text-[#FF4500] uppercase">
                            <span className="px-2 py-0.5 bg-[#FF4500]/10 rounded-full">{currentLesson.type}</span>
                            {currentLesson.is_completed && <span className="px-2 py-0.5 bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400 rounded-full">Completed</span>}
                        </div>
                        <h1 className="text-2xl lg:text-3xl font-black text-gray-900 dark:text-white leading-tight">
                            <FuriganaText text={currentLesson.title || ''} />
                        </h1>
                    </div>
                </div>

                {/* Text Content */}
                {currentLesson.type === 'text' && currentLesson.content && (
                    <div className="bg-white dark:bg-[#161618] p-8 lg:p-12 rounded-[40px] shadow-sm border border-black/5 dark:border-white/5">
                        <article className="prose prose-nihonbuzz prose-lg lg:prose-xl max-w-none font-medium text-gray-700 dark:text-gray-300 leading-relaxed">
                            <FuriganaText text={currentLesson.content || ''} />
                        </article>
                    </div>
                )}

                {/* PDF Content */}
                {currentLesson.type === 'pdf' && currentLesson.content_pdf && (
                    <div className="aspect-[3/4] w-full rounded-[40px] overflow-hidden shadow-2xl ring-1 ring-black/5">
                        <iframe
                            src={currentLesson.content_pdf}
                            className="w-full h-full border-none"
                            title={currentLesson.title}
                        />
                    </div>
                )}

                {/* Vocabulary Section */}
                {currentLesson.vocabularies && currentLesson.vocabularies.length > 0 && (
                    <div className="space-y-6">
                        <div className="flex items-center gap-3">
                            <div className="bg-[#FF4500]/10 p-2 rounded-2xl">
                                <BookOpen className="w-5 h-5 text-[#FF4500]" />
                            </div>
                            <h2 className="text-xl font-black text-gray-900 dark:text-white tracking-tight">Kosa Kata Fokus</h2>
                        </div>

                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                            {currentLesson.vocabularies.map((vocab) => (
                                <div key={vocab.id} className="bg-white dark:bg-[#161618] p-5 rounded-3xl border border-black/5 dark:border-white/5 shadow-sm flex items-center justify-between group hover:border-[#FF4500]/30 transition-all hover:shadow-md">
                                    <div className="flex items-center gap-4">
                                        <div
                                            onClick={() => vocab.audio_url && playAudio(vocab.audio_url, vocab.id)}
                                            className={`w-12 h-12 rounded-2xl flex items-center justify-center transition-all cursor-pointer ${isPlaying === vocab.id ? 'bg-[#FF4500] text-white scale-95 shadow-inner' : 'bg-gray-50 dark:bg-white/5 text-gray-400 dark:text-white/40 group-hover:bg-[#FF4500]/5 group-hover:text-[#FF4500]'
                                                }`}
                                        >
                                            {isPlaying === vocab.id ? <Volume2 className="w-5 h-5 animate-pulse" /> : <Volume2 className="w-5 h-5" />}
                                        </div>
                                        <div>
                                            <FuriganaText text={vocab.word || ''} className="text-lg font-black text-gray-900 dark:text-white" />
                                            <div className="flex items-center gap-2 mt-0.5">
                                                <span className="text-xs font-bold text-[#FF4500]">{vocab.reading || ''}</span>
                                                <span className="text-[10px] text-gray-400 dark:text-gray-500 uppercase font-black">{vocab.type || ''}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="text-right pr-2">
                                        <p className="font-bold text-gray-700 dark:text-gray-300">{vocab.meaning_id || ''}</p>
                                        <p className="text-[11px] text-gray-400 dark:text-gray-600">{vocab.romaji || ''}</p>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                )}

                {/* Navigation Footer */}
                <div className="flex flex-col sm:flex-row items-center justify-between gap-6 pt-10 border-t border-black/5 dark:border-white/5">
                    <div className="flex items-center gap-6">
                        <div className="flex -space-x-3 overflow-hidden">
                            <div className="w-10 h-10 rounded-full border-4 border-white dark:border-[#161618] bg-gray-100 flex items-center justify-center font-bold text-[#FF4500] text-xs">NB</div>
                            <div className="w-10 h-10 rounded-full border-4 border-white dark:border-[#161618] bg-[#FF4500]/10 flex items-center justify-center font-bold text-[#FF4500] text-xs">🇯🇵</div>
                        </div>
                        <div className="text-left">
                            <p className="text-sm font-black text-gray-900 dark:text-white tracking-tight">NihonBuzz Academy</p>
                            <p className="text-xs text-[#FF4500] font-bold uppercase tracking-widest">Master Japanese Effortlessly</p>
                        </div>
                    </div>

                    <Button
                        onClick={handleComplete}
                        size="lg"
                        className={cn(
                            "rounded-full px-12 py-7 text-base font-black shadow-2xl transition-all hover:scale-105 active:scale-95 group",
                            currentLesson.is_completed
                                ? "bg-green-500 hover:bg-green-600 shadow-green-500/20 text-white"
                                : "bg-[#FF4500] hover:bg-[#FF4500]/90 shadow-[#FF4500]/20 text-white"
                        )}
                    >
                        {currentLesson.is_completed ? (
                            <>Selesai! Tonton Lagi</>
                        ) : (
                            <>Tandai Selesai <ArrowRight className="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" /></>
                        )}
                    </Button>
                </div>
            </div>
        </CourseLayout>
    );
}
