road-monitoring-ui/src/app/(modules)/tenants/components/TenantSheet.tsx

'use client';

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

import { FormField, PhoneInput, SelectPopover } 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 { Client, Plan } from '@/types';

import type {
  TenantAdminFieldLocks,
  TenantFormValues,
} from '../hooks/useTenantForm';

interface TenantSheetProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  tenantId?: number;
  isEditMode: boolean;
  register: UseFormRegister<TenantFormValues>;
  control: Control<TenantFormValues>;
  errors: FieldErrors<TenantFormValues>;
  isSubmitted: boolean;
  onSubmit: ComponentProps<'form'>['onSubmit'];
  canSubmit: boolean;
  clientId: string;
  planId: string;
  onClientChange: (clientId: string) => void;
  onPlanChange: (planId: string) => void;
  onNameChange: (name: string) => void;
  clients: Client[];
  plans: Plan[];
  isLookupsLoading: boolean;
  isSaving: boolean;
  adminEmail?: string;
  adminFieldLocks: TenantAdminFieldLocks;
}

export function TenantSheet({
  open,
  onOpenChange,
  tenantId,
  isEditMode,
  register,
  control,
  errors,
  isSubmitted,
  onSubmit,
  canSubmit,
  clientId,
  planId,
  onClientChange,
  onPlanChange,
  onNameChange,
  clients,
  plans,
  isLookupsLoading,
  isSaving,
  adminEmail,
  adminFieldLocks,
}: TenantSheetProps) {
  const dropdownPortalRef = useRef<HTMLDivElement | null>(null);
  const fieldError = (field: keyof TenantFormValues) =>
    isSubmitted ? errors[field]?.message : undefined;

  const clientOptions = useMemo(
    () =>
      clients.map((client) => ({
        value: String(client.id),
        label: [client.first_name, client.last_name].filter(Boolean).join(' '),
      })),
    [clients],
  );

  const planOptions = useMemo(
    () =>
      plans.map((plan) => ({
        value: String(plan.id),
        label: plan.name,
      })),
    [plans],
  );

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-3xl">
        <DialogHeader>
          <DialogTitle>
            {tenantId ? 'Edit Tenant' : 'Create Tenant'}
          </DialogTitle>
          <DialogDescription>
            Bind a client and subscription plan, then invite the tenant
            administrator.
          </DialogDescription>
        </DialogHeader>

        <form
          noValidate
          onSubmit={onSubmit}
          className="flex min-h-0 flex-1 flex-col"
        >
          <DialogBody className="space-y-5">
            <div className="space-y-1">
              <p>Basic Information</p>
              <p className="text-muted-foreground">
                Tenant identity and subscription binding.
              </p>
            </div>

            <div className="grid gap-4 md:grid-cols-2">
              <FormField
                id="tenant-name"
                label="Tenant Name"
                required
                error={fieldError('name')}
              >
                <Input
                  id="tenant-name"
                  placeholder="Enter tenant name"
                  aria-invalid={!!fieldError('name')}
                  {...register('name', {
                    onChange: (event) => onNameChange(event.target.value),
                  })}
                />
              </FormField>

              <FormField
                id="tenant-slug"
                label="Slug"
                required
                error={fieldError('slug')}
              >
                <Input
                  id="tenant-slug"
                  placeholder="acme-corp"
                  aria-invalid={!!fieldError('slug')}
                  {...register('slug')}
                  readOnly={isEditMode}
                />
              </FormField>
            </div>

            <div className="grid gap-4 md:grid-cols-2">
              <FormField
                id="tenant-client"
                label="Client"
                required
                error={fieldError('client_id')}
              >
                <SelectPopover
                  options={clientOptions}
                  value={clientId}
                  onValueChange={onClientChange}
                  disabled={isLookupsLoading}
                  portalContainer={dropdownPortalRef}
                  placeholder={
                    isLookupsLoading ? 'Loading clients...' : 'Select client'
                  }
                  searchPlaceholder="Search clients"
                  emptyMessage="No clients found."
                />
                <input
                  type="hidden"
                  {...register('client_id')}
                  value={clientId}
                  readOnly
                />
              </FormField>

              <FormField
                id="tenant-plan"
                label="Subscription Plan"
                required
                error={fieldError('plan_id')}
              >
                <SelectPopover
                  options={planOptions}
                  value={planId}
                  onValueChange={onPlanChange}
                  disabled={isLookupsLoading}
                  portalContainer={dropdownPortalRef}
                  placeholder={
                    isLookupsLoading ? 'Loading plans...' : 'Select plan'
                  }
                  searchPlaceholder="Search plans"
                  emptyMessage="No plans found."
                />
                <input
                  type="hidden"
                  {...register('plan_id')}
                  value={planId}
                  readOnly
                />
              </FormField>
            </div>

            <div className="grid gap-4 md:grid-cols-2">
              <FormField id="tenant-domain" label="Domain">
                <Input
                  id="tenant-domain"
                  placeholder="acme.example.com"
                  {...register('domain')}
                />
              </FormField>

              <FormField
                id="tenant-description"
                label="Description"
                className="md:col-span-2"
              >
                <textarea
                  id="tenant-description"
                  placeholder="North zone operations"
                  {...register('description')}
                  className="min-h-20 w-full rounded-lg border border-input bg-background px-3 py-2 outline-none focus-visible:border-ring"
                />
              </FormField>
            </div>

            {!isEditMode ? (
              <>
                <div className="space-y-1">
                  <p>Tenant Administrator</p>
                  <p className="text-muted-foreground">
                    Invitation details for the primary tenant admin account.
                  </p>
                </div>

                <div className="grid gap-4 md:grid-cols-2">
                  <FormField
                    id="admin-first-name"
                    label="First Name"
                    required
                    error={fieldError('admin_first_name')}
                  >
                    <Input
                      id="admin-first-name"
                      placeholder="Enter first name"
                      aria-invalid={!!fieldError('admin_first_name')}
                      readOnly={adminFieldLocks.admin_first_name}
                      {...register('admin_first_name')}
                    />
                  </FormField>

                  <FormField
                    id="admin-last-name"
                    label="Last Name"
                    required
                    error={fieldError('admin_last_name')}
                  >
                    <Input
                      id="admin-last-name"
                      placeholder="Enter last name"
                      aria-invalid={!!fieldError('admin_last_name')}
                      readOnly={adminFieldLocks.admin_last_name}
                      {...register('admin_last_name')}
                    />
                  </FormField>
                </div>

                <div className="grid gap-4 md:grid-cols-2">
                  <FormField
                    id="admin-email"
                    label="Admin Email"
                    required
                    error={fieldError('admin_email')}
                  >
                    <Input
                      id="admin-email"
                      type="email"
                      placeholder="admin@example.com"
                      aria-invalid={!!fieldError('admin_email')}
                      readOnly={adminFieldLocks.admin_email}
                      {...register('admin_email')}
                    />
                  </FormField>

                  <FormField
                    id="admin-phone"
                    label="Phone Number"
                    error={fieldError('admin_phone_number')}
                  >
                    <Controller
                      control={control}
                      name="admin_phone_number"
                      render={({ field }) => (
                        <PhoneInput
                          value={field.value}
                          onChange={field.onChange}
                          onBlur={field.onBlur}
                          placeholder="Enter phone number"
                          aria-invalid={!!fieldError('admin_phone_number')}
                          disabled={adminFieldLocks.admin_phone_number}
                          portalContainer={dropdownPortalRef}
                        />
                      )}
                    />
                  </FormField>
                </div>
              </>
            ) : adminEmail ? (
              <div className="rounded-lg border bg-muted/40 p-4 text-muted-foreground">
                Admin invitation details cannot be changed after tenant
                creation.
                <p className="mt-1 text-foreground">
                  Current admin email: <span>{adminEmail}</span>
                </p>
              </div>
            ) : null}
          </DialogBody>

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

        <div ref={dropdownPortalRef} />
      </DialogContent>
    </Dialog>
  );
}