road-monitoring-ui/src/app/(modules)/project/components/ProjectDialog.tsx

'use client';

import type { ComponentProps } from 'react';
import type { FieldErrors, UseFormRegister } from 'react-hook-form';
import { Loader2 } from 'lucide-react';

import { FormField } from '@/components/form';
import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogBody,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';

import type { ProjectFormValues } from '../hooks/useProjectForm';

interface ProjectDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  projectId?: string;
  register: UseFormRegister<ProjectFormValues>;
  errors: FieldErrors<ProjectFormValues>;
  isSubmitted: boolean;
  onSubmit: ComponentProps<'form'>['onSubmit'];
  canSubmit: boolean;
  isSaving: boolean;
}

export function ProjectDialog({
  open,
  onOpenChange,
  projectId,
  register,
  errors,
  isSubmitted,
  onSubmit,
  canSubmit,
  isSaving,
}: ProjectDialogProps) {
  const nameErrorMessage = isSubmitted ? errors.name?.message : undefined;
  const startLatErrorMessage = isSubmitted
    ? errors.start_lat?.message
    : undefined;
  const startLngErrorMessage = isSubmitted
    ? errors.start_lng?.message
    : undefined;
  const endLatErrorMessage = isSubmitted ? errors.end_lat?.message : undefined;
  const endLngErrorMessage = isSubmitted ? errors.end_lng?.message : undefined;

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent
        className="sm:max-w-2xl"
        onOpenAutoFocus={(event) => event.preventDefault()}
      >
        <DialogHeader>
          <DialogTitle>
            {projectId ? 'Edit Project' : 'Create Project'}
          </DialogTitle>
          <DialogDescription>
            Manage road project identity and optional coordinate boundaries.
          </DialogDescription>
        </DialogHeader>

        <form
          noValidate
          onSubmit={onSubmit}
          className="flex min-h-0 flex-1 flex-col"
        >
          <DialogBody className="space-y-6">
            <section className="space-y-4">
              <div className="space-y-1">
                <h3 className="text-sm font-semibold">Basic details</h3>
                <p className="text-sm text-muted-foreground">
                  Project name and corridor information.
                </p>
              </div>

              <FormField
                id="project-name"
                label="Project Name"
                required
                error={nameErrorMessage}
              >
                <Input
                  id="project-name"
                  placeholder="Enter project name"
                  aria-invalid={!!nameErrorMessage}
                  {...register('name')}
                />
              </FormField>

              <div className="grid gap-4 md:grid-cols-2">
                <FormField id="project-state" label="State">
                  <Input
                    id="project-state"
                    placeholder="Enter state"
                    {...register('state')}
                  />
                </FormField>
                <FormField id="project-corridor" label="Corridor Name">
                  <Input
                    id="project-corridor"
                    placeholder="Enter corridor name"
                    {...register('corridor_name')}
                  />
                </FormField>
              </div>
            </section>

            <section className="space-y-4">
              <div className="space-y-1">
                <h3 className="text-sm font-semibold">Coordinates</h3>
                <p className="text-sm text-muted-foreground">
                  Optional start and end points for the project boundary.
                </p>
              </div>

              <div className="space-y-5">
                <div className="grid grid-cols-2 gap-4">
                  <FormField
                    id="project-start-lat"
                    label="Start Latitude"
                    error={startLatErrorMessage}
                  >
                    <Input
                      id="project-start-lat"
                      type="number"
                      step="any"
                      min="-90"
                      max="90"
                      placeholder="Enter start latitude"
                      aria-invalid={!!startLatErrorMessage}
                      {...register('start_lat')}
                    />
                  </FormField>
                  <FormField
                    id="project-start-lng"
                    label="Start Longitude"
                    error={startLngErrorMessage}
                  >
                    <Input
                      id="project-start-lng"
                      type="number"
                      step="any"
                      min="-180"
                      max="180"
                      placeholder="Enter start longitude"
                      aria-invalid={!!startLngErrorMessage}
                      {...register('start_lng')}
                    />
                  </FormField>
                </div>

                <div className="grid grid-cols-2 gap-4">
                  <FormField
                    id="project-end-lat"
                    label="End Latitude"
                    error={endLatErrorMessage}
                  >
                    <Input
                      id="project-end-lat"
                      type="number"
                      step="any"
                      min="-90"
                      max="90"
                      placeholder="Enter end latitude"
                      aria-invalid={!!endLatErrorMessage}
                      {...register('end_lat')}
                    />
                  </FormField>
                  <FormField
                    id="project-end-lng"
                    label="End Longitude"
                    error={endLngErrorMessage}
                  >
                    <Input
                      id="project-end-lng"
                      type="number"
                      step="any"
                      min="-180"
                      max="180"
                      placeholder="Enter end longitude"
                      aria-invalid={!!endLngErrorMessage}
                      {...register('end_lng')}
                    />
                  </FormField>
                </div>
              </div>
            </section>
          </DialogBody>

          <DialogFooter>
            <Button
              type="button"
              variant="outline"
              onClick={() => onOpenChange(false)}
              disabled={isSaving}
            >
              Cancel
            </Button>
            <Button type="submit" disabled={isSaving || !canSubmit}>
              {isSaving ? (
                <Loader2 className="mr-2 size-4 animate-spin" />
              ) : null}
              {projectId ? 'Update Project' : 'Create Project'}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}