import { useEffect, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { supabase } from '@/integrations/supabase/client';
import { useAuth } from '@/hooks/useAuth';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';
import { toast } from '@/hooks/use-toast';
import { formatDuration } from '@/lib/format';
import { ChevronLeft, ChevronRight, Check, Play, BookOpen, Clock, Menu, X } from 'lucide-react';
import { cn } from '@/lib/utils';
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';

interface Product {
  id: string;
  title: string;
  slug: string;
}

interface Module {
  id: string;
  title: string;
  position: number;
  lessons: Lesson[];
}

interface Lesson {
  id: string;
  title: string;
  content: string | null;
  video_url: string | null;
  duration_seconds: number | null;
  position: number;
  release_at: string | null;
}

interface Progress {
  lesson_id: string;
  completed_at: string;
}

export default function Bootcamp() {
  const { slug } = useParams<{ slug: string }>();
  const navigate = useNavigate();
  const { user, loading: authLoading } = useAuth();

  const [product, setProduct] = useState<Product | null>(null);
  const [modules, setModules] = useState<Module[]>([]);
  const [progress, setProgress] = useState<Progress[]>([]);
  const [selectedLesson, setSelectedLesson] = useState<Lesson | null>(null);
  const [loading, setLoading] = useState(true);
  const [sidebarOpen, setSidebarOpen] = useState(true);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  useEffect(() => {
    if (!authLoading && !user) {
      navigate('/auth');
    } else if (user && slug) {
      checkAccessAndFetch();
    }
  }, [user, authLoading, slug]);

  const checkAccessAndFetch = async () => {
    const { data: productData, error: productError } = await supabase
      .from('products')
      .select('id, title, slug')
      .eq('slug', slug)
      .eq('type', 'bootcamp')
      .maybeSingle();

    if (productError || !productData) {
      toast({ title: 'Error', description: 'Bootcamp tidak ditemukan', variant: 'destructive' });
      navigate('/dashboard');
      return;
    }

    setProduct(productData);

    const { data: accessData } = await supabase
      .from('user_access')
      .select('id')
      .eq('user_id', user!.id)
      .eq('product_id', productData.id)
      .maybeSingle();

    if (!accessData) {
      toast({ title: 'Akses ditolak', description: 'Anda tidak memiliki akses ke bootcamp ini', variant: 'destructive' });
      navigate('/dashboard');
      return;
    }

    const { data: modulesData } = await supabase
      .from('bootcamp_modules')
      .select(`
        id,
        title,
        position,
        bootcamp_lessons (
          id,
          title,
          content,
          video_url,
          duration_seconds,
          position,
          release_at
        )
      `)
      .eq('product_id', productData.id)
      .order('position');

    if (modulesData) {
      const sortedModules = modulesData.map(m => ({
        ...m,
        lessons: (m.bootcamp_lessons as Lesson[]).sort((a, b) => a.position - b.position)
      }));
      setModules(sortedModules);

      if (sortedModules.length > 0 && sortedModules[0].lessons.length > 0) {
        setSelectedLesson(sortedModules[0].lessons[0]);
      }
    }

    const { data: progressData } = await supabase
      .from('lesson_progress')
      .select('lesson_id, completed_at')
      .eq('user_id', user!.id);

    if (progressData) {
      setProgress(progressData);
    }

    setLoading(false);
  };

  const isLessonCompleted = (lessonId: string) => {
    return progress.some(p => p.lesson_id === lessonId);
  };

  const markAsCompleted = async () => {
    if (!selectedLesson || !user) return;

    const { error } = await supabase
      .from('lesson_progress')
      .insert({ user_id: user.id, lesson_id: selectedLesson.id });

    if (error) {
      if (error.code === '23505') {
        toast({ title: 'Info', description: 'Pelajaran sudah ditandai selesai' });
      } else {
        toast({ title: 'Error', description: 'Gagal menandai selesai', variant: 'destructive' });
      }
      return;
    }

    setProgress([...progress, { lesson_id: selectedLesson.id, completed_at: new Date().toISOString() }]);
    toast({ title: 'Selesai!', description: 'Pelajaran ditandai selesai' });
    goToNextLesson();
  };

  const goToNextLesson = () => {
    if (!selectedLesson) return;
    const allLessons = modules.flatMap(m => m.lessons);
    const currentIndex = allLessons.findIndex(l => l.id === selectedLesson.id);
    if (currentIndex < allLessons.length - 1) {
      setSelectedLesson(allLessons[currentIndex + 1]);
    }
  };

  const goToPrevLesson = () => {
    if (!selectedLesson) return;
    const allLessons = modules.flatMap(m => m.lessons);
    const currentIndex = allLessons.findIndex(l => l.id === selectedLesson.id);
    if (currentIndex > 0) {
      setSelectedLesson(allLessons[currentIndex - 1]);
    }
  };

  const getVideoEmbed = (url: string) => {
    const youtubeMatch = url.match(/(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([^&\s]+)/);
    if (youtubeMatch) return `https://www.youtube.com/embed/${youtubeMatch[1]}`;
    const vimeoMatch = url.match(/vimeo\.com\/(\d+)/);
    if (vimeoMatch) return `https://player.vimeo.com/video/${vimeoMatch[1]}`;
    return url;
  };

  const completedCount = progress.length;
  const totalLessons = modules.reduce((sum, m) => sum + m.lessons.length, 0);

  const renderSidebarContent = () => (
    <div className="p-4">
      {modules.map((module) => (
        <div key={module.id} className="mb-4">
          <h3 className="font-semibold text-sm text-muted-foreground uppercase tracking-wide mb-2">
            {module.title}
          </h3>
          <div className="space-y-1">
            {module.lessons.map((lesson) => {
              const isCompleted = isLessonCompleted(lesson.id);
              const isSelected = selectedLesson?.id === lesson.id;
              const isReleased = !lesson.release_at || new Date(lesson.release_at) <= new Date();

              return (
                <button
                  key={lesson.id}
                  onClick={() => {
                    if (isReleased) {
                      setSelectedLesson(lesson);
                      setMobileMenuOpen(false);
                    }
                  }}
                  disabled={!isReleased}
                  className={cn(
                    "w-full text-left px-3 py-2 rounded-none text-sm flex items-center gap-2 transition-colors",
                    isSelected ? "bg-primary text-primary-foreground" : "hover:bg-muted",
                    !isReleased && "opacity-50 cursor-not-allowed"
                  )}
                >
                  {isCompleted ? (
                    <Check className="w-4 h-4 shrink-0 text-accent" />
                  ) : lesson.video_url ? (
                    <Play className="w-4 h-4 shrink-0" />
                  ) : (
                    <BookOpen className="w-4 h-4 shrink-0" />
                  )}
                  <span className="truncate flex-1">{lesson.title}</span>
                  {lesson.duration_seconds && (
                    <span className="text-xs text-muted-foreground">{formatDuration(lesson.duration_seconds)}</span>
                  )}
                </button>
              );
            })}
          </div>
        </div>
      ))}
    </div>
  );

  if (authLoading || loading) {
    return (
      <div className="min-h-screen bg-background">
        <div className="flex">
          <div className="w-80 border-r border-border p-4 hidden md:block">
            <Skeleton className="h-8 w-full mb-4" />
            {[...Array(5)].map((_, i) => (
              <Skeleton key={i} className="h-10 w-full mb-2" />
            ))}
          </div>
          <div className="flex-1 p-8">
            <Skeleton className="h-10 w-1/2 mb-4" />
            <Skeleton className="aspect-video w-full" />
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b-2 border-border bg-card sticky top-0 z-50">
        <div className="flex items-center justify-between px-4 h-16">
          <div className="flex items-center gap-4">
            <Button variant="ghost" size="sm" onClick={() => navigate('/dashboard')}>
              <ChevronLeft className="w-4 h-4 mr-1" />
              <span className="hidden sm:inline">Kembali ke Dashboard</span>
            </Button>
            <h1 className="text-lg md:text-xl font-bold truncate">{product?.title}</h1>
          </div>
          <div className="flex items-center gap-4">
            <span className="text-sm text-muted-foreground hidden sm:inline">
              {completedCount} / {totalLessons} selesai
            </span>
            <div className="w-24 md:w-32 h-2 bg-muted rounded-none overflow-hidden border border-border">
              <div
                className="h-full bg-primary transition-all"
                style={{ width: `${totalLessons > 0 ? (completedCount / totalLessons) * 100 : 0}%` }}
              />
            </div>
            {/* Mobile menu trigger */}
            <Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
              <SheetTrigger asChild>
                <Button variant="ghost" size="sm" className="md:hidden">
                  <Menu className="w-5 h-5" />
                </Button>
              </SheetTrigger>
              <SheetContent side="left" className="w-80 p-0 border-r-2 border-border">
                <div className="p-4 border-b-2 border-border font-bold">Kurikulum</div>
                <div className="overflow-y-auto h-[calc(100vh-60px)]">
                  {renderSidebarContent()}
                </div>
              </SheetContent>
            </Sheet>
          </div>
        </div>
      </header>

      <div className="flex">
        {/* Desktop Sidebar */}
        <aside className={cn(
          "hidden md:block border-r-2 border-border bg-card transition-all overflow-y-auto h-[calc(100vh-64px)] sticky top-16",
          sidebarOpen ? "w-80" : "w-0"
        )}>
          {sidebarOpen && renderSidebarContent()}
        </aside>

        {/* Toggle sidebar button */}
        <button
          onClick={() => setSidebarOpen(!sidebarOpen)}
          className="hidden md:flex absolute top-1/2 -translate-y-1/2 bg-card border-2 border-border rounded-r-none p-1 z-10"
          style={{ left: sidebarOpen ? '320px' : '0' }}
        >
          {sidebarOpen ? <ChevronLeft className="w-4 h-4" /> : <ChevronRight className="w-4 h-4" />}
        </button>

        {/* Main content */}
        <main className="flex-1 p-4 md:p-8 min-h-[calc(100vh-64px)] overflow-y-auto">
          {selectedLesson ? (
            <div className="max-w-4xl mx-auto">
              <div className="flex items-center gap-2 mb-4">
                <h2 className="text-2xl md:text-3xl font-bold">{selectedLesson.title}</h2>
                {selectedLesson.duration_seconds && (
                  <span className="flex items-center gap-1 text-sm text-muted-foreground">
                    <Clock className="w-4 h-4" />
                    {formatDuration(selectedLesson.duration_seconds)}
                  </span>
                )}
              </div>

              {selectedLesson.video_url && (
                <div className="aspect-video bg-muted rounded-none overflow-hidden mb-6 border-2 border-border">
                  <iframe
                    src={getVideoEmbed(selectedLesson.video_url)}
                    className="w-full h-full"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowFullScreen
                  />
                </div>
              )}

              {selectedLesson.content && (
                <Card className="border-2 border-border mb-6">
                  <CardContent className="pt-6">
                    <div
                      className="prose max-w-none"
                      dangerouslySetInnerHTML={{ __html: selectedLesson.content }}
                    />
                  </CardContent>
                </Card>
              )}

              <div className="flex items-center justify-between gap-4 flex-wrap">
                <Button
                  variant="outline"
                  onClick={goToPrevLesson}
                  disabled={modules.flatMap(m => m.lessons).findIndex(l => l.id === selectedLesson.id) === 0}
                  className="border-2"
                >
                  <ChevronLeft className="w-4 h-4 mr-2" />
                  Sebelumnya
                </Button>

                <Button
                  onClick={markAsCompleted}
                  disabled={isLessonCompleted(selectedLesson.id)}
                  className="shadow-sm"
                >
                  {isLessonCompleted(selectedLesson.id) ? (
                    <>
                      <Check className="w-4 h-4 mr-2" />
                      Sudah Selesai
                    </>
                  ) : (
                    'Tandai Selesai'
                  )}
                </Button>

                <Button
                  variant="outline"
                  onClick={goToNextLesson}
                  disabled={modules.flatMap(m => m.lessons).findIndex(l => l.id === selectedLesson.id) === modules.flatMap(m => m.lessons).length - 1}
                  className="border-2"
                >
                  Selanjutnya
                  <ChevronRight className="w-4 h-4 ml-2" />
                </Button>
              </div>
            </div>
          ) : (
            <div className="flex items-center justify-center h-full">
              <Card className="border-2 border-border">
                <CardContent className="py-12 text-center">
                  <BookOpen className="w-12 h-12 mx-auto mb-4 text-muted-foreground" />
                  <p className="text-muted-foreground">
                    {modules.length === 0 ? 'Belum ada pelajaran tersedia' : 'Pilih pelajaran untuk memulai'}
                  </p>
                </CardContent>
              </Card>
            </div>
          )}
        </main>
      </div>
    </div>
  );
}