road-monitoring-ui/src/app/(modules)/clients/components/ClientSheet.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,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import type { ClientFormValues } from '../hooks/useClientForm';

interface ClientSheetProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  clientId?: number;
  register: UseFormRegister<ClientFormValues>;
  errors: FieldErrors<ClientFormValues>;
  isSubmitted: boolean;
  onSubmit: ComponentProps<'form'>['onSubmit'];
  canSubmit: boolean;
  isSaving: boolean;
}

export function ClientSheet({
  open,
  onOpenChange,
  clientId,
  register,
  errors,
  isSubmitted,
  onSubmit,
  canSubmit,
  isSaving,
}: ClientSheetProps) {
  const nameErrorMessage = isSubmitted ? errors.name?.message : undefined;
  const emailErrorMessage = isSubmitted ? errors.email?.message : undefined;
  const landlineErrorMessage = isSubmitted
    ? errors.landline_number?.message
    : undefined;
  const addressErrorMessage = isSubmitted ? errors.address?.message : undefined;
  const contactNameErrorMessage = isSubmitted
    ? errors.contact_name?.message
    : undefined;
  const contactPhoneErrorMessage = isSubmitted
    ? errors.contact_phone_number?.message
    : undefined;
  const contactEmailErrorMessage = isSubmitted
    ? errors.contact_email?.message
    : undefined;

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="flex max-h-[calc(100vh-2rem)] flex-col gap-0 p-0 sm:max-w-3xl">
        <DialogHeader className="shrink-0 border-b px-6 py-4 pr-12">
          <DialogTitle className="text-lg leading-none font-semibold tracking-tight">
            {clientId ? 'Edit Client' : 'Create Client'}
          </DialogTitle>
          <DialogDescription className="text-sm">
            Manage company and primary contact details.
          </DialogDescription>
        </DialogHeader>

        <form onSubmit={onSubmit} className="flex min-h-0 flex-1 flex-col">
          <div className="max-h-[58vh] space-y-5 overflow-y-auto px-6 py-4">
            <div className="grid gap-4 md:grid-cols-2">
              <FormField
                id="client-name"
                label="Client Name"
                required
                error={nameErrorMessage}
              >
                <Input
                  id="client-name"
                  placeholder="Enter client name"
                  aria-invalid={!!nameErrorMessage}
                  {...register('name')}
                />
              </FormField>

              <FormField
                id="client-email"
                label="Company Email"
                required
                error={emailErrorMessage}
              >
                <Input
                  id="client-email"
                  type="email"
                  placeholder="info@example.com"
                  aria-invalid={!!emailErrorMessage}
                  {...register('email')}
                />
              </FormField>
            </div>

            <div className="grid gap-4 md:grid-cols-2">
              <FormField
                id="landline-number"
                label="Landline Number"
                required
                error={landlineErrorMessage}
              >
                <Input
                  id="landline-number"
                  placeholder="+91-22-12345678"
                  aria-invalid={!!landlineErrorMessage}
                  {...register('landline_number')}
                />
              </FormField>

              <FormField
                id="address"
                label="Address"
                required
                error={addressErrorMessage}
              >
                <Input
                  id="address"
                  placeholder="12 MG Road, Mumbai, MH 400001"
                  aria-invalid={!!addressErrorMessage}
                  {...register('address')}
                />
              </FormField>
            </div>

            <div className="grid gap-4 md:grid-cols-3">
              <FormField id="gst" label="GST">
                <Input
                  id="gst"
                  placeholder="27ABCDE1234F1Z5"
                  {...register('gst')}
                />
              </FormField>

              <FormField id="pan" label="PAN">
                <Input id="pan" placeholder="ABCDE1234F" {...register('pan')} />
              </FormField>

              <FormField id="tan" label="TAN">
                <Input id="tan" placeholder="MUMA12345B" {...register('tan')} />
              </FormField>
            </div>

            <div className="grid gap-4 md:grid-cols-3">
              <FormField
                id="contact-name"
                label="Contact Name"
                required
                error={contactNameErrorMessage}
              >
                <Input
                  id="contact-name"
                  placeholder="Enter contact name"
                  aria-invalid={!!contactNameErrorMessage}
                  {...register('contact_name')}
                />
              </FormField>

              <FormField
                id="contact-phone-number"
                label="Contact Phone"
                required
                error={contactPhoneErrorMessage}
              >
                <Input
                  id="contact-phone-number"
                  placeholder="+919876543210"
                  aria-invalid={!!contactPhoneErrorMessage}
                  {...register('contact_phone_number')}
                />
              </FormField>

              <FormField
                id="contact-email"
                label="Contact Email"
                required
                error={contactEmailErrorMessage}
              >
                <Input
                  id="contact-email"
                  type="email"
                  placeholder="contact@example.com"
                  aria-invalid={!!contactEmailErrorMessage}
                  {...register('contact_email')}
                />
              </FormField>
            </div>
          </div>

          <DialogFooter className="shrink-0 border-t px-6 py-4">
            <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}
              {clientId ? 'Update Client' : 'Create Client'}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}