shoc-frontend-new/src/app/(protected)/assets/_components/asset-form.tsx

import { useEffect } from "react";
import { Controller, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { useNavigate, useParams } from "react-router";
import {
  Alert,
  Box,
  Button,
  CircularProgress,
  FormControl,
  FormControlLabel,
  InputLabel,
  MenuItem,
  Paper,
  Select,
  Stack,
  Switch,
  TextField,
  Typography,
} from "@mui/material";
import { assetSchema, type AssetFormValues } from "@/domain/assets/schemas/asset-schema";
import { useAssetDetail } from "@/domain/assets/use-cases/use-asset-detail";
import { useAssetFormOptions } from "@/domain/assets/use-cases/use-asset-form-options";
import { useCreateAsset } from "@/domain/assets/use-cases/use-create-asset";
import { useUpdateAsset } from "@/domain/assets/use-cases/use-update-asset";

const defaultValues: AssetFormValues = {
  assetCode: "",
  name: "",
  description: "",
  accountId: null,
  locationId: null,
  isActive: true,
};

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

  const { data: asset, isLoading, error } = useAssetDetail(id);
  const { accounts, sites, isLoading: optionsLoading, error: optionsError } = useAssetFormOptions();
  const createAsset = useCreateAsset();
  const updateAsset = useUpdateAsset();

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

  useEffect(() => {
    if (asset && isEdit) {
      reset({
        assetCode: asset.assetCode,
        name: asset.name,
        description: asset.description,
        accountId: asset.accountId,
        locationId: asset.locationId,
        isActive: asset.isActive,
      });
    }
  }, [asset, isEdit, reset]);

  const isSaving = createAsset.isPending || updateAsset.isPending;

  const onSubmit = (values: AssetFormValues) => {
    if (isEdit && id) {
      updateAsset.mutate({ id, values });
      return;
    }
    createAsset.mutate(values);
  };

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

  return (
    <Box className="mx-auto max-w-3xl p-4">
      <Paper variant="outlined" className="p-6">
        <Stack spacing={3}>
          <Typography variant="h5">{isEdit ? "Edit Asset" : "Create Asset"}</Typography>

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

          <Box component="form" onSubmit={handleSubmit(onSubmit)}>
            <Stack spacing={3}>
              <Stack direction={{ xs: "column", sm: "row" }} spacing={2}>
                <TextField
                  label="Asset Code"
                  required
                  fullWidth
                  error={Boolean(errors.assetCode)}
                  helperText={errors.assetCode?.message}
                  {...register("assetCode")}
                />
                <TextField
                  label="Name"
                  required
                  fullWidth
                  error={Boolean(errors.name)}
                  helperText={errors.name?.message}
                  {...register("name")}
                />
              </Stack>

              <TextField
                label="Description"
                fullWidth
                multiline
                rows={3}
                {...register("description")}
              />

              <Controller
                name="accountId"
                control={control}
                render={({ field }) => (
                  <FormControl fullWidth>
                    <InputLabel>Account</InputLabel>
                    <Select
                      label="Account"
                      value={field.value ?? ""}
                      onChange={(event) => {
                        const value = String(event.target.value);
                        field.onChange(value === "" ? null : Number(value));
                      }}
                    >
                      <MenuItem value="">
                        <em>None</em>
                      </MenuItem>
                      {accounts.map((account) => (
                        <MenuItem key={String(account.id)} value={account.id}>
                          {account.name}
                        </MenuItem>
                      ))}
                    </Select>
                  </FormControl>
                )}
              />

              <Controller
                name="locationId"
                control={control}
                render={({ field }) => (
                  <FormControl fullWidth>
                    <InputLabel>Location</InputLabel>
                    <Select
                      label="Location"
                      value={field.value ?? ""}
                      onChange={(event) => {
                        const value = String(event.target.value);
                        field.onChange(value === "" ? null : Number(value));
                      }}
                    >
                      <MenuItem value="">
                        <em>None</em>
                      </MenuItem>
                      {sites.map((site) => (
                        <MenuItem key={String(site.id)} value={site.id}>
                          {site.title ? `${site.title} - ${site.name}` : site.name}
                        </MenuItem>
                      ))}
                    </Select>
                  </FormControl>
                )}
              />

              <Controller
                name="isActive"
                control={control}
                render={({ field }) => (
                  <FormControlLabel
                    control={<Switch checked={field.value} onChange={field.onChange} />}
                    label="Active"
                  />
                )}
              />

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