NextChair/src/features/booking/components/details-form.tsx

"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import { useState, useTransition } from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { saveDetailsStepAction } from "../actions/draft";

const guestFormSchema = z.object({
  firstName: z.string().trim().min(1, "First name is required"),
  lastName: z.string().trim().min(1, "Last name is required"),
  email: z.email("Enter a valid email address"),
  phone: z.string().trim().min(1, "Phone number is required"),
  notes: z.string().max(2000).optional(),
  policyAcknowledged: z.literal(true, { error: "Please acknowledge the cancellation policy" }),
});

const authenticatedFormSchema = z.object({
  notes: z.string().max(2000).optional(),
  policyAcknowledged: z.literal(true, { error: "Please acknowledge the cancellation policy" }),
});

export function DetailsForm(props: {
  businessId: string;
  cancellationPolicy?: string;
  isAuthenticated: boolean;
  prefill?: { firstName: string; lastName: string; email: string; phone: string };
  initialNotes?: string;
}) {
  const { businessId, cancellationPolicy, isAuthenticated, prefill, initialNotes } = props;
  const [serverError, setServerError] = useState<string | null>(null);
  const [isPending, startTransition] = useTransition();

  const schema = isAuthenticated ? authenticatedFormSchema : guestFormSchema;
  const {
    register,
    handleSubmit,
    setError,
    formState: { errors },
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
  } = useForm<any>({
    resolver: zodResolver(schema),
    defaultValues: {
      firstName: prefill?.firstName ?? "",
      lastName: prefill?.lastName ?? "",
      email: prefill?.email ?? "",
      phone: prefill?.phone ?? "",
      notes: initialNotes ?? "",
      policyAcknowledged: false,
    },
  });

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const onSubmit = (data: any) => {
    setServerError(null);
    startTransition(async () => {
      const result = await saveDetailsStepAction({ businessId, ...data });
      if (!result.success) {
        setServerError(result.error ?? "Please check the highlighted fields.");
        if (result.fieldErrors) {
          for (const [field, messages] of Object.entries(result.fieldErrors)) {
            if (messages?.[0]) setError(field, { message: messages[0] });
          }
        }
      }
    });
  };

  return (
    <form
      onSubmit={handleSubmit(onSubmit)}
      noValidate
      className="mx-auto max-w-2xl space-y-6 px-6 py-6"
    >
      {!isAuthenticated && (
        <div className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <Input
              label="First Name"
              error={errors.firstName?.message as string}
              {...register("firstName")}
            />
            <Input
              label="Last Name"
              error={errors.lastName?.message as string}
              {...register("lastName")}
            />
          </div>
          <Input
            label="Email Address"
            type="email"
            error={errors.email?.message as string}
            {...register("email")}
          />
          <Input
            label="Phone Number"
            type="tel"
            error={errors.phone?.message as string}
            {...register("phone")}
          />
        </div>
      )}

      {isAuthenticated && prefill && (
        <div className="rounded-jumbo border-line border bg-white p-5">
          <p className="text-muted text-[10px] font-bold tracking-widest uppercase">Booking as</p>
          <p className="mt-1 text-sm font-bold">
            {prefill.firstName} {prefill.lastName}
          </p>
          <p className="text-muted text-xs">
            {prefill.email}
            {prefill.phone ? ` · ${prefill.phone}` : ""}
          </p>
        </div>
      )}

      <Textarea
        label="Booking Notes (optional)"
        placeholder="e.g. skin sensitivity, specific style requests…"
        error={errors.notes?.message as string}
        {...register("notes")}
      />

      {cancellationPolicy && (
        <div className="border-line text-muted rounded-xl border bg-white p-4 text-xs">
          {cancellationPolicy}
        </div>
      )}

      <Checkbox label="I acknowledge the cancellation policy" {...register("policyAcknowledged")} />
      {errors.policyAcknowledged && (
        <p role="alert" className="text-danger -mt-4 text-xs font-medium">
          {errors.policyAcknowledged.message as string}
        </p>
      )}

      {serverError && (
        <p role="alert" className="text-danger text-sm font-medium">
          {serverError}
        </p>
      )}

      <Button type="submit" className="w-full" isLoading={isPending}>
        Continue to Review
      </Button>
    </form>
  );
}