import React, { useState, useEffect } from 'react';
import { 
  GraduationCap, Plus, Edit, Trash2, FolderPlus, FilePlus, ChevronRight, 
  ArrowLeft, Film, Youtube, RefreshCw, Layers, CheckCircle
} from 'lucide-react';

interface Lesson {
  id: string;
  moduleId: string;
  title: string;
  videoUrl: string;
  videoType: 'youtube' | 'direct';
  order: number;
  content: string;
}

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

interface Course {
  id: string;
  title: string;
  description: string;
  thumbnail: string;
  category: string;
  isLocked?: boolean;
  price?: number;
}

interface AdminContentManagerProps {
  token: string | null;
}

export default function AdminContentManager({ token }: AdminContentManagerProps) {
  const [courses, setCourses] = useState<Course[]>([]);
  const [selectedCourse, setSelectedCourse] = useState<Course | null>(null);
  const [modules, setModules] = useState<Module[]>([]);
  
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  // Forms states
  const [showCourseForm, setShowCourseForm] = useState(false);
  const [editingCourse, setEditingCourse] = useState<Course | null>(null);
  const [courseForm, setCourseForm] = useState({ 
    title: '', description: '', thumbnail: '', category: '', isLocked: false, price: 0 
  });

  const [showModuleForm, setShowModuleForm] = useState(false);
  const [editingModule, setEditingModule] = useState<Module | null>(null);
  const [moduleForm, setModuleForm] = useState({ title: '', order: 1 });

  const [showLessonForm, setShowLessonForm] = useState(false);
  const [editingLesson, setEditingLesson] = useState<Lesson | null>(null);
  const [activeModuleForLesson, setActiveModuleForLesson] = useState<string | null>(null);
  const [lessonForm, setLessonForm] = useState({ 
    title: '', videoUrl: '', videoType: 'youtube' as 'youtube' | 'direct', order: 1, content: '' 
  });

  useEffect(() => {
    fetchCourses();
  }, []);

  const fetchCourses = async () => {
    setIsLoading(true);
    try {
      const res = await fetch('/api/courses', {
        headers: { 'Authorization': `Bearer ${token}` }
      });
      if (res.ok) {
        const data = await res.json();
        setCourses(data);
      }
    } catch (err) {
      console.error('Error fetching courses:', err);
    } finally {
      setIsLoading(false);
    }
  };

  const fetchCourseModulesAndLessons = async (courseId: string) => {
    setIsLoading(true);
    try {
      const res = await fetch(`/api/courses/${courseId}`, {
        headers: { 'Authorization': `Bearer ${token}` }
      });
      if (res.ok) {
        const data = await res.json();
        setModules(data.modules);
      }
    } catch (err) {
      console.error('Error loading modules:', err);
    } finally {
      setIsLoading(false);
    }
  };

  const handleSelectCourse = (course: Course) => {
    setSelectedCourse(course);
    fetchCourseModulesAndLessons(course.id);
  };

  // --- COURSE CRUD ---
  const handleSaveCourse = async (e: React.FormEvent) => {
    e.preventDefault();
    const method = editingCourse ? 'PUT' : 'POST';
    const url = editingCourse ? `/api/admin/courses/${editingCourse.id}` : '/api/admin/courses';

    try {
      const res = await fetch(url, {
        method,
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token}`
        },
        body: JSON.stringify(courseForm)
      });

      if (res.ok) {
        await fetchCourses();
        setShowCourseForm(false);
        setEditingCourse(null);
        setCourseForm({ title: '', description: '', thumbnail: '', category: '', isLocked: false, price: 0 });
      }
    } catch (err) {
      console.error('Error saving course:', err);
    }
  };

  const handleEditCourse = (course: Course) => {
    setEditingCourse(course);
    setCourseForm({
      title: course.title,
      description: course.description,
      thumbnail: course.thumbnail,
      category: course.category,
      isLocked: course.isLocked || false,
      price: course.price || 0
    });
    setShowCourseForm(true);
  };

  const handleDeleteCourse = async (courseId: string) => {
    if (!window.confirm('Tem certeza que deseja excluir este curso e todo o seu conteúdo (módulos, aulas, anotações)?')) return;

    try {
      const res = await fetch(`/api/admin/courses/${courseId}`, {
        method: 'DELETE',
        headers: { 'Authorization': `Bearer ${token}` }
      });

      if (res.ok) {
        fetchCourses();
        if (selectedCourse?.id === courseId) {
          setSelectedCourse(null);
          setModules([]);
        }
      }
    } catch (err) {
      console.error('Error deleting course:', err);
    }
  };

  // --- MODULE CRUD ---
  const handleSaveModule = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!selectedCourse) return;

    const method = editingModule ? 'PUT' : 'POST';
    const url = editingModule ? `/api/admin/modules/${editingModule.id}` : '/api/admin/modules';
    const payload = editingModule ? { ...moduleForm } : { ...moduleForm, courseId: selectedCourse.id };

    try {
      const res = await fetch(url, {
        method,
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token}`
        },
        body: JSON.stringify(payload)
      });

      if (res.ok) {
        await fetchCourseModulesAndLessons(selectedCourse.id);
        setShowModuleForm(false);
        setEditingModule(null);
        setModuleForm({ title: '', order: 1 });
      }
    } catch (err) {
      console.error('Error saving module:', err);
    }
  };

  const handleEditModule = (mod: Module) => {
    setEditingModule(mod);
    setModuleForm({ title: mod.title, order: mod.order });
    setShowModuleForm(true);
  };

  const handleDeleteModule = async (modId: string) => {
    if (!window.confirm('Excluir este módulo apagará todas as suas aulas associadas. Continuar?')) return;
    if (!selectedCourse) return;

    try {
      const res = await fetch(`/api/admin/modules/${modId}`, {
        method: 'DELETE',
        headers: { 'Authorization': `Bearer ${token}` }
      });

      if (res.ok) {
        fetchCourseModulesAndLessons(selectedCourse.id);
      }
    } catch (err) {
      console.error('Error deleting module:', err);
    }
  };

  // --- LESSON CRUD ---
  const handleSaveLesson = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!selectedCourse) return;

    const method = editingLesson ? 'PUT' : 'POST';
    const url = editingLesson ? `/api/admin/lessons/${editingLesson.id}` : '/api/admin/lessons';
    const payload = editingLesson ? { ...lessonForm } : { ...lessonForm, moduleId: activeModuleForLesson };

    try {
      const res = await fetch(url, {
        method,
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token}`
        },
        body: JSON.stringify(payload)
      });

      if (res.ok) {
        await fetchCourseModulesAndLessons(selectedCourse.id);
        setShowLessonForm(false);
        setEditingLesson(null);
        setActiveModuleForLesson(null);
        setLessonForm({ title: '', videoUrl: '', videoType: 'youtube', order: 1, content: '' });
      }
    } catch (err) {
      console.error('Error saving lesson:', err);
    }
  };

  const handleNewLesson = (moduleId: string, lessonsCount: number) => {
    setActiveModuleForLesson(moduleId);
    setEditingLesson(null);
    setLessonForm({
      title: '',
      videoUrl: '',
      videoType: 'youtube',
      order: lessonsCount + 1,
      content: ''
    });
    setShowLessonForm(true);
  };

  const handleEditLesson = (lesson: Lesson) => {
    setEditingLesson(lesson);
    setLessonForm({
      title: lesson.title,
      videoUrl: lesson.videoUrl,
      videoType: lesson.videoType,
      order: lesson.order,
      content: lesson.content
    });
    setShowLessonForm(true);
  };

  const handleDeleteLesson = async (lessonId: string) => {
    if (!window.confirm('Excluir esta aula?')) return;
    if (!selectedCourse) return;

    try {
      const res = await fetch(`/api/admin/lessons/${lessonId}`, {
        method: 'DELETE',
        headers: { 'Authorization': `Bearer ${token}` }
      });

      if (res.ok) {
        fetchCourseModulesAndLessons(selectedCourse.id);
      }
    } catch (err) {
      console.error('Error deleting lesson:', err);
    }
  };

  if (isLoading && courses.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center min-h-[50vh] text-zinc-400 space-y-4">
        <RefreshCw className="w-8 h-8 text-[#E50914] animate-spin" />
        <p className="text-sm font-semibold">Carregando catálogo de treinamentos...</p>
      </div>
    );
  }

  return (
    <div className="space-y-8">
      {/* Top Header */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between border-b border-white/10 pb-5 gap-4">
        <div>
          <h1 className="text-2xl md:text-3xl font-display font-extrabold text-white tracking-tight flex items-center space-x-2">
            <GraduationCap className="w-8 h-8 text-[#E50914]" />
            <span>Gestão de Cursos, Módulos e Aulas</span>
          </h1>
          <p className="text-xs text-zinc-500 mt-1">Crie cursos, adicione módulos e configure links de vídeo (YouTube ou Upload Direto).</p>
        </div>
        {!selectedCourse && !showCourseForm && (
          <button 
            onClick={() => { setEditingCourse(null); setCourseForm({ title: '', description: '', thumbnail: '', category: '' }); setShowCourseForm(true); }}
            className="glass-btn-primary text-white font-bold text-xs px-4 py-2.5 rounded-lg flex items-center justify-center space-x-2 cursor-pointer self-start sm:self-auto"
          >
            <Plus className="w-4 h-4" />
            <span>Adicionar Novo Curso</span>
          </button>
        )}
      </div>

      {/* --- RENDER COURSE FORM --- */}
      {showCourseForm && (
        <div className="glass-card p-6 rounded-2xl space-y-6">
          <div className="flex items-center justify-between border-b border-white/5 pb-4">
            <h3 className="text-lg font-bold text-white">
              {editingCourse ? 'Editar Detalhes do Curso' : 'Criar Novo Curso'}
            </h3>
            <button 
              onClick={() => setShowCourseForm(false)} 
              className="text-zinc-500 hover:text-zinc-300 text-xs font-semibold"
            >
              Cancelar
            </button>
          </div>

          <form onSubmit={handleSaveCourse} className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="space-y-2">
              <label className="text-xs text-zinc-400 font-bold uppercase tracking-wider">Título do Curso</label>
              <input
                type="text"
                required
                value={courseForm.title}
                onChange={(e) => setCourseForm({ ...courseForm, title: e.target.value })}
                placeholder="Ex: Infraestrutura de Servidores Linux"
                className="w-full glass-input rounded-lg p-3 text-sm text-white focus:outline-none"
              />
            </div>

            <div className="space-y-2">
              <label className="text-xs text-zinc-400 font-bold uppercase tracking-wider">Categoria / Trilha</label>
              <input
                type="text"
                required
                value={courseForm.category}
                onChange={(e) => setCourseForm({ ...courseForm, category: e.target.value })}
                placeholder="Ex: Redes e Servidores"
                className="w-full glass-input rounded-lg p-3 text-sm text-white focus:outline-none"
              />
            </div>

            <div className="md:col-span-2 space-y-2">
              <label className="text-xs text-zinc-400 font-bold uppercase tracking-wider">Imagem de Capa (Thumbnail URL)</label>
              <input
                type="url"
                required
                value={courseForm.thumbnail}
                onChange={(e) => setCourseForm({ ...courseForm, thumbnail: e.target.value })}
                placeholder="https://images.unsplash.com/... ou link de imagem direta"
                className="w-full glass-input rounded-lg p-3 text-sm text-white focus:outline-none"
              />
            </div>

            <div className="space-y-2">
              <label className="text-xs text-zinc-400 font-bold uppercase tracking-wider">Preço do Curso para Desbloqueio (R$)</label>
              <input
                type="number"
                step="0.01"
                value={courseForm.price}
                onChange={(e) => setCourseForm({ ...courseForm, price: Number(e.target.value) })}
                placeholder="Ex: 89.90"
                className="w-full glass-input rounded-lg p-3 text-sm text-white focus:outline-none font-mono"
              />
            </div>

            <div className="space-y-2 flex flex-col justify-center">
              <label className="text-xs text-zinc-400 font-bold uppercase tracking-wider mb-2">Status de Bloqueio</label>
              <label className="inline-flex items-center space-x-3 cursor-pointer">
                <input
                  type="checkbox"
                  checked={courseForm.isLocked}
                  onChange={(e) => setCourseForm({ ...courseForm, isLocked: e.target.checked })}
                  className="rounded bg-zinc-900 border-white/10 text-[#E50914] focus:ring-[#E50914] focus:ring-offset-0 w-4 h-4"
                />
                <span className="text-sm font-semibold text-zinc-300">Curso Trancado (Requer pagamento ou desbloqueio manual)</span>
              </label>
            </div>

            <div className="md:col-span-2 space-y-2">
              <label className="text-xs text-zinc-400 font-bold uppercase tracking-wider">Descrição Detalhada</label>
              <textarea
                required
                value={courseForm.description}
                onChange={(e) => setCourseForm({ ...courseForm, description: e.target.value })}
                placeholder="Fale brevemente sobre o objetivo deste treinamento, o que o aluno vai aprender..."
                className="w-full h-24 glass-input rounded-lg p-3 text-sm text-white focus:outline-none resize-none"
              />
            </div>

            <div className="md:col-span-2 flex justify-end">
              <button
                type="submit"
                className="glass-btn-primary text-white text-xs font-bold px-6 py-3 rounded-lg cursor-pointer"
              >
                {editingCourse ? 'Salvar Alterações' : 'Criar Curso'}
              </button>
            </div>
          </form>
        </div>
      )}

      {/* --- RENDER COURSE DETAIL / CURRICULUM MANAGER --- */}
      {selectedCourse ? (
        <div className="space-y-6">
          {/* Active Course Breadcrumb */}
          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 glass-card p-4 rounded-xl">
            <button 
              onClick={() => setSelectedCourse(null)}
              className="flex items-center space-x-1.5 text-zinc-400 hover:text-white transition-colors text-xs font-bold"
            >
              <ArrowLeft className="w-4 h-4" />
              <span>Voltar para Catálogo Completo</span>
            </button>
            
            <div className="flex items-center space-x-3">
              <span className="text-zinc-600 text-xs font-bold">Curso Selecionado:</span>
              <span className="text-white text-xs font-bold bg-[#E50914] px-2.5 py-1 rounded">
                {selectedCourse.title}
              </span>
            </div>

            <div className="flex space-x-2">
              <button 
                onClick={() => { setEditingModule(null); setModuleForm({ title: '', order: modules.length + 1 }); setShowModuleForm(true); }}
                className="glass-btn-secondary text-white text-xs font-bold px-3 py-1.5 rounded flex items-center space-x-1"
              >
                <FolderPlus className="w-3.5 h-3.5 text-zinc-400" />
                <span>Criar Módulo</span>
              </button>
            </div>
          </div>

          {/* --- MODULE FORM DIALOG --- */}
          {showModuleForm && (
            <div className="glass-card p-6 rounded-2xl border-[#E50914]/30 space-y-4">
              <h4 className="text-sm font-bold text-white uppercase tracking-wider">
                {editingModule ? 'Editar Módulo' : 'Adicionar Novo Módulo'}
              </h4>
              <form onSubmit={handleSaveModule} className="flex flex-col sm:flex-row gap-4 items-end">
                <div className="flex-1 space-y-1">
                  <label className="text-[10px] text-zinc-500 font-bold uppercase">Título do Módulo</label>
                  <input
                    type="text"
                    required
                    value={moduleForm.title}
                    onChange={(e) => setModuleForm({ ...moduleForm, title: e.target.value })}
                    placeholder="Ex: Módulo 1 - Fundamentos"
                    className="w-full glass-input rounded-lg p-2.5 text-xs text-white focus:outline-none"
                  />
                </div>
                <div className="w-24 space-y-1">
                  <label className="text-[10px] text-zinc-500 font-bold uppercase">Ordem</label>
                  <input
                    type="number"
                    required
                    value={moduleForm.order}
                    onChange={(e) => setModuleForm({ ...moduleForm, order: Number(e.target.value) })}
                    className="w-full glass-input rounded-lg p-2.5 text-xs text-white focus:outline-none"
                  />
                </div>
                <div className="flex space-x-2">
                  <button type="submit" className="glass-btn-primary text-white text-xs font-bold px-4 py-2.5 rounded-lg">
                    Salvar
                  </button>
                  <button type="button" onClick={() => setShowModuleForm(false)} className="text-xs text-zinc-500 px-2">
                    Cancelar
                  </button>
                </div>
              </form>
            </div>
          )}

          {/* --- LESSON FORM DIALOG --- */}
          {showLessonForm && (
            <div className="glass-card p-6 rounded-2xl space-y-6">
              <div className="flex items-center justify-between border-b border-white/5 pb-4">
                <h4 className="text-sm font-bold text-white uppercase tracking-wider">
                  {editingLesson ? 'Editar Aula' : 'Adicionar Nova Aula'}
                </h4>
                <button type="button" onClick={() => setShowLessonForm(false)} className="text-xs text-zinc-500">
                  Cancelar
                </button>
              </div>

              <form onSubmit={handleSaveLesson} className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div className="md:col-span-2 space-y-2">
                  <label className="text-xs text-zinc-400 font-bold uppercase">Título da Aula</label>
                  <input
                    type="text"
                    required
                    value={lessonForm.title}
                    onChange={(e) => setLessonForm({ ...lessonForm, title: e.target.value })}
                    placeholder="Ex: Como configurar SSH no Servidor Linux"
                    className="w-full glass-input rounded-lg p-3 text-xs text-white focus:outline-none"
                  />
                </div>

                <div className="space-y-2">
                  <label className="text-xs text-zinc-400 font-bold uppercase">Ordem Numérica</label>
                  <input
                    type="number"
                    required
                    value={lessonForm.order}
                    onChange={(e) => setLessonForm({ ...lessonForm, order: Number(e.target.value) })}
                    className="w-full glass-input rounded-lg p-3 text-xs text-white focus:outline-none"
                  />
                </div>

                <div className="space-y-2">
                  <label className="text-xs text-zinc-400 font-bold uppercase">Tipo de Vídeo</label>
                  <select
                    value={lessonForm.videoType}
                    onChange={(e) => setLessonForm({ ...lessonForm, videoType: e.target.value as 'youtube' | 'direct' })}
                    className="w-full glass-input rounded-lg p-3 text-xs text-white focus:outline-none"
                  >
                    <option value="youtube">YouTube Embed (Privado/Não Listado)</option>
                    <option value="direct">Upload Direto / Link HTML5 MP4</option>
                  </select>
                </div>

                <div className="md:col-span-2 space-y-2">
                  <label className="text-xs text-zinc-400 font-bold uppercase">
                    {lessonForm.videoType === 'youtube' 
                      ? 'Link do Vídeo no YouTube (ou ID do vídeo)' 
                      : 'Link URL do arquivo de vídeo direto (.mp4 / HLS)'}
                  </label>
                  <input
                    type="text"
                    required
                    value={lessonForm.videoUrl}
                    onChange={(e) => setLessonForm({ ...lessonForm, videoUrl: e.target.value })}
                    placeholder={lessonForm.videoType === 'youtube' 
                      ? 'Ex: https://www.youtube.com/watch?v=K8w3m_pM6lA' 
                      : 'Ex: https://meuservidor.com/aulas/aula1.mp4'}
                    className="w-full glass-input rounded-lg p-3 text-xs text-white focus:outline-none"
                  />
                </div>

                <div className="md:col-span-3 space-y-2">
                  <label className="text-xs text-zinc-400 font-bold uppercase font-sans">Recursos Extras & Material de Apoio (Opcional)</label>
                  <textarea
                    value={lessonForm.content}
                    onChange={(e) => setLessonForm({ ...lessonForm, content: e.target.value })}
                    placeholder="Cole códigos de exemplo, links de arquivos zip ou notas de apoio aqui..."
                    className="w-full h-24 glass-input rounded-lg p-3 text-xs text-white focus:outline-none"
                  />
                </div>

                <div className="md:col-span-3 flex justify-end">
                  <button type="submit" className="glass-btn-primary text-white font-bold text-xs px-6 py-2.5 rounded-lg">
                    {editingLesson ? 'Salvar Aula' : 'Criar Aula'}
                  </button>
                </div>
              </form>
            </div>
          )}

          {/* Curriculum Index (Modules & Lessons list) */}
          <div className="space-y-4">
            {modules.length === 0 ? (
              <div className="p-8 text-center glass-card rounded-xl text-zinc-500">
                <Layers className="w-8 h-8 mx-auto text-zinc-600 mb-2" />
                <p className="text-sm font-semibold">Nenhum módulo cadastrado neste curso.</p>
                <button 
                  onClick={() => { setEditingModule(null); setModuleForm({ title: '', order: 1 }); setShowModuleForm(true); }}
                  className="mt-3 text-xs text-[#E50914] font-bold"
                >
                  Criar primeiro módulo agora
                </button>
              </div>
            ) : (
              modules.map((mod, modIdx) => (
                <div key={mod.id} className="glass-card rounded-xl overflow-hidden">
                  
                  {/* Module Header Panel */}
                  <div className="glass-accordion-header px-4 py-3 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                    <div className="flex items-center space-x-2">
                      <span className="bg-zinc-800 border border-zinc-700 text-[#E50914] text-[10px] font-extrabold px-1.5 py-0.5 rounded">
                        M{mod.order}
                      </span>
                      <h4 className="font-sans font-extrabold text-sm text-zinc-100 tracking-tight">
                        {mod.title}
                      </h4>
                    </div>

                    <div className="flex items-center space-x-2">
                      {/* Add Lesson */}
                      <button
                        onClick={() => handleNewLesson(mod.id, mod.lessons.length)}
                        className="bg-zinc-800 text-zinc-300 hover:text-white hover:bg-zinc-700 text-[10px] font-bold px-2 py-1 rounded flex items-center space-x-1 border border-zinc-700 transition-colors"
                      >
                        <FilePlus className="w-3 h-3 text-[#E50914]" />
                        <span>Nova Aula</span>
                      </button>

                      {/* Edit Module */}
                      <button
                        onClick={() => handleEditModule(mod)}
                        className="text-zinc-500 hover:text-zinc-300 p-1"
                        title="Editar Módulo"
                      >
                        <Edit className="w-3.5 h-3.5" />
                      </button>

                      {/* Delete Module */}
                      <button
                        onClick={() => handleDeleteModule(mod.id)}
                        className="text-zinc-500 hover:text-red-400 p-1"
                        title="Excluir Módulo"
                      >
                        <Trash2 className="w-3.5 h-3.5" />
                      </button>
                    </div>
                  </div>

                  {/* Lessons Listing inside Module */}
                  <div className="divide-y divide-white/5 bg-black/10">
                    {mod.lessons.length === 0 ? (
                      <div className="p-4 text-xs text-zinc-600 italic text-center">Nenhuma aula cadastrada neste módulo.</div>
                    ) : (
                      mod.lessons.map(lesson => (
                        <div key={lesson.id} className="px-6 py-3 flex items-center justify-between text-xs hover:bg-zinc-900/10 transition-colors">
                          <div className="flex items-center space-x-3 min-w-0">
                            <span className="text-zinc-500 font-mono font-bold w-4 text-right">#{lesson.order}</span>
                            {lesson.videoType === 'youtube' ? (
                              <Youtube className="w-4 h-4 text-red-500 flex-shrink-0" />
                            ) : (
                              <Film className="w-4 h-4 text-emerald-500 flex-shrink-0" />
                            )}
                            <span className="font-semibold text-zinc-300 truncate max-w-sm sm:max-w-md md:max-w-lg">
                              {lesson.title}
                            </span>
                          </div>

                          <div className="flex items-center space-x-2 ml-4">
                            {/* Edit */}
                            <button
                              onClick={() => handleEditLesson(lesson)}
                              className="text-zinc-500 hover:text-white p-1"
                              title="Editar Aula"
                            >
                              <Edit className="w-3.5 h-3.5" />
                            </button>
                            {/* Delete */}
                            <button
                              onClick={() => handleDeleteLesson(lesson.id)}
                              className="text-zinc-500 hover:text-red-400 p-1"
                              title="Excluir Aula"
                            >
                              <Trash2 className="w-3.5 h-3.5" />
                            </button>
                          </div>
                        </div>
                      ))
                    )}
                  </div>

                </div>
              ))
            )}
          </div>

        </div>
      ) : (
        /* --- LIST ALL COURSES IN CATALOGUE --- */
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {courses.map(course => (
            <div 
              key={course.id} 
              className="glass-card rounded-2xl overflow-hidden flex flex-col justify-between"
            >
              <div>
                {/* Thumbnail */}
                <div className="relative w-full aspect-video">
                  <img src={course.thumbnail} alt={course.title} className="w-full h-full object-cover" referrerPolicy="no-referrer" />
                  <span className="absolute top-3 left-3 bg-[#E50914]/85 text-white text-[10px] font-black px-2 py-0.5 rounded uppercase tracking-wider glass-badge">
                    {course.category}
                  </span>
                </div>

                {/* Info */}
                <div className="p-5 space-y-2">
                  <h3 className="font-display font-bold text-base text-white tracking-tight line-clamp-1">{course.title}</h3>
                  <p className="text-xs text-zinc-500 leading-relaxed line-clamp-3">{course.description}</p>
                </div>
              </div>

              {/* Actions Footer */}
              <div className="p-5 border-t border-white/5 bg-white/3 flex items-center justify-between">
                <button
                  onClick={() => handleSelectCourse(course)}
                  className="glass-btn-secondary text-white text-xs font-bold px-3 py-2 rounded flex items-center space-x-1 cursor-pointer"
                >
                  <span>Grade Curricular</span>
                  <ChevronRight className="w-3.5 h-3.5" />
                </button>

                <div className="flex space-x-1.5">
                  <button
                    onClick={() => handleEditCourse(course)}
                    className="p-2 text-zinc-400 hover:text-white rounded bg-zinc-800/30 hover:bg-zinc-800 border border-zinc-850 transition-all"
                    title="Editar Curso"
                  >
                    <Edit className="w-4 h-4" />
                  </button>
                  <button
                    onClick={() => handleDeleteCourse(course.id)}
                    className="p-2 text-zinc-400 hover:text-red-400 rounded bg-zinc-800/30 hover:bg-zinc-800 border border-zinc-850 transition-all"
                    title="Excluir Curso"
                  >
                    <Trash2 className="w-4 h-4" />
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}