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

import { useEffect, useMemo, useState } from "react";
import { Controller, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { useNavigate, useParams } from "react-router";
import {
  Alert,
  Autocomplete,
  Box,
  Button,
  CircularProgress,
  FormControl,
  InputLabel,
  MenuItem,
  Paper,
  Select,
  Stack,
  TextField,
  Typography,
} from "@mui/material";
import type { AccountListItem } from "@/domain/accounts/types/account";
import { useAccountsList } from "@/domain/accounts/use-cases/use-accounts-list";
import {
  locationDefaultValues,
  locationSchema,
  type LocationFormValues,
} from "@/domain/locations/schemas/location-schema";
import { LOCATION_STATE_OPTIONS, LOCATION_STATUS_OPTIONS } from "@/domain/locations/types/location";
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";

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: (location.state as LocationFormValues["state"]) || "IL",
        zipCode: location.zipCode ?? "",
        phone: location.phone ?? "",
        contact: location.contact ?? "",
        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">
            <Stack spacing={2}>
              <Typography variant="subtitle1" className="font-semibold">
                Location Information
              </Typography>
              <Stack direction={{ xs: "column", md: "row" }} spacing={2}>
                <TextField
                  {...register("name")}
                  label="Name"
                  required
                  error={Boolean(errors.name)}
                  helperText={errors.name?.message}
                  fullWidth
                />
                <Controller
                  name="accountId"
                  control={control}
                  render={({ field }) => (
                    <Autocomplete
                      options={accountOptions}
                      loading={isLoadingAccounts}
                      getOptionLabel={(option: AccountListItem) => option.name || String(option.id)}
                      isOptionEqualToValue={(option, value) =>
                        String(option.id) === String(value.id)
                      }
                      value={
                        accountOptions.find((account) => String(account.id) === field.value) ?? null
                      }
                      onChange={(_event, option) => field.onChange(option ? String(option.id) : "")}
                      onInputChange={(_event, value, reason) => {
                        if (reason === "input") {
                          setAccountSearch(value);
                        }
                      }}
                      renderInput={(params) => (
                        <TextField {...params} label="Account" placeholder="Search accounts..." />
                      )}
                      className="flex-1"
                    />
                  )}
                />
              </Stack>
              <TextField
                {...register("address")}
                label="Address"
                required
                error={Boolean(errors.address)}
                helperText={errors.address?.message}
                fullWidth
              />
              <Stack direction={{ xs: "column", md: "row" }} spacing={2}>
                <TextField
                  {...register("city")}
                  label="City"
                  required
                  error={Boolean(errors.city)}
                  helperText={errors.city?.message}
                  fullWidth
                />
                <Controller
                  name="state"
                  control={control}
                  render={({ field }) => (
                    <FormControl fullWidth required error={Boolean(errors.state)}>
                      <InputLabel id="state-label">State</InputLabel>
                      <Select {...field} labelId="state-label" label="State" value={field.value}>
                        {LOCATION_STATE_OPTIONS.map((state) => (
                          <MenuItem key={state} value={state}>
                            {state}
                          </MenuItem>
                        ))}
                      </Select>
                    </FormControl>
                  )}
                />
                <TextField
                  {...register("zipCode")}
                  label="Zip Code"
                  required
                  error={Boolean(errors.zipCode)}
                  helperText={errors.zipCode?.message}
                  fullWidth
                />
              </Stack>
            </Stack>

            <Stack spacing={2}>
              <Typography variant="subtitle1" className="font-semibold">
                Contact Information
              </Typography>
              <Stack direction={{ xs: "column", md: "row" }} spacing={2}>
                <TextField
                  {...register("phone")}
                  label="Phone"
                  required
                  error={Boolean(errors.phone)}
                  helperText={errors.phone?.message}
                  fullWidth
                />
                <TextField
                  {...register("contact")}
                  label="Contact Person"
                  required
                  error={Boolean(errors.contact)}
                  helperText={errors.contact?.message}
                  fullWidth
                />
              </Stack>
              <Stack direction={{ xs: "column", md: "row" }} spacing={2}>
                <TextField
                  {...register("contactEmail")}
                  label="Contact Email"
                  type="email"
                  required
                  error={Boolean(errors.contactEmail)}
                  helperText={errors.contactEmail?.message}
                  fullWidth
                />
                <Controller
                  name="status"
                  control={control}
                  render={({ field }) => (
                    <FormControl fullWidth required error={Boolean(errors.status)}>
                      <InputLabel id="status-label">Status</InputLabel>
                      <Select {...field} labelId="status-label" label="Status" value={field.value}>
                        {LOCATION_STATUS_OPTIONS.map((status) => (
                          <MenuItem key={status} value={status}>
                            {status}
                          </MenuItem>
                        ))}
                      </Select>
                    </FormControl>
                  )}
                />
              </Stack>
            </Stack>

            <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>
  );
}