Formulario Alta de Clínica — NutriSync SaaS

// Source: https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations
"use server"; // directiva de módulo — aplica a todas las exportaciones

import { z } from "zod";
import { db } from "@/lib/db";

// Zod schema — z.infer evita duplicar la interfaz
// Source: https://zod.dev/api#safeparse + https://zod.dev/api#zodtype-infer
const ClinicaSchema = z.object({
  nombre_clinica: z.string().min(3, "Mínimo 3 caracteres").max(100),
  email_admin:    z.string().email("Email inválido"),
  telefono:       z.string().regex(/^\+?[0-9\s\-]{7,15}$/, "Teléfono inválido"),
  plan:           z.enum(["starter", "pro", "enterprise"]),
});

export type ClinicaFormState = {
  errors?: Partial<Record<keyof z.infer<typeof ClinicaSchema>, string[]>>;
  success?: boolean;
  clinicaId?: string;
};

// Server Action — retorna estado serializable (no lanza Error para errores de usuario)
// Source: https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#error-handling
export async function crearClinica(
  _prevState: ClinicaFormState,
  formData: FormData
): Promise<ClinicaFormState> {
  const raw = {
    nombre_clinica: formData.get("nombre_clinica"),
    email_admin:    formData.get("email_admin"),
    telefono:       formData.get("telefono"),
    plan:           formData.get("plan"),
  };

  // safeParse — no lanza excepciones, devuelve { success, data, error }
  // Source: https://zod.dev/api#safeparse
  const parsed = ClinicaSchema.safeParse(raw);
  if (!parsed.success) {
    return { errors: parsed.error.flatten().fieldErrors };
  }

  const clinica = await db.clinica.create({ data: parsed.data });
  return { success: true, clinicaId: clinica.id };
}

// Source: https://react.dev/reference/react/useActionState#usage
"use client";

// useActionState importado desde "react" (React 19)
// NOTA: useFormState de react-dom está deprecado en React 19 — NO usar
// Migración: https://react.dev/blog/2024/04/25/react-19-upgrade-guide#useformstate-deprecated
import { useActionState } from "react";
import { crearClinica, type ClinicaFormState } from "./actions";

const initialState: ClinicaFormState = {};

export function ClinicaForm() {
  // useActionState(action, initialState) → [state, wrappedAction, isPending]
  // isPending: true mientras el Server Action está en vuelo (sin useTransition manual)
  // Source: https://react.dev/reference/react/useActionState#usage
  const [state, formAction, isPending] = useActionState(crearClinica, initialState);

  if (state.success) {
    return (
      <div className="alert-success">
        Clínica creada · ID: {state.clinicaId}
      </div>
    );
  }

  return (
    <form action={formAction}>
      <!-- action= acepta Server Action directamente; Next 15 maneja serialización -->
      <!-- Source: nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations -->

      <Field
        name="nombre_clinica"
        label="Nombre de la clínica"
        errors={state.errors?.nombre_clinica}
      />
      <Field
        name="email_admin"
        label="Email administrador"
        type="email"
        errors={state.errors?.email_admin}
      />
      <Field
        name="telefono"
        label="Teléfono"
        errors={state.errors?.telefono}
      />

      <select name="plan">
        <option value="starter">Starter — 49€/mes</option>
        <option value="pro">Pro — 99€/mes</option>
        <option value="enterprise">Enterprise — a medida</option>
      </select>

      <button type="submit" disabled={isPending}>
        {isPending ? "Creando clínica..." : "Crear clínica"}
      </button>
    </form>
  );
}