import AdminLayout from '@/Layouts/AdminLayout';
import { Head, Link, router } from '@inertiajs/react';
import { ArrowLeft, Plus, Edit2, Trash2, Video, FileText, ChevronDown, ChevronRight, Clock, Eye, Save, X, GripVertical, Settings } from 'lucide-react';
import { useState } from 'react';
import { Button } from '@/Components/ui/button';
import { Input } from '@/Components/ui/input';
import { Textarea } from '@/Components/ui/textarea';
import RichTextEditor from '@/Components/RichTextEditor';
import { Switch } from '@/Components/ui/switch';
import { Label } from '@/Components/ui/label';

interface Lesson {
    id: number;
    title: string;
    slug: string;
    content: string | null;
    video_url: string | null;
    duration: number | null;
    is_preview: boolean;
    order: number;
    type: 'video' | 'text';
}

interface Module {
    id: number;
    title: string;
    description: string | null;
    order: number;
    lessons: Lesson[];
}

interface Props {
    product: {
        id: number;
        name: string;
        modules: Module[];
    }
}

export default function Builder({ product }: Props) {
    const [isAddingModule, setIsAddingModule] = useState(false);
    const [editingModuleId, setEditingModuleId] = useState<number | null>(null);
    const [addingLessonToModule, setAddingLessonToModule] = useState<number | null>(null);
    const [editingLessonId, setEditingLessonId] = useState<number | null>(null);
    
    const [moduleData, setModuleData] = useState({title: '', description: ''});
    const [lessonData, setLessonData] = useState({
        title: '', 
        content: '', 
        video_url: '', 
        duration: 0, 
        is_preview: false,
        type: 'video' as 'video' | 'text'
    });

    const getGlobalLessonIndex = (moduleIndex: number, lessonIndex: number) => {
        let count = 0;
        for (let i = 0; i < moduleIndex; i++) {
            count += product.modules[i].lessons.length;
        }
        return count + lessonIndex + 1;
    };

    const getNextGlobalLessonIndex = (moduleIndex: number) => {
        let count = 0;
        for (let i = 0; i < moduleIndex; i++) {
            count += product.modules[i].lessons.length;
        }
        count += product.modules[moduleIndex].lessons.length;
        return count + 1;
    };

    const resetModuleForm = () => {
        setModuleData({title: '', description: ''});
        setIsAddingModule(false);
        setEditingModuleId(null);
    };

    const resetLessonForm = () => {
        setLessonData({title: '', content: '', video_url: '', duration: 0, is_preview: false, type: 'video'});
        setAddingLessonToModule(null);
        setEditingLessonId(null);
    };

    const handleQuickSaveLesson = (moduleId: number, type: 'video' | 'text') => {
        if (!lessonData.title) return;
        
        const titleToSave = lessonData.title;
        
        // Optimistically clear the input immediately
        setAddingLessonToModule(null);
        setLessonData({
            title: '',
            content: '',
            video_url: '',
            duration: 0,
            is_preview: false,
            type: 'video'
        });

        router.post(route('admin.lessons.store', moduleId), {
            title: titleToSave,
            type: type
        }, {
            preserveScroll: true,
            onSuccess: (page: any) => {
                // Find the newly created lesson (highest ID) to open its editor
                const modules = page.props.product.modules;
                let allLessons: any[] = [];
                modules.forEach((m: any) => {
                    if (m.lessons) allLessons = [...allLessons, ...m.lessons];
                });
                
                if (allLessons.length > 0) {
                    const newLesson = allLessons.sort((a, b) => b.id - a.id)[0];
                    setLessonData({
                        title: newLesson.title,
                        content: newLesson.content || '',
                        video_url: newLesson.video_url || '',
                        duration: newLesson.duration || 0,
                        is_preview: newLesson.is_preview,
                        type: newLesson.type
                    });
                    setEditingLessonId(newLesson.id);
                }
            }
        });
    };

    const handleSaveLesson = (moduleId: number) => {
        if (!editingLessonId) return;
        router.put(route('admin.lessons.update', editingLessonId), lessonData, {
            preserveScroll: true,
            onSuccess: () => setEditingLessonId(null)
        });
    };

    const handleSaveModule = () => {
        if (editingModuleId) {
            router.put(route('admin.modules.update', editingModuleId), moduleData, {
                preserveScroll: true,
                onSuccess: () => resetModuleForm()
            });
        } else {
            router.post(route('admin.modules.store', product.id), moduleData, {
                preserveScroll: true,
                onSuccess: (page: any) => {
                    resetModuleForm();
                    const modules = page.props.product.modules;
                    if (modules && modules.length > 0) {
                        const newModule = [...modules].sort((a, b) => b.id - a.id)[0];
                        setAddingLessonToModule(newModule.id);
                    }
                }
            });
        }
    };

    return (
        <AdminLayout>
            <Head title={`Course Builder - ${product.name}`} />

            <div className="max-w-[1000px] mx-auto pb-20 px-4 md:px-6">
                {/* Header */}
                <div className="mb-8 md:mb-12 flex flex-col md:flex-row md:items-center justify-between gap-6">
                    <div>
                        <Link
                            href={route('admin.products.edit', product.id)}
                            className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-[#8C92AC] hover:text-ink mb-3 transition-colors"
                        >
                            <ArrowLeft className="h-3 w-3" />
                            Back to product settings
                        </Link>
                        <div className="flex items-center gap-4">
                            <h1 className="font-display text-[2rem] md:text-[2.5rem] font-normal tracking-[-0.02em] text-ink leading-tight">
                                {product.name}
                            </h1>
                            <span className="hidden sm:inline-block bg-primary/10 text-primary px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest mt-2">
                                Course Builder
                            </span>
                        </div>
                    </div>
                    
                    <div className="flex items-center gap-3">
                        <Button 
                            onClick={() => setIsAddingModule(true)}
                            className="w-full md:w-auto h-11 px-6 rounded-2xl bg-ink text-white font-bold text-[12px] hover:bg-primary shadow-xl shadow-ink/10 transition-all active:scale-95"
                        >
                            <Plus className="h-4 w-4 mr-2" /> Add New Module
                        </Button>
                    </div>
                </div>

                <div className="space-y-6">
                    {product.modules.map((module, index) => (
                        <div key={module.id} className="relative group">
                            {/* Module Content */}
                            <div className="bg-white border border-[#E8E6DF] rounded-[1.5rem] md:rounded-[2rem] overflow-hidden transition-all shadow-sm hover:shadow-md">
                                <div className="px-5 md:px-8 py-4 md:py-6 flex items-center justify-between">
                                    <div className="flex-1 min-w-0">
                                        <div className="flex items-center gap-3">
                                            <span className="text-[14px] font-bold text-[#C0BDBA] flex-shrink-0">{(index + 1).toString().padStart(2, '0')}.</span>
                                            <h2 className="text-[15px] md:text-[18px] font-bold text-ink leading-tight truncate">{module.title}</h2>
                                        </div>
                                        {module.description && (
                                            <p className="mt-1 text-[13px] text-[#8C92AC] leading-relaxed max-w-2xl truncate">{module.description}</p>
                                        )}
                                    </div>
                                    <div className="flex items-center gap-2 opacity-100 md:opacity-0 group-hover:opacity-100 transition-opacity">
                                        <Button 
                                            variant="ghost" 
                                            size="icon" 
                                            onClick={() => {
                                                setModuleData({title: module.title, description: module.description || ''});
                                                setEditingModuleId(module.id);
                                            }}
                                            className="h-9 w-9 rounded-xl text-[#8C92AC] hover:text-primary hover:bg-[#F5F3EF]"
                                        >
                                            <Edit2 className="h-4 w-4" />
                                        </Button>
                                        <Button 
                                            variant="ghost" 
                                            size="icon" 
                                            onClick={() => { if(confirm('Delete module?')) router.delete(route('admin.modules.destroy', module.id)) }}
                                            className="h-9 w-9 rounded-xl text-[#8C92AC] hover:text-red-500 hover:bg-[#F5F3EF]"
                                        >
                                            <Trash2 className="h-4 w-4" />
                                        </Button>
                                    </div>
                                </div>
                                <div className="px-4 md:px-8 pb-4 md:pb-6 space-y-3">
                                    {module.lessons.map((lesson, lessonIndex) => (
                                        <div key={lesson.id} className="group/lesson">
                                            {editingLessonId === lesson.id ? (
                                                <div className="p-4 md:p-8 bg-[#FAFAF8] border-2 border-primary/20 rounded-[1.5rem] md:rounded-[2rem] space-y-4 md:space-y-6 animate-in zoom-in-95 shadow-xl shadow-primary/5">
                                                    <div className="flex items-center justify-between">
                                                        <div className="flex items-center gap-3">
                                                            <span className="h-7 w-7 md:h-8 md:w-8 rounded-full bg-primary/10 text-primary flex items-center justify-center text-[9px] md:text-[10px] font-bold">{getGlobalLessonIndex(index, lessonIndex).toString().padStart(2, '0')}</span>
                                                            <span className="text-[10px] md:text-[11px] font-bold text-primary uppercase tracking-widest">Editing Lesson</span>
                                                        </div>
                                                        <button onClick={() => setEditingLessonId(null)} className="p-2 text-[#8C92AC] hover:text-ink transition-colors"><X className="h-5 w-5" /></button>
                                                    </div>
                                                    
                                                    <div className="space-y-4">
                                                        <div>
                                                            <label className="text-[10px] font-bold text-[#8C92AC] uppercase tracking-wider mb-2 block ml-1">Lesson Title</label>
                                                            <Input 
                                                                autoFocus
                                                                value={lessonData.title}
                                                                onChange={e => setLessonData(prev => ({...prev, title: e.target.value}))}
                                                                placeholder="e.g. Master the Foundations"
                                                                className="h-12 rounded-2xl border-[#E8E6DF] bg-white focus:border-primary focus:ring-0 text-[15px] font-bold px-5"
                                                            />
                                                        </div>
                                                        
                                                        <div className="flex items-center gap-2 p-1 bg-[#F5F3EF] rounded-xl w-fit">
                                                            <button 
                                                                onClick={() => setLessonData(prev => ({...prev, type: 'video'}))}
                                                                className={`px-4 py-2 text-[11px] font-bold rounded-lg transition-all ${lessonData.type === 'video' ? 'bg-white text-ink shadow-sm' : 'text-[#8C92AC] hover:text-ink'}`}
                                                            >
                                                                Video Lesson
                                                            </button>
                                                            <button 
                                                                onClick={() => setLessonData(prev => ({...prev, type: 'text'}))}
                                                                className={`px-4 py-2 text-[11px] font-bold rounded-lg transition-all ${lessonData.type === 'text' ? 'bg-white text-ink shadow-sm' : 'text-[#8C92AC] hover:text-ink'}`}
                                                            >
                                                                Text Lesson
                                                            </button>
                                                        </div>

                                                        {lessonData.type === 'video' ? (
                                                            <div>
                                                                <label className="text-[10px] font-bold text-[#8C92AC] uppercase tracking-wider mb-2 block ml-1">Video URL</label>
                                                                <Input 
                                                                    value={lessonData.video_url}
                                                                    onChange={e => setLessonData(prev => ({...prev, video_url: e.target.value}))}
                                                                    placeholder="YouTube or Vimeo Link"
                                                                    className="h-12 rounded-2xl border-[#E8E6DF] bg-white text-[14px] px-5"
                                                                />
                                                            </div>
                                                        ) : (
                                                            <div>
                                                                <label className="text-[10px] font-bold text-[#8C92AC] uppercase tracking-wider mb-2 block ml-1">Lesson Content</label>
                                                                <div className="bg-white rounded-2xl border border-[#E8E6DF] overflow-hidden">
                                                                    <RichTextEditor 
                                                                        value={lessonData.content} 
                                                                        onChange={(val) => setLessonData(prev => ({...prev, content: val}))}
                                                                        placeholder="Start writing your lesson content..."
                                                                        editorClassName="prose prose-sm md:prose-base focus:outline-none min-h-[200px] p-6 max-w-none"
                                                                    />
                                                                </div>
                                                            </div>
                                                        )}
                                                    </div>
                                                    
                                                    <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pt-4 border-t border-[#E8E6DF]">
                                                        <div className="flex items-center gap-3">
                                                            <Switch 
                                                                checked={lessonData.is_preview} 
                                                                onCheckedChange={c => setLessonData(prev => ({...prev, is_preview: c}))} 
                                                                className="data-[state=checked]:bg-primary"
                                                            />
                                                            <span className="text-[12px] font-bold text-ink">Free Preview</span>
                                                        </div>
                                                        <div className="flex items-center gap-2">
                                                            <Button variant="ghost" onClick={() => setEditingLessonId(null)} className="flex-1 sm:flex-none h-11 px-6 text-[12px] font-bold rounded-xl">Cancel</Button>
                                                            <Button onClick={() => handleSaveLesson(module.id)} className="flex-1 sm:flex-none h-11 px-8 text-[12px] font-bold bg-ink text-white rounded-xl transition-all active:scale-95 shadow-lg shadow-ink/5">Update Lesson</Button>
                                                        </div>
                                                    </div>
                                                </div>
                                            ) : (
                                                <div 
                                                    onClick={() => {
                                                        setLessonData({
                                                            title: lesson.title,
                                                            content: lesson.content || '',
                                                            video_url: lesson.video_url || '',
                                                            duration: lesson.duration || 0,
                                                            is_preview: lesson.is_preview,
                                                            type: lesson.type || (lesson.video_url ? 'video' : 'text')
                                                        });
                                                        setEditingLessonId(lesson.id);
                                                    }}
                                                    className="flex items-center justify-between py-3 px-3 md:px-4 bg-white border border-[#F0EDE8] rounded-xl hover:border-primary/30 hover:bg-[#FAFAF8] transition-all cursor-pointer"
                                                >
                                                    <div className="flex items-center gap-3 md:gap-4 flex-1 min-w-0">
                                                        <div className="h-9 w-9 md:h-10 md:w-10 flex flex-shrink-0 items-center justify-center bg-white border border-[#F0EDE8] rounded-lg text-[#C0BDBA] shadow-sm group-hover/lesson:text-primary transition-colors">
                                                            {lesson.type === 'video' || lesson.video_url ? <Video className="h-4 w-4" /> : <FileText className="h-4 w-4" />}
                                                        </div>
                                                        <div className="min-w-0">
                                                            <div className="flex items-center gap-2">
                                                                <span className="text-[10px] md:text-[11px] font-bold text-[#C0BDBA] flex-shrink-0">{getGlobalLessonIndex(index, lessonIndex).toString().padStart(2, '0')}.</span>
                                                                <h4 className="text-[13px] md:text-[14px] font-bold text-ink truncate">{lesson.title}</h4>
                                                            </div>
                                                            <span className="text-[8px] md:text-[9px] text-[#8C92AC] font-bold uppercase tracking-wider mt-0.5 block">
                                                                {lesson.type === 'video' || lesson.video_url ? 'Video' : 'Text'}
                                                            </span>
                                                        </div>
                                                    </div>
                                                    <div className="flex items-center gap-1 opacity-100 md:opacity-0 group-hover/lesson:opacity-100 transition-opacity">
                                                        <Button 
                                                            variant="ghost" 
                                                            size="icon" 
                                                            onClick={(e) => { e.stopPropagation(); if(confirm('Delete lesson?')) router.delete(route('admin.lessons.destroy', lesson.id)) }}
                                                            className="h-8 w-8 rounded-lg text-[#C0BDBA] hover:text-red-500 hover:bg-white"
                                                        >
                                                            <Trash2 className="h-3.5 w-3.5" />
                                                        </Button>
                                                    </div>
                                                </div>
                                            )}
                                        </div>
                                    ))}

                                    <div className="pt-2">
                                        <div className={`flex flex-col sm:flex-row sm:items-center gap-3 p-3 transition-all rounded-xl ${addingLessonToModule === module.id ? 'bg-[#FAFAF8] border border-primary/20 shadow-sm' : 'border border-dashed border-[#E8E6DF] hover:border-primary/30'}`}>
                                            <div className="flex items-center gap-3 flex-1">
                                                <span className="text-[11px] font-bold text-[#C0BDBA] flex-shrink-0">L{getNextGlobalLessonIndex(index).toString().padStart(2, '0')}</span>
                                                <Input 
                                                    placeholder="Enter title and choose type..."
                                                    value={(addingLessonToModule === module.id) ? lessonData.title : ''}
                                                    onChange={e => {
                                                        setAddingLessonToModule(module.id);
                                                        setLessonData(prev => ({...prev, title: e.target.value}));
                                                    }}
                                                    onFocus={() => setAddingLessonToModule(module.id)}
                                                    className="h-8 border-none bg-transparent focus:ring-0 text-[13px] font-bold px-0 flex-1 placeholder:text-[#C0BDBA] placeholder:font-normal"
                                                />
                                            </div>
                                            {addingLessonToModule === module.id && (
                                                <div className="flex items-center justify-between sm:justify-end gap-1 animate-in fade-in slide-in-from-right-2">
                                                    <div className="flex items-center gap-1">
                                                        <Button 
                                                            onClick={() => handleQuickSaveLesson(module.id, 'video')}
                                                            className="h-7 px-3 text-[10px] font-bold bg-white border border-[#E8E6DF] text-ink hover:bg-primary hover:text-white hover:border-primary rounded-lg transition-all"
                                                        >
                                                            + Video
                                                        </Button>
                                                        <Button 
                                                            onClick={() => handleQuickSaveLesson(module.id, 'text')}
                                                            className="h-7 px-3 text-[10px] font-bold bg-white border border-[#E8E6DF] text-ink hover:bg-primary hover:text-white hover:border-primary rounded-lg transition-all"
                                                        >
                                                            + Text
                                                        </Button>
                                                    </div>
                                                    <button onClick={resetLessonForm} className="ml-1 p-1 text-[#8C92AC] hover:text-ink"><X className="h-4 w-4" /></button>
                                                </div>
                                            )}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    ))}

                    {(isAddingModule || editingModuleId) && (
                        <div className="animate-in fade-in slide-in-from-top-4">
                            <div className="bg-[#FAFAF8] border border-dashed border-[#E8E6DF] rounded-[1.5rem] p-6">
                                <div className="space-y-4">
                                    <div className="flex items-center justify-between">
                                        <h3 className="text-[15px] font-bold text-[#8C92AC] flex items-center gap-2">
                                            <Plus className="h-4 w-4" /> {editingModuleId ? 'Edit Module' : 'New Module'}
                                        </h3>
                                        <button onClick={resetModuleForm} className="p-1 text-[#8C92AC] hover:text-ink transition-colors"><X className="h-4 w-4" /></button>
                                    </div>
                                    <div className="space-y-3">
                                        <Input 
                                            autoFocus
                                            value={moduleData.title}
                                            onChange={e => setModuleData(prev => ({...prev, title: e.target.value}))}
                                            placeholder="Module Title"
                                            className="h-10 rounded-xl border-[#E8E6DF] bg-white focus:border-primary focus:ring-0 text-[14px] font-bold px-4"
                                        />
                                        <Textarea 
                                            value={moduleData.description}
                                            onChange={e => setModuleData(prev => ({...prev, description: e.target.value}))}
                                            placeholder="Brief Description (Optional)"
                                            className="rounded-xl border-[#E8E6DF] bg-white focus:border-primary focus:ring-0 min-h-[60px] text-[13px] p-4 resize-none"
                                        />
                                    </div>
                                    <div className="flex justify-end gap-3 pt-2">
                                        <Button variant="ghost" onClick={resetModuleForm} className="rounded-xl font-bold h-9 px-4 text-[11px]">Cancel</Button>
                                        <Button onClick={handleSaveModule} className="rounded-xl font-bold bg-ink text-white px-6 h-9 text-[11px] transition-all">
                                            {editingModuleId ? 'Update Module' : 'Create Module'}
                                        </Button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    )}

                    {!isAddingModule && !editingModuleId && (
                        <div 
                            onClick={() => { resetModuleForm(); setIsAddingModule(true); }}
                            className="flex items-center justify-center py-12 group cursor-pointer"
                        >
                            <div className="flex items-center gap-6 text-[#C0BDBA] group-hover:text-ink transition-all">
                                <div className="h-px w-16 bg-[#E8E6DF] group-hover:bg-ink/20 transition-colors"></div>
                                <div className="flex items-center gap-2 text-[11px] font-bold uppercase tracking-[0.3em]">
                                    <Plus className="h-4 w-4" />
                                    Add New Module
                                </div>
                                <div className="h-px w-16 bg-[#E8E6DF] group-hover:bg-ink/20 transition-colors"></div>
                            </div>
                        </div>
                    )}
                </div>

                {product.modules.length === 0 && !isAddingModule && (
                    <div className="py-32 text-center bg-white border-2 border-dashed border-[#F0EDE8] rounded-[4rem] max-w-2xl mx-auto mt-12">
                        <div className="h-24 w-24 bg-[#F5F3EF] rounded-[3rem] flex items-center justify-center mx-auto mb-8 shadow-inner">
                            <Settings className="h-10 w-10 text-[#C0BDBA] animate-spin-slow" />
                        </div>
                        <h3 className="text-[24px] font-display text-ink mb-3">Your curriculum is a blank canvas</h3>
                        <p className="text-[14px] text-[#8C92AC] mb-12 max-w-sm mx-auto leading-relaxed">Let's start building the learning journey. Create your first module to organize your lessons.</p>
                        <Button 
                            onClick={() => setIsAddingModule(true)} 
                            className="rounded-[1.5rem] h-14 px-12 font-bold text-[14px] bg-ink text-white hover:bg-primary shadow-2xl shadow-ink/20 active:scale-95 transition-all"
                        >
                            <Plus className="h-5 w-5 mr-3" /> Create Your First Module
                        </Button>
                    </div>
                )}
            </div>
        </AdminLayout>
    );
}