@hed-hog/lms 0.0.306 → 0.0.309

package/hedhog/frontend/app/_components/course-form-sheet.tsx.ejs

@@ -37,9 +37,17 @@ import {
   SheetTitle,
 } from '@/components/ui/sheet';
 import { Textarea } from '@/components/ui/textarea';
-import { ChevronsUpDown, Loader2, Plus } from 'lucide-react';
-import { useState } from 'react';
-import { Controller, UseFormReturn } from 'react-hook-form';
+import { useApp } from '@hed-hog/next-app-provider';
+import {
+  ChevronsUpDown,
+  ImageIcon,
+  Loader2,
+  Plus,
+  Upload,
+  X,
+} from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { Controller, UseFormReturn, useWatch } from 'react-hook-form';
 import { z } from 'zod';
 
 export type CourseCategoryOption = {
@@ -47,9 +55,168 @@ export type CourseCategoryOption = {
   label: string;
 };
 
+// ---------------------------------------------------------------------------
+// Color extraction utilities
+// ---------------------------------------------------------------------------
+
+export function rgbToHex(r: number, g: number, b: number): string {
+  return (
+    '#' +
+    [r, g, b]
+      .map((v) => Math.max(0, Math.min(255, v)).toString(16).padStart(2, '0'))
+      .join('')
+  );
+}
+
+export function getColorDistance(
+  a: [number, number, number],
+  b: [number, number, number]
+): number {
+  return Math.sqrt(
+    (a[0] - b[0]) ** 2 + (a[1] - b[1]) ** 2 + (a[2] - b[2]) ** 2
+  );
+}
+
+export function quantizeColor(
+  r: number,
+  g: number,
+  b: number,
+  factor = 32
+): [number, number, number] {
+  return [
+    Math.round(r / factor) * factor,
+    Math.round(g / factor) * factor,
+    Math.round(b / factor) * factor,
+  ];
+}
+
+export function isIgnoredColor(
+  r: number,
+  g: number,
+  b: number,
+  a: number
+): boolean {
+  if (a < 128) return true;
+  if (r > 240 && g > 240 && b > 240) return true; // near-white
+  if (r < 20 && g < 20 && b < 20) return true; // near-black
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  if (max - min < 30) return true; // near-gray
+  return false;
+}
+
+export function getSaturation(r: number, g: number, b: number): number {
+  const max = Math.max(r, g, b) / 255;
+  const min = Math.min(r, g, b) / 255;
+  if (max === 0) return 0;
+  return (max - min) / max;
+}
+
+export type ExtractedColors = {
+  primary: string | null;
+  secondary: string | null;
+};
+
+export function extractLogoColors(
+  file: File,
+  signal?: { cancelled: boolean }
+): Promise<ExtractedColors> {
+  return new Promise((resolve, reject) => {
+    const objectUrl = URL.createObjectURL(file);
+    const img = new Image();
+
+    img.onload = () => {
+      URL.revokeObjectURL(objectUrl);
+
+      if (signal?.cancelled) {
+        resolve({ primary: null, secondary: null });
+        return;
+      }
+
+      const MAX_SIDE = 150;
+      const scale = Math.min(1, MAX_SIDE / Math.max(img.width, img.height, 1));
+      const w = Math.max(1, Math.round(img.width * scale));
+      const h = Math.max(1, Math.round(img.height * scale));
+
+      const canvas = document.createElement('canvas');
+      canvas.width = w;
+      canvas.height = h;
+      const ctx = canvas.getContext('2d');
+      if (!ctx) {
+        resolve({ primary: null, secondary: null });
+        return;
+      }
+
+      ctx.drawImage(img, 0, 0, w, h);
+      const { data } = ctx.getImageData(0, 0, w, h);
+
+      const counts = new Map<
+        string,
+        { color: [number, number, number]; count: number }
+      >();
+
+      // Sample every 4th pixel (stride = 4 pixels = 16 bytes)
+      for (let i = 0; i < data.length; i += 16) {
+        const r = data[i] ?? 0;
+        const g = data[i + 1] ?? 0;
+        const b = data[i + 2] ?? 0;
+        const a = data[i + 3] ?? 0;
+
+        if (isIgnoredColor(r, g, b, a)) continue;
+
+        const [qr, qg, qb] = quantizeColor(r, g, b);
+        const key = `${qr},${qg},${qb}`;
+        const existing = counts.get(key);
+        if (existing) {
+          existing.count++;
+        } else {
+          counts.set(key, { color: [qr, qg, qb], count: 1 });
+        }
+      }
+
+      if (counts.size === 0) {
+        resolve({ primary: null, secondary: null });
+        return;
+      }
+
+      const sorted = Array.from(counts.values()).sort((a, b) => {
+        const scoreA = a.count * (1 + getSaturation(...a.color));
+        const scoreB = b.count * (1 + getSaturation(...b.color));
+        return scoreB - scoreA;
+      });
+
+      const primary = sorted[0]!.color;
+      let secondary: [number, number, number] | null = null;
+
+      for (let i = 1; i < sorted.length; i++) {
+        const candidate = sorted[i]!.color;
+        if (getColorDistance(primary, candidate) >= 100) {
+          secondary = candidate;
+          break;
+        }
+      }
+
+      resolve({
+        primary: rgbToHex(...primary),
+        secondary: secondary ? rgbToHex(...secondary) : null,
+      });
+    };
+
+    img.onerror = () => {
+      URL.revokeObjectURL(objectUrl);
+      reject(new Error('Failed to load image for color extraction'));
+    };
+
+    img.src = objectUrl;
+  });
+}
+
 export function getCourseSheetSchema(t: (key: string) => string) {
   return z.object({
     nomeInterno: z.string().min(3, t('form.validation.internalNameMinLength')),
+    slug: z
+      .string()
+      .regex(/^[a-z0-9]+(?:-[a-z0-9]+)*$/, t('form.validation.slugPattern')),
     tituloComercial: z.string().optional(),
     descricao: z.string().optional(),
     nivel: z.enum(['iniciante', 'intermediario', 'avancado']).optional(),
@@ -57,11 +224,13 @@ export function getCourseSheetSchema(t: (key: string) => string) {
     categorias: z.array(z.string()).optional(),
     primaryColor: z.string().optional(),
     secondaryColor: z.string().optional(),
+    logoFileId: z.number().nullable().optional(),
   });
 }
 
 export type CourseSheetFormValues = {
   nomeInterno: string;
+  slug: string;
   tituloComercial: string;
   descricao: string;
   nivel: 'iniciante' | 'intermediario' | 'avancado';
@@ -69,10 +238,12 @@ export type CourseSheetFormValues = {
   categorias: string[];
   primaryColor: string;
   secondaryColor: string;
+  logoFileId?: number | null;
 };
 
 export const DEFAULT_COURSE_FORM_VALUES: CourseSheetFormValues = {
   nomeInterno: '',
+  slug: '',
   tituloComercial: '',
   descricao: '',
   nivel: 'iniciante',
@@ -80,6 +251,7 @@ export const DEFAULT_COURSE_FORM_VALUES: CourseSheetFormValues = {
   categorias: [],
   primaryColor: '#1D4ED8',
   secondaryColor: '#111827',
+  logoFileId: null,
 };
 
 type CourseFormSheetProps = {
@@ -90,9 +262,9 @@ type CourseFormSheetProps = {
   form: UseFormReturn<CourseSheetFormValues>;
   onSubmit: (data: CourseSheetFormValues) => Promise<void>;
   t: (key: string) => string;
-  courseCode?: string | null;
   categories?: readonly CourseCategoryOption[];
   onCreateCategory?: () => void;
+  initialLogoFileId?: number | null;
 };
 
 export function CourseFormSheet({
@@ -103,12 +275,124 @@ export function CourseFormSheet({
   form,
   onSubmit,
   t,
-  courseCode,
   categories = [],
   onCreateCategory,
+  initialLogoFileId,
 }: CourseFormSheetProps) {
+  const { request } = useApp();
   const [categoryOpen, setCategoryOpen] = useState(false);
   const [categorySearch, setCategorySearch] = useState('');
+  const slugTouchedRef = useRef(false);
+  const watchedNomeInterno = useWatch({
+    control: form.control,
+    name: 'nomeInterno',
+  });
+
+  // Reset slug-touched flag when sheet opens for create
+  useEffect(() => {
+    if (open && !editing) {
+      slugTouchedRef.current = false;
+    }
+  }, [open, editing]);
+
+  // Auto-generate slug from nomeInterno when creating
+  useEffect(() => {
+    if (editing || slugTouchedRef.current) return;
+    const generated = (watchedNomeInterno ?? '')
+      .trim()
+      .toLowerCase()
+      .normalize('NFD')
+      .replace(/[\u0300-\u036f]/g, '')
+      .replace(/[^a-z0-9]+/g, '-')
+      .replace(/^-+|-+$/g, '');
+    form.setValue('slug', generated, { shouldValidate: false });
+  }, [watchedNomeInterno, editing]);
+  const [logoPreviewUrl, setLogoPreviewUrl] = useState<string | null>(null);
+  const [logoUploading, setLogoUploading] = useState(false);
+  const [colorExtracting, setColorExtracting] = useState(false);
+  const logoInputRef = useRef<HTMLInputElement>(null);
+  const colorExtractionRef = useRef<{ cancelled: boolean } | null>(null);
+
+  useEffect(() => {
+    if (!initialLogoFileId) {
+      setLogoPreviewUrl(null);
+      return;
+    }
+
+    let cancelled = false;
+
+    request<{ url?: string }>({
+      url: `/file/open/${initialLogoFileId}`,
+      method: 'PUT',
+    })
+      .then((res) => {
+        if (!cancelled && res?.data?.url) setLogoPreviewUrl(res.data.url);
+      })
+      .catch(() => {
+        if (!cancelled) setLogoPreviewUrl(null);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [initialLogoFileId, request]);
+
+  async function handleLogoUpload(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    // Cancel any in-flight color extraction
+    if (colorExtractionRef.current) colorExtractionRef.current.cancelled = true;
+    const signal = { cancelled: false };
+    colorExtractionRef.current = signal;
+    setColorExtracting(true);
+
+    extractLogoColors(file, signal)
+      .then((colors) => {
+        if (signal.cancelled) return;
+        if (colors.primary)
+          form.setValue('primaryColor', colors.primary, { shouldDirty: true });
+        if (colors.secondary)
+          form.setValue('secondaryColor', colors.secondary, {
+            shouldDirty: true,
+          });
+      })
+      .catch((err) =>
+        console.warn('[CourseFormSheet] Color extraction failed', err)
+      )
+      .finally(() => {
+        if (!signal.cancelled) setColorExtracting(false);
+      });
+
+    setLogoUploading(true);
+    try {
+      const formData = new FormData();
+      formData.append('file', file);
+      const uploadRes = await request<{ id?: number }>({
+        url: '/file',
+        method: 'POST',
+        data: formData,
+        headers: { 'Content-Type': 'multipart/form-data' },
+      });
+      const fileId = uploadRes?.data?.id;
+      if (!fileId) return;
+      const openRes = await request<{ url?: string }>({
+        url: `/file/open/${fileId}`,
+        method: 'PUT',
+      });
+      if (openRes?.data?.url) setLogoPreviewUrl(openRes.data.url);
+      form.setValue('logoFileId', fileId, { shouldDirty: true });
+    } finally {
+      setLogoUploading(false);
+      if (logoInputRef.current) logoInputRef.current.value = '';
+    }
+  }
+
+  function handleRemoveLogo() {
+    setLogoPreviewUrl(null);
+    form.setValue('logoFileId', null, { shouldDirty: true });
+    if (logoInputRef.current) logoInputRef.current.value = '';
+  }
 
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
@@ -131,23 +415,6 @@ export function CourseFormSheet({
           onSubmit={form.handleSubmit(onSubmit)}
           className="flex flex-1 flex-col gap-5 py-6 px-4"
         >
-          {editing && courseCode && (
-            <Field>
-              <FieldLabel htmlFor="codigo">
-                {t('form.fields.code.label')}
-              </FieldLabel>
-              <Input
-                id="codigo"
-                value={courseCode}
-                readOnly
-                className="uppercase"
-              />
-              <FieldDescription>
-                Codigo gerado automaticamente pelo sistema.
-              </FieldDescription>
-            </Field>
-          )}
-
           <Field>
             <FieldLabel htmlFor="nomeInterno">
               {t('form.fields.internalName.label')}{' '}
@@ -166,6 +433,82 @@ export function CourseFormSheet({
             </FieldError>
           </Field>
 
+          <Field>
+            <FieldLabel htmlFor="slug">
+              {t('form.fields.slug.label')}{' '}
+              <span className="text-destructive">*</span>
+            </FieldLabel>
+            <Input
+              id="slug"
+              placeholder={t('form.fields.slug.placeholder')}
+              {...form.register('slug', {
+                onChange: () => {
+                  slugTouchedRef.current = true;
+                },
+              })}
+            />
+            <FieldDescription>
+              {t('form.fields.slug.description')}
+            </FieldDescription>
+            <FieldError>{form.formState.errors.slug?.message}</FieldError>
+          </Field>
+
+          <Field>
+            <FieldLabel>Logo do Curso</FieldLabel>
+            <div className="flex items-start gap-4">
+              {logoPreviewUrl ? (
+                <img
+                  src={logoPreviewUrl}
+                  alt="Logo"
+                  className="size-16 shrink-0 rounded-lg border object-cover"
+                />
+              ) : (
+                <div className="flex size-16 shrink-0 items-center justify-center rounded-lg border border-dashed bg-muted/40">
+                  <ImageIcon className="size-6 text-muted-foreground/50" />
+                </div>
+              )}
+              <div className="flex flex-col gap-2">
+                <input
+                  ref={logoInputRef}
+                  type="file"
+                  accept="image/*"
+                  className="hidden"
+                  onChange={handleLogoUpload}
+                />
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  disabled={logoUploading}
+                  onClick={() => logoInputRef.current?.click()}
+                  className="gap-2"
+                >
+                  {logoUploading ? (
+                    <Loader2 className="size-3.5 animate-spin" />
+                  ) : (
+                    <Upload className="size-3.5" />
+                  )}
+                  {logoPreviewUrl ? 'Substituir logo' : 'Carregar logo'}
+                </Button>
+                {logoPreviewUrl && (
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    onClick={handleRemoveLogo}
+                    className="gap-2 text-destructive hover:text-destructive"
+                  >
+                    <X className="size-3.5" />
+                    Remover
+                  </Button>
+                )}
+              </div>
+            </div>
+            <FieldDescription>
+              Imagem opcional para identificar o curso.
+            </FieldDescription>
+          </Field>
+
           <Field>
             <FieldLabel htmlFor="tituloComercial">
               {t('form.fields.commercialTitle.label')}
@@ -407,6 +750,13 @@ export function CourseFormSheet({
             <FieldError>{form.formState.errors.categorias?.message}</FieldError>
           </Field>
 
+          {colorExtracting && (
+            <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+              <Loader2 className="size-3 animate-spin" />
+              Detectando cores...
+            </div>
+          )}
+
           <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
             <Field>
               <FieldLabel htmlFor="primaryColor">