@hed-hog/lms 0.0.325 → 0.0.326

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

@@ -1,8 +1,17 @@
 'use client';
 
+import { PersonPicker } from '@/app/(app)/(libraries)/contact/_components/person-picker';
+import { PersonFormSheet } from '@/app/(app)/(libraries)/contact/person/_components/person-form-sheet';
+import type {
+  ContactTypeOption,
+  DocumentTypeOption,
+  Person,
+} from '@/app/(app)/(libraries)/contact/person/_components/person-types';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import { EntityPicker } from '@/components/ui/entity-picker';
 import { Field, FieldError, FieldLabel } from '@/components/ui/field';
+import { InputMoney } from '@/components/ui/input-money';
 import {
   Select,
   SelectContent,
@@ -19,15 +28,16 @@ import {
   SheetTitle,
 } from '@/components/ui/sheet';
 import { Switch } from '@/components/ui/switch';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Loader2, Plus } from 'lucide-react';
+import { useQueryClient } from '@tanstack/react-query';
+import { BookOpen, Loader2, Pencil, Star, X } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
-import { CreateLmsPersonSheet } from '../../_components/create-lms-person-sheet';
-import type { InstructorRow, PersonOption } from './instructor-types';
+import type { InstructorRow, InstructorSkill } from './instructor-types';
 
 const QUALIFICATION_OPTIONS = [
   {
@@ -52,10 +62,32 @@ const instructorFormSchema = z.object({
     .min(1, 'Selecione pelo menos uma qualificação'),
   status: z.enum(['active', 'inactive']),
   can_teach_courses: z.boolean(),
+  hourlyRate: z.coerce.number().min(0).optional().nullable(),
+  skillSlugs: z.array(z.string()).optional().default([]),
 });
 
 type InstructorFormValues = z.infer<typeof instructorFormSchema>;
 
+type ClassGroupItem = {
+  id: number;
+  name: string;
+  code: string;
+  courseName: string | null;
+  startDate: string | null;
+  endDate: string | null;
+  status: string;
+  slots: number;
+};
+
+const STATUS_LABEL: Record<string, string> = {
+  active: 'Ativo',
+  inactive: 'Inativo',
+  in_progress: 'Em andamento',
+  upcoming: 'Futuro',
+  completed: 'Concluído',
+  cancelled: 'Cancelado',
+};
+
 type InstructorFormSheetProps = {
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -69,18 +101,25 @@ export function InstructorFormSheet({
   instructorId,
   onSaved,
 }: InstructorFormSheetProps) {
-  const { request } = useApp();
+  const { request, currentLocaleCode } = useApp();
+  const queryClient = useQueryClient();
   const [saving, setSaving] = useState(false);
-  const [createPersonOpen, setCreatePersonOpen] = useState(false);
+  const [selectedPersonName, setSelectedPersonName] = useState('');
   const [trainingAccess, setTrainingAccess] = useState<boolean | null>(null);
   const [togglingAccess, setTogglingAccess] = useState(false);
+  const [editPersonOpen, setEditPersonOpen] = useState(false);
+  const [personToEdit, setPersonToEdit] = useState<Person | null>(null);
+  const [activeTab, setActiveTab] = useState('detalhes');
+  const [tabSkillSlugs, setTabSkillSlugs] = useState<string[]>([]);
+  const [savingSkills, setSavingSkills] = useState(false);
+  const [addSkillValue, setAddSkillValue] = useState('');
   const isEditing = typeof instructorId === 'number' && instructorId > 0;
 
   const {
     control,
     handleSubmit,
     reset,
-    setValue,
+    watch,
     formState: { errors },
   } = useForm<InstructorFormValues>({
     resolver: zodResolver(instructorFormSchema),
@@ -92,6 +131,44 @@ export function InstructorFormSheet({
     },
   });
 
+  const watchedPersonId = watch('personId');
+
+  const { data: contactTypes = [] } = useQuery<ContactTypeOption[]>({
+    queryKey: ['contact-person-contact-types', currentLocaleCode],
+    queryFn: async () => {
+      const response = await request<{ data: ContactTypeOption[] }>({
+        url: '/person-contact-type?pageSize=100',
+        method: 'GET',
+      });
+      return response.data.data || [];
+    },
+    enabled: open,
+    placeholderData: (previous) => previous ?? [],
+  });
+
+  const { data: documentTypes = [] } = useQuery<DocumentTypeOption[]>({
+    queryKey: ['contact-person-document-types', currentLocaleCode],
+    queryFn: async () => {
+      const response = await request<{ data: DocumentTypeOption[] }>({
+        url: '/person-document-type?pageSize=100',
+        method: 'GET',
+      });
+      return response.data.data || [];
+    },
+    enabled: open,
+    placeholderData: (previous) => previous ?? [],
+  });
+
+  const handleOpenPersonEdit = async () => {
+    if (!watchedPersonId) return;
+    const response = await request<Person>({
+      url: `/person/${watchedPersonId}`,
+      method: 'GET',
+    });
+    setPersonToEdit(response.data);
+    setEditPersonOpen(true);
+  };
+
   const { data: existingInstructor } = useQuery<InstructorRow | null>({
     queryKey: ['lms-instructor-detail', instructorId],
     queryFn: async () => {
@@ -106,6 +183,38 @@ export function InstructorFormSheet({
     placeholderData: null,
   });
 
+  const { data: skillsData = [] } = useQuery<InstructorSkill[]>({
+    queryKey: ['lms-instructor-skills-all'],
+    queryFn: async () => {
+      const response = await request<InstructorSkill[]>({
+        url: '/lms/instructor-skills/all',
+        method: 'GET',
+      });
+      return response.data;
+    },
+  });
+
+  // Turmas — enterprise/training/admin endpoint supports instructorId filter
+  const { data: turmasData = [], isLoading: loadingTurmas } = useQuery<
+    ClassGroupItem[]
+  >({
+    queryKey: ['lms-instructor-turmas', instructorId],
+    queryFn: async () => {
+      const response = await request<
+        { data?: ClassGroupItem[] } | ClassGroupItem[]
+      >({
+        url: `/lms/enterprise/training/admin/class-groups?instructorId=${instructorId}`,
+        method: 'GET',
+      });
+      const raw = response.data;
+      if (Array.isArray(raw)) return raw;
+      if (raw && 'data' in raw && Array.isArray(raw.data)) return raw.data;
+      return [];
+    },
+    enabled: isEditing && open && activeTab === 'turmas',
+    placeholderData: [],
+  });
+
   useEffect(() => {
     if (isEditing && existingInstructor) {
       reset({
@@ -116,19 +225,32 @@ export function InstructorFormSheet({
             : ['course-lessons'],
         status: existingInstructor.status,
         can_teach_courses: true,
+        hourlyRate: existingInstructor.hourlyRate ?? null,
+        skillSlugs: (existingInstructor.skills ?? []).map((s) => s.slug),
       });
+      setSelectedPersonName(existingInstructor.name);
       setTrainingAccess(existingInstructor.hasTrainingAccess ?? false);
+      setTabSkillSlugs((existingInstructor.skills ?? []).map((s) => s.slug));
     } else if (!isEditing && open) {
       reset({
         personId: undefined,
         qualificationSlugs: ['course-lessons'],
         status: 'active',
         can_teach_courses: true,
+        hourlyRate: null,
+        skillSlugs: [],
       });
+      setSelectedPersonName('');
       setTrainingAccess(null);
+      setTabSkillSlugs([]);
     }
   }, [isEditing, existingInstructor, open, reset]);
 
+  // Reset to first tab when sheet closes
+  useEffect(() => {
+    if (!open) setActiveTab('detalhes');
+  }, [open]);
+
   const handleSheetClose = (nextOpen: boolean) => {
     if (!nextOpen) {
       reset();
@@ -136,6 +258,27 @@ export function InstructorFormSheet({
     onOpenChange(nextOpen);
   };
 
+  const handleSaveSkills = async () => {
+    if (!instructorId) return;
+    setSavingSkills(true);
+    try {
+      await request({
+        url: `/lms/instructors/${instructorId}`,
+        method: 'PATCH',
+        data: { skillSlugs: tabSkillSlugs },
+      });
+      await queryClient.invalidateQueries({
+        queryKey: ['lms-instructor-detail', instructorId],
+      });
+      await queryClient.invalidateQueries({ queryKey: ['lms-instructors'] });
+      toast.success('Skills atualizadas com sucesso.');
+    } catch {
+      toast.error('Erro ao salvar skills.');
+    } finally {
+      setSavingSkills(false);
+    }
+  };
+
   const onSubmit = async (values: InstructorFormValues) => {
     try {
       setSaving(true);
@@ -147,8 +290,11 @@ export function InstructorFormSheet({
           url: `/lms/instructors/${instructorId}`,
           method: 'PATCH',
           data: {
+            personId: values.personId,
             qualificationSlugs: values.qualificationSlugs,
             status: values.status,
+            hourlyRate: values.hourlyRate ?? null,
+            skillSlugs: values.skillSlugs ?? [],
           },
         });
         result = response.data;
@@ -162,6 +308,8 @@ export function InstructorFormSheet({
             name: '',
             qualificationSlugs: values.qualificationSlugs,
             status: values.status,
+            hourlyRate: values.hourlyRate ?? null,
+            skillSlugs: values.skillSlugs ?? [],
           },
         });
         result = response.data;
@@ -186,253 +334,711 @@ export function InstructorFormSheet({
       <Sheet open={open} onOpenChange={handleSheetClose}>
         <SheetContent
           side="right"
-          className="flex w-full max-w-md flex-col overflow-y-auto sm:max-w-lg"
+          className="flex w-full max-w-lg flex-col overflow-hidden p-0 sm:max-w-xl"
         >
-          <SheetHeader>
-            <SheetTitle>
-              {isEditing ? 'Editar Instrutor' : 'Novo Instrutor'}
-            </SheetTitle>
-            <SheetDescription>
-              {isEditing
-                ? 'Atualize os dados do perfil do instrutor.'
-                : 'Vincule uma pessoa existente ou crie uma nova para cadastrá-la como instrutora.'}
-            </SheetDescription>
-          </SheetHeader>
-
-          <form
-            onSubmit={handleSubmit(onSubmit)}
-            className="mt-6 flex flex-1 flex-col gap-5 px-4"
-          >
-            {/* Person picker */}
-            {!isEditing && (
-              <Field>
-                <FieldLabel>
-                  Pessoa <span className="text-destructive">*</span>
-                </FieldLabel>
-                <div className="flex items-center gap-2">
-                  <div className="min-w-0 flex-1">
-                    <Controller
-                      control={control}
-                      name="personId"
-                      render={({ field }) => (
-                        <EntityPicker
-                          value={field.value ?? null}
-                          onChange={(val) =>
-                            field.onChange(
-                              val !== null ? Number(val) : undefined
-                            )
+          {/* ── Instructor header (edit mode) ── */}
+          {isEditing && existingInstructor ? (
+            <div className="flex shrink-0 items-center gap-4 border-b px-6 py-4">
+              <Avatar className="h-14 w-14">
+                <AvatarImage
+                  src={
+                    existingInstructor.avatarId
+                      ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${existingInstructor.avatarId}`
+                      : undefined
+                  }
+                  alt={existingInstructor.name}
+                />
+                <AvatarFallback>
+                  {existingInstructor.name.slice(0, 2).toUpperCase()}
+                </AvatarFallback>
+              </Avatar>
+              <div className="min-w-0 flex-1">
+                <h2 className="truncate text-lg font-semibold">
+                  {existingInstructor.name}
+                </h2>
+                <div className="mt-1 flex flex-wrap items-center gap-2">
+                  <Badge
+                    variant={
+                      existingInstructor.status === 'active'
+                        ? 'default'
+                        : 'secondary'
+                    }
+                  >
+                    {existingInstructor.status === 'active'
+                      ? 'Ativo'
+                      : 'Inativo'}
+                  </Badge>
+                  {existingInstructor.email && (
+                    <span className="truncate text-xs text-muted-foreground">
+                      {existingInstructor.email}
+                    </span>
+                  )}
+                  {existingInstructor.phone && (
+                    <span className="text-xs text-muted-foreground">
+                      {existingInstructor.phone}
+                    </span>
+                  )}
+                </div>
+              </div>
+            </div>
+          ) : (
+            <SheetHeader className="shrink-0 border-b px-6 py-4">
+              <SheetTitle>Novo Instrutor</SheetTitle>
+              <SheetDescription>
+                Vincule uma pessoa existente ou crie uma nova para cadastrá-la
+                como instrutora.
+              </SheetDescription>
+            </SheetHeader>
+          )}
+
+          {/* ── Tabs (edit) / plain form (create) ── */}
+          {isEditing ? (
+            <Tabs
+              value={activeTab}
+              onValueChange={setActiveTab}
+              className="flex min-h-0 flex-1 flex-col"
+            >
+              <TabsList className="mx-6 mt-3 shrink-0 justify-start">
+                <TabsTrigger value="detalhes">Detalhes</TabsTrigger>
+                <TabsTrigger value="skills">Skills</TabsTrigger>
+                <TabsTrigger value="turmas">Turmas</TabsTrigger>
+                <TabsTrigger value="avaliacoes">Avaliações</TabsTrigger>
+              </TabsList>
+
+              {/* ── Detalhes ── */}
+              <TabsContent
+                value="detalhes"
+                className="flex min-h-0 flex-1 flex-col overflow-hidden data-[state=inactive]:hidden"
+              >
+                <form
+                  onSubmit={handleSubmit(onSubmit)}
+                  className="flex min-h-0 flex-1 flex-col"
+                >
+                  <div className="flex-1 overflow-y-auto px-6 py-4">
+                    <div className="flex flex-col gap-5">
+                      {/* Person picker */}
+                      <Field>
+                        <FieldLabel>
+                          Pessoa <span className="text-destructive">*</span>
+                        </FieldLabel>
+                        <div className="flex items-center gap-2">
+                          <div className="min-w-0 flex-1">
+                            <Controller
+                              control={control}
+                              name="personId"
+                              render={({ field }) => (
+                                <PersonPicker
+                                  label=""
+                                  entityLabel="pessoa"
+                                  value={field.value ?? null}
+                                  initialSelectedLabel={selectedPersonName}
+                                  onChange={(personId, personName) => {
+                                    field.onChange(personId ?? undefined);
+                                    setSelectedPersonName(personName);
+                                  }}
+                                  selectPlaceholder="Buscar ou selecionar pessoa..."
+                                  personTypeFilter="individual"
+                                  createType="individual"
+                                  lockCreateType
+                                />
+                              )}
+                            />
+                          </div>
+                          <Button
+                            type="button"
+                            variant="outline"
+                            size="icon"
+                            className="shrink-0"
+                            disabled={!watchedPersonId}
+                            onClick={handleOpenPersonEdit}
+                            aria-label="Editar cadastro da pessoa"
+                            title="Editar cadastro da pessoa"
+                          >
+                            <Pencil className="h-4 w-4" />
+                          </Button>
+                        </div>
+                        {errors.personId && (
+                          <FieldError>{errors.personId.message}</FieldError>
+                        )}
+                      </Field>
+
+                      {/* Status */}
+                      <Field>
+                        <FieldLabel>Status</FieldLabel>
+                        <Controller
+                          control={control}
+                          name="status"
+                          render={({ field }) => (
+                            <Select
+                              value={field.value}
+                              onValueChange={field.onChange}
+                            >
+                              <SelectTrigger className="w-full">
+                                <SelectValue placeholder="Selecione o status" />
+                              </SelectTrigger>
+                              <SelectContent>
+                                <SelectItem value="active">Ativo</SelectItem>
+                                <SelectItem value="inactive">
+                                  Inativo
+                                </SelectItem>
+                              </SelectContent>
+                            </Select>
+                          )}
+                        />
+                      </Field>
+
+                      {/* Valor/hora */}
+                      <Field>
+                        <FieldLabel>Valor/hora (R$)</FieldLabel>
+                        <Controller
+                          control={control}
+                          name="hourlyRate"
+                          render={({ field }) => (
+                            <InputMoney
+                              placeholder="Ex: 150,00"
+                              value={field.value ?? ''}
+                              onValueChange={(value) => field.onChange(value)}
+                            />
+                          )}
+                        />
+                      </Field>
+
+                      {/* can_teach_courses */}
+                      <div className="flex items-center justify-between rounded-lg border p-4">
+                        <div className="space-y-0.5">
+                          <p className="text-sm font-medium">
+                            Pode ensinar cursos
+                          </p>
+                          <p className="text-xs text-muted-foreground">
+                            Permite que o instrutor seja vinculado a aulas de
+                            curso.
+                          </p>
+                        </div>
+                        <Controller
+                          control={control}
+                          name="can_teach_courses"
+                          render={({ field }) => (
+                            <Switch
+                              checked={field.value}
+                              onCheckedChange={field.onChange}
+                            />
+                          )}
+                        />
+                      </div>
+
+                      {/* Acesso ao Training */}
+                      <div className="flex items-center justify-between rounded-lg border p-4">
+                        <div className="space-y-0.5">
+                          <p className="text-sm font-medium">
+                            Acesso ao Hcode Training
+                          </p>
+                          <p className="text-xs text-muted-foreground">
+                            {existingInstructor?.userId
+                              ? 'Permite que este instrutor acesse a plataforma com o perfil de instrutor.'
+                              : 'Nenhum usuário vinculado a este cadastro. Vincule um usuário para habilitar.'}
+                          </p>
+                        </div>
+                        <Switch
+                          checked={trainingAccess ?? false}
+                          disabled={
+                            !existingInstructor?.userId || togglingAccess
                           }
-                          valueType="number"
-                          loadOptions={async ({ page, pageSize, search }) => {
-                            const response = await request<{
-                              data: PersonOption[];
-                              lastPage?: number;
-                            }>({
-                              url: '/person',
-                              method: 'GET',
-                              params: {
-                                page,
-                                pageSize,
-                                type: 'individual',
-                                ...(search.trim()
-                                  ? { search: search.trim() }
-                                  : {}),
-                              },
-                            });
-                            return {
-                              items: (response.data?.data ?? []).map((p) => ({
-                                id: p.id,
-                                name: p.name,
-                              })),
-                              hasMore: page < (response.data?.lastPage ?? 1),
-                            };
+                          onCheckedChange={async (next) => {
+                            setTogglingAccess(true);
+                            try {
+                              await request({
+                                url: `/lms/instructors/${instructorId}/training-access`,
+                                method: 'PATCH',
+                                data: { enabled: next },
+                              });
+                              setTrainingAccess(next);
+                              toast.success(
+                                next
+                                  ? 'Acesso ao Training habilitado.'
+                                  : 'Acesso ao Training desabilitado.'
+                              );
+                            } catch {
+                              toast.error(
+                                'Erro ao alterar acesso ao Training.'
+                              );
+                            } finally {
+                              setTogglingAccess(false);
+                            }
                           }}
-                          getOptionValue={(opt) => opt.id as number}
-                          getOptionLabel={(opt) => opt.name ?? ''}
-                          placeholder="Buscar pessoa por nome..."
-                          searchable
-                          clearable
-                          showCreateButton={false}
                         />
+                      </div>
+
+                      {/* Qualificações */}
+                      <Field>
+                        <FieldLabel>
+                          Qualificações{' '}
+                          <span className="text-destructive">*</span>
+                        </FieldLabel>
+                        <div className="space-y-3">
+                          {QUALIFICATION_OPTIONS.map((option) => (
+                            <Controller
+                              key={option.slug}
+                              control={control}
+                              name="qualificationSlugs"
+                              render={({ field }) => {
+                                const checked = field.value.includes(
+                                  option.slug
+                                );
+                                return (
+                                  <div className="flex items-start justify-between rounded-lg border p-3">
+                                    <div className="space-y-0.5">
+                                      <p className="text-sm font-medium">
+                                        {option.label}
+                                      </p>
+                                      <p className="text-xs text-muted-foreground">
+                                        {option.description}
+                                      </p>
+                                    </div>
+                                    <Switch
+                                      checked={checked}
+                                      onCheckedChange={(next) => {
+                                        if (next) {
+                                          field.onChange([
+                                            ...field.value,
+                                            option.slug,
+                                          ]);
+                                        } else {
+                                          field.onChange(
+                                            field.value.filter(
+                                              (s) => s !== option.slug
+                                            )
+                                          );
+                                        }
+                                      }}
+                                    />
+                                  </div>
+                                );
+                              }}
+                            />
+                          ))}
+                        </div>
+                        {errors.qualificationSlugs && (
+                          <FieldError>
+                            {errors.qualificationSlugs.message}
+                          </FieldError>
+                        )}
+                      </Field>
+                    </div>
+                  </div>
+
+                  <SheetFooter className="shrink-0 border-t px-6 py-4">
+                    <Button
+                      type="button"
+                      variant="outline"
+                      onClick={() => handleSheetClose(false)}
+                      disabled={saving}
+                    >
+                      Cancelar
+                    </Button>
+                    <Button type="submit" disabled={saving}>
+                      {saving && (
+                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                       )}
-                    />
+                      Salvar alterações
+                    </Button>
+                  </SheetFooter>
+                </form>
+              </TabsContent>
+
+              {/* ── Skills ── */}
+              <TabsContent
+                value="skills"
+                className="flex min-h-0 flex-1 flex-col overflow-hidden data-[state=inactive]:hidden"
+              >
+                <div className="flex min-h-0 flex-1 flex-col">
+                  <div className="flex-1 overflow-y-auto px-6 py-4">
+                    <p className="mb-4 text-sm text-muted-foreground">
+                      Gerencie as skills associadas a este instrutor.
+                    </p>
+
+                    {tabSkillSlugs.length > 0 ? (
+                      <div className="mb-6 flex flex-wrap gap-2">
+                        {tabSkillSlugs.map((slug) => {
+                          const skill = skillsData.find((s) => s.slug === slug);
+                          return (
+                            <Badge
+                              key={slug}
+                              variant="secondary"
+                              className="flex items-center gap-1 pr-1"
+                            >
+                              <span>{skill?.name ?? slug}</span>
+                              <button
+                                type="button"
+                                className="ml-1 rounded-full p-0.5 hover:bg-muted-foreground/20"
+                                onClick={() =>
+                                  setTabSkillSlugs((prev) =>
+                                    prev.filter((s) => s !== slug)
+                                  )
+                                }
+                                aria-label={`Remover skill ${skill?.name ?? slug}`}
+                              >
+                                <X className="h-3 w-3" />
+                              </button>
+                            </Badge>
+                          );
+                        })}
+                      </div>
+                    ) : (
+                      <p className="mb-6 italic text-sm text-muted-foreground">
+                        Nenhuma skill atribuída.
+                      </p>
+                    )}
+
+                    {skillsData.filter((s) => !tabSkillSlugs.includes(s.slug))
+                      .length > 0 && (
+                      <Select
+                        value={addSkillValue}
+                        onValueChange={(val) => {
+                          if (val) {
+                            setTabSkillSlugs((prev) => [...prev, val]);
+                            setAddSkillValue('');
+                          }
+                        }}
+                      >
+                        <SelectTrigger className="w-full">
+                          <SelectValue placeholder="Adicionar skill..." />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {skillsData
+                            .filter((s) => !tabSkillSlugs.includes(s.slug))
+                            .map((skill) => (
+                              <SelectItem key={skill.slug} value={skill.slug}>
+                                {skill.name}
+                              </SelectItem>
+                            ))}
+                        </SelectContent>
+                      </Select>
+                    )}
+                  </div>
+
+                  <div className="shrink-0 border-t px-6 py-4">
+                    <div className="flex justify-end gap-2">
+                      <Button
+                        type="button"
+                        variant="outline"
+                        onClick={() => handleSheetClose(false)}
+                        disabled={savingSkills}
+                      >
+                        Cancelar
+                      </Button>
+                      <Button
+                        type="button"
+                        onClick={handleSaveSkills}
+                        disabled={savingSkills}
+                      >
+                        {savingSkills && (
+                          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                        )}
+                        Salvar skills
+                      </Button>
+                    </div>
                   </div>
-                  <Button
-                    type="button"
-                    variant="outline"
-                    size="icon"
-                    className="shrink-0"
-                    onClick={() => setCreatePersonOpen(true)}
-                    aria-label="Criar nova pessoa"
-                    title="Criar nova pessoa"
-                  >
-                    <Plus className="h-4 w-4" />
-                  </Button>
                 </div>
-                {errors.personId && (
-                  <FieldError>{errors.personId.message}</FieldError>
-                )}
-              </Field>
-            )}
-
-            {/* Status */}
-            <Field>
-              <FieldLabel>Status</FieldLabel>
-              <Controller
-                control={control}
-                name="status"
-                render={({ field }) => (
-                  <Select value={field.value} onValueChange={field.onChange}>
-                    <SelectTrigger>
-                      <SelectValue placeholder="Selecione o status" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="active">Ativo</SelectItem>
-                      <SelectItem value="inactive">Inativo</SelectItem>
-                    </SelectContent>
-                  </Select>
-                )}
-              />
-            </Field>
-
-            {/* can_teach_courses */}
-            <div className="flex items-center justify-between rounded-lg border p-4">
-              <div className="space-y-0.5">
-                <p className="text-sm font-medium">Pode ensinar cursos</p>
-                <p className="text-xs text-muted-foreground">
-                  Permite que o instrutor seja vinculado a aulas de curso.
-                </p>
-              </div>
-              <Controller
-                control={control}
-                name="can_teach_courses"
-                render={({ field }) => (
-                  <Switch
-                    checked={field.value}
-                    onCheckedChange={field.onChange}
-                  />
-                )}
-              />
-            </div>
+              </TabsContent>
 
-            {/* Acesso ao Training */}
-            {isEditing && (
-              <div className="flex items-center justify-between rounded-lg border p-4">
-                <div className="space-y-0.5">
-                  <p className="text-sm font-medium">
-                    Acesso ao Hcode Training
+              {/* ── Turmas ── */}
+              <TabsContent
+                value="turmas"
+                className="flex min-h-0 flex-1 flex-col overflow-hidden data-[state=inactive]:hidden"
+              >
+                <div className="flex-1 overflow-y-auto px-6 py-4">
+                  {loadingTurmas ? (
+                    <div className="flex items-center justify-center py-12">
+                      <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : turmasData.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-center">
+                      <BookOpen className="mb-3 h-10 w-10 text-muted-foreground/40" />
+                      <p className="text-sm font-medium text-muted-foreground">
+                        Nenhuma turma encontrada
+                      </p>
+                      <p className="mt-1 text-xs text-muted-foreground">
+                        Este instrutor ainda não está vinculado a nenhuma turma.
+                      </p>
+                    </div>
+                  ) : (
+                    <div className="space-y-2">
+                      {turmasData.map((turma) => (
+                        <div key={turma.id} className="rounded-lg border p-3">
+                          <div className="flex items-start justify-between gap-2">
+                            <div className="min-w-0 flex-1">
+                              <p className="truncate text-sm font-medium">
+                                {turma.name}
+                              </p>
+                              {turma.courseName && (
+                                <p className="truncate text-xs text-muted-foreground">
+                                  {turma.courseName}
+                                </p>
+                              )}
+                            </div>
+                            <Badge
+                              variant="outline"
+                              className="shrink-0 text-xs"
+                            >
+                              {STATUS_LABEL[turma.status] ?? turma.status}
+                            </Badge>
+                          </div>
+                          <div className="mt-2 flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground">
+                            {turma.startDate && (
+                              <span>
+                                Início:{' '}
+                                {new Date(turma.startDate).toLocaleDateString(
+                                  'pt-BR'
+                                )}
+                              </span>
+                            )}
+                            {turma.endDate && (
+                              <span>
+                                Fim:{' '}
+                                {new Date(turma.endDate).toLocaleDateString(
+                                  'pt-BR'
+                                )}
+                              </span>
+                            )}
+                            {turma.slots > 0 && (
+                              <span>{turma.slots} aluno(s)</span>
+                            )}
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </TabsContent>
+
+              {/* ── Avaliações ── */}
+              <TabsContent
+                value="avaliacoes"
+                className="flex min-h-0 flex-1 flex-col overflow-hidden data-[state=inactive]:hidden"
+              >
+                {/* TODO: implementar endpoint de avaliações de instrutor */}
+                <div className="flex flex-1 flex-col items-center justify-center px-6 py-12 text-center">
+                  <Star className="mb-3 h-10 w-10 text-muted-foreground/40" />
+                  <p className="text-sm font-medium text-muted-foreground">
+                    Avaliações — funcionalidade em breve
                   </p>
-                  <p className="text-xs text-muted-foreground">
-                    {existingInstructor?.userId
-                      ? 'Permite que este instrutor acesse a plataforma com o perfil de instrutor.'
-                      : 'Nenhum usuário vinculado a este cadastro. Vincule um usuário para habilitar.'}
+                  <p className="mt-1 text-xs text-muted-foreground">
+                    Em breve você poderá visualizar as avaliações recebidas
+                    pelos alunos.
                   </p>
                 </div>
-                <Switch
-                  checked={trainingAccess ?? false}
-                  disabled={!existingInstructor?.userId || togglingAccess}
-                  onCheckedChange={async (next) => {
-                    setTogglingAccess(true);
-                    try {
-                      await request({
-                        url: `/lms/instructors/${instructorId}/training-access`,
-                        method: 'PATCH',
-                        data: { enabled: next },
-                      });
-                      setTrainingAccess(next);
-                      toast.success(
-                        next
-                          ? 'Acesso ao Training habilitado.'
-                          : 'Acesso ao Training desabilitado.'
-                      );
-                    } catch {
-                      toast.error('Erro ao alterar acesso ao Training.');
-                    } finally {
-                      setTogglingAccess(false);
-                    }
-                  }}
-                />
-              </div>
-            )}
-
-            {/* Qualificações */}
-            <Field>
-              <FieldLabel>
-                Qualificações <span className="text-destructive">*</span>
-              </FieldLabel>
-              <div className="space-y-3">
-                {QUALIFICATION_OPTIONS.map((option) => (
-                  <Controller
-                    key={option.slug}
-                    control={control}
-                    name="qualificationSlugs"
-                    render={({ field }) => {
-                      const checked = field.value.includes(option.slug);
-                      return (
-                        <div className="flex items-start justify-between rounded-lg border p-3">
-                          <div className="space-y-0.5">
-                            <p className="text-sm font-medium">
-                              {option.label}
-                            </p>
-                            <p className="text-xs text-muted-foreground">
-                              {option.description}
-                            </p>
-                          </div>
-                          <Switch
-                            checked={checked}
-                            onCheckedChange={(next) => {
-                              if (next) {
-                                field.onChange([...field.value, option.slug]);
-                              } else {
-                                field.onChange(
-                                  field.value.filter((s) => s !== option.slug)
-                                );
-                              }
-                            }}
-                          />
-                        </div>
-                      );
-                    }}
-                  />
-                ))}
+              </TabsContent>
+            </Tabs>
+          ) : (
+            /* ── Create mode: plain form ── */
+            <form
+              onSubmit={handleSubmit(onSubmit)}
+              className="flex min-h-0 flex-1 flex-col"
+            >
+              <div className="flex-1 overflow-y-auto px-6 py-4">
+                <div className="flex flex-col gap-5">
+                  {/* Person picker */}
+                  <Field>
+                    <FieldLabel>
+                      Pessoa <span className="text-destructive">*</span>
+                    </FieldLabel>
+                    <div className="flex items-center gap-2">
+                      <div className="min-w-0 flex-1">
+                        <Controller
+                          control={control}
+                          name="personId"
+                          render={({ field }) => (
+                            <PersonPicker
+                              label=""
+                              entityLabel="pessoa"
+                              value={field.value ?? null}
+                              initialSelectedLabel={selectedPersonName}
+                              onChange={(personId, personName) => {
+                                field.onChange(personId ?? undefined);
+                                setSelectedPersonName(personName);
+                              }}
+                              selectPlaceholder="Buscar ou selecionar pessoa..."
+                              personTypeFilter="individual"
+                              createType="individual"
+                              lockCreateType
+                            />
+                          )}
+                        />
+                      </div>
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="icon"
+                        className="shrink-0"
+                        disabled={!watchedPersonId}
+                        onClick={handleOpenPersonEdit}
+                        aria-label="Editar cadastro da pessoa"
+                        title="Editar cadastro da pessoa"
+                      >
+                        <Pencil className="h-4 w-4" />
+                      </Button>
+                    </div>
+                    {errors.personId && (
+                      <FieldError>{errors.personId.message}</FieldError>
+                    )}
+                  </Field>
+
+                  {/* Status */}
+                  <Field>
+                    <FieldLabel>Status</FieldLabel>
+                    <Controller
+                      control={control}
+                      name="status"
+                      render={({ field }) => (
+                        <Select
+                          value={field.value}
+                          onValueChange={field.onChange}
+                        >
+                          <SelectTrigger className="w-full">
+                            <SelectValue placeholder="Selecione o status" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="active">Ativo</SelectItem>
+                            <SelectItem value="inactive">Inativo</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      )}
+                    />
+                  </Field>
+
+                  {/* Valor/hora */}
+                  <Field>
+                    <FieldLabel>Valor/hora (R$)</FieldLabel>
+                    <Controller
+                      control={control}
+                      name="hourlyRate"
+                      render={({ field }) => (
+                        <InputMoney
+                          placeholder="Ex: 150,00"
+                          value={field.value ?? ''}
+                          onValueChange={(value) => field.onChange(value)}
+                        />
+                      )}
+                    />
+                  </Field>
+
+                  {/* can_teach_courses */}
+                  <div className="flex items-center justify-between rounded-lg border p-4">
+                    <div className="space-y-0.5">
+                      <p className="text-sm font-medium">Pode ensinar cursos</p>
+                      <p className="text-xs text-muted-foreground">
+                        Permite que o instrutor seja vinculado a aulas de curso.
+                      </p>
+                    </div>
+                    <Controller
+                      control={control}
+                      name="can_teach_courses"
+                      render={({ field }) => (
+                        <Switch
+                          checked={field.value}
+                          onCheckedChange={field.onChange}
+                        />
+                      )}
+                    />
+                  </div>
+
+                  {/* Qualificações */}
+                  <Field>
+                    <FieldLabel>
+                      Qualificações <span className="text-destructive">*</span>
+                    </FieldLabel>
+                    <div className="space-y-3">
+                      {QUALIFICATION_OPTIONS.map((option) => (
+                        <Controller
+                          key={option.slug}
+                          control={control}
+                          name="qualificationSlugs"
+                          render={({ field }) => {
+                            const checked = field.value.includes(option.slug);
+                            return (
+                              <div className="flex items-start justify-between rounded-lg border p-3">
+                                <div className="space-y-0.5">
+                                  <p className="text-sm font-medium">
+                                    {option.label}
+                                  </p>
+                                  <p className="text-xs text-muted-foreground">
+                                    {option.description}
+                                  </p>
+                                </div>
+                                <Switch
+                                  checked={checked}
+                                  onCheckedChange={(next) => {
+                                    if (next) {
+                                      field.onChange([
+                                        ...field.value,
+                                        option.slug,
+                                      ]);
+                                    } else {
+                                      field.onChange(
+                                        field.value.filter(
+                                          (s) => s !== option.slug
+                                        )
+                                      );
+                                    }
+                                  }}
+                                />
+                              </div>
+                            );
+                          }}
+                        />
+                      ))}
+                    </div>
+                    {errors.qualificationSlugs && (
+                      <FieldError>
+                        {errors.qualificationSlugs.message}
+                      </FieldError>
+                    )}
+                  </Field>
+                </div>
               </div>
-              {errors.qualificationSlugs && (
-                <FieldError>{errors.qualificationSlugs.message}</FieldError>
-              )}
-            </Field>
-
-            <SheetFooter className="mt-auto pb-4">
-              <Button
-                type="button"
-                variant="outline"
-                onClick={() => handleSheetClose(false)}
-                disabled={saving}
-              >
-                Cancelar
-              </Button>
-              <Button type="submit" disabled={saving}>
-                {saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-                {isEditing ? 'Salvar alterações' : 'Criar instrutor'}
-              </Button>
-            </SheetFooter>
-          </form>
+
+              <SheetFooter className="shrink-0 border-t px-6 py-4">
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => handleSheetClose(false)}
+                  disabled={saving}
+                >
+                  Cancelar
+                </Button>
+                <Button type="submit" disabled={saving}>
+                  {saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                  Criar instrutor
+                </Button>
+              </SheetFooter>
+            </form>
+          )}
         </SheetContent>
       </Sheet>
 
-      <CreateLmsPersonSheet
-        open={createPersonOpen}
-        onOpenChange={setCreatePersonOpen}
-        onCreated={(instructor) => {
-          setValue('personId', instructor.personId);
-          setCreatePersonOpen(false);
-        }}
-        title="Nova Pessoa"
-        description="Preencha os dados para criar uma nova pessoa e vinculá-la como instrutora."
-        submitLabel="Criar pessoa"
-        successMessage="Pessoa criada com sucesso."
-        errorMessage="Erro ao criar pessoa."
-        defaultQualificationSlugs={['course-lessons']}
-      />
+      {editPersonOpen && personToEdit && (
+        <PersonFormSheet
+          open={editPersonOpen}
+          person={personToEdit}
+          contactTypes={contactTypes}
+          documentTypes={documentTypes}
+          onOpenChange={(v) => {
+            setEditPersonOpen(v);
+            if (!v) setPersonToEdit(null);
+          }}
+          onSuccess={(updated) => {
+            if (updated) setSelectedPersonName(updated.name);
+            void queryClient.invalidateQueries({
+              queryKey: ['person-picker-autocomplete'],
+            });
+            void queryClient.invalidateQueries({
+              queryKey: ['lms-instructors'],
+            });
+            setEditPersonOpen(false);
+            setPersonToEdit(null);
+          }}
+        />
+      )}
     </>
   );
 }