1055 lines
49 KiB
TypeScript
1055 lines
49 KiB
TypeScript
import React, { useState, useEffect, useRef } from 'react';
|
|
import {
|
|
Plus,
|
|
Settings,
|
|
Users,
|
|
BarChart,
|
|
Trash2,
|
|
Edit2,
|
|
X,
|
|
MessageSquare,
|
|
Send,
|
|
Image as ImageIcon,
|
|
Video,
|
|
Loader2,
|
|
FileText,
|
|
FileSpreadsheet,
|
|
FileArchive,
|
|
Link as LinkIcon,
|
|
Paperclip,
|
|
Lightbulb,
|
|
ListVideo,
|
|
Check,
|
|
Lock,
|
|
Unlock,
|
|
Globe,
|
|
Download
|
|
,Copy, ChevronUp, ChevronDown
|
|
} from 'lucide-react';
|
|
import { Course, Comment, Attachment, Lesson, AttachmentType, LessonMedia } from '../types';
|
|
import { useToast } from '../context/ToastContext';
|
|
import { getManagedCourses, saveCourse, deleteCourse, duplicateCourse, getComments, replyToComment, moderateComment } from '../services/db';
|
|
import { getAttachmentIcon, getAttachmentBadge } from '../components/MaterialCard';
|
|
import { BunnyVideo, courseApi, instructorApi, InstructorAnalytics } from '../services/api';
|
|
|
|
// 1. Create/Edit Course Modal
|
|
const CourseModal: React.FC<{
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onSave: (course: Course) => Promise<void>;
|
|
initialData?: Course;
|
|
}> = ({ isOpen, onClose, onSave, initialData }) => {
|
|
const [title, setTitle] = useState('');
|
|
const [description, setDescription] = useState('');
|
|
const [category, setCategory] = useState('');
|
|
const [status, setStatus] = useState<Course['status']>('draft');
|
|
const [thumbnailPreview, setThumbnailPreview] = useState<string>('');
|
|
const coverFileRef = useRef<HTMLInputElement>(null);
|
|
const [categories, setCategories] = useState<string[]>([]);
|
|
const [coverConfigured, setCoverConfigured] = useState<boolean | null>(null);
|
|
const [coverUploadMessage, setCoverUploadMessage] = useState('');
|
|
const [isCoverUploading, setIsCoverUploading] = useState(false);
|
|
|
|
// Lesson Management
|
|
const [lessons, setLessons] = useState<Lesson[]>([]);
|
|
|
|
// New Lesson State
|
|
const [newLessonTitle, setNewLessonTitle] = useState('');
|
|
const [newLessonDuration, setNewLessonDuration] = useState('');
|
|
const [newLessonVideoUrl, setNewLessonVideoUrl] = useState('');
|
|
const [newLessonProvider, setNewLessonProvider] = useState('external');
|
|
const [newLessonMedia, setNewLessonMedia] = useState<LessonMedia | null>(null);
|
|
const [newLessonIsFree, setNewLessonIsFree] = useState(false);
|
|
const [bunnyConfigured, setBunnyConfigured] = useState<boolean | null>(null);
|
|
const [bunnyUploadState, setBunnyUploadState] = useState<'idle' | 'uploading' | 'uploaded' | 'error'>('idle');
|
|
const [bunnyUploadMessage, setBunnyUploadMessage] = useState('');
|
|
|
|
// Tips & Global Attachments
|
|
const [tips, setTips] = useState<string[]>([]);
|
|
const [newTip, setNewTip] = useState('');
|
|
const [attachments, setAttachments] = useState<Attachment[]>([]);
|
|
|
|
// New Attachment State
|
|
const [newAttName, setNewAttName] = useState('');
|
|
const [newAttType, setNewAttType] = useState<AttachmentType>('pdf');
|
|
const [newAttUrl, setNewAttUrl] = useState('');
|
|
const [newAttSize, setNewAttSize] = useState('');
|
|
const [newAttDesc, setNewAttDesc] = useState('');
|
|
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
if (initialData) {
|
|
setTitle(initialData.title);
|
|
setDescription(initialData.description);
|
|
setCategory(initialData.category);
|
|
setStatus(initialData.status || 'published');
|
|
setThumbnailPreview(initialData.thumbnail);
|
|
setTips(initialData.tips || []);
|
|
setAttachments(initialData.attachments || []);
|
|
setLessons(initialData.lessons || []);
|
|
} else {
|
|
setTitle('');
|
|
setDescription('');
|
|
setCategory('');
|
|
setStatus('draft');
|
|
setThumbnailPreview('');
|
|
setTips([]);
|
|
setAttachments([]);
|
|
setLessons([]);
|
|
}
|
|
setNewLessonMedia(null);
|
|
setBunnyUploadState('idle');
|
|
setBunnyUploadMessage('');
|
|
setCoverUploadMessage('');
|
|
instructorApi.bunnyConfiguration()
|
|
.then((response) => setBunnyConfigured(response.data.configured))
|
|
.catch(() => setBunnyConfigured(false));
|
|
instructorApi.coverConfiguration()
|
|
.then((response) => setCoverConfigured(response.data.configured))
|
|
.catch(() => setCoverConfigured(false));
|
|
courseApi.categories()
|
|
.then((response) => {
|
|
setCategories(response.data);
|
|
if (!initialData) setCategory((current) => current || response.data[0] || '');
|
|
})
|
|
.catch(() => setCategories([]));
|
|
}
|
|
}, [isOpen, initialData]);
|
|
|
|
const toBunnyMedia = (video: BunnyVideo): LessonMedia => ({
|
|
provider: 'bunny',
|
|
externalId: video.id,
|
|
status: video.status,
|
|
durationSeconds: video.durationSeconds,
|
|
});
|
|
|
|
const handleBunnyUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = event.target.files?.[0];
|
|
event.target.value = '';
|
|
if (!file) return;
|
|
if (!newLessonTitle.trim()) {
|
|
alert('Informe o título da aula antes de enviar o vídeo.');
|
|
return;
|
|
}
|
|
if (!bunnyConfigured) {
|
|
alert('A integração com Bunny Stream ainda não foi configurada pelo administrador.');
|
|
return;
|
|
}
|
|
|
|
setBunnyUploadState('uploading');
|
|
setBunnyUploadMessage(`Enviando ${file.name} para Bunny Stream...`);
|
|
try {
|
|
const created = await instructorApi.createBunnyVideo(newLessonTitle.trim());
|
|
const uploaded = await instructorApi.uploadBunnyVideo(created.data.id, file);
|
|
const media = toBunnyMedia(uploaded.data);
|
|
setNewLessonMedia(media);
|
|
if (!newLessonDuration.trim() && uploaded.data.durationSeconds) {
|
|
const minutes = Math.max(1, Math.round(uploaded.data.durationSeconds / 60));
|
|
setNewLessonDuration(`${minutes}m`);
|
|
}
|
|
setBunnyUploadState('uploaded');
|
|
setBunnyUploadMessage(uploaded.data.status === 'ready'
|
|
? 'Vídeo pronto para ser adicionado à aula.'
|
|
: 'Upload concluído. Bunny Stream está processando o vídeo; você já pode salvar a aula.');
|
|
} catch (error) {
|
|
setBunnyUploadState('error');
|
|
setBunnyUploadMessage(error instanceof Error ? error.message : 'Não foi possível enviar o vídeo para Bunny Stream.');
|
|
}
|
|
};
|
|
|
|
const handleCoverUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = event.target.files?.[0];
|
|
event.target.value = '';
|
|
if (!file) return;
|
|
if (!coverConfigured) {
|
|
setCoverUploadMessage('O armazenamento de imagens ainda não foi configurado pelo administrador.');
|
|
return;
|
|
}
|
|
setIsCoverUploading(true);
|
|
setCoverUploadMessage(`Enviando ${file.name}...`);
|
|
try {
|
|
const response = await instructorApi.uploadCover(file);
|
|
setThumbnailPreview(response.data.coverImageUrl);
|
|
setCoverUploadMessage('Imagem de capa enviada com sucesso.');
|
|
} catch (error) {
|
|
setCoverUploadMessage(error instanceof Error ? error.message : 'Não foi possível enviar a imagem de capa.');
|
|
} finally {
|
|
setIsCoverUploading(false);
|
|
}
|
|
};
|
|
|
|
const refreshLessonMedia = async (lessonId: string) => {
|
|
const lesson = lessons.find((item) => item.id === lessonId);
|
|
const media = lesson?.media?.[0];
|
|
if (!lesson || !media || media.provider !== 'bunny') return;
|
|
try {
|
|
const response = await instructorApi.bunnyVideoStatus(media.externalId);
|
|
const refreshed = toBunnyMedia(response.data);
|
|
setLessons((current) => current.map((item) => item.id === lessonId ? {
|
|
...item,
|
|
duration: refreshed.durationSeconds ? `${Math.max(1, Math.round(refreshed.durationSeconds / 60))}m` : item.duration,
|
|
media: [refreshed],
|
|
} : item));
|
|
} catch (error) {
|
|
alert(error instanceof Error ? error.message : 'Não foi possível atualizar o status do vídeo.');
|
|
}
|
|
};
|
|
|
|
// Bunny encodes asynchronously. While the course editor stays open, keep
|
|
// pending lessons up to date and persist the latest state on the API.
|
|
useEffect(() => {
|
|
if (!isOpen) return;
|
|
const pending = lessons
|
|
.map((lesson) => ({ lesson, media: lesson.media?.[0] }))
|
|
.filter((item): item is { lesson: Lesson; media: LessonMedia } => item.media?.provider === 'bunny' && item.media.status === 'processing');
|
|
if (!pending.length) return;
|
|
|
|
const timer = window.setTimeout(() => {
|
|
Promise.all(pending.map(async ({ lesson, media }) => {
|
|
try {
|
|
const response = await instructorApi.bunnyVideoStatus(media.externalId);
|
|
return { lessonId: lesson.id, media: toBunnyMedia(response.data) };
|
|
} catch {
|
|
return null;
|
|
}
|
|
})).then((updates) => {
|
|
const available = updates.filter((update): update is { lessonId: string; media: LessonMedia } => Boolean(update));
|
|
if (!available.length) return;
|
|
setLessons((current) => current.map((lesson) => {
|
|
const update = available.find((item) => item.lessonId === lesson.id);
|
|
if (!update) return lesson;
|
|
return {
|
|
...lesson,
|
|
duration: update.media.durationSeconds ? `${Math.max(1, Math.round(update.media.durationSeconds / 60))}m` : lesson.duration,
|
|
media: [update.media],
|
|
};
|
|
}));
|
|
});
|
|
}, 10_000);
|
|
return () => window.clearTimeout(timer);
|
|
}, [isOpen, lessons]);
|
|
|
|
const handleAddLesson = () => {
|
|
if (!newLessonTitle.trim()) {
|
|
alert("Digite um título para a aula.");
|
|
return;
|
|
}
|
|
if (!newLessonMedia && !newLessonVideoUrl.trim()) {
|
|
alert('Envie um vídeo para Bunny Stream ou informe uma URL de vídeo hospedado.');
|
|
return;
|
|
}
|
|
|
|
const newLesson: Lesson = {
|
|
id: `lesson-${Date.now()}`,
|
|
title: newLessonTitle,
|
|
duration: newLessonDuration || '15m',
|
|
videoUrl: newLessonMedia?.playbackUrl || newLessonVideoUrl,
|
|
mediaProvider: newLessonMedia?.provider || newLessonProvider || 'external',
|
|
media: newLessonMedia ? [newLessonMedia] : undefined,
|
|
isFree: newLessonIsFree,
|
|
description: ''
|
|
};
|
|
|
|
setLessons([...lessons, newLesson]);
|
|
|
|
setNewLessonTitle('');
|
|
setNewLessonDuration('');
|
|
setNewLessonVideoUrl('');
|
|
setNewLessonProvider('external');
|
|
setNewLessonMedia(null);
|
|
setNewLessonIsFree(false);
|
|
setBunnyUploadState('idle');
|
|
setBunnyUploadMessage('');
|
|
};
|
|
|
|
const removeLesson = (id: string) => {
|
|
setLessons(lessons.filter(l => l.id !== id));
|
|
};
|
|
|
|
const toggleLessonAccess = (id: string) => {
|
|
setLessons(lessons.map(l => l.id === id ? { ...l, isFree: !l.isFree } : l));
|
|
};
|
|
|
|
const moveLesson = (id: string, direction: -1 | 1) => {
|
|
setLessons((current) => {
|
|
const index = current.findIndex((lesson) => lesson.id === id);
|
|
const nextIndex = index + direction;
|
|
if (index < 0 || nextIndex < 0 || nextIndex >= current.length) return current;
|
|
const next = [...current];
|
|
[next[index], next[nextIndex]] = [next[nextIndex], next[index]];
|
|
return next;
|
|
});
|
|
};
|
|
|
|
const handleAddTip = () => {
|
|
if (newTip.trim()) {
|
|
setTips([...tips, newTip.trim()]);
|
|
setNewTip('');
|
|
}
|
|
};
|
|
|
|
const removeTip = (idx: number) => {
|
|
setTips(tips.filter((_, i) => i !== idx));
|
|
};
|
|
|
|
const handleAddAttachment = () => {
|
|
if (!newAttName.trim()) {
|
|
alert("Informe o nome do arquivo para download.");
|
|
return;
|
|
}
|
|
|
|
const att: Attachment = {
|
|
id: `att-${Date.now()}`,
|
|
name: newAttName.trim(),
|
|
type: newAttType,
|
|
url: newAttUrl.trim() || '#',
|
|
size: newAttSize.trim() || '1.5 MB',
|
|
description: newAttDesc.trim()
|
|
};
|
|
|
|
setAttachments([...attachments, att]);
|
|
setNewAttName('');
|
|
setNewAttSize('');
|
|
setNewAttUrl('');
|
|
setNewAttDesc('');
|
|
};
|
|
|
|
const removeAttachment = (id: string) => {
|
|
setAttachments(attachments.filter(a => a.id !== id));
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (lessons.length === 0) {
|
|
alert("Adicione pelo menos uma aula à trilha.");
|
|
return;
|
|
}
|
|
|
|
setIsSubmitting(true);
|
|
|
|
const durationStr = `${lessons.length} Aulas`;
|
|
|
|
try {
|
|
await onSave({
|
|
id: initialData?.id || `course-${Date.now()}`,
|
|
title,
|
|
description,
|
|
category: category || categories[0],
|
|
status,
|
|
thumbnail: thumbnailPreview || '/course-placeholder.svg',
|
|
duration: durationStr,
|
|
instructor: initialData?.instructor || '',
|
|
views: initialData?.views || 0,
|
|
progress: initialData?.progress || 0,
|
|
lessons: lessons,
|
|
tips: tips,
|
|
attachments: attachments
|
|
});
|
|
onClose();
|
|
} catch (error) {
|
|
alert(error instanceof Error ? error.message : 'Não foi possível salvar este curso.');
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
|
|
<div className="absolute inset-0 bg-black/80 backdrop-blur-xl" onClick={onClose} />
|
|
<div className="relative w-full max-w-6xl bg-[#141416] rounded-3xl border border-white/10 p-6 md:p-8 shadow-2xl animate-fade-in-up max-h-[92vh] overflow-y-auto flex flex-col lg:flex-row gap-8">
|
|
|
|
{/* Left Column: Course Details, Tips & Downloads */}
|
|
<div className="w-full lg:w-5/12 space-y-6">
|
|
<div className="flex justify-between items-center lg:hidden mb-2">
|
|
<h2 className="text-xl font-bold text-white">{initialData ? 'Editar Curso' : 'Criar Curso'}</h2>
|
|
<button onClick={onClose}><X className="text-white" /></button>
|
|
</div>
|
|
|
|
{/* Thumbnail */}
|
|
<div>
|
|
<label className="text-xs text-gray-400 uppercase font-bold tracking-wider mb-2 block">Imagem de Capa (16:9)</label>
|
|
<div
|
|
onClick={() => { if (!isCoverUploading && coverConfigured) coverFileRef.current?.click(); }}
|
|
onKeyDown={(event) => { if ((event.key === 'Enter' || event.key === ' ') && !isCoverUploading && coverConfigured) coverFileRef.current?.click(); }}
|
|
role="button"
|
|
tabIndex={0}
|
|
aria-label="Enviar imagem de capa"
|
|
className={`w-full aspect-video rounded-2xl border-2 border-dashed border-white/10 bg-black/40 flex flex-col items-center justify-center transition-colors relative overflow-hidden group ${coverConfigured && !isCoverUploading ? 'cursor-pointer hover:border-orange-500/50' : 'cursor-not-allowed opacity-70'}`}
|
|
>
|
|
{thumbnailPreview ? (
|
|
<>
|
|
<img src={thumbnailPreview} alt="Preview" className="w-full h-full object-cover opacity-70 group-hover:opacity-40 transition-opacity" />
|
|
<div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<span className="bg-orange-500 px-4 py-2 rounded-xl text-xs font-bold shadow-lg">Alterar Capa</span>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div className="text-center p-6">
|
|
<ImageIcon className="w-10 h-10 text-orange-400/60 mx-auto mb-2" />
|
|
<p className="text-gray-300 text-xs font-medium">{isCoverUploading ? 'Enviando imagem...' : 'Clique para enviar uma imagem de capa'}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<input
|
|
ref={coverFileRef}
|
|
type="file"
|
|
accept="image/jpeg,image/png,image/webp"
|
|
className="hidden"
|
|
disabled={!coverConfigured || isCoverUploading}
|
|
onChange={handleCoverUpload}
|
|
/>
|
|
<p className={`mt-2 text-[11px] ${coverUploadMessage.includes('sucesso') ? 'text-emerald-300' : coverUploadMessage ? 'text-amber-300' : 'text-gray-500'}`}>{coverUploadMessage || (coverConfigured ? 'JPG, PNG ou WebP. Tamanho máximo: 10 MB.' : 'O upload de capas será habilitado após configurar Bunny Storage no servidor.')}</p>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="text-xs text-gray-400 uppercase font-bold tracking-wider mb-1 block">Título do Curso</label>
|
|
<input
|
|
type="text"
|
|
value={title}
|
|
onChange={(e) => setTitle(e.target.value)}
|
|
placeholder="Ex: Masterclass: Escala de Tráfego Pago"
|
|
className="w-full bg-black/50 text-white text-base font-bold border border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:border-orange-500/50"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<label className="text-xs text-gray-400 uppercase font-bold tracking-wider mb-1 block">Categoria</label>
|
|
<select
|
|
value={category}
|
|
onChange={(e) => setCategory(e.target.value)}
|
|
className="w-full bg-black/50 text-white border border-white/10 rounded-xl px-3 py-2.5 text-xs focus:outline-none focus:border-orange-500/50"
|
|
>
|
|
{categories.map(cat => (
|
|
<option key={cat} value={cat} className="bg-zinc-900">{cat}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="text-xs text-gray-400 uppercase font-bold tracking-wider mb-1 block">Publicação</label>
|
|
<select value={status} onChange={(e) => setStatus(e.target.value as Course['status'])} className="w-full bg-black/50 text-white border border-white/10 rounded-xl px-3 py-2.5 text-xs focus:outline-none focus:border-orange-500/50">
|
|
<option value="draft" className="bg-zinc-900">Salvar como rascunho</option>
|
|
<option value="published" className="bg-zinc-900">Publicar agora</option>
|
|
</select>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
<label className="text-xs text-gray-400 uppercase font-bold tracking-wider mb-1 block">Descrição do Curso</label>
|
|
<textarea
|
|
value={description}
|
|
onChange={(e) => setDescription(e.target.value)}
|
|
rows={3}
|
|
placeholder="O que os alunos vão aprender e dominar neste curso?"
|
|
className="w-full bg-black/50 text-white border border-white/10 rounded-xl px-4 py-2.5 text-xs focus:outline-none focus:border-orange-500/50 resize-none leading-relaxed"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Downloadable Materials Section */}
|
|
<div className="bg-black/40 p-4 rounded-2xl border border-white/10 space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="text-xs font-bold text-orange-400 uppercase tracking-wider flex items-center gap-1.5">
|
|
<Download className="w-4 h-4" />
|
|
Materiais Complementares ({attachments.length})
|
|
</h3>
|
|
</div>
|
|
|
|
{/* Add attachment inputs */}
|
|
<div className="space-y-2 pt-1">
|
|
<div className="grid grid-cols-3 gap-2">
|
|
<input
|
|
type="text"
|
|
value={newAttName}
|
|
onChange={(e) => setNewAttName(e.target.value)}
|
|
placeholder="Nome do arquivo (ex: Planilha_ROAS.xlsx)"
|
|
className="col-span-2 bg-white/5 border border-white/10 rounded-lg px-2.5 py-1.5 text-xs text-white focus:outline-none focus:border-orange-500/50"
|
|
/>
|
|
<select
|
|
value={newAttType}
|
|
onChange={(e) => setNewAttType(e.target.value as AttachmentType)}
|
|
className="bg-zinc-900 border border-white/10 rounded-lg px-2 py-1.5 text-xs text-white focus:outline-none"
|
|
>
|
|
<option value="pdf">PDF</option>
|
|
<option value="spreadsheet">Planilha</option>
|
|
<option value="zip">Pacote ZIP</option>
|
|
<option value="doc">Documento</option>
|
|
<option value="link">Link</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="flex gap-2">
|
|
<input
|
|
type="text"
|
|
value={newAttSize}
|
|
onChange={(e) => setNewAttSize(e.target.value)}
|
|
placeholder="Tamanho (ex: 2.4 MB)"
|
|
className="w-28 bg-white/5 border border-white/10 rounded-lg px-2.5 py-1.5 text-xs text-white focus:outline-none"
|
|
/>
|
|
<input
|
|
type="text"
|
|
value={newAttDesc}
|
|
onChange={(e) => setNewAttDesc(e.target.value)}
|
|
placeholder="Breve descrição do material..."
|
|
className="flex-1 bg-white/5 border border-white/10 rounded-lg px-2.5 py-1.5 text-xs text-white focus:outline-none"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={handleAddAttachment}
|
|
className="bg-orange-500 hover:bg-orange-600 px-3 py-1.5 rounded-lg text-white text-xs font-bold shrink-0 transition-colors"
|
|
>
|
|
Adicionar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* List of Attachments */}
|
|
<div className="space-y-1.5 max-h-36 overflow-y-auto pr-1 pt-1">
|
|
{attachments.map((att) => (
|
|
<div key={att.id} className="flex items-center justify-between p-2 rounded-lg bg-white/5 border border-white/5 text-xs">
|
|
<div className="flex items-center gap-2 min-w-0 pr-2">
|
|
{getAttachmentIcon(att.type)}
|
|
<span className="text-gray-200 font-medium truncate">{att.name}</span>
|
|
<span className="text-[10px] text-gray-500 font-mono">({att.size || '1 MB'})</span>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => removeAttachment(att.id)}
|
|
className="text-gray-500 hover:text-red-400 p-1"
|
|
>
|
|
<Trash2 className="w-3.5 h-3.5" />
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Column: Lessons Builder */}
|
|
<div className="flex-1 flex flex-col justify-between">
|
|
<div>
|
|
<div className="hidden lg:flex justify-between items-center mb-6">
|
|
<h2 className="text-2xl font-extrabold text-white">
|
|
{initialData ? 'Gerenciar Trilha & Aulas' : 'Estruturar Grade de Aulas'}
|
|
</h2>
|
|
<button onClick={onClose} className="p-2 bg-white/5 rounded-full hover:bg-white/20 transition-colors">
|
|
<X className="w-5 h-5 text-white" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="bg-black/50 rounded-2xl border border-white/10 overflow-hidden mb-6">
|
|
<div className="p-4 border-b border-white/5 bg-zinc-900/50 flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<ListVideo className="w-4 h-4 text-orange-400" />
|
|
<h3 className="font-bold text-white text-sm">Grade do Curso</h3>
|
|
</div>
|
|
<span className="bg-orange-500/10 text-orange-400 border border-orange-500/20 px-3 py-0.5 rounded-full text-xs font-bold">
|
|
{lessons.length} Aulas
|
|
</span>
|
|
</div>
|
|
|
|
{/* Lesson List */}
|
|
<div className="overflow-y-auto p-4 space-y-2.5 max-h-[300px]">
|
|
{lessons.length === 0 && (
|
|
<div className="flex flex-col items-center justify-center py-10 text-gray-500 space-y-2">
|
|
<ListVideo className="w-8 h-8 opacity-20 text-orange-400" />
|
|
<p className="text-xs">Nenhuma aula cadastrada ainda. Adicione abaixo.</p>
|
|
</div>
|
|
)}
|
|
{lessons.map((lesson, index) => (
|
|
<div key={lesson.id} className="flex items-center gap-3 bg-white/[0.04] p-3 rounded-xl border border-white/5 group hover:border-orange-500/30 transition-all">
|
|
<div className="flex items-center justify-center w-6 h-6 rounded-lg bg-white/10 text-gray-400 font-mono text-xs font-bold">
|
|
{index + 1}
|
|
</div>
|
|
|
|
<div className="flex-1 min-w-0">
|
|
<h4 className="text-white font-medium text-xs md:text-sm truncate">{lesson.title}</h4>
|
|
<div className="flex items-center gap-2 text-[11px] text-gray-500 mt-0.5">
|
|
<span className="flex items-center gap-1"><Video className="w-3 h-3 text-orange-400/70"/> {lesson.duration}</span>
|
|
{lesson.media?.[0]?.provider === 'bunny' && (
|
|
<span className={`font-bold px-1.5 py-0.2 rounded text-[9px] uppercase ${lesson.media[0].status === 'ready' ? 'text-emerald-400 bg-emerald-500/10' : lesson.media[0].status === 'failed' ? 'text-red-400 bg-red-500/10' : 'text-amber-400 bg-amber-500/10'}`}>
|
|
Bunny: {lesson.media[0].status === 'ready' ? 'pronto' : lesson.media[0].status === 'failed' ? 'falhou' : 'processando'}
|
|
</span>
|
|
)}
|
|
{lesson.isFree ? (
|
|
<span className="text-emerald-400 font-bold bg-emerald-500/10 px-1.5 py-0.2 rounded text-[9px] uppercase">GRÁTIS</span>
|
|
) : (
|
|
<span className="text-purple-400 font-bold bg-purple-500/10 px-1.5 py-0.2 rounded text-[9px] uppercase">EXCLUSIVA</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-1">
|
|
<button type="button" disabled={index === 0} onClick={() => moveLesson(lesson.id, -1)} className="p-1 text-gray-400 hover:text-white disabled:opacity-30" title="Mover aula para cima"><ChevronUp className="w-4 h-4" /></button>
|
|
<button type="button" disabled={index === lessons.length - 1} onClick={() => moveLesson(lesson.id, 1)} className="p-1 text-gray-400 hover:text-white disabled:opacity-30" title="Mover aula para baixo"><ChevronDown className="w-4 h-4" /></button>
|
|
{lesson.media?.[0]?.provider === 'bunny' && lesson.media[0].status !== 'ready' && (
|
|
<button
|
|
type="button"
|
|
onClick={() => refreshLessonMedia(lesson.id)}
|
|
className="px-2 py-1 text-[10px] text-orange-300 hover:bg-orange-500/10 rounded-lg transition-colors"
|
|
title="Atualizar status do vídeo"
|
|
>
|
|
Atualizar
|
|
</button>
|
|
)}
|
|
<button
|
|
type="button"
|
|
onClick={() => toggleLessonAccess(lesson.id)}
|
|
className={`p-1.5 rounded-lg transition-colors ${lesson.isFree ? 'text-emerald-400 hover:bg-emerald-500/10' : 'text-purple-400 hover:bg-purple-500/10'}`}
|
|
title={lesson.isFree ? "Tornar Exclusiva para Membros" : "Tornar Grátis"}
|
|
>
|
|
{lesson.isFree ? <Unlock className="w-4 h-4" /> : <Lock className="w-4 h-4" />}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => removeLesson(lesson.id)}
|
|
className="p-1.5 text-gray-400 hover:text-red-400 hover:bg-red-500/10 rounded-lg transition-colors"
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Add Lesson Form Box */}
|
|
<div className="p-4 bg-zinc-950 border-t border-white/5 space-y-3">
|
|
<h4 className="text-xs font-bold text-gray-400 uppercase tracking-wider flex items-center gap-1.5">
|
|
<Plus className="w-3.5 h-3.5 text-orange-400" />
|
|
Cadastrar Nova Aula
|
|
</h4>
|
|
|
|
<div className="flex gap-2">
|
|
<input
|
|
type="text"
|
|
value={newLessonTitle}
|
|
onChange={(e) => setNewLessonTitle(e.target.value)}
|
|
placeholder="Título da Aula (ex: 01. Configuração do Pixel)"
|
|
className="flex-1 bg-white/5 border border-white/10 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-orange-500/50"
|
|
/>
|
|
<input
|
|
type="text"
|
|
value={newLessonDuration}
|
|
onChange={(e) => setNewLessonDuration(e.target.value)}
|
|
placeholder="Duração (ex: 25m)"
|
|
className="w-28 bg-white/5 border border-white/10 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-orange-500/50"
|
|
/>
|
|
</div>
|
|
|
|
<div className="rounded-xl border border-orange-500/20 bg-orange-500/[0.04] p-3 space-y-2">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div>
|
|
<p className="text-xs font-bold text-orange-200">Vídeo Bunny Stream</p>
|
|
<p className="text-[11px] text-gray-500">O vídeo será protegido e reproduzido no player seguro da Bunny.</p>
|
|
</div>
|
|
<label className={`cursor-pointer rounded-lg px-3 py-2 text-xs font-bold transition-colors ${bunnyConfigured && bunnyUploadState !== 'uploading' ? 'bg-orange-500 hover:bg-orange-600 text-white' : 'bg-white/10 text-gray-500 cursor-not-allowed'}`}>
|
|
{bunnyUploadState === 'uploading' ? 'Enviando...' : 'Selecionar vídeo'}
|
|
<input
|
|
type="file"
|
|
accept="video/*"
|
|
className="hidden"
|
|
disabled={!bunnyConfigured || bunnyUploadState === 'uploading'}
|
|
onChange={handleBunnyUpload}
|
|
/>
|
|
</label>
|
|
</div>
|
|
{bunnyConfigured === false && <p className="text-[11px] text-amber-300">Bunny Stream não está configurado no servidor. Peça ao administrador para adicionar as variáveis no Portainer.</p>}
|
|
{bunnyUploadMessage && <p className={`text-[11px] ${bunnyUploadState === 'error' ? 'text-red-300' : bunnyUploadState === 'uploaded' ? 'text-emerald-300' : 'text-gray-400'}`}>{bunnyUploadMessage}</p>}
|
|
{newLessonMedia && (
|
|
<div className="flex items-center justify-between rounded-lg bg-black/30 px-3 py-2 text-[11px] text-gray-300">
|
|
<span>Vídeo Bunny vinculado ({newLessonMedia.status === 'ready' ? 'pronto' : 'processando'})</span>
|
|
<button type="button" onClick={() => setNewLessonMedia(null)} className="text-gray-400 hover:text-red-300">Remover</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex gap-2 items-center pt-1">
|
|
<input
|
|
type="text"
|
|
value={newLessonProvider}
|
|
onChange={(event) => setNewLessonProvider(event.target.value)}
|
|
placeholder="Provider externo"
|
|
className="w-40 bg-white/5 border border-white/10 rounded-xl px-3 py-2 text-xs text-white focus:outline-none"
|
|
/>
|
|
<input
|
|
type="url"
|
|
value={newLessonVideoUrl}
|
|
onChange={(event) => setNewLessonVideoUrl(event.target.value)}
|
|
placeholder="Ou cole uma URL externa de vídeo"
|
|
className="flex-1 bg-white/5 border border-white/10 rounded-xl px-3 py-2 text-xs text-white focus:outline-none"
|
|
/>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={handleAddLesson}
|
|
className="bg-white hover:bg-orange-500 hover:text-white text-black font-bold px-4 py-2 rounded-xl text-xs transition-all shrink-0"
|
|
>
|
|
Adicionar Aula
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Submit Button */}
|
|
<div className="pt-4 border-t border-white/5">
|
|
<button
|
|
onClick={handleSubmit}
|
|
disabled={isSubmitting}
|
|
className="w-full bg-orange-500 hover:bg-orange-600 text-white font-extrabold text-base py-4 rounded-2xl active:scale-95 transition-all shadow-lg shadow-orange-500/25"
|
|
>
|
|
{isSubmitting ? 'Salvando...' : status === 'draft' ? 'Salvar como Rascunho' : (initialData ? 'Salvar e Publicar Curso' : 'Publicar Curso & Materiais')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const ManageCourses: React.FC = () => {
|
|
const [courses, setCourses] = useState<Course[]>([]);
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
const [editingCourse, setEditingCourse] = useState<Course | undefined>(undefined);
|
|
const [loading, setLoading] = useState(true);
|
|
const [activeTab, setActiveTab] = useState<'courses' | 'comments'>('courses');
|
|
const [allComments, setAllComments] = useState<{comment: Comment, courseTitle: string}[]>([]);
|
|
const [replyingTo, setReplyingTo] = useState<string | null>(null);
|
|
const [replyText, setReplyText] = useState('');
|
|
const [analytics, setAnalytics] = useState<InstructorAnalytics | null>(null);
|
|
|
|
const { showToast } = useToast();
|
|
|
|
const loadData = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const data = await getManagedCourses();
|
|
setCourses(data);
|
|
const analyticsResponse = await instructorApi.analytics();
|
|
setAnalytics(analyticsResponse.data);
|
|
const commentLists = await Promise.all(data.map(async (course) => ({ course, comments: await getComments(course.id) })));
|
|
setAllComments(commentLists.flatMap(({ course, comments }) => comments.map((comment) => ({ comment, courseTitle: course.title }))));
|
|
} catch {
|
|
showToast('Não foi possível carregar o painel do instrutor.', 'error');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
loadData();
|
|
}, []);
|
|
|
|
const handleCreate = () => {
|
|
setEditingCourse(undefined);
|
|
setIsModalOpen(true);
|
|
};
|
|
|
|
const handleEdit = (course: Course) => {
|
|
setEditingCourse(course);
|
|
setIsModalOpen(true);
|
|
};
|
|
|
|
const handleDelete = async (id: string) => {
|
|
if (window.confirm('Tem certeza que deseja excluir este curso?')) {
|
|
await deleteCourse(id);
|
|
showToast('Curso removido com sucesso!', 'success');
|
|
loadData();
|
|
}
|
|
};
|
|
|
|
const handleDuplicate = async (id: string) => {
|
|
try {
|
|
await duplicateCourse(id);
|
|
showToast('Cópia criada como rascunho.', 'success');
|
|
loadData();
|
|
} catch (error) {
|
|
showToast(error instanceof Error ? error.message : 'Não foi possível duplicar este curso.', 'error');
|
|
}
|
|
};
|
|
|
|
const handleSave = async (course: Course) => {
|
|
await saveCourse(course);
|
|
showToast('Curso e materiais salvos com sucesso!', 'success');
|
|
loadData();
|
|
};
|
|
|
|
const handleSendReply = async (commentId: string) => {
|
|
if (!replyText.trim()) return;
|
|
|
|
const target = allComments.find(c => c.comment.id === commentId);
|
|
if (target) {
|
|
await replyToComment(commentId, replyText);
|
|
showToast('Resposta enviada com sucesso!', 'success');
|
|
setReplyingTo(null);
|
|
setReplyText('');
|
|
loadData();
|
|
}
|
|
};
|
|
|
|
const handleModerateComment = async (commentId: string) => {
|
|
if (!window.confirm('Remover este comentário permanentemente?')) return;
|
|
await moderateComment(commentId);
|
|
showToast('Comentário removido.', 'success');
|
|
loadData();
|
|
};
|
|
|
|
// Metrics
|
|
const totalLearners = analytics?.learners ?? 0;
|
|
const completedLessons = analytics?.completedLessons ?? 0;
|
|
const totalQuestions = analytics?.comments ?? allComments.length;
|
|
const totalLessons = courses.reduce((acc, c) => acc + c.lessons.length, 0);
|
|
const totalMaterials = courses.reduce((acc, c) => {
|
|
const globalCount = c.attachments?.length || 0;
|
|
const lessonCount = c.lessons.reduce((lAcc, l) => lAcc + (l.attachments?.length || 0), 0);
|
|
return acc + globalCount + lessonCount;
|
|
}, 0);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#09090b] text-white pt-24 pb-20 px-6 md:px-12 max-w-[1440px] mx-auto">
|
|
|
|
{/* Header */}
|
|
<div className="flex flex-col md:flex-row md:items-center justify-between gap-6 pb-8 border-b border-white/10">
|
|
<div>
|
|
<div className="flex items-center gap-2 text-caption font-semibold uppercase tracking-caption text-orange-400 mb-2">
|
|
<span>Compor HUB</span>
|
|
<span>•</span>
|
|
<span>Painel do Instrutor</span>
|
|
</div>
|
|
<h1 className="font-display text-subheading sm:text-heading-sm md:text-heading font-bold tracking-heading leading-heading">
|
|
Gestão de Cursos & Materiais
|
|
</h1>
|
|
<p className="text-body-sm font-normal text-gray-400 mt-1 leading-body-sm tracking-body-sm">
|
|
Cadastre videoaulas, organize trilhas e disponibilize arquivos de apoio para download.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3">
|
|
<button
|
|
onClick={handleCreate}
|
|
className="flex items-center gap-2 bg-orange-500 hover:bg-orange-600 text-white text-body-sm font-semibold tracking-body-sm px-6 py-3 rounded-[980px] shadow-xl shadow-orange-500/20 transition-all active:scale-95"
|
|
>
|
|
<Plus className="w-4 h-4" />
|
|
<span>Novo Curso</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Metrics Row */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-6 gap-4 my-8">
|
|
<div className="bg-zinc-900/60 border border-white/10 p-5 rounded-[8px] shadow-xl">
|
|
<span className="text-caption text-gray-400 font-semibold uppercase tracking-caption">Total de Cursos</span>
|
|
<p className="font-display text-subheading md:text-heading-sm font-bold text-white mt-1">{courses.length}</p>
|
|
</div>
|
|
<div className="bg-zinc-900/60 border border-white/10 p-5 rounded-[8px] shadow-xl">
|
|
<span className="text-caption text-gray-400 font-semibold uppercase tracking-caption">Total de Aulas</span>
|
|
<p className="font-display text-subheading md:text-heading-sm font-bold text-orange-400 mt-1">{totalLessons}</p>
|
|
</div>
|
|
<div className="bg-zinc-900/60 border border-white/10 p-5 rounded-[8px] shadow-xl">
|
|
<span className="text-caption text-gray-400 font-semibold uppercase tracking-caption">Materiais para Download</span>
|
|
<p className="font-display text-subheading md:text-heading-sm font-bold text-emerald-400 mt-1">{totalMaterials}</p>
|
|
</div>
|
|
<div className="bg-zinc-900/60 border border-white/10 p-5 rounded-[8px] shadow-xl">
|
|
<span className="text-caption text-gray-400 font-semibold uppercase tracking-caption">Alunos com Progresso</span>
|
|
<p className="font-display text-subheading md:text-heading-sm font-bold text-white mt-1">{totalLearners.toLocaleString('pt-BR')}</p>
|
|
</div>
|
|
<div className="bg-zinc-900/60 border border-white/10 p-5 rounded-[8px] shadow-xl">
|
|
<span className="text-caption text-gray-400 font-semibold uppercase tracking-caption">Aulas Concluídas</span>
|
|
<p className="font-display text-subheading md:text-heading-sm font-bold text-orange-400 mt-1">{completedLessons.toLocaleString('pt-BR')}</p>
|
|
</div>
|
|
<div className="bg-zinc-900/60 border border-white/10 p-5 rounded-[8px] shadow-xl">
|
|
<span className="text-caption text-gray-400 font-semibold uppercase tracking-caption">Dúvidas Recebidas</span>
|
|
<p className="font-display text-subheading md:text-heading-sm font-bold text-white mt-1">{totalQuestions.toLocaleString('pt-BR')}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Navigation Tabs */}
|
|
<div className="flex gap-4 border-b border-white/10 mb-8">
|
|
<button
|
|
onClick={() => setActiveTab('courses')}
|
|
className={`pb-3 text-body-sm font-semibold tracking-body-sm transition-all border-b-2 ${
|
|
activeTab === 'courses'
|
|
? 'border-orange-500 text-white'
|
|
: 'border-transparent text-gray-500 hover:text-gray-300'
|
|
}`}
|
|
>
|
|
Cursos Cadastrados ({courses.length})
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab('comments')}
|
|
className={`pb-3 text-body-sm font-semibold tracking-body-sm transition-all border-b-2 flex items-center gap-2 ${
|
|
activeTab === 'comments'
|
|
? 'border-orange-500 text-white'
|
|
: 'border-transparent text-gray-500 hover:text-gray-300'
|
|
}`}
|
|
>
|
|
<MessageSquare className="w-4 h-4" />
|
|
Dúvidas dos Alunos ({allComments.length})
|
|
</button>
|
|
</div>
|
|
|
|
{/* Tab: Courses List */}
|
|
{activeTab === 'courses' && (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{courses.map(course => {
|
|
const courseAttachments = (course.attachments?.length || 0) + course.lessons.reduce((acc, l) => acc + (l.attachments?.length || 0), 0);
|
|
|
|
return (
|
|
<div
|
|
key={course.id}
|
|
className="bg-zinc-900/80 border border-white/10 rounded-[8px] overflow-hidden flex flex-col justify-between hover:border-orange-500/40 transition-all duration-300 group shadow-xl"
|
|
>
|
|
<div>
|
|
{/* Thumbnail */}
|
|
<div className="aspect-video relative overflow-hidden bg-black rounded-t-[8px]">
|
|
<img
|
|
src={course.thumbnail}
|
|
alt={course.title}
|
|
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
|
/>
|
|
<div className="absolute top-3 left-3 bg-black/70 backdrop-blur-md px-2.5 py-1 rounded-[980px] text-caption font-semibold uppercase tracking-caption text-white border border-white/10">
|
|
{course.category}
|
|
</div>
|
|
{course.status === 'draft' && <div className="absolute top-3 right-3 bg-amber-500/20 backdrop-blur-md px-2.5 py-1 rounded-[980px] text-caption font-semibold uppercase tracking-caption text-amber-300 border border-amber-500/30">Rascunho</div>}
|
|
</div>
|
|
|
|
{/* Body */}
|
|
<div className="p-5">
|
|
<h3 className="font-display font-bold text-subheading text-white mb-2 line-clamp-1 group-hover:text-orange-400 transition-colors tracking-subheading leading-subheading">
|
|
{course.title}
|
|
</h3>
|
|
<p className="text-caption text-gray-400 line-clamp-2 leading-caption tracking-caption font-normal mb-4">
|
|
{course.description}
|
|
</p>
|
|
|
|
<div className="flex items-center gap-3 text-caption text-gray-400 pt-3 border-t border-white/5 font-semibold tracking-caption">
|
|
<span className="flex items-center gap-1 text-gray-300 font-semibold">
|
|
<Video className="w-3.5 h-3.5 text-orange-400" />
|
|
{course.lessons.length} Aulas
|
|
</span>
|
|
<span>•</span>
|
|
<span className="flex items-center gap-1 text-gray-300 font-semibold">
|
|
<Download className="w-3.5 h-3.5 text-emerald-400" />
|
|
{courseAttachments} Materiais
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="p-4 bg-black/40 border-t border-white/5 flex items-center justify-between gap-2">
|
|
<button
|
|
onClick={() => handleEdit(course)}
|
|
className="flex-1 flex items-center justify-center gap-1.5 py-2.5 rounded-[980px] bg-white/5 hover:bg-orange-500 hover:text-white text-body-sm font-semibold tracking-body-sm transition-colors text-gray-200"
|
|
>
|
|
<Edit2 className="w-3.5 h-3.5" />
|
|
Editar Conteúdo
|
|
</button>
|
|
|
|
<button onClick={() => void handleDuplicate(course.id)} className="p-2.5 rounded-[980px] bg-white/5 hover:bg-white/10 text-gray-400 hover:text-white transition-colors" title="Duplicar curso"><Copy className="w-4 h-4" /></button>
|
|
|
|
<button
|
|
onClick={() => handleDelete(course.id)}
|
|
className="p-2.5 rounded-[980px] bg-white/5 hover:bg-red-500/20 text-gray-400 hover:text-red-400 transition-colors"
|
|
title="Excluir Curso"
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
|
|
{/* Tab: Comments / Questions */}
|
|
{activeTab === 'comments' && (
|
|
<div className="space-y-4 max-w-4xl">
|
|
{allComments.length === 0 ? (
|
|
<div className="text-center py-20 text-gray-500">
|
|
<MessageSquare className="w-12 h-12 mx-auto mb-3 opacity-30 text-orange-400" />
|
|
<p className="text-body-sm font-normal text-gray-400">Nenhuma dúvida enviada por alunos até o momento.</p>
|
|
</div>
|
|
) : (
|
|
allComments.map(({ comment, courseTitle }) => (
|
|
<div key={comment.id} className="p-6 rounded-[8px] bg-zinc-900/60 border border-white/10 space-y-4 shadow-xl">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<span className="text-caption text-orange-400 font-semibold uppercase tracking-caption">{courseTitle}</span>
|
|
<h4 className="font-semibold text-white text-body-sm tracking-body-sm">{comment.user}</h4>
|
|
</div>
|
|
<span className="text-caption text-gray-500 font-mono">{comment.date}</span>
|
|
</div>
|
|
|
|
<p className="text-body-sm text-gray-300 bg-black/30 p-3.5 rounded-[8px] border border-white/5 leading-body-sm tracking-body-sm font-normal">
|
|
{comment.text}
|
|
</p>
|
|
|
|
{comment.reply ? (
|
|
<div className="pl-4 border-l-2 border-orange-500 bg-white/[0.02] p-3 rounded-r-[8px]">
|
|
<span className="text-caption font-semibold text-orange-400 uppercase tracking-caption">Sua Resposta ({comment.replyDate}):</span>
|
|
<p className="text-body-sm text-gray-200 mt-1 leading-body-sm">{comment.reply}</p>
|
|
</div>
|
|
) : (
|
|
<div>
|
|
{replyingTo === comment.id ? (
|
|
<div className="space-y-3 pt-2">
|
|
<textarea
|
|
value={replyText}
|
|
onChange={(e) => setReplyText(e.target.value)}
|
|
placeholder="Escreva a resposta para o aluno..."
|
|
className="w-full bg-black/60 border border-white/10 rounded-[8px] p-3 text-body-sm text-white focus:outline-none focus:border-orange-500/50 resize-none"
|
|
rows={3}
|
|
/>
|
|
<div className="flex justify-end gap-2">
|
|
<button
|
|
onClick={() => { setReplyingTo(null); setReplyText(''); }}
|
|
className="px-3.5 py-2 rounded-[980px] text-body-sm text-gray-400 hover:text-white font-semibold"
|
|
>
|
|
Cancelar
|
|
</button>
|
|
<button
|
|
onClick={() => handleSendReply(comment.id)}
|
|
className="px-5 py-2 rounded-[980px] bg-orange-500 hover:bg-orange-600 text-white text-body-sm font-semibold tracking-body-sm shadow-xl"
|
|
>
|
|
Enviar Resposta
|
|
</button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<button
|
|
onClick={() => setReplyingTo(comment.id)}
|
|
className="text-body-sm font-semibold text-orange-400 hover:text-orange-300 tracking-body-sm"
|
|
>
|
|
Responder Dúvida →
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
<button onClick={() => handleModerateComment(comment.id)} className="text-xs text-red-400 hover:text-red-300 font-semibold">Remover comentário</button>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Create/Edit Modal */}
|
|
<CourseModal
|
|
isOpen={isModalOpen}
|
|
onClose={() => setIsModalOpen(false)}
|
|
onSave={handleSave}
|
|
initialData={editingCourse}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|