"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { toast } from "sonner";
import { updateLesson } from "@/app/(protected)/teacher/actions";
import VideoUpload from "@/components/teacher/VideoUpload"; // The component you created earlier

interface LessonEditorFormProps {
    lesson: {
        id: string;
        title: string;
        description?: string | null;
        videoUrl?: string | null;
    };
    courseSlug: string;
}

export function LessonEditorForm({ lesson, courseSlug }: LessonEditorFormProps) {
    const router = useRouter();
    const [loading, setLoading] = useState(false);
    const [title, setTitle] = useState(lesson.title);
    const [description, setDescription] = useState(lesson.description ?? "");

    // 1. Auto-save Video URL when upload finishes
    const handleVideoUploaded = async (url: string) => {
        toast.loading("Guardando video...");
        const res = await updateLesson(lesson.id, { videoUrl: url });

        if (res.success) {
            toast.dismiss();
            toast.success("Video guardado correctamente");
            router.refresh(); // Update the UI to show the new video player
        } else {
            toast.error("Error al guardar el video en la base de datos");
        }
    };

    // 2. Save Text Changes (Title/Desc)
    const handleSave = async () => {
        setLoading(true);
        const res = await updateLesson(lesson.id, { title, description });
        if (res.success) {
            toast.success("Cambios guardados");
            router.refresh();
        } else {
            toast.error("Error al guardar cambios");
        }
        setLoading(false);
    };

    return (
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">

            {/* LEFT: Video & Content */}
            <div className="lg:col-span-2 space-y-6">

                {/* Video Upload Section */}
                <section className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
                    <div className="p-6 border-b border-slate-100">
                        <h2 className="font-semibold text-slate-900">Video del Curso</h2>
                        <p className="text-sm text-slate-500">Sube el video principal de esta lección.</p>
                    </div>
                    <div className="p-6 bg-slate-50/50">
                        <VideoUpload
                            lessonId={lesson.id}
                            currentVideoUrl={lesson.videoUrl}
                            onUploadComplete={handleVideoUploaded}
                        />
                    </div>
                </section>

                {/* Text Content */}
                <section className="bg-white rounded-xl border border-slate-200 shadow-sm p-6 space-y-4">
                    <div>
                        <label className="block text-sm font-medium text-slate-700 mb-1">Título de la Lección</label>
                        <input
                            value={title}
                            onChange={(e) => setTitle(e.target.value)}
                            className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-black"
                        />
                    </div>

                    <div>
                        <label className="block text-sm font-medium text-slate-700 mb-1">Descripción / Notas</label>
                        <textarea
                            rows={6}
                            value={description}
                            onChange={(e) => setDescription(e.target.value)}
                            className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-black"
                            placeholder="Escribe aquí el contenido de la lección..."
                        />
                    </div>
                </section>
            </div>

            {/* RIGHT: Settings / Actions */}
            <div className="space-y-6">
                <div className="bg-white rounded-xl border border-slate-200 shadow-sm p-6">
                    <h3 className="font-semibold text-slate-900 mb-4">Acciones</h3>
                    <button
                        onClick={handleSave}
                        disabled={loading}
                        className="w-full bg-black text-white rounded-lg py-2.5 font-medium hover:bg-slate-800 disabled:opacity-50 transition-colors"
                    >
                        {loading ? "Guardando..." : "Guardar Cambios"}
                    </button>

                    <button
                        onClick={() => router.push(`/teacher/courses/${courseSlug}/edit`)}
                        className="w-full mt-3 bg-white border border-slate-300 text-slate-700 rounded-lg py-2.5 font-medium hover:bg-slate-50 transition-colors"
                    >
                        Volver al Curso
                    </button>
                </div>
            </div>

        </div>
    );
}