@hed-hog/lms 0.0.306 → 0.0.310

package/hedhog/frontend/app/courses/[id]/page.tsx.ejs

@@ -1,427 +1,78 @@
 'use client';
 
-import { createDefaultTemplate } from '@/app/(app)/(libraries)/lms/_lib/editor/types';
-import { CreateLmsPersonSheet } from '@/app/(app)/(libraries)/lms/_components/create-lms-person-sheet';
-import { EmptyState, Page, PageHeader } from '@/components/entity-list';
+import { use, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { Page, PageHeader } from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import { Form } from '@/components/ui/form';
-import { Skeleton } from '@/components/ui/skeleton';
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from '@/components/ui/resizable';
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { useIsMobile } from '@/hooks/use-mobile';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { AlertTriangle, BookOpen, Loader2, Save } from 'lucide-react';
-import { useTranslations } from 'next-intl';
+import { useIsMutating } from '@tanstack/react-query';
+import {
+  AlertCircle,
+  BookOpen,
+  Layers,
+  Menu,
+  RefreshCw,
+  Video,
+} from 'lucide-react';
 import { useRouter } from 'next/navigation';
-import { type ChangeEvent, use, useEffect, useMemo, useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { toast } from 'sonner';
-import { z } from 'zod';
-
-import { CourseCertificateCard } from './_components/CourseCertificateCard';
-import { CourseClassificationCard } from './_components/CourseClassificationCard';
-import { CourseContentCard } from './_components/CourseContentCard';
-import { CourseDangerZoneCard } from './_components/CourseDangerZoneCard';
-import { CourseFlagsCard } from './_components/CourseFlagsCard';
-import { CourseMainInfoCard } from './_components/CourseMainInfoCard';
-import { CourseMediaCard } from './_components/CourseMediaCard';
-import { CourseRelationsCard } from './_components/CourseRelationsCard';
-import { CourseSummaryCard } from './_components/CourseSummaryCard';
-import type {
-  CourseEditFormValues,
-  PickerOption,
-} from './_components/course-edit-types';
-
-const API_COURSES_CACHE_KEY = 'lms:courses:api-cache';
-
-type ApiCourseDetail = {
-  id: number;
-  code: string;
-  slug: string;
-  title: string;
-  description: string;
-  primaryColor?: string | null;
-  secondaryColor?: string | null;
-  level: 'beginner' | 'intermediate' | 'advanced';
-  status: 'draft' | 'published' | 'archived';
-  offeringType: 'scheduled' | 'on_demand' | 'blended';
-  categories: string[];
-  isFeatured: boolean;
-  hasCertificate: boolean;
-  isListed: boolean;
-  enrollmentCount: number;
-  requirements: string;
-  objectives: string;
-  targetAudience: string;
-  lessonCount: number;
-  sessionCount: number;
-  averageCompletion: number;
-  certificatesIssued: number;
-  instructorIds?: number[];
-  instructors?: Array<{
-    id: number;
-    name: string;
-    avatarId: number | null;
-  }>;
-  logoFileId?: number | null;
-  logoFilename?: string | null;
-  bannerFileId?: number | null;
-  bannerFilename?: string | null;
-  certificateModel?: string | null;
-};
-
-type ApiCategory = {
-  id: number;
-  slug: string;
-  name: string;
-};
-
-type ApiCategoryList = {
-  data: ApiCategory[];
-  total: number;
-  page: number;
-  pageSize: number;
-};
-
-type ApiInstructor = {
-  id: number;
-  personId: number;
-  name: string;
-  avatarId?: number | null;
-  qualificationSlugs: string[];
-};
-
-type ApiInstructorList = {
-  data: ApiInstructor[];
-  total: number;
-  page: number;
-  pageSize: number;
-};
-
-type ApiCertificateTemplate = {
-  id: number;
-  name: string;
-  slug?: string | null;
-  description?: string | null;
-  status?: 'draft' | 'active' | 'inactive';
-};
-
-type ApiCertificateTemplateList = {
-  data: ApiCertificateTemplate[];
-  total: number;
-  page: number;
-  pageSize: number;
-  lastPage?: number;
-};
-
-type Locale = {
-  id?: number;
-  code: string;
-  name: string;
-};
-
-type CursoDetailView = {
-  id: number;
-  codigo: string;
-  nomeInterno: string;
-  tituloComercial: string;
-  descricaoPublica: string;
-  nivel: CourseEditFormValues['nivel'];
-  status: CourseEditFormValues['status'];
-  tipoOferta: CourseEditFormValues['tipoOferta'];
-  categorias: string[];
-  primaryColor: string;
-  secondaryColor: string;
-  instrutores: string[];
-  preRequisitos: string;
-  modeloCertificado: string;
-  certificado: boolean;
-  destaque: boolean;
-  listado: boolean;
-  objetivos: string;
-  publicoAlvo: string;
-  totalAlunos: number;
-  conclusaoMedia: number;
-  totalAulas: number;
-  totalSessoes: number;
-  certificadosEmitidos: number;
-};
-
-function getCursoEditSchema(t: (key: string) => string) {
-  return z.object({
-    codigo: z
-      .string()
-      .trim()
-      .min(2, t('validation.codeMin'))
-      .max(16, t('validation.codeMax'))
-      .regex(/^[A-Za-z0-9-]+$/, t('validation.codeFormat')),
-    nomeInterno: z.string().trim().min(3, t('validation.internalNameMin')),
-    tituloComercial: z.string().trim().min(3, t('validation.titleMin')),
-    descricaoPublica: z.string().trim().min(10, t('validation.descriptionMin')),
-    objetivos: z.string().optional(),
-    publicoAlvo: z.string().optional(),
-    nivel: z.enum(['iniciante', 'intermediario', 'avancado']),
-    status: z.enum(['ativo', 'rascunho', 'arquivado']),
-    tipoOferta: z.enum(['agendado', 'sob_demanda', 'hibrido']),
-    categorias: z.array(z.string()).min(1, t('validation.categoryRequired')),
-    primaryColor: z.string().regex(/^#([0-9A-Fa-f]{6})$/, t('validation.colorInvalid')),
-    secondaryColor: z.string().regex(/^#([0-9A-Fa-f]{6})$/, t('validation.colorInvalid')),
-    instrutores: z.array(z.string()).optional(),
-    preRequisitos: z.string().optional(),
-    modeloCertificado: z.string().optional(),
-    certificado: z.boolean().default(false),
-    destaque: z.boolean().default(false),
-    listado: z.boolean().default(false),
-  });
-}
-
-function getNiveis(t: (key: string) => string) {
-  return [
-    { value: 'iniciante', label: t('levels.beginner') },
-    { value: 'intermediario', label: t('levels.intermediate') },
-    { value: 'avancado', label: t('levels.advanced') },
-  ];
-}
-
-function getStatusOptions(t: (key: string) => string) {
-  return [
-    { value: 'ativo', label: t('status.active') },
-    { value: 'rascunho', label: t('status.draft') },
-    { value: 'arquivado', label: t('status.archived') },
-  ];
-}
-
-function getOfferingTypeOptions(t: (key: string) => string) {
-  return [
-    {
-      value: 'sob_demanda',
-      label: t('offeringType.options.onDemand.label'),
-      description: t('offeringType.options.onDemand.description'),
-    },
-    {
-      value: 'agendado',
-      label: t('offeringType.options.scheduled.label'),
-      description: t('offeringType.options.scheduled.description'),
-    },
-    {
-      value: 'hibrido',
-      label: t('offeringType.options.blended.label'),
-      description: t('offeringType.options.blended.description'),
-    },
-  ] as const;
-}
-
-function normalizeEnumValue(value?: string | null) {
-  return String(value ?? '')
-    .trim()
-    .normalize('NFD')
-    .replace(/[\u0300-\u036f]/g, '')
-    .toLowerCase();
-}
-
-function toPtLevel(level: ApiCourseDetail['level']): CourseEditFormValues['nivel'] {
-  const normalized = normalizeEnumValue(level);
-  if (normalized === 'beginner' || normalized === 'iniciante') return 'iniciante';
-  if (normalized === 'intermediate' || normalized === 'intermediario') {
-    return 'intermediario';
-  }
-  return 'avancado';
-}
-
-function toApiLevel(level: CourseEditFormValues['nivel']) {
-  if (level === 'iniciante') return 'beginner';
-  if (level === 'intermediario') return 'intermediate';
-  return 'advanced';
-}
-
-function toPtStatus(status: ApiCourseDetail['status']): CourseEditFormValues['status'] {
-  const normalized = normalizeEnumValue(status);
-  if (normalized === 'published' || normalized === 'active' || normalized === 'ativo') {
-    return 'ativo';
-  }
-  if (normalized === 'archived' || normalized === 'arquivado') {
-    return 'arquivado';
-  }
-  return 'rascunho';
-}
-
-function toApiStatus(status: CourseEditFormValues['status']) {
-  if (status === 'ativo') return 'published';
-  if (status === 'arquivado') return 'archived';
-  return 'draft';
-}
-
-function toPtOfferingType(
-  value: ApiCourseDetail['offeringType']
-): CourseEditFormValues['tipoOferta'] {
-  const normalized = normalizeEnumValue(value);
-  if (normalized === 'scheduled' || normalized === 'agendado') {
-    return 'agendado';
-  }
-  if (normalized === 'blended' || normalized === 'hibrido') {
-    return 'hibrido';
-  }
-  return 'sob_demanda';
-}
-
-function toApiOfferingType(value: CourseEditFormValues['tipoOferta']) {
-  if (value === 'agendado') return 'scheduled';
-  if (value === 'hibrido') return 'blended';
-  return 'on_demand';
-}
-
-function getContrastColor(hex: string) {
-  const cleaned = hex.replace('#', '');
-  if (cleaned.length !== 6) return '#FFFFFF';
-
-  const r = parseInt(cleaned.slice(0, 2), 16);
-  const g = parseInt(cleaned.slice(2, 4), 16);
-  const b = parseInt(cleaned.slice(4, 6), 16);
-  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
 
-  return luminance > 0.6 ? '#111827' : '#FFFFFF';
-}
-
-function slugify(value: string) {
-  return value
-    .trim()
-    .toLowerCase()
-    .normalize('NFD')
-    .replace(/[\u0300-\u036f]/g, '')
-    .replace(/[^a-z0-9]+/g, '-')
-    .replace(/^-+|-+$/g, '');
-}
-
-function clearCoursesListCache() {
-  if (typeof window === 'undefined') return;
-  window.localStorage.removeItem(API_COURSES_CACHE_KEY);
-}
-
-function getInstructorAvatarUrl(avatarId?: number | null) {
-  return typeof avatarId === 'number' && avatarId > 0
-    ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${avatarId}`
-    : null;
-}
-
-function mapApiCourseToView(course: ApiCourseDetail): CursoDetailView {
-  return {
-    id: course.id,
-    codigo: course.code,
-    nomeInterno: course.slug,
-    tituloComercial: course.title,
-    descricaoPublica: course.description ?? '',
-    nivel: toPtLevel(course.level),
-    status: toPtStatus(course.status),
-    tipoOferta: toPtOfferingType(course.offeringType),
-    categorias: course.categories ?? [],
-    primaryColor: course.primaryColor || '#1D4ED8',
-    secondaryColor: course.secondaryColor || '#111827',
-    instrutores: (course.instructorIds ?? []).map(String),
-    preRequisitos: course.requirements ?? '',
-    modeloCertificado: course.certificateModel ?? '',
-    certificado: course.hasCertificate ?? false,
-    destaque: course.isFeatured ?? false,
-    listado: course.isListed ?? false,
-    objetivos: course.objectives ?? '',
-    publicoAlvo: course.targetAudience ?? '',
-    totalAlunos: course.enrollmentCount ?? 0,
-    conclusaoMedia: course.averageCompletion ?? 0,
-    totalAulas: course.lessonCount ?? 0,
-    totalSessoes: course.sessionCount ?? 0,
-    certificadosEmitidos: course.certificatesIssued ?? 0,
-  };
+import { ConfirmDialog } from './structure/_components/confirm-dialog';
+import { CourseTreePanel } from './structure/_components/course-tree-panel';
+import { CourseTreeSkeleton } from './structure/_components/course-tree-skeleton';
+import { DetailPanel } from './structure/_components/detail-panel';
+import type { SearchFilterHandle } from './structure/_components/search-filter';
+import { SessionPickerDialog } from './structure/_components/session-picker-dialog';
+import {
+  ShortcutsHelp,
+  ShortcutsHelpTrigger,
+} from './structure/_components/shortcuts-help';
+import { useStructureStore } from './structure/_components/store';
+import { TreeDisplaySettingsPopover } from './structure/_components/tree-display-settings-popover';
+import { useCourseStructureShortcuts } from './structure/_components/use-course-structure-shortcuts';
+import {
+  useDuplicateLessonMutation,
+  useDuplicateSessionMutation,
+  usePasteLessonsMutation,
+  usePasteSessionsMutation,
+} from './structure/_data/use-course-structure-mutations';
+import { useCourseStructureQuery } from './structure/_data/use-course-structure-query';
+
+interface Props {
+  params: Promise<{ id: string }>;
 }
 
-function LoadingSkeleton() {
-  return (
-    <div className="space-y-6">
-      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
-        {Array.from({ length: 4 }).map((_, index) => (
-          <Skeleton key={index} className="h-24 rounded-2xl" />
-        ))}
-      </div>
-
-      <div className="grid gap-6 xl:grid-cols-[minmax(0,2fr)_minmax(320px,1fr)]">
-        <div className="space-y-6">
-          {Array.from({ length: 4 }).map((_, index) => (
-            <Skeleton key={index} className="h-64 rounded-2xl" />
-          ))}
-        </div>
-        <div className="space-y-6">
-          {Array.from({ length: 4 }).map((_, index) => (
-            <Skeleton key={index} className="h-56 rounded-2xl" />
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}
+type ApiCourseSummary = {
+  name?: string;
+  enrollmentCount?: number;
+  averageCompletion?: number;
+  lessonCount?: number;
+  sessionCount?: number;
+};
 
-export default function CursoEditPage({
-  params,
-}: {
-  params: Promise<{ id: string }>;
-}) {
+export default function CourseStructurePage({ params }: Props) {
   const { id } = use(params);
+  const isMobile = useIsMobile();
   const router = useRouter();
-  const t = useTranslations('lms.CursoEditPage');
-  const { request, currentLocaleCode, locales } = useApp();
-
-  const [saving, setSaving] = useState(false);
-  const [deleting, setDeleting] = useState(false);
-  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
-  const [instructorSheetOpen, setInstructorSheetOpen] = useState(false);
-  const [logoPreview, setLogoPreview] = useState<string | null>(null);
-  const [bannerPreview, setBannerPreview] = useState<string | null>(null);
-  const [uploadingLogo, setUploadingLogo] = useState(false);
-  const [uploadingBanner, setUploadingBanner] = useState(false);
-  const [createdCategoryOptions, setCreatedCategoryOptions] = useState<PickerOption[]>([]);
-  const [createdTemplateOptions, setCreatedTemplateOptions] = useState<PickerOption[]>([]);
-  const [persistedCertificateModel, setPersistedCertificateModel] = useState('');
-
-  const form = useForm<CourseEditFormValues>({
-    resolver: zodResolver(getCursoEditSchema(t)),
-    defaultValues: {
-      codigo: '',
-      nomeInterno: '',
-      tituloComercial: '',
-      descricaoPublica: '',
-      objetivos: '',
-      publicoAlvo: '',
-      nivel: 'iniciante',
-      status: 'rascunho',
-      tipoOferta: 'sob_demanda',
-      categorias: [],
-      primaryColor: '#1D4ED8',
-      secondaryColor: '#111827',
-      instrutores: [],
-      preRequisitos: '',
-      modeloCertificado: '',
-      certificado: false,
-      destaque: false,
-      listado: false,
-    },
-  });
-
-  const NIVEIS = useMemo(() => getNiveis(t), [t]);
-  const STATUS_OPTIONS = useMemo(() => getStatusOptions(t), [t]);
-  const OFFERING_TYPE_OPTIONS = useMemo(() => getOfferingTypeOptions(t), [t]);
+  const { request } = useApp();
 
-  const {
-    data: apiCourse,
-    isLoading,
-    isFetching,
-    refetch: refetchCourse,
-  } = useQuery<ApiCourseDetail>({
+  const { data: courseSummary } = useQuery<ApiCourseSummary>({
     queryKey: ['lms-course-detail', id],
+    enabled: Boolean(id),
     queryFn: async () => {
-      const response = await request<ApiCourseDetail>({
+      const response = await request<ApiCourseSummary>({
         url: `/lms/courses/${id}`,
         method: 'GET',
       });
@@ -429,682 +80,310 @@ export default function CursoEditPage({
     },
   });
 
-  const { data: categoryListData, refetch: refetchCategoryOptions } =
-    useQuery<ApiCategoryList>({
-      queryKey: ['lms-edit-course-categories'],
-      queryFn: async () => {
-        const response = await request<ApiCategoryList | ApiCategory[]>({
-          url: '/category',
-          method: 'GET',
-          params: {
-            page: 1,
-            pageSize: 500,
-            status: 'all',
-          },
-        });
-
-        const payload = response.data;
-        if (Array.isArray(payload)) {
-          return {
-            data: payload,
-            total: payload.length,
-            page: 1,
-            pageSize: payload.length,
-          };
-        }
-
-        return payload;
-      },
-      initialData: {
-        data: [],
-        total: 0,
-        page: 1,
-        pageSize: 500,
-      },
-    });
-
-  const { data: instructorListData, refetch: refetchInstructorOptions } =
-    useQuery<ApiInstructorList>({
-      queryKey: ['lms-course-edit-instructors'],
-      queryFn: async () => {
-        const response = await request<ApiInstructorList | ApiInstructor[]>({
-          url: '/lms/instructors',
-          method: 'GET',
-          params: {
-            page: 1,
-            pageSize: 500,
-            qualificationSlugs: ['course-lessons'],
-          },
-        });
-
-        const payload = response.data;
-        if (Array.isArray(payload)) {
-          return {
-            data: payload,
-            total: payload.length,
-            page: 1,
-            pageSize: payload.length,
-          };
-        }
-
-        return payload;
-      },
-      initialData: {
-        data: [],
-        total: 0,
-        page: 1,
-        pageSize: 500,
-      },
-    });
-
+  // ── API: load course structure from the real backend ─────────────────────
   const {
-    data: certificateTemplateData,
-    refetch: refetchCertificateTemplates,
-  } = useQuery<ApiCertificateTemplateList>({
-    queryKey: ['lms-course-certificate-templates'],
-    queryFn: async () => {
-      const response = await request<
-        ApiCertificateTemplateList | ApiCertificateTemplate[]
-      >({
-        url: '/lms/certificates/templates',
-        method: 'GET',
-        params: {
-          page: 1,
-          pageSize: 100,
-        },
-      });
-
-      const payload = response.data;
-      if (Array.isArray(payload)) {
-        return {
-          data: payload,
-          total: payload.length,
-          page: 1,
-          pageSize: payload.length,
-          lastPage: 1,
-        };
-      }
-
-      return payload;
-    },
-    initialData: {
-      data: [],
-      total: 0,
-      page: 1,
-      pageSize: 100,
-      lastPage: 1,
-    },
-  });
-
-  useEffect(() => {
-    void refetchCourse();
-  }, [refetchCourse]);
-
-  const categoryOptions = useMemo(() => {
-    const serverOptions = (categoryListData?.data ?? [])
-      .filter((item) => !!item.slug)
-      .map((item) => ({
-        value: item.slug,
-        label: item.name || item.slug,
-      }));
-
-    const merged = [...serverOptions, ...createdCategoryOptions];
-    return merged.filter(
-      (item, index, array) =>
-        array.findIndex((candidate) => candidate.value === item.value) === index
-    );
-  }, [categoryListData, createdCategoryOptions]);
-
-  const instructorOptions = useMemo(() => {
-    const fromCourse = (apiCourse?.instructors ?? []).map((item) => ({
-      value: String(item.id),
-      label: item.name,
-      avatarUrl: getInstructorAvatarUrl(item.avatarId),
-      meta: `ID ${item.id}`,
-    }));
-
-    const fromDirectory = (instructorListData?.data ?? []).map((item) => ({
-      value: String(item.id),
-      label: item.name,
-      avatarUrl: getInstructorAvatarUrl(item.avatarId),
-      meta: item.qualificationSlugs?.join(' • ') || `ID ${item.id}`,
-    }));
-
-    const merged = [...fromCourse, ...fromDirectory];
-    return merged.filter(
-      (item, index, array) =>
-        array.findIndex((candidate) => candidate.value === item.value) === index
-    );
-  }, [apiCourse?.instructors, instructorListData]);
-
-  const certificateOptions = useMemo(() => {
-    const serverOptions = (certificateTemplateData?.data ?? []).map((item) => ({
-      value: item.slug || String(item.id),
-      label: item.name,
-      description: item.description || null,
-      meta: item.status ? `Status: ${item.status}` : null,
-    }));
+    course: apiCourse,
+    sessions: apiSessions,
+    lessons: apiLessons,
+    isLoading,
+    isError,
+    refetch,
+  } = useCourseStructureQuery(id);
 
-    const merged = [...serverOptions, ...createdTemplateOptions];
-    return merged.filter(
-      (item, index, array) =>
-        array.findIndex((candidate) => candidate.value === item.value) === index
-    );
-  }, [certificateTemplateData, createdTemplateOptions]);
-
-  const cursoData = useMemo(
-    () => (apiCourse ? mapApiCourseToView(apiCourse) : null),
-    [apiCourse]
-  );
+  const setStructureFromApi = useStructureStore((s) => s.setStructureFromApi);
+  const setCourseId = useStructureStore((s) => s.setCourseId);
 
   useEffect(() => {
-    if (!apiCourse) return;
-
-    const nextCertificateModel =
-      apiCourse.certificateModel ?? persistedCertificateModel ?? '';
-
-    form.reset({
-      codigo: apiCourse.code,
-      nomeInterno: apiCourse.slug,
-      tituloComercial: apiCourse.title,
-      descricaoPublica: apiCourse.description ?? '',
-      objetivos: apiCourse.objectives ?? '',
-      publicoAlvo: apiCourse.targetAudience ?? '',
-      nivel: toPtLevel(apiCourse.level),
-      status: toPtStatus(apiCourse.status),
-      tipoOferta: toPtOfferingType(apiCourse.offeringType),
-      categorias: apiCourse.categories ?? [],
-      primaryColor: apiCourse.primaryColor || '#1D4ED8',
-      secondaryColor: apiCourse.secondaryColor || '#111827',
-      instrutores: (apiCourse.instructorIds ?? []).map(String),
-      preRequisitos: apiCourse.requirements ?? '',
-      modeloCertificado: nextCertificateModel,
-      certificado: apiCourse.hasCertificate ?? false,
-      destaque: apiCourse.isFeatured ?? false,
-      listado: apiCourse.isListed ?? false,
-    });
+    setCourseId(id);
+  }, [id, setCourseId]);
 
-    setPersistedCertificateModel(nextCertificateModel);
-  }, [apiCourse, form, persistedCertificateModel]);
+  const isMutating = useIsMutating();
 
   useEffect(() => {
-    const previews = [
-      { fileId: apiCourse?.logoFileId, setter: setLogoPreview },
-      { fileId: apiCourse?.bannerFileId, setter: setBannerPreview },
-    ];
-
-    previews.forEach(({ fileId, setter }) => {
-      if (!fileId) return;
-
-      void (async () => {
-        try {
-          const response = await request<{ url?: string }>({
-            url: `/file/open/${fileId}`,
-            method: 'PUT',
+    if (isMutating > 0) return;
+    if (
+      !isLoading &&
+      !isError &&
+      (apiSessions.length > 0 || apiLessons.length > 0 || apiCourse)
+    ) {
+      setStructureFromApi({
+        course:
+          apiCourse && courseSummary?.name
+            ? { ...apiCourse, name: courseSummary.name }
+            : apiCourse,
+        sessions: apiSessions,
+        lessons: apiLessons,
+      });
+    }
+  }, [
+    apiCourse,
+    apiSessions,
+    apiLessons,
+    isLoading,
+    isError,
+    isMutating,
+    setStructureFromApi,
+  ]);
+
+  const course = useStructureStore((s) => s.course);
+  const sessions = useStructureStore((s) => s.sessions);
+  const lessons = useStructureStore((s) => s.lessons);
+
+  const mobileSheetOpen = useStructureStore((s) => s.mobileSheetOpen);
+  const setMobileSheetOpen = useStructureStore((s) => s.setMobileSheetOpen);
+
+  const searchRef = useRef<SearchFilterHandle>(null);
+  const detailPanelRef = useRef<HTMLDivElement>(null);
+  const [shortcutsOpen, setShortcutsOpen] = useState(false);
+
+  const duplicateLessonMutation = useDuplicateLessonMutation();
+  const duplicateSessionMutation = useDuplicateSessionMutation();
+  const pasteLessonsMutation = usePasteLessonsMutation();
+  const pasteSessionsMutation = usePasteSessionsMutation();
+
+  const activeItemId = useStructureStore((s) => s.activeItemId);
+  const activeItemType = useStructureStore((s) => s.activeItemType);
+  const allLessons = useStructureStore((s) => s.lessons);
+  const copiedType = useStructureStore((s) => s.copiedType);
+  const copiedIds = useStructureStore((s) => s.copiedIds);
+
+  useCourseStructureShortcuts({
+    searchRef,
+    detailPanelRef,
+    onToggleHelp: useCallback(() => setShortcutsOpen((v) => !v), []),
+    onDuplicate: useCallback(() => {
+      if (!activeItemId) return;
+      if (activeItemType === 'lesson') {
+        const lesson = allLessons.find((l) => l.id === activeItemId);
+        if (lesson) {
+          duplicateLessonMutation.mutate({
+            sessionId: lesson.sessionId,
+            lessonId: lesson.id,
           });
-
-          if (response?.data?.url) {
-            setter(response.data.url);
-          }
-        } catch {
-          // Ignore preview failures and keep file actions available.
         }
-      })();
-    });
-  }, [apiCourse?.bannerFileId, apiCourse?.logoFileId, request]);
-
-  async function openUploadedFile(fileId?: number | null) {
-    if (!fileId) return;
-
-    try {
-      const response = await request<{ url?: string }>({
-        url: `/file/open/${fileId}`,
-        method: 'PUT',
-      });
-
-      const url = response?.data?.url;
-      if (!url) {
-        toast.error(t('toasts.openFileError'));
-        return;
+      } else if (activeItemType === 'session') {
+        duplicateSessionMutation.mutate({ sessionId: activeItemId });
       }
-
-      window.open(url, '_blank', 'noopener,noreferrer');
-    } catch {
-      toast.error(t('toasts.openFileError'));
-    }
-  }
-
-  async function handleFileSelect(
-    event: ChangeEvent<HTMLInputElement>,
-    setter: (value: string | null) => void,
-    type: 'logo' | 'banner'
-  ) {
-    const file = event.target.files?.[0];
-    if (!file) return;
-
-    if (!file.type.startsWith('image/')) {
-      toast.error(t('toasts.onlyImages'));
-      return;
-    }
-
-    if (file.size > 5 * 1024 * 1024) {
-      toast.error(t('toasts.maxSize'));
-      return;
-    }
-
-    const objectUrl = URL.createObjectURL(file);
-    setter(objectUrl);
-    type === 'logo' ? setUploadingLogo(true) : setUploadingBanner(true);
-
-    try {
-      const formData = new FormData();
-      formData.append('file', file);
-      formData.append('destination', 'lms/courses');
-
-      const uploadResponse = await request<{ id: number; filename: string }>({
-        url: '/file',
-        method: 'POST',
-        data: formData,
-        headers: {
-          'Content-Type': 'multipart/form-data',
-        },
-      });
-
-      const fileId = uploadResponse?.data?.id;
-      if (!fileId) {
-        throw new Error('invalid file id');
+    }, [
+      activeItemId,
+      activeItemType,
+      allLessons,
+      duplicateLessonMutation,
+      duplicateSessionMutation,
+    ]),
+    onPaste: useCallback(() => {
+      if (!copiedIds.length) return;
+      if (copiedType === 'lesson') {
+        let targetSessionId: string | null = null;
+        if (activeItemType === 'session') {
+          targetSessionId = activeItemId;
+        } else if (activeItemType === 'lesson') {
+          const lesson = allLessons.find((l) => l.id === activeItemId);
+          targetSessionId = lesson?.sessionId ?? null;
+        }
+        if (targetSessionId) {
+          pasteLessonsMutation.mutate({
+            targetSessionId,
+            lessonIds: copiedIds,
+          });
+        }
+      } else if (copiedType === 'session') {
+        pasteSessionsMutation.mutate({ sessionIds: copiedIds });
       }
+    }, [
+      activeItemId,
+      activeItemType,
+      allLessons,
+      copiedIds,
+      copiedType,
+      pasteLessonsMutation,
+      pasteSessionsMutation,
+    ]),
+  });
 
-      await request({
-        url: `/lms/courses/${id}`,
-        method: 'PATCH',
-        data: type === 'logo' ? { logoFileId: fileId } : { bannerFileId: fileId },
-      });
-
-      clearCoursesListCache();
-      await refetchCourse();
-      toast.success(t('toasts.fileSelected', { name: file.name }));
-    } catch {
-      toast.error(t('toasts.fileUploadError'));
-    } finally {
-      type === 'logo' ? setUploadingLogo(false) : setUploadingBanner(false);
-    }
-  }
-
-  async function handleCreateCategory(values: Record<string, string>) {
-    const name = String(values.name ?? '').trim();
-    const slug = slugify(values.slug || values.name || '');
-
-    if (!name || !slug) {
-      toast.error('Informe nome e slug para criar a categoria.');
-      return null;
-    }
-
-    const localeCode =
-      currentLocaleCode || (locales?.[0] as Locale | undefined)?.code || 'pt-BR';
-
-    try {
-      await request({
-        url: '/category',
-        method: 'POST',
-        data: {
-          locale: {
-            [localeCode]: {
-              name,
-            },
-          },
-          slug,
-          category_id: null,
-          color: '#000000',
-          icon: '',
-          status: 'active',
-        },
-      });
-
-      const option = { value: slug, label: name };
-      setCreatedCategoryOptions((current) => [option, ...current]);
-      await refetchCategoryOptions();
-      toast.success('Categoria criada com sucesso.');
-      return option;
-    } catch {
-      toast.error('Não foi possível criar a categoria.');
-      return null;
-    }
-  }
-
-  async function handleCreateCertificateTemplate(values: Record<string, string>) {
-    const name = String(values.name ?? '').trim();
-    const description = String(values.description ?? '').trim();
-
-    if (!name) {
-      toast.error('Informe o nome do modelo.');
-      return null;
-    }
-
-    const initialTemplate = createDefaultTemplate();
-    initialTemplate.name = name;
-
-    try {
-      const response = await request<ApiCertificateTemplate>({
-        url: '/lms/certificates/templates',
-        method: 'POST',
-        data: {
-          name,
-          description: description || undefined,
-          status: 'draft',
-          templateContent: JSON.stringify(initialTemplate),
-        },
-      });
-
-      const created = response.data;
-      const option = {
-        value: created.slug || String(created.id),
-        label: created.name,
-        description: created.description || null,
-        meta: created.status ? `Status: ${created.status}` : null,
-      };
-
-      setCreatedTemplateOptions((current) => [option, ...current]);
-      setPersistedCertificateModel(option.value);
-      await refetchCertificateTemplates();
-      toast.success('Modelo de certificado criado com sucesso.');
-      return option;
-    } catch {
-      toast.error('Não foi possível criar o modelo de certificado.');
-      return null;
-    }
-  }
-
-  async function onSubmit(data: CourseEditFormValues) {
-    setSaving(true);
-
-    try {
-      await request({
-        url: `/lms/courses/${id}`,
-        method: 'PATCH',
-        data: {
-          code: data.codigo.trim().toUpperCase(),
-          slug: data.nomeInterno.trim(),
-          title: data.tituloComercial.trim(),
-          description: data.descricaoPublica.trim(),
-          requirements: data.preRequisitos?.trim() || undefined,
-          objectives: data.objetivos?.trim() || undefined,
-          targetAudience: data.publicoAlvo?.trim() || undefined,
-          level: toApiLevel(data.nivel),
-          status: toApiStatus(data.status),
-          offeringType: toApiOfferingType(data.tipoOferta),
-          categorySlugs: data.categorias,
-          primaryColor: data.primaryColor,
-          primaryContrastColor: getContrastColor(data.primaryColor),
-          secondaryColor: data.secondaryColor,
-          secondaryContrastColor: getContrastColor(data.secondaryColor),
-          hasCertificate: data.certificado,
-          isFeatured: data.destaque,
-          isListed: data.listado,
-          certificateModel: data.modeloCertificado || undefined,
-          instructorIds: (data.instrutores ?? []).map((item) => Number(item)),
-        },
-      });
-
-      setPersistedCertificateModel(data.modeloCertificado || '');
-      clearCoursesListCache();
-      toast.success(t('toasts.courseUpdated'));
-      await refetchCourse();
-    } finally {
-      setSaving(false);
-    }
-  }
-
-  const handleInstructorCreated = async (instructor: {
-    id: number;
-    personId: number;
-    name: string;
-    avatarId?: number | null;
-    email?: string | null;
-    phone?: string | null;
-    qualificationSlugs: string[];
-  }) => {
-    const createdId = String(instructor.id);
-    const current = form.getValues('instrutores') ?? [];
-
-    if (!current.includes(createdId)) {
-      form.setValue('instrutores', [...current, createdId], {
-        shouldDirty: true,
-        shouldTouch: true,
-        shouldValidate: true,
-      });
-    }
-
-    await refetchInstructorOptions();
-  };
-
-  async function handleDelete() {
-    setDeleting(true);
-
-    try {
-      await request({
-        url: `/lms/courses/${id}`,
-        method: 'DELETE',
-      });
-
-      clearCoursesListCache();
-      setDeleteDialogOpen(false);
-      toast.success(t('toasts.courseDeleted'));
-      router.push('/lms/courses');
-    } finally {
-      setDeleting(false);
-    }
-  }
-
-  const handleNewStructure = () => {
-    router.push(`/lms/courses/${id}/structure`);
-  };
-
-  const handleManageClasses = () => {
-    router.push(`/lms/classes?courseId=${id}`);
-  };
+  const totalMinutes = useMemo(
+    () => lessons.reduce((sum, l) => sum + l.duration, 0),
+    [lessons]
+  );
+  const hours = Math.floor(totalMinutes / 60);
+  const mins = totalMinutes % 60;
+  const durationLabel = hours > 0 ? `${hours}h ${mins}m` : `${mins}m`;
+
+  const publishedLessons = useMemo(
+    () =>
+      lessons.filter(
+        (l) => l.status === 'publicada' || l.visibility === 'publico'
+      ).length,
+    [lessons]
+  );
 
-  const loading = isLoading || isFetching;
+  const metricsBadges = useMemo(
+    () => (
+      <div className="flex items-center gap-1.5 flex-wrap">
+        <Badge
+          variant="outline"
+          className="gap-1 text-[0.65rem] h-5 px-1.5 font-normal"
+        >
+          <Layers className="size-3" />
+          {sessions.length} {sessions.length === 1 ? 'sessão' : 'sessões'}
+        </Badge>
+        <Badge
+          variant="outline"
+          className="gap-1 text-[0.65rem] h-5 px-1.5 font-normal"
+        >
+          <Video className="size-3" />
+          {lessons.length} {lessons.length === 1 ? 'aula' : 'aulas'}
+        </Badge>
+        <Badge
+          variant="outline"
+          className="gap-1 text-[0.65rem] h-5 px-1.5 font-normal"
+        >
+          <BookOpen className="size-3" />
+          {durationLabel}
+        </Badge>
+        {publishedLessons > 0 && (
+          <Badge className="gap-1 text-[0.65rem] h-5 px-1.5 font-normal bg-emerald-500/15 text-emerald-700 dark:text-emerald-400 border-0 hover:bg-emerald-500/20">
+            <span className="size-1.5 rounded-full bg-emerald-500 inline-block" />
+            {publishedLessons} publicadas
+          </Badge>
+        )}
+      </div>
+    ),
+    [sessions.length, lessons.length, durationLabel, publishedLessons]
+  );
 
   return (
     <Page>
       <PageHeader
-        title={cursoData?.tituloComercial ?? ''}
-        description={t('pageHeader.description', {
-          id,
-          creator: '-',
-        })}
         breadcrumbs={[
-          { label: t('breadcrumbs.home'), href: '/' },
-          { label: t('breadcrumbs.courses'), href: '/lms/courses' },
-          { label: t('breadcrumbs.editCourse') },
-        ]}
-        actions={[
-          {
-            label: t('actions.goToStructure'),
-            onClick: handleNewStructure,
-            variant: 'default',
-          },
-          {
-            label: t('actions.manageClasses'),
-            onClick: handleManageClasses,
-            variant: 'outline',
-          },
+          { label: 'LMS', href: '/lms' },
+          { label: 'Cursos', href: '/lms/courses' },
+          { label: course.name },
         ]}
+        title={course.name}
+        extraContent={metricsBadges}
+        actions={
+          <>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => router.push(`/lms/classes?courseId=${id}`)}
+            >
+              Gerenciar Turmas
+            </Button>
+            <TreeDisplaySettingsPopover />
+            <ShortcutsHelpTrigger onOpen={() => setShortcutsOpen(true)} />
+          </>
+        }
       />
 
-      {loading ? (
-        <LoadingSkeleton />
-      ) : !cursoData ? (
-        <EmptyState
-          icon={<BookOpen className="size-12 text-muted-foreground/40" />}
-          title="Curso não encontrado"
-          description={`Não foi possível localizar o curso com id ${id}.`}
-          actionLabel="Voltar para cursos"
-          onAction={() => router.push('/lms/courses')}
-          className="py-20"
-        />
-      ) : (
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-            <CourseSummaryCard course={cursoData} />
-
-            <div className="grid gap-6 xl:grid-cols-[minmax(0,2fr)_minmax(320px,1fr)]">
-              <div className="space-y-6">
-                <CourseMainInfoCard form={form} t={t} />
-                <CourseClassificationCard
-                  form={form}
-                  t={t}
-                  levels={NIVEIS}
-                  statuses={STATUS_OPTIONS}
-                  offeringTypes={OFFERING_TYPE_OPTIONS}
-                />
-                <CourseRelationsCard
-                  form={form}
-                  t={t}
-                  categoryOptions={categoryOptions}
-                  instructorOptions={instructorOptions}
-                  onCreateCategory={handleCreateCategory}
-                  onCreateInstructor={() => setInstructorSheetOpen(true)}
-                />
-                <CourseContentCard form={form} />
-              </div>
-
-              <div className="space-y-6">
-                <CourseMediaCard
-                  logoPreview={logoPreview}
-                  bannerPreview={bannerPreview}
-                  uploadingLogo={uploadingLogo}
-                  uploadingBanner={uploadingBanner}
-                  onLogoSelect={(event) =>
-                    handleFileSelect(event, setLogoPreview, 'logo')
-                  }
-                  onBannerSelect={(event) =>
-                    handleFileSelect(event, setBannerPreview, 'banner')
-                  }
-                  logoFile={
-                    apiCourse?.logoFileId
-                      ? {
-                          id: apiCourse.logoFileId,
-                          name: apiCourse.logoFilename || `#${apiCourse.logoFileId}`,
-                        }
-                      : undefined
-                  }
-                  bannerFile={
-                    apiCourse?.bannerFileId
-                      ? {
-                          id: apiCourse.bannerFileId,
-                          name:
-                            apiCourse.bannerFilename || `#${apiCourse.bannerFileId}`,
-                        }
-                      : undefined
-                  }
-                  onOpenLogoFile={() => openUploadedFile(apiCourse?.logoFileId)}
-                  onOpenBannerFile={() => openUploadedFile(apiCourse?.bannerFileId)}
-                  t={t}
-                />
-
-                <CourseCertificateCard
-                  form={form}
-                  t={t}
-                  options={certificateOptions}
-                  onCreateTemplate={handleCreateCertificateTemplate}
-                />
-
-                <CourseFlagsCard form={form} t={t} />
-
-                <CourseDangerZoneCard
-                  t={t}
-                  onDelete={() => setDeleteDialogOpen(true)}
-                />
-              </div>
-            </div>
-
-            <div className="flex flex-col gap-3 rounded-2xl border border-border/70 bg-background/80 p-4 backdrop-blur sm:flex-row sm:items-center sm:justify-between">
-              <p className="text-sm text-muted-foreground">
-                Revise os vínculos e a mídia antes de salvar para evitar retrabalho.
-              </p>
-
-              <div className="flex items-center gap-2">
-                <Button
-                  type="button"
-                  variant="outline"
-                  onClick={() => router.push('/lms/courses')}
-                >
-                  {t('form.actions.cancel')}
-                </Button>
-                <Button type="submit" disabled={saving} className="gap-2">
-                  {saving ? (
-                    <Loader2 className="h-4 w-4 animate-spin" />
-                  ) : (
-                    <Save className="h-4 w-4" />
-                  )}
-                  {t('form.actions.saveChanges')}
-                </Button>
+      <ShortcutsHelp open={shortcutsOpen} onOpenChange={setShortcutsOpen} />
+      <ConfirmDialog />
+      <SessionPickerDialog />
+
+      {/* ── Desktop / Tablet ─────────────────────────────────────────────── */}
+      {!isMobile && (
+        <div className="flex-1 min-h-0 rounded-lg border overflow-hidden h-[calc(100dvh-10rem)]">
+          <ResizablePanelGroup direction="horizontal" className="h-full">
+            <ResizablePanel
+              defaultSize={28}
+              minSize={18}
+              maxSize={45}
+              className="flex flex-col"
+            >
+              {isLoading ? (
+                <CourseTreeSkeleton />
+              ) : isError ? (
+                <div className="flex flex-col items-center justify-center h-full gap-3 p-4 text-center">
+                  <AlertCircle className="size-8 text-destructive" />
+                  <p className="text-sm text-muted-foreground">
+                    Não foi possível carregar a estrutura do curso.
+                  </p>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => refetch()}
+                    className="gap-2"
+                  >
+                    <RefreshCw className="size-3.5" />
+                    Tentar novamente
+                  </Button>
+                </div>
+              ) : (
+                <CourseTreePanel ref={searchRef} />
+              )}
+            </ResizablePanel>
+
+            <ResizableHandle withHandle />
+
+            <ResizablePanel defaultSize={72} className="flex flex-col min-h-0">
+              <div
+                ref={detailPanelRef}
+                className="flex flex-col h-full min-h-0"
+              >
+                <DetailPanel />
               </div>
-            </div>
-          </form>
-        </Form>
+            </ResizablePanel>
+          </ResizablePanelGroup>
+        </div>
       )}
 
-      <CreateLmsPersonSheet
-        open={instructorSheetOpen}
-        onOpenChange={setInstructorSheetOpen}
-        onCreated={handleInstructorCreated}
-        title="Cadastrar instrutor"
-        description="Cadastre um novo instrutor e adicione-o ao curso."
-        submitLabel="Cadastrar instrutor"
-        successMessage="Instrutor cadastrado com sucesso."
-        errorMessage="Não foi possível cadastrar o instrutor."
-        defaultQualificationSlugs={['course-lessons']}
-      />
-
-      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-        <DialogContent className="max-w-3xl">
-          <DialogHeader>
-            <DialogTitle className="flex items-center gap-2">
-              <AlertTriangle className="size-5 text-destructive" />
-              {t('deleteDialog.title')}
-            </DialogTitle>
-            <DialogDescription asChild>
-              <div className="flex flex-col gap-3">
-                <p>
-                  {t('deleteDialog.description')}{' '}
-                  <strong className="text-foreground">
-                    {cursoData?.tituloComercial}
-                  </strong>
-                  ?
-                </p>
-                {(cursoData?.totalAlunos ?? 0) > 0 ? (
-                  <div className="flex items-center gap-2 rounded-md bg-amber-50 px-3 py-2.5 text-xs font-medium text-amber-700">
-                    <AlertTriangle className="size-3.5 shrink-0" />
-                    <span>
-                      {t('deleteDialog.warning', {
-                        students: cursoData?.totalAlunos ?? 0,
-                        certificates: cursoData?.certificadosEmitidos ?? 0,
-                      })}
-                    </span>
-                  </div>
-                ) : null}
-              </div>
-            </DialogDescription>
-          </DialogHeader>
-          <DialogFooter className="gap-2">
-            <Button variant="outline" onClick={() => setDeleteDialogOpen(false)}>
-              {t('deleteDialog.actions.cancel')}
-            </Button>
+      {/* ── Mobile ───────────────────────────────────────────────────────── */}
+      {isMobile && (
+        <>
+          <div className="flex items-center gap-2 shrink-0">
             <Button
-              variant="destructive"
-              onClick={handleDelete}
-              disabled={deleting}
+              variant="outline"
+              onClick={() => setMobileSheetOpen(true)}
               className="gap-2"
+              aria-label="Abrir estrutura do curso"
             >
-              {deleting ? <Loader2 className="size-4 animate-spin" /> : null}
-              {t('deleteDialog.actions.delete')}
+              <Menu className="size-4" />
+              Estrutura
             </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+          </div>
+
+          <div
+            ref={detailPanelRef}
+            className="flex-1 min-h-0 border rounded-lg overflow-hidden"
+          >
+            <DetailPanel />
+          </div>
+
+          <Sheet open={mobileSheetOpen} onOpenChange={setMobileSheetOpen}>
+            <SheetContent side="left" className="w-[320px] p-0 flex flex-col">
+              <SheetHeader className="px-4 py-3 border-b shrink-0">
+                <SheetTitle className="text-sm">
+                  {course.title} — Estrutura
+                </SheetTitle>
+              </SheetHeader>
+              <div className="flex-1 min-h-0 overflow-hidden">
+                {isLoading ? (
+                  <CourseTreeSkeleton />
+                ) : isError ? (
+                  <div className="flex flex-col items-center justify-center h-full gap-3 p-4 text-center">
+                    <AlertCircle className="size-8 text-destructive" />
+                    <p className="text-sm text-muted-foreground">
+                      Não foi possível carregar a estrutura do curso.
+                    </p>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => refetch()}
+                      className="gap-2"
+                    >
+                      <RefreshCw className="size-3.5" />
+                      Tentar novamente
+                    </Button>
+                  </div>
+                ) : (
+                  <CourseTreePanel />
+                )}
+              </div>
+            </SheetContent>
+          </Sheet>
+        </>
+      )}
     </Page>
   );
 }