Ejemplo de árbol de archivos

# features/profile-form/04-validation.feature
Feature: Profile Form Validation
 
  Background:
    Given the architect is logged in
    And they navigate to "/profile/create"
 
  Scenario: Required fields show errors when empty
    Given the architect is on step 1 "Personal Info"
    And they have not filled in any fields
    When they click "Next"
    Then they should see "Full name is required"
    And they should see "Email is required"
    And the form should not advance to step 2
 
  Scenario: Email format is validated
    Given the architect is on step 1 "Personal Info"
    When they type "not-an-email" in the "Email" field
    And they click "Next"
    Then they should see "Please enter a valid email address"
 
  Scenario: LinkedIn URL must point to linkedin.com
    Given the architect is on step 1 "Personal Info"
    When they type "https://twitter.com/someone" in the "LinkedIn URL" field
    And they click "Next"
    Then they should see "Must be a valid LinkedIn profile URL"
 
  Scenario: Years of experience must be between 0 and 50
    Given the architect is on step 2 "Experience"
    When they type "-3" in the "Years of Experience" field
    And they click "Next"
    Then they should see "Must be between 0 and 50 years"
 
  Scenario: At least one cloud platform is required
    Given the architect is on step 4 "Skills"
    And no cloud platforms are checked
    When they click "Next"
    Then they should see "Select at least one cloud platform"
 
  Scenario: Job end date must be after start date
    Given the architect is on step 3 "Job History"
    When they set start date to "2025-06-01"
    And they set end date to "2024-01-01"
    And they click "Next"
    Then they should see "End date must be after start date"
 
  Scenario: Bio cannot exceed 1000 characters
    Given the architect is on step 2 "Experience"
    When they type 1001 characters in the "Bio" field
    Then they should see "Bio must be 1000 characters or fewer"
 
  Scenario: Profile photo must be an image under 5MB
    Given the architect is on step 5 "Uploads"
    When they select a 15MB PNG for "Profile Photo"
    Then they should see "File must be under 5MB"
 
  Scenario: Profile photo rejects non-image files
    Given the architect is on step 5 "Uploads"
    When they select a .exe file for "Profile Photo"
    Then they should see "Only JPEG, PNG, and WebP files are accepted"

// lib/schemas/architect-profile.ts
import { z } from "zod";
 
// ── Constantes compartidas ───────────────────────────────────
const ACCEPTED_IMAGE_TYPES = ["image/jpeg", "image/png", "image/webp"];
const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
const MAX_DIAGRAM_COUNT = 10;
 
// ── Validador de archivos reutilizable ────────────────────────────
const imageFileSchema = z
  .instanceof(File)
  .refine((file) => file.size <= MAX_FILE_SIZE, "El archivo debe pesar menos de 5 MB")
  .refine(
    (file) => ACCEPTED_IMAGE_TYPES.includes(file.type),
    "Solo se aceptan archivos JPEG, PNG y WebP"
  );
 
// ── Paso 1: Información personal ──────────────────────────────
export const personalInfoSchema = z.object({
  fullName: z
    .string()
    .min(1, "El nombre completo es obligatorio")
    .min(2, "El nombre debe tener al menos 2 caracteres"),
  email: z
    .string()
    .min(1, "El correo electrónico es obligatorio")
    .email("Introduce una dirección de correo válida"),
  phone: z.string().optional(),
  linkedinUrl: z
    .string()
    .url("Debe ser una URL válida")
    .refine(
      (url) => url.includes("linkedin.com/"),
      "Debe ser una URL de perfil de LinkedIn válida"
    )
    .or(z.literal("")),
});
 
// ── Paso 2: Experiencia ─────────────────────────────────
export const experienceSchema = z.object({
  yearsOfExperience: z
    .number({ invalid_type_error: "Debe ser un número" })
    .int("Debe ser un número entero")
    .min(0, "Debe estar entre 0 y 50 años")
    .max(50, "Debe estar entre 0 y 50 años"),
  currentRole: z.string().min(1, "El rol actual es obligatorio"),
  certifications: z.array(z.string()),
  bio: z.string().max(1000, "La biografía debe tener 1000 caracteres o menos").optional(),
});
 
// ── Paso 3: Historial laboral ────────────────────────────────
const jobEntrySchema = z
  .object({
    company: z.string().min(1, "El nombre de la empresa es obligatorio"),
    role: z.string().min(1, "El rol es obligatorio"),
    startDate: z.string().min(1, "La fecha de inicio es obligatoria"),
    endDate: z.string().optional(),
    isCurrent: z.boolean().default(false),
    description: z.string().max(500).optional(),
  })
  .refine(
    (data) => {
      if (data.isCurrent || !data.endDate) return true;
      return new Date(data.endDate) > new Date(data.startDate);
    },
    { message: "La fecha de fin debe ser posterior a la de inicio", path: ["endDate"] }
  );
 
export const jobHistorySchema = z.object({
  jobs: z.array(jobEntrySchema).min(1, "Añade al menos un puesto"),
});
 
// ── Paso 4: Habilidades ─────────────────────────────────────
export const skillsSchema = z.object({
  cloudPlatforms: z
    .array(z.enum(["aws", "azure", "gcp"]))
    .min(1, "Selecciona al menos una plataforma cloud"),
  specialties: z.array(z.string()).min(1, "Selecciona al menos una especialidad"),
  awsProficiency: z.enum(["beginner", "intermediate", "expert"]).optional(),
  azureProficiency: z.enum(["beginner", "intermediate", "expert"]).optional(),
  gcpProficiency: z.enum(["beginner", "intermediate", "expert"]).optional(),
});
 
// ── Paso 5: Subidas ────────────────────────────────────
export const uploadsSchema = z.object({
  profilePhoto: imageFileSchema.optional(),
  architectureDiagrams: z
    .array(imageFileSchema)
    .max(MAX_DIAGRAM_COUNT, `Máximo ${MAX_DIAGRAM_COUNT} archivos permitidos`)
    .optional(),
  siteScreenshots: z
    .array(imageFileSchema)
    .max(MAX_DIAGRAM_COUNT, `Máximo ${MAX_DIAGRAM_COUNT} archivos permitidos`)
    .optional(),
});
 
// ── Esquemas por paso (usados por StepNavigation.trigger()) ──
export const STEP_SCHEMAS = {
  1: personalInfoSchema,
  2: experienceSchema,
  3: jobHistorySchema,
  4: skillsSchema,
  5: uploadsSchema,
} as const;
 
// ── Esquema combinado (usado por zodResolver + server action) ──
export const architectProfileSchema = personalInfoSchema
  .merge(experienceSchema)
  .merge(jobHistorySchema)
  .merge(skillsSchema)
  .merge(uploadsSchema);
 
// ── Tipos inferidos ─────────────────────────────────────
export type ArchitectProfile = z.infer<typeof architectProfileSchema>;
export type PersonalInfo = z.infer<typeof personalInfoSchema>;
export type Experience = z.infer<typeof experienceSchema>;
export type JobHistory = z.infer<typeof jobHistorySchema>;
export type Skills = z.infer<typeof skillsSchema>;
export type Uploads = z.infer<typeof uploadsSchema>;

// stores/profile-form-store.ts
import { create } from "zustand";
 
export type StepStatus = "upcoming" | "current" | "completed";
 
export const STEPS = [
  { id: 1, label: "Información personal" },
  { id: 2, label: "Experiencia" },
  { id: 3, label: "Historial laboral" },
  { id: 4, label: "Habilidades" },
  { id: 5, label: "Subidas" },
  { id: 6, label: "Revisar y enviar" },
] as const;
 
export const TOTAL_STEPS = STEPS.length;
 
interface ProfileFormState {
  currentStep: number;
  completedSteps: Set<number>;
  goToNext: () => void;
  goToPrevious: () => void;
  goToStep: (step: number) => void;
  markCompleted: (step: number) => void;
  getStepStatus: (step: number) => StepStatus;
  canNavigateTo: (step: number) => boolean;
  reset: () => void;
}
 
export const useProfileFormStore = create<ProfileFormState>((set, get) => ({
  currentStep: 1,
  completedSteps: new Set<number>(),
 
  goToNext: () => {
    const { currentStep } = get();
    if (currentStep < TOTAL_STEPS) {
      set((state) => {
        const completed = new Set(state.completedSteps);
        completed.add(currentStep);
        return { currentStep: currentStep + 1, completedSteps: completed };
      });
    }
  },
 
  goToPrevious: () => {
    const { currentStep } = get();
    if (currentStep > 1) {
      set({ currentStep: currentStep - 1 });
    }
  },
 
  goToStep: (step: number) => {
    const { canNavigateTo } = get();
    if (canNavigateTo(step)) {
      set({ currentStep: step });
    }
  },
 
  markCompleted: (step: number) => {
    set((state) => {
      const completed = new Set(state.completedSteps);
      completed.add(step);
      return { completedSteps: completed };
    });
  },
 
  getStepStatus: (step: number): StepStatus => {
    const { currentStep, completedSteps } = get();
    if (step === currentStep) return "current";
    if (completedSteps.has(step)) return "completed";
    return "upcoming";
  },
 
  canNavigateTo: (step: number): boolean => {
    const { completedSteps, currentStep } = get();
    if (step === currentStep) return true;
    if (completedSteps.has(step)) return true;
    if (step === currentStep + 1) return true;
    return false;
  },
 
  reset: () => set({ currentStep: 1, completedSteps: new Set() }),
}));

// lib/actions/create-profile.ts
"use server";
 
import { z } from "zod";
import { redirect } from "next/navigation";
import { architectProfileSchema } from "@/lib/schemas/architect-profile";
 
// Esquema de archivos solo del servidor -- más estricto, comprueba el MIME real
const serverFileSchema = z
  .instanceof(File)
  .refine((file) => file.size <= 5 * 1024 * 1024, "El archivo debe pesar menos de 5 MB")
  .refine(
    (file) => ["image/jpeg", "image/png", "image/webp"].includes(file.type),
    "Tipo de archivo no válido"
  );
 
export type ProfileActionState = {
  success: boolean;
  message: string;
  fieldErrors: Record<string, string>;
};
 
const initialState: ProfileActionState = {
  success: false,
  message: "",
  fieldErrors: {},
};
 
export async function createProfile(
  prevState: ProfileActionState,
  formData: FormData
): Promise<ProfileActionState> {
  try {
    // ── 1. Parsear campos de texto desde FormData ───────────
    const rawData = {
      fullName: formData.get("fullName") as string,
      email: formData.get("email") as string,
      phone: formData.get("phone") as string,
      linkedinUrl: formData.get("linkedinUrl") as string,
      yearsOfExperience: Number(formData.get("yearsOfExperience")),
      currentRole: formData.get("currentRole") as string,
      certifications: formData.getAll("certifications") as string[],
      bio: formData.get("bio") as string,
      jobs: JSON.parse(formData.get("jobs") as string),
      cloudPlatforms: formData.getAll("cloudPlatforms") as string[],
      specialties: formData.getAll("specialties") as string[],
      awsProficiency: formData.get("awsProficiency") as string,
      azureProficiency: formData.get("azureProficiency") as string,
      gcpProficiency: formData.get("gcpProficiency") as string,
    };
 
    // ── 2. Validar campos de texto (mismo esquema que el cliente) ──
    const textSchema = architectProfileSchema.omit({
      profilePhoto: true,
      architectureDiagrams: true,
      siteScreenshots: true,
    });
    const textResult = textSchema.safeParse(rawData);
 
    if (!textResult.success) {
      const fieldErrors: Record<string, string> = {};
      for (const issue of textResult.error.issues) {
        const path = issue.path.join(".");
        fieldErrors[path] = issue.message;
      }
      return { success: false, message: "", fieldErrors };
    }
 
    // ── 3. Validar archivos en el servidor (validación dual) ──
    const profilePhoto = formData.get("profilePhoto") as File | null;
    if (profilePhoto && profilePhoto.size > 0) {
      const fileResult = serverFileSchema.safeParse(profilePhoto);
      if (!fileResult.success) {
        return {
          success: false,
          message: "",
          fieldErrors: { profilePhoto: fileResult.error.issues[0].message },
        };
      }
    }
 
    const diagrams = formData.getAll("architectureDiagrams") as File[];
    for (const diagram of diagrams) {
      if (diagram.size > 0) {
        const fileResult = serverFileSchema.safeParse(diagram);
        if (!fileResult.success) {
          return {
            success: false,
            message: "",
            fieldErrors: {
              architectureDiagrams: fileResult.error.issues[0].message,
            },
          };
        }
      }
    }
 
    const screenshots = formData.getAll("siteScreenshots") as File[];
    for (const screenshot of screenshots) {
      if (screenshot.size > 0) {
        const fileResult = serverFileSchema.safeParse(screenshot);
        if (!fileResult.success) {
          return {
            success: false,
            message: "",
            fieldErrors: {
              siteScreenshots: fileResult.error.issues[0].message,
            },
          };
        }
      }
    }
 
    // ── 4. Comprobar correo duplicado ─────────────────
    const existingProfile = await findProfileByEmail(textResult.data.email);
    if (existingProfile) {
      return {
        success: false,
        message: "",
        fieldErrors: { email: "Este correo electrónico ya está registrado" },
      };
    }
 
    // ── 5. Subir archivos al almacenamiento ───────────────────
    const photoUrl = profilePhoto?.size
      ? await uploadToStorage(profilePhoto, "profiles")
      : null;
    const diagramUrls = await Promise.all(
      diagrams
        .filter((f) => f.size > 0)
        .map((f) => uploadToStorage(f, "diagrams"))
    );
    const screenshotUrls = await Promise.all(
      screenshots
        .filter((f) => f.size > 0)
        .map((f) => uploadToStorage(f, "screenshots"))
    );
 
    // ── 6. Crear registro de perfil ─────────────────────
    const profile = await createProfileRecord({
      ...textResult.data,
      photoUrl,
      diagramUrls,
      screenshotUrls,
    });
 
    redirect(`/profile/${profile.id}`);
  } catch (error) {
    // redirect() lanza internamente -- relanzarlo
    if (error instanceof Error && error.message === "NEXT_REDIRECT") {
      throw error;
    }
 
    console.error("Profile creation failed:", error);
    return {
      success: false,
      message: "Algo salió mal. Inténtalo de nuevo.",
      fieldErrors: {},
    };
  }
}
 
// Sustituye con tu capa real de BD/almacenamiento
async function findProfileByEmail(email: string) {
  return null;
}
 
async function uploadToStorage(file: File, folder: string): Promise<string> {
  return `https://storage.example.com/${folder}/${file.name}`;
}
 
async function createProfileRecord(data: Record<string, unknown>) {
  return { id: "new-profile-id" };
}

// components/profile-form/profile-form-provider.tsx
"use client";
 
import { useForm, FormProvider } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import {
  architectProfileSchema,
  type ArchitectProfile,
} from "@/lib/schemas/architect-profile";
 
const defaultValues: Partial<ArchitectProfile> = {
  fullName: "",
  email: "",
  phone: "",
  linkedinUrl: "",
  yearsOfExperience: 0,
  currentRole: "",
  certifications: [],
  bio: "",
  jobs: [
    { company: "", role: "", startDate: "", endDate: "", isCurrent: false, description: "" },
  ],
  cloudPlatforms: [],
  specialties: [],
};
 
export function ProfileFormProvider({ children }: { children: React.ReactNode }) {
  const methods = useForm<ArchitectProfile>({
    resolver: zodResolver(architectProfileSchema),
    defaultValues,
    mode: "onBlur",
  });
 
  return <FormProvider {...methods}>{children}</FormProvider>;
}

// components/profile-form/profile-form-wizard.tsx
"use client";
 
import { useProfileFormStore } from "@/stores/profile-form-store";
import { StepIndicator } from "./step-indicator";
import { StepNavigation } from "./step-navigation";
import { StepAnnouncer } from "./step-announcer";
import { AutoFocusStep } from "./auto-focus-step";
import { PersonalInfoStep } from "./personal-info-step";
import { ExperienceStep } from "./experience-step";
import { JobHistoryStep } from "./job-history-step";
import { SkillsStep } from "./skills-step";
import { UploadsStep } from "./uploads-step";
import { SubmitStep } from "./submit-step";
 
const STEP_COMPONENTS: Record<number, React.ComponentType> = {
  1: PersonalInfoStep,
  2: ExperienceStep,
  3: JobHistoryStep,
  4: SkillsStep,
  5: UploadsStep,
  6: SubmitStep,
};
 
export function ProfileFormWizard() {
  const { currentStep } = useProfileFormStore();
  const StepComponent = STEP_COMPONENTS[currentStep];
 
  return (
    <div className="space-y-8" data-testid="profile-form-wizard">
      <StepIndicator />
      <StepAnnouncer />
      <AutoFocusStep>
        <StepComponent />
      </AutoFocusStep>
      <StepNavigation />
    </div>
  );
}

// components/profile-form/step-indicator.tsx
"use client";
 
import { cn } from "@/lib/utils";
import { Check } from "lucide-react";
import { STEPS, useProfileFormStore } from "@/stores/profile-form-store";
 
export function StepIndicator() {
  const { currentStep, getStepStatus, canNavigateTo, goToStep } =
    useProfileFormStore();
 
  return (
    <nav aria-label="Progreso del formulario" data-testid="step-indicator">
      <p className="sr-only">
        Paso {currentStep} de {STEPS.length}
      </p>
      <ol className="flex items-center gap-2">
        {STEPS.map((step) => {
          const status = getStepStatus(step.id);
          const navigable = canNavigateTo(step.id);
 
          return (
            <li key={step.id} className="flex items-center gap-2">
              <button
                type="button"
                onClick={() => goToStep(step.id)}
                disabled={!navigable}
                aria-current={status === "current" ? "step" : undefined}
                aria-label={`Paso ${step.id}: ${step.label}${
                  status === "completed" ? " (completado)" : ""
                }`}
                data-testid={`step-${step.id}`}
                data-status={status}
                className={cn(
                  "flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium transition-colors",
                  status === "current" && "bg-primary text-primary-foreground",
                  status === "completed" &&
                    "bg-primary/20 text-primary hover:bg-primary/30",
                  status === "upcoming" &&
                    "bg-muted text-muted-foreground cursor-not-allowed"
                )}
              >
                {status === "completed" ? (
                  <Check className="h-4 w-4" aria-hidden="true" />
                ) : (
                  step.id
                )}
              </button>
              <span
                className={cn(
                  "hidden text-sm sm:inline",
                  status === "current" && "font-semibold",
                  status === "upcoming" && "text-muted-foreground"
                )}
              >
                {step.label}
              </span>
              {step.id < STEPS.length && (
                <div
                  className={cn(
                    "hidden h-px w-8 sm:block",
                    status === "completed" ? "bg-primary" : "bg-muted"
                  )}
                  aria-hidden="true"
                />
              )}
            </li>
          );
        })}
      </ol>
    </nav>
  );
}

// components/profile-form/step-navigation.tsx
"use client";
 
import { useFormContext } from "react-hook-form";
import { Button } from "@/components/ui/button";
import { useProfileFormStore, TOTAL_STEPS } from "@/stores/profile-form-store";
import type { ArchitectProfile } from "@/lib/schemas/architect-profile";
 
const STEP_FIELDS: Record<number, (keyof ArchitectProfile)[]> = {
  1: ["fullName", "email", "phone", "linkedinUrl"],
  2: ["yearsOfExperience", "currentRole", "certifications", "bio"],
  3: ["jobs"],
  4: ["cloudPlatforms", "specialties"],
  5: ["profilePhoto", "architectureDiagrams", "siteScreenshots"],
};
 
export function StepNavigation() {
  const { currentStep, goToNext, goToPrevious } = useProfileFormStore();
  const { trigger } = useFormContext<ArchitectProfile>();
 
  const handleNext = async () => {
    const fields = STEP_FIELDS[currentStep];
    const isValid = await trigger(fields);
    if (isValid) {
      goToNext();
    }
  };
 
  const isFirstStep = currentStep === 1;
  const isLastStep = currentStep === TOTAL_STEPS;
 
  return (
    <div className="flex justify-between pt-6" data-testid="step-navigation">
      {!isFirstStep ? (
        <Button
          type="button"
          variant="outline"
          onClick={goToPrevious}
          data-testid="btn-back"
        >
          Atrás
        </Button>
      ) : (
        <div />
      )}
 
      {!isLastStep ? (
        <Button type="button" onClick={handleNext} data-testid="btn-next">
          Siguiente
        </Button>
      ) : (
        <Button type="submit" data-testid="btn-submit">
          Enviar perfil
        </Button>
      )}
    </div>
  );
}

// components/profile-form/accessible-field.tsx
"use client";
 
import { useFormContext } from "react-hook-form";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import type { ArchitectProfile } from "@/lib/schemas/architect-profile";
import type { HTMLInputTypeAttribute } from "react";
 
interface AccessibleFieldProps {
  name: keyof ArchitectProfile;
  label: string;
  type?: HTMLInputTypeAttribute;
  required?: boolean;
  placeholder?: string;
}
 
export function AccessibleField({
  name,
  label,
  type = "text",
  required = false,
  placeholder,
}: AccessibleFieldProps) {
  const {
    register,
    formState: { errors },
  } = useFormContext<ArchitectProfile>();
 
  const error = errors[name];
  const errorId = `${name}-error`;
 
  return (
    <div className="space-y-1.5">
      <Label htmlFor={name}>
        {label}
        {required && (
          <span aria-hidden="true" className="text-destructive ml-0.5">*</span>
        )}
      </Label>
      <Input
        id={name}
        type={type}
        placeholder={placeholder}
        aria-required={required}
        aria-invalid={!!error}
        aria-describedby={error ? errorId : undefined}
        data-testid={`field-${name}`}
        {...register(name)}
      />
      {error && (
        <p id={errorId} role="alert" className="text-sm text-destructive">
          {error.message as string}
        </p>
      )}
    </div>
  );
}

// components/profile-form/personal-info-step.tsx
"use client";
 
import { AccessibleField } from "./accessible-field";
 
export function PersonalInfoStep() {
  return (
    <fieldset data-testid="step-personal-info">
      <legend className="text-lg font-semibold mb-4">Información personal</legend>
      <div className="space-y-4">
        <AccessibleField name="fullName" label="Nombre completo" required />
        <AccessibleField name="email" label="Correo electrónico" type="email" required />
        <AccessibleField name="phone" label="Teléfono" type="tel" />
        <AccessibleField
          name="linkedinUrl"
          label="URL de LinkedIn"
          type="url"
          placeholder="https://linkedin.com/in/your-profile"
        />
      </div>
    </fieldset>
  );
}

// components/profile-form/experience-step.tsx
"use client";
 
import { useFormContext } from "react-hook-form";
import { AccessibleField } from "./accessible-field";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Checkbox } from "@/components/ui/checkbox";
import type { ArchitectProfile } from "@/lib/schemas/architect-profile";
 
const CERTIFICATIONS = [
  "AWS Solutions Architect Professional",
  "AWS DevOps Engineer Professional",
  "Google Cloud Professional Architect",
  "Azure Solutions Architect Expert",
  "Terraform Associate",
  "Kubernetes Administrator (CKA)",
] as const;
 
export function ExperienceStep() {
  const {
    register,
    watch,
    setValue,
    formState: { errors },
  } = useFormContext<ArchitectProfile>();
 
  const bio = watch("bio") ?? "";
  const certifications = watch("certifications") ?? [];
 
  const toggleCertification = (cert: string) => {
    const updated = certifications.includes(cert)
      ? certifications.filter((c) => c !== cert)
      : [...certifications, cert];
    setValue("certifications", updated, { shouldValidate: true });
  };
 
  return (
    <fieldset data-testid="step-experience">
      <legend className="text-lg font-semibold mb-4">Experiencia</legend>
      <div className="space-y-4">
        <AccessibleField
          name="yearsOfExperience"
          label="Años de experiencia"
          type="number"
          required
        />
        <AccessibleField name="currentRole" label="Rol actual" required />
 
        <div>
          <Label>Certificaciones</Label>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 mt-2">
            {CERTIFICATIONS.map((cert) => (
              <label
                key={cert}
                className="flex items-center gap-2 text-sm cursor-pointer"
              >
                <Checkbox
                  checked={certifications.includes(cert)}
                  onCheckedChange={() => toggleCertification(cert)}
                  data-testid={`cert-${cert.toLowerCase().replace(/\s+/g, "-")}`}
                />
                {cert}
              </label>
            ))}
          </div>
          <p className="text-xs text-muted-foreground mt-1">
            {certifications.length} seleccionadas
          </p>
        </div>
 
        <div>
          <Label htmlFor="bio">Biografía</Label>
          <Textarea
            id="bio"
            rows={4}
            aria-invalid={!!errors.bio}
            aria-describedby={errors.bio ? "bio-error" : "bio-counter"}
            data-testid="field-bio"
            {...register("bio")}
          />
          <p
            id="bio-counter"
            className={`text-xs mt-1 ${bio.length > 1000 ? "text-destructive" : "text-muted-foreground"}`}
          >
            {bio.length} / 1000
          </p>
          {errors.bio && (
            <p id="bio-error" role="alert" className="text-sm text-destructive">
              {errors.bio.message}
            </p>
          )}
        </div>
      </div>
    </fieldset>
  );
}

// components/profile-form/job-history-step.tsx
"use client";
 
import { useFormContext, useFieldArray } from "react-hook-form";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { Checkbox } from "@/components/ui/checkbox";
import type { ArchitectProfile } from "@/lib/schemas/architect-profile";
 
const MAX_JOBS = 10;
 
export function JobHistoryStep() {
  const {
    register,
    control,
    formState: { errors },
    watch,
  } = useFormContext<ArchitectProfile>();
 
  const { fields, append, remove } = useFieldArray({ control, name: "jobs" });
 
  return (
    <fieldset data-testid="step-job-history">
      <legend className="text-lg font-semibold mb-4">Historial laboral</legend>
 
      {fields.map((field, index) => {
        const isCurrent = watch(`jobs.${index}.isCurrent`);
 
        return (
          <div
            key={field.id}
            className="border rounded-lg p-4 space-y-3 mb-4"
            data-testid={`job-entry-${index}`}
          >
            <div className="flex justify-between items-center">
              <h3 className="font-medium">Puesto {index + 1}</h3>
              {fields.length > 1 && (
                <Button
                  type="button"
                  variant="ghost"
                  size="sm"
                  onClick={() => remove(index)}
                  data-testid={`remove-job-${index}`}
                >
                  Eliminar
                </Button>
              )}
            </div>
 
            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label htmlFor={`jobs.${index}.company`}>Empresa *</Label>
                <Input
                  id={`jobs.${index}.company`}
                  aria-required="true"
                  data-testid={`job-${index}-company`}
                  {...register(`jobs.${index}.company`)}
                />
                {errors.jobs?.[index]?.company && (
                  <p role="alert" className="text-sm text-destructive mt-1">
                    {errors.jobs[index].company.message}
                  </p>
                )}
              </div>
              <div>
                <Label htmlFor={`jobs.${index}.role`}>Rol *</Label>
                <Input
                  id={`jobs.${index}.role`}
                  aria-required="true"
                  data-testid={`job-${index}-role`}
                  {...register(`jobs.${index}.role`)}
                />
              </div>
            </div>
 
            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label htmlFor={`jobs.${index}.startDate`}>Fecha de inicio *</Label>
                <Input
                  id={`jobs.${index}.startDate`}
                  type="date"
                  aria-required="true"
                  data-testid={`job-${index}-start`}
                  {...register(`jobs.${index}.startDate`)}
                />
              </div>
              <div>
                <Label htmlFor={`jobs.${index}.endDate`}>Fecha de fin</Label>
                <Input
                  id={`jobs.${index}.endDate`}
                  type="date"
                  disabled={isCurrent}
                  data-testid={`job-${index}-end`}
                  {...register(`jobs.${index}.endDate`)}
                />
                {errors.jobs?.[index]?.endDate && (
                  <p role="alert" className="text-sm text-destructive mt-1">
                    {errors.jobs[index].endDate.message}
                  </p>
                )}
              </div>
            </div>
 
            <div className="flex items-center gap-2">
              <Checkbox
                id={`jobs.${index}.isCurrent`}
                {...register(`jobs.${index}.isCurrent`)}
                data-testid={`job-${index}-current`}
              />
              <Label htmlFor={`jobs.${index}.isCurrent`}>Trabajo aquí actualmente</Label>
            </div>
 
            <div>
              <Label htmlFor={`jobs.${index}.description`}>Descripción</Label>
              <Textarea
                id={`jobs.${index}.description`}
                rows={3}
                data-testid={`job-${index}-description`}
                {...register(`jobs.${index}.description`)}
              />
            </div>
          </div>
        );
      })}
 
      {fields.length < MAX_JOBS && (
        <Button
          type="button"
          variant="outline"
          onClick={() =>
            append({
              company: "",
              role: "",
              startDate: "",
              endDate: "",
              isCurrent: false,
              description: "",
            })
          }
          data-testid="add-job"
        >
          Añadir otro puesto
        </Button>
      )}
 
      {errors.jobs?.root && (
        <p role="alert" className="text-sm text-destructive mt-2">
          {errors.jobs.root.message}
        </p>
      )}
    </fieldset>
  );
}

// components/profile-form/skills-step.tsx
"use client";
 
import { useFormContext } from "react-hook-form";
import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import type { ArchitectProfile } from "@/lib/schemas/architect-profile";
 
const PLATFORMS = [
  { value: "aws" as const, label: "Amazon Web Services (AWS)" },
  { value: "azure" as const, label: "Microsoft Azure" },
  { value: "gcp" as const, label: "Google Cloud Platform (GCP)" },
];
 
const SPECIALTIES = [
  "Serverless",
  "Containers & Kubernetes",
  "Networking & Security",
  "Data & Analytics",
  "Machine Learning",
  "DevOps & CI/CD",
  "Cost Optimization",
  "Migration",
];
 
const PROFICIENCY_LEVELS = ["beginner", "intermediate", "expert"] as const;
 
export function SkillsStep() {
  const {
    watch,
    setValue,
    formState: { errors },
  } = useFormContext<ArchitectProfile>();
 
  const cloudPlatforms = watch("cloudPlatforms") ?? [];
  const specialties = watch("specialties") ?? [];
 
  const togglePlatform = (platform: "aws" | "azure" | "gcp") => {
    const updated = cloudPlatforms.includes(platform)
      ? cloudPlatforms.filter((p) => p !== platform)
      : [...cloudPlatforms, platform];
    setValue("cloudPlatforms", updated, { shouldValidate: true });
  };
 
  const toggleSpecialty = (specialty: string) => {
    const updated = specialties.includes(specialty)
      ? specialties.filter((s) => s !== specialty)
      : [...specialties, specialty];
    setValue("specialties", updated, { shouldValidate: true });
  };
 
  return (
    <fieldset data-testid="step-skills">
      <legend className="text-lg font-semibold mb-4">Habilidades</legend>
      <div className="space-y-6">
        {/* Plataformas cloud */}
        <div>
          <Label>Plataformas cloud *</Label>
          <div className="space-y-2 mt-2">
            {PLATFORMS.map((platform) => (
              <label key={platform.value} className="flex items-center gap-2 text-sm">
                <Checkbox
                  checked={cloudPlatforms.includes(platform.value)}
                  onCheckedChange={() => togglePlatform(platform.value)}
                  data-testid={`platform-${platform.value}`}
                />
                {platform.label}
              </label>
            ))}
          </div>
          {errors.cloudPlatforms && (
            <p role="alert" className="text-sm text-destructive mt-1">
              {errors.cloudPlatforms.message}
            </p>
          )}
        </div>
 
        {/* Competencia por plataforma seleccionada */}
        {cloudPlatforms.map((platform) => {
          const fieldName = `${platform}Proficiency` as keyof ArchitectProfile;
          const currentValue = watch(fieldName) as string | undefined;
 
          return (
            <div key={platform}>
              <Label>{platform.toUpperCase()} Proficiency</Label>
              <RadioGroup
                value={currentValue}
                onValueChange={(val) => setValue(fieldName, val, { shouldValidate: true })}
                className="flex gap-4 mt-2"
                data-testid={`proficiency-${platform}`}
              >
                {PROFICIENCY_LEVELS.map((level) => (
                  <label key={level} className="flex items-center gap-1.5 text-sm capitalize">
                    <RadioGroupItem value={level} />
                    {level}
                  </label>
                ))}
              </RadioGroup>
            </div>
          );
        })}
 
        {/* Especialidades */}
        <div>
          <Label>Especialidades *</Label>
          <div className="grid grid-cols-2 gap-2 mt-2">
            {SPECIALTIES.map((specialty) => (
              <label key={specialty} className="flex items-center gap-2 text-sm">
                <Checkbox
                  checked={specialties.includes(specialty)}
                  onCheckedChange={() => toggleSpecialty(specialty)}
                  data-testid={`specialty-${specialty.toLowerCase().replace(/\s+&?\s*/g, "-")}`}
                />
                {specialty}
              </label>
            ))}
          </div>
          {errors.specialties && (
            <p role="alert" className="text-sm text-destructive mt-1">
              {errors.specialties.message}
            </p>
          )}
        </div>
      </div>
    </fieldset>
  );
}

// components/profile-form/file-upload.tsx
"use client";
 
import { useCallback, useState, useRef } from "react";
import { useFormContext, useController } from "react-hook-form";
import { Button } from "@/components/ui/button";
import { X, Upload } from "lucide-react";
import { cn } from "@/lib/utils";
import type { ArchitectProfile } from "@/lib/schemas/architect-profile";
 
const ACCEPTED_TYPES = ["image/jpeg", "image/png", "image/webp"];
const MAX_SIZE = 5 * 1024 * 1024;
 
interface FileUploadProps {
  name: "profilePhoto" | "architectureDiagrams" | "siteScreenshots";
  label: string;
  multiple?: boolean;
  maxFiles?: number;
}
 
function formatFileSize(bytes: number): string {
  if (bytes < 1024) return `${bytes} B`;
  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`;
  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
}
 
export function FileUpload({ name, label, multiple = false, maxFiles = 10 }: FileUploadProps) {
  const { control, clearErrors } = useFormContext<ArchitectProfile>();
  const { field } = useController({ control, name });
  const [isDragging, setIsDragging] = useState(false);
  const [previews, setPreviews] = useState<{ file: File; url: string }[]>([]);
  const [clientError, setClientError] = useState<string | null>(null);
  const inputRef = useRef<HTMLInputElement>(null);
 
  const files: File[] = multiple
    ? (field.value as File[]) ?? []
    : field.value
      ? [field.value as File]
      : [];
 
  const isMaxReached = multiple && files.length >= maxFiles;
 
  const validateFile = useCallback(
    (file: File): string | null => {
      if (!ACCEPTED_TYPES.includes(file.type)) return "Solo se aceptan archivos JPEG, PNG y WebP";
      if (file.size > MAX_SIZE) return "El archivo debe pesar menos de 5 MB";
      if (multiple && files.length >= maxFiles) return `Máximo ${maxFiles} archivos permitidos`;
      return null;
    },
    [files.length, maxFiles, multiple]
  );
 
  const addFiles = useCallback(
    (newFiles: FileList | File[]) => {
      setClientError(null);
      clearErrors(name);
 
      for (const file of Array.from(newFiles)) {
        const error = validateFile(file);
        if (error) { setClientError(error); return; }
      }
 
      const validFiles = Array.from(newFiles);
      const newPreviews = validFiles.map((file) => ({
        file,
        url: URL.createObjectURL(file),
      }));
 
      if (multiple) {
        field.onChange([...files, ...validFiles]);
        setPreviews((prev) => [...prev, ...newPreviews]);
      } else {
        previews.forEach((p) => URL.revokeObjectURL(p.url));
        field.onChange(validFiles[0]);
        setPreviews(newPreviews.slice(0, 1));
      }
    },
    [field, files, multiple, name, clearErrors, validateFile, previews]
  );
 
  const removeFile = useCallback(
    (index: number) => {
      URL.revokeObjectURL(previews[index].url);
      setClientError(null);
      if (multiple) {
        field.onChange(files.filter((_, i) => i !== index));
        setPreviews((prev) => prev.filter((_, i) => i !== index));
      } else {
        field.onChange(undefined);
        setPreviews([]);
      }
      if (inputRef.current) inputRef.current.value = "";
    },
    [field, files, multiple, previews]
  );
 
  const handleDragOver = useCallback((e: React.DragEvent) => { e.preventDefault(); setIsDragging(true); }, []);
  const handleDragLeave = useCallback((e: React.DragEvent) => { e.preventDefault(); setIsDragging(false); }, []);
  const handleDrop = useCallback(
    (e: React.DragEvent) => {
      e.preventDefault();
      setIsDragging(false);
      if (e.dataTransfer.files.length > 0) addFiles(e.dataTransfer.files);
    },
    [addFiles]
  );
 
  return (
    <div className="space-y-3" data-testid={`upload-${name}`}>
      <label className="text-sm font-medium">{label}</label>
 
      <div
        onDragOver={handleDragOver}
        onDragLeave={handleDragLeave}
        onDrop={handleDrop}
        onClick={() => !isMaxReached && inputRef.current?.click()}
        role="button"
        tabIndex={0}
        aria-label={`Subir ${label}`}
        aria-disabled={isMaxReached}
        onKeyDown={(e) => {
          if (e.key === "Enter" || e.key === " ") { e.preventDefault(); if (!isMaxReached) inputRef.current?.click(); }
        }}
        className={cn(
          "flex flex-col items-center justify-center rounded-lg border-2 border-dashed p-6 transition-colors cursor-pointer focus-visible:ring-2 focus-visible:ring-ring",
          isDragging && "border-primary bg-primary/5",
          !isDragging && "border-muted-foreground/25 hover:border-muted-foreground/50",
          isMaxReached && "cursor-not-allowed opacity-50"
        )}
      >
        <Upload className="h-8 w-8 text-muted-foreground mb-2" aria-hidden="true" />
        <p className="text-sm text-muted-foreground">
          {isDragging ? "Suelta el archivo aquí" : isMaxReached ? `Máximo ${maxFiles} archivos permitidos` : "Haz clic o arrastra archivos aquí"}
        </p>
        <p className="text-xs text-muted-foreground mt-1">JPEG, PNG o WebP hasta 5 MB</p>
      </div>
 
      <input
        ref={inputRef}
        type="file"
        accept="image/jpeg,image/png,image/webp"
        multiple={multiple}
        disabled={isMaxReached}
        onChange={(e) => e.target.files && addFiles(e.target.files)}
        className="sr-only"
        aria-hidden="true"
      />
 
      {clientError && (
        <p role="alert" className="text-sm text-destructive" data-testid={`${name}-error`}>
          {clientError}
        </p>
      )}
 
      {multiple && files.length > 0 && (
        <p className="text-sm text-muted-foreground">{files.length} {files.length === 1 ? "archivo" : "archivos"}</p>
      )}
 
      {previews.length > 0 && (
        <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
          {previews.map((preview, index) => (
            <div key={preview.url} className="relative group rounded-lg overflow-hidden border">
              <img src={preview.url} alt={preview.file.name} className="w-full h-24 object-cover" />
              <div className="p-2 text-xs">
                <p className="truncate font-medium">{preview.file.name}</p>
                <p className="text-muted-foreground">{formatFileSize(preview.file.size)}</p>
              </div>
              <Button
                type="button"
                variant="destructive"
                size="icon"
                className="absolute top-1 right-1 h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity"
                onClick={(e) => { e.stopPropagation(); removeFile(index); }}
                aria-label={`Eliminar ${preview.file.name}`}
                data-testid={`remove-file-${index}`}
              >
                <X className="h-3 w-3" />
              </Button>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

// components/profile-form/uploads-step.tsx
"use client";
 
import { FileUpload } from "./file-upload";
 
export function UploadsStep() {
  return (
    <fieldset data-testid="step-uploads">
      <legend className="text-lg font-semibold mb-4">Subir archivos</legend>
      <div className="space-y-6">
        <FileUpload name="profilePhoto" label="Foto de perfil" />
        <FileUpload name="architectureDiagrams" label="Diagramas de arquitectura" multiple maxFiles={10} />
        <FileUpload name="siteScreenshots" label="Capturas del sitio" multiple maxFiles={10} />
      </div>
    </fieldset>
  );
}

// components/profile-form/submit-step.tsx
"use client";
 
import { useActionState, useEffect } from "react";
import { useFormContext } from "react-hook-form";
import { Button } from "@/components/ui/button";
import { Loader2 } from "lucide-react";
import {
  createProfile,
  type ProfileActionState,
} from "@/lib/actions/create-profile";
import { useProfileFormStore, STEPS } from "@/stores/profile-form-store";
import { useToast } from "@/hooks/use-toast";
import type { ArchitectProfile } from "@/lib/schemas/architect-profile";
 
const FIELD_TO_STEP: Record<string, number> = {
  fullName: 1, email: 1, phone: 1, linkedinUrl: 1,
  yearsOfExperience: 2, currentRole: 2, certifications: 2, bio: 2,
  jobs: 3,
  cloudPlatforms: 4, specialties: 4,
  profilePhoto: 5, architectureDiagrams: 5, siteScreenshots: 5,
};
 
const initialState: ProfileActionState = {
  success: false,
  message: "",
  fieldErrors: {},
};
 
export function SubmitStep() {
  const [state, formAction, isPending] = useActionState(createProfile, initialState);
  const { getValues, setError } = useFormContext<ArchitectProfile>();
  const { goToStep } = useProfileFormStore();
  const { toast } = useToast();
 
  // Mapear errores de campo del servidor de vuelta a react-hook-form + navegar al paso
  useEffect(() => {
    if (!state.fieldErrors || Object.keys(state.fieldErrors).length === 0) return;
 
    const firstErrorField = Object.keys(state.fieldErrors)[0];
    for (const [field, message] of Object.entries(state.fieldErrors)) {
      setError(field as keyof ArchitectProfile, { message });
    }
 
    const targetStep = FIELD_TO_STEP[firstErrorField];
    if (targetStep) goToStep(targetStep);
  }, [state.fieldErrors, setError, goToStep]);
 
  // Mostrar toast para errores genéricos del servidor
  useEffect(() => {
    if (state.message && !state.success) {
      toast({ variant: "destructive", title: "Error al enviar", description: state.message });
    }
  }, [state.message, state.success, toast]);
 
  // Construir FormData desde react-hook-form para la server action
  const handleSubmit = () => {
    const values = getValues();
    const formData = new FormData();
 
    formData.set("fullName", values.fullName);
    formData.set("email", values.email);
    formData.set("phone", values.phone ?? "");
    formData.set("linkedinUrl", values.linkedinUrl ?? "");
    formData.set("yearsOfExperience", String(values.yearsOfExperience));
    formData.set("currentRole", values.currentRole);
    formData.set("bio", values.bio ?? "");
    formData.set("jobs", JSON.stringify(values.jobs));
 
    for (const cert of values.certifications) formData.append("certifications", cert);
    for (const platform of values.cloudPlatforms) formData.append("cloudPlatforms", platform);
    for (const specialty of values.specialties) formData.append("specialties", specialty);
 
    if (values.profilePhoto) formData.set("profilePhoto", values.profilePhoto);
    if (values.architectureDiagrams) {
      for (const d of values.architectureDiagrams) formData.append("architectureDiagrams", d);
    }
    if (values.siteScreenshots) {
      for (const s of values.siteScreenshots) formData.append("siteScreenshots", s);
    }
 
    formAction(formData);
  };
 
  const values = getValues();
 
  return (
    <div data-testid="step-review">
      <h2 className="text-lg font-semibold mb-4">Revisa tu perfil</h2>
 
      <div className="space-y-4">
        <ReviewCard title="Información personal" step={1} items={[
          { label: "Nombre", value: values.fullName },
          { label: "Correo", value: values.email },
          { label: "Teléfono", value: values.phone },
          { label: "LinkedIn", value: values.linkedinUrl },
        ]} />
        <ReviewCard title="Experiencia" step={2} items={[
          { label: "Años", value: String(values.yearsOfExperience) },
          { label: "Rol", value: values.currentRole },
          { label: "Certificaciones", value: values.certifications.join(", ") },
        ]} />
        <ReviewCard title="Historial laboral" step={3} items={
          values.jobs.map((j) => ({ label: j.company, value: j.role }))
        } />
        <ReviewCard title="Habilidades" step={4} items={[
          { label: "Plataformas", value: values.cloudPlatforms.join(", ") },
          { label: "Especialidades", value: values.specialties.join(", ") },
        ]} />
        <ReviewCard title="Subidas" step={5} items={[
          { label: "Foto de perfil", value: values.profilePhoto ? "Subida" : "Ninguna" },
          { label: "Diagramas", value: `${values.architectureDiagrams?.length ?? 0} archivos` },
          { label: "Capturas", value: `${values.siteScreenshots?.length ?? 0} archivos` },
        ]} />
      </div>
 
      <div className="pt-6">
        <Button
          type="button"
          onClick={handleSubmit}
          disabled={isPending}
          className="w-full"
          data-testid="btn-submit-profile"
        >
          {isPending ? (
            <>
              <Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
              Enviando...
            </>
          ) : (
            "Enviar perfil"
          )}
        </Button>
      </div>
    </div>
  );
}
 
function ReviewCard({
  title,
  step,
  items,
}: {
  title: string;
  step: number;
  items: { label: string; value?: string }[];
}) {
  const { goToStep } = useProfileFormStore();
 
  return (
    <div className="border rounded-lg p-4" data-testid={`review-${step}`}>
      <div className="flex justify-between items-center mb-2">
        <h3 className="font-medium">{title}</h3>
        <Button
          type="button"
          variant="ghost"
          size="sm"
          onClick={() => goToStep(step)}
          data-testid={`edit-step-${step}`}
        >
          Editar
        </Button>
      </div>
      <dl className="grid grid-cols-2 gap-2 text-sm">
        {items.map((item) => (
          <div key={item.label}>
            <dt className="text-muted-foreground">{item.label}</dt>
            <dd>{item.value || "\u2014"}</dd>
          </div>
        ))}
      </dl>
    </div>
  );
}