@hed-hog/lms 0.0.364 → 0.0.366

package/hedhog/frontend/app/courses/[id]/structure/_components/course-export-sheet.tsx.ejs

@@ -0,0 +1,420 @@
+'use client';
+
+import { useState } from 'react';
+import { toast } from 'sonner';
+import {
+  AlignLeft,
+  AlignRight,
+  Download,
+  FileArchive,
+  Info,
+  Loader2,
+  Monitor,
+  Moon,
+  PieChart,
+  Sun,
+  Type,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
+import {
+  Sheet,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import {
+  ScormVisualSettings,
+  useCreateCourseExportMutation,
+} from '../_data/use-course-exports';
+
+// ── Color presets ────────────────────────────────────────────
+const PRESET_COLORS = [
+  '#2563eb',
+  '#4338ca',
+  '#7c3aed',
+  '#e11d48',
+  '#ea580c',
+  '#059669',
+  '#0891b2',
+  '#475569',
+];
+
+const DEFAULT_VISUAL: Required<ScormVisualSettings> = {
+  primaryColor: '#2563eb',
+  fontFamily: 'system',
+  fontSize: 'md',
+  sidebarWidth: 280,
+  sidebarPosition: 'left',
+  progressStyle: 'bar',
+  sidebarTheme: 'light',
+};
+
+// ── Segmented control ────────────────────────────────────────
+type SegOption<T extends string> = {
+  label: string;
+  value: T;
+  icon?: React.ReactNode;
+};
+
+function Seg<T extends string>({
+  value,
+  onChange,
+  options,
+}: {
+  value: T;
+  onChange: (v: T) => void;
+  options: SegOption<T>[];
+}) {
+  return (
+    <div className="flex rounded-md border overflow-hidden bg-background">
+      {options.map((opt, i) => (
+        <button
+          key={opt.value}
+          type="button"
+          onClick={() => onChange(opt.value)}
+          className={cn(
+            'flex items-center gap-1.5 flex-1 justify-center px-2.5 py-1.5 text-xs font-medium transition-colors',
+            i < options.length - 1 && 'border-r',
+            value === opt.value
+              ? 'bg-primary text-primary-foreground'
+              : 'text-muted-foreground hover:bg-muted/60',
+          )}
+        >
+          {opt.icon}
+          {opt.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+// ── Props ─────────────────────────────────────────────────────
+interface CourseExportSheetProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  courseId: string;
+  sessionCount: number;
+  videoLessonCount: number;
+  estimatedSizeMb?: number | null;
+}
+
+function formatMb(mb: number): string {
+  if (mb >= 1024) return `${(mb / 1024).toFixed(1)} GB`;
+  return `${mb.toFixed(0)} MB`;
+}
+
+// ── Component ─────────────────────────────────────────────────
+export function CourseExportSheet({
+  open,
+  onOpenChange,
+  courseId,
+  sessionCount,
+  videoLessonCount,
+  estimatedSizeMb,
+}: CourseExportSheetProps) {
+  const [visual, setVisual] = useState<Required<ScormVisualSettings>>(DEFAULT_VISUAL);
+  const createExport = useCreateCourseExportMutation(courseId);
+
+  const setV = <K extends keyof ScormVisualSettings>(
+    key: K,
+    value: Required<ScormVisualSettings>[K],
+  ) => setVisual((prev) => ({ ...prev, [key]: value }));
+
+  const handleConfirm = async () => {
+    try {
+      await createExport.mutateAsync({
+        format: 'scorm_1_2',
+        visualSettings: visual,
+      });
+      onOpenChange(false);
+      toast.success(
+        'Exportação SCORM 1.2 iniciada. Acompanhe o progresso nas notificações.',
+      );
+    } catch {
+      toast.error('Erro ao iniciar exportação. Tente novamente.');
+    }
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <ResizableSheetContent
+        sheetId="lms-course-export-scorm12-sheet"
+        defaultWidth={540}
+        minWidth={420}
+        maxWidth={780}
+      >
+        <SheetHeader>
+          <SheetTitle className="flex items-center gap-2">
+            <FileArchive className="size-4" />
+            Exportar para SCORM 1.2
+          </SheetTitle>
+          <SheetDescription>
+            Gera um pacote SCORM 1.2 com as aulas de vídeo do curso. O
+            processamento é feito em background.
+          </SheetDescription>
+        </SheetHeader>
+
+        <div className="flex flex-col gap-4 px-4 py-4">
+
+          {/* ── Stats ── */}
+          <div className="rounded-lg border bg-muted/30 p-3 flex flex-col gap-2">
+            <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+              Conteúdo a exportar
+            </p>
+            <div className="flex flex-wrap gap-2">
+              <Badge variant="secondary">
+                {sessionCount} {sessionCount === 1 ? 'sessão' : 'sessões'}
+              </Badge>
+              <Badge variant="secondary">
+                {videoLessonCount}{' '}
+                {videoLessonCount === 1 ? 'aula de vídeo' : 'aulas de vídeo'}
+              </Badge>
+              {estimatedSizeMb != null && (
+                <Badge variant="outline">~{formatMb(estimatedSizeMb)}</Badge>
+              )}
+            </div>
+            {videoLessonCount === 0 && (
+              <p className="text-xs text-destructive mt-1">
+                Este curso não possui aulas de vídeo. Não é possível gerar o
+                pacote SCORM.
+              </p>
+            )}
+          </div>
+
+          {estimatedSizeMb != null && estimatedSizeMb > 500 && (
+            <Alert>
+              <Info className="size-4" />
+              <AlertDescription className="text-xs">
+                O pacote gerado pode ter aproximadamente{' '}
+                <strong>{formatMb(estimatedSizeMb)}</strong>. Certifique-se que
+                seu LMS suporta pacotes desse tamanho.
+              </AlertDescription>
+            </Alert>
+          )}
+
+          {/* ── Appearance ── */}
+          <div className="rounded-lg border overflow-hidden">
+            <div className="flex items-center gap-2 px-3 py-2.5 border-b bg-muted/20">
+              <Monitor className="size-4 text-muted-foreground" />
+              <span className="text-sm font-medium">Personalizar aparência</span>
+            </div>
+
+            <div className="px-3 pt-3 pb-4 flex flex-col gap-4">
+
+              {/* Primary color */}
+              <div className="flex flex-col gap-2">
+                <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+                  Cor Principal
+                </Label>
+                <div className="flex flex-wrap items-center gap-2">
+                  {PRESET_COLORS.map((c) => (
+                    <button
+                      key={c}
+                      type="button"
+                      onClick={() => setV('primaryColor', c)}
+                      title={c}
+                      className={cn(
+                        'w-7 h-7 rounded-full border-2 transition-all hover:scale-110 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                        visual.primaryColor === c
+                          ? 'border-foreground ring-2 ring-offset-1 ring-foreground/30 scale-110'
+                          : 'border-transparent',
+                      )}
+                      style={{ background: c }}
+                    />
+                  ))}
+                  {/* Custom color picker */}
+                  <label className="cursor-pointer" title="Cor personalizada">
+                    <input
+                      type="color"
+                      value={visual.primaryColor}
+                      onChange={(e) => setV('primaryColor', e.target.value)}
+                      className="sr-only"
+                    />
+                    <div
+                      className={cn(
+                        'w-7 h-7 rounded-full border-2 border-dashed transition-all hover:scale-110',
+                        !PRESET_COLORS.includes(visual.primaryColor)
+                          ? 'border-foreground ring-2 ring-offset-1 ring-foreground/30 scale-110'
+                          : 'border-muted-foreground/50',
+                      )}
+                      style={{ background: visual.primaryColor }}
+                    />
+                  </label>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <div
+                    className="w-3 h-3 rounded-sm border border-border/60 shrink-0"
+                    style={{ background: visual.primaryColor }}
+                  />
+                  <span className="text-xs font-mono text-muted-foreground">
+                    {visual.primaryColor.toUpperCase()}
+                  </span>
+                </div>
+              </div>
+
+              {/* Font family */}
+              <div className="flex flex-col gap-2">
+                <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide flex items-center gap-1.5">
+                  <Type className="size-3" />
+                  Fonte
+                </Label>
+                <Seg
+                  value={visual.fontFamily as 'system' | 'humanist' | 'serif' | 'mono'}
+                  onChange={(v) => setV('fontFamily', v)}
+                  options={[
+                    { label: 'Sistema', value: 'system' as const },
+                    { label: 'Humanista', value: 'humanist' as const },
+                    { label: 'Serifada', value: 'serif' as const },
+                    { label: 'Mono', value: 'mono' as const },
+                  ]}
+                />
+              </div>
+
+              {/* Font size + Sidebar width */}
+              <div className="grid grid-cols-2 gap-3">
+                <div className="flex flex-col gap-2">
+                  <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+                    Tamanho da fonte
+                  </Label>
+                  <Seg
+                    value={visual.fontSize as 'sm' | 'md' | 'lg'}
+                    onChange={(v) => setV('fontSize', v)}
+                    options={[
+                      { label: 'Peq.', value: 'sm' as const },
+                      { label: 'Méd.', value: 'md' as const },
+                      { label: 'Grd.', value: 'lg' as const },
+                    ]}
+                  />
+                </div>
+                <div className="flex flex-col gap-2">
+                  <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+                    Largura do painel —{' '}
+                    <span className="text-foreground font-normal normal-case">
+                      {visual.sidebarWidth}px
+                    </span>
+                  </Label>
+                  <div className="flex items-center gap-2 pt-1">
+                    <span className="text-xs text-muted-foreground">200</span>
+                    <input
+                      type="range"
+                      min={200}
+                      max={420}
+                      step={10}
+                      value={visual.sidebarWidth}
+                      onChange={(e) => setV('sidebarWidth', Number(e.target.value))}
+                      className="flex-1 h-1.5 rounded-full cursor-pointer accent-primary"
+                    />
+                    <span className="text-xs text-muted-foreground">420</span>
+                  </div>
+                </div>
+              </div>
+
+              {/* Sidebar position + Progress style */}
+              <div className="grid grid-cols-2 gap-3">
+                <div className="flex flex-col gap-2">
+                  <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+                    Posição do painel
+                  </Label>
+                  <Seg
+                    value={visual.sidebarPosition as 'left' | 'right'}
+                    onChange={(v) => setV('sidebarPosition', v)}
+                    options={[
+                      {
+                        label: 'Esq.',
+                        value: 'left' as const,
+                        icon: <AlignLeft className="size-3" />,
+                      },
+                      {
+                        label: 'Dir.',
+                        value: 'right' as const,
+                        icon: <AlignRight className="size-3" />,
+                      },
+                    ]}
+                  />
+                </div>
+                <div className="flex flex-col gap-2">
+                  <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+                    Indicador de progresso
+                  </Label>
+                  <Seg
+                    value={visual.progressStyle as 'bar' | 'pie'}
+                    onChange={(v) => setV('progressStyle', v)}
+                    options={[
+                      { label: 'Barra', value: 'bar' as const },
+                      {
+                        label: 'Pizza',
+                        value: 'pie' as const,
+                        icon: <PieChart className="size-3" />,
+                      },
+                    ]}
+                  />
+                </div>
+              </div>
+
+              {/* Sidebar theme */}
+              <div className="flex flex-col gap-2">
+                <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+                  Tema do painel
+                </Label>
+                <Seg
+                  value={visual.sidebarTheme as 'light' | 'dark'}
+                  onChange={(v) => setV('sidebarTheme', v)}
+                  options={[
+                    {
+                      label: 'Claro',
+                      value: 'light' as const,
+                      icon: <Sun className="size-3" />,
+                    },
+                    {
+                      label: 'Escuro',
+                      value: 'dark' as const,
+                      icon: <Moon className="size-3" />,
+                    },
+                  ]}
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* ── Info ── */}
+          <div className="rounded-lg border bg-muted/20 p-3">
+            <p className="text-xs text-muted-foreground">
+              <strong>Padrão SCORM 1.2</strong> — Compatível com a maioria dos
+              sistemas de gestão de aprendizagem (LMS). Os arquivos de vídeo são
+              incluídos no pacote e o progresso de cada aula é rastreado
+              automaticamente.
+            </p>
+          </div>
+        </div>
+
+        <SheetFooter>
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            disabled={createExport.isPending}
+          >
+            Cancelar
+          </Button>
+          <Button
+            onClick={handleConfirm}
+            disabled={createExport.isPending || videoLessonCount === 0}
+            className="gap-2"
+          >
+            {createExport.isPending ? (
+              <Loader2 className="size-4 animate-spin" />
+            ) : (
+              <Download className="size-4" />
+            )}
+            Exportar SCORM 1.2
+          </Button>
+        </SheetFooter>
+      </ResizableSheetContent>
+    </Sheet>
+  );
+}