shoc-frontend-new/src/app/(protected)/locations/_components/location-form.tsx

import { useEffect, useMemo, useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { useNavigate, useParams } from "react-router";
import { Alert, Box, Button, CircularProgress, Paper, Stack, Typography } from "@mui/material";
import { useAccountsList } from "@/domain/accounts/use-cases/use-accounts-list";
import { normalizeStateCode } from "@/data/areas";
import {
  locationDefaultValues,
  locationSchema,
  type LocationFormValues,
} from "@/domain/locations/schemas/location-schema";
import { useCreateLocation } from "@/domain/locations/use-cases/use-create-location";
import { useLocationDetail } from "@/domain/locations/use-cases/use-location-detail";
import { useUpdateLocation } from "@/domain/locations/use-cases/use-update-location";
import { useDebounce } from "@/hooks/use-debounce";
import { LocationContactFields, LocationDetailsFields } from "./location-form-fields";

export default function LocationFormPage() {
  const { id } = useParams();
  const navigate = useNavigate();
  const isEdit = Boolean(id);

  const [accountSearch, setAccountSearch] = useState("");
  const debouncedAccountSearch = useDebounce(accountSearch, 300);

  const { data: location, isLoading, error } = useLocationDetail(id);
  const { data: accountsData, isLoading: isLoadingAccounts } = useAccountsList({
    search: debouncedAccountSearch,
    page: 1,
    pageSize: 50,
  });
  const createLocation = useCreateLocation();
  const updateLocation = useUpdateLocation();

  const accountOptions = useMemo(() => accountsData?.items ?? [], [accountsData?.items]);

  const {
    register,
    handleSubmit,
    reset,
    control,
    formState: { errors },
  } = useForm<LocationFormValues>({
    resolver: zodResolver(locationSchema),
    defaultValues: locationDefaultValues,
  });

  useEffect(() => {
    if (location && isEdit) {
      reset({
        name: location.name ?? "",
        accountId: location.accountId != null ? String(location.accountId) : "",
        address: location.address ?? "",
        city: location.city ?? "",
        state: normalizeStateCode(location.state) ?? "",
        zipCode: location.zipCode ?? "",
        contacts:
          location.contacts && location.contacts.length > 0
            ? location.contacts
            : [{ name: location.contact ?? "", phone: location.phone ?? "" }],
        contactEmail: location.contactEmail ?? "",
        status: (location.status as LocationFormValues["status"]) || "Active",
      });
    }
  }, [location, isEdit, reset]);

  const isSaving = createLocation.isPending || updateLocation.isPending;

  const onSubmit = (values: LocationFormValues) => {
    if (isEdit && id) {
      updateLocation.mutate({ id, values });
      return;
    }
    createLocation.mutate(values);
  };

  if (isEdit && isLoading) {
    return (
      <Box className="flex justify-center p-10">
        <CircularProgress />
      </Box>
    );
  }

  return (
    <Box className="mx-auto max-w-4xl p-4">
      <Paper variant="outlined" className="p-6">
        <Stack spacing={4}>
          <Stack
            direction="row"
            sx={{
              justifyContent: "space-between",
              alignItems: "center",
            }}
          >
            <Typography variant="h5" component="h1">
              {isEdit ? "Edit Location" : "Create a Location"}
            </Typography>
            <Button variant="text" onClick={() => navigate("/locations")}>
              Back to list
            </Button>
          </Stack>

          {Boolean(error) && (
            <Alert severity="error">
              {error instanceof Error ? error.message : "Failed to load location"}
            </Alert>
          )}

          <Box component="form" onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6">
            <LocationDetailsFields
              accountOptions={accountOptions}
              control={control}
              errors={errors}
              isLoadingAccounts={isLoadingAccounts}
              onAccountSearchChange={setAccountSearch}
              register={register}
            />
            <LocationContactFields control={control} errors={errors} register={register} />

            <Stack
              direction="row"
              spacing={2}
              sx={{
                justifyContent: "flex-end",
              }}
            >
              <Button variant="outlined" onClick={() => navigate("/locations")} disabled={isSaving}>
                Cancel
              </Button>
              <Button type="submit" variant="contained" disabled={isSaving}>
                {isSaving ? "Saving..." : isEdit ? "Update Location" : "Create Location"}
              </Button>
            </Stack>
          </Box>
        </Stack>
      </Paper>
    </Box>
  );
}