'use client';

import React, { useState, useMemo } from 'react';
import { useRouter } from 'next/navigation';
import { useForm, useFieldArray, Controller } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { State, City } from 'country-state-city';
import {
  UserPlus,
  Eye,
  EyeOff,
  Check,
  Plus,
  Trash2,
  ArrowLeft,
  Building2,
  MapPin,
  FileCheck,
  UserCheck,
  Upload,
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { useProvisionDistrictSectorOwner } from '@/services/district-sector-assignments/queries';
import { useAllDistricts } from '@/services/districts/queries';
import { useAllDistrictSectors, useAllSectors } from '@/services/sectors/queries';
import { useSystemUSerRoles } from '@/services/roles/queries';
import { provisionSchema } from '@/schemas/district-sector-owner.schema';
import { DOCUMENT_TYPES } from '@/constants/documents';

type ProvisionFormValues = z.infer<typeof provisionSchema>;

function SectorSelectRow({
  districtId,
  selectedSectorId,
  onChange,
  disabledSectorIds,
}: {
  districtId: string;
  selectedSectorId: string;
  onChange: (sectorId: string) => void;
  disabledSectorIds: string[];
}) {
  const { data: sectorsData, isLoading: isLoadingSectors } = useAllDistrictSectors(
    districtId,
    'inactive'
  );

  const sectors = (sectorsData as any)?.items || sectorsData || [];

  return (
    <div className="w-full">
      <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
        Sector Target{' '}
        {isLoadingSectors && (
          <span className="text-[9px] lowercase text-primary animate-pulse">
            (loading...)
          </span>
        )}
      </label>
      <select
        value={selectedSectorId || ''}
        onChange={(e) => onChange(e.target.value)}
        className="w-full text-xs p-2 border border-border/40 rounded-lg bg-background text-foreground focus:outline-none focus:border-primary cursor-pointer"
        disabled={!districtId || sectors.length === 0}
      >
        <option value="">
          {!districtId
            ? '-- Select District First --'
            : sectors.length === 0
            ? 'No operational sectors mapped'
            : '-- Choose Sector --'}
        </option>
        {sectors.map((s: any) => {
          // Fallback safely whether the object is a flat Sector or nested DistrictSector
          const targetSectorId = s.sectorId || s.sector?.id || s.id;
          const targetSectorName = s.sector?.name || s.name || 'Unnamed Sector';
          const targetSectorCode = s.sector?.code || s.code;

          const isTaken = disabledSectorIds.includes(targetSectorId) && targetSectorId !== selectedSectorId;
          return (
            <option key={s.id || targetSectorId} value={targetSectorId} disabled={isTaken}>
              {targetSectorName} {targetSectorCode ? `(${targetSectorCode})` : ''} {s.isActive ? '(Active)' : '(Unassigned)'} {isTaken ? ' - Selected' : ''}
            </option>
          );
        })}
      </select>
    </div>
  );
}

export default function NewDistrictSectorOwnerPage() {
  const router = useRouter();
  const { data: districtsData } = useAllDistricts();
  const { data: systemRoles } = useSystemUSerRoles();
  const provisionMutation = useProvisionDistrictSectorOwner();

  const rawDistricts = (districtsData as any)?.items || districtsData || [];
  const [showPassword, setShowPassword] = useState(false);
  const [error, setError] = useState<string | null>(null);

  // Fetch all Indian states
  const indianStates = useMemo(() => State.getStatesOfCountry('IN'), []);

  const {
    register,
    control,
    handleSubmit,
    watch,
    setValue,
    formState: { errors },
  } = useForm<ProvisionFormValues>({
    resolver: zodResolver(provisionSchema),
    defaultValues: {
      newUser: {
        firstName: '',
        lastName: '',
        email: '',
        phone: '',
        password: '',
      },
      profile: {
        registeredOfficeAddress: '',
        city: '',
        state: 'Maharashtra',
        postalCode: '',
        organizationName: '',
        taxIdentifier: '',
        corporateRegNumber: '',
        officialLandline: '',
        aadhaarNumber: '',
        panNumber: '',
        bankAccountNumber: '',
        bankIFSC: '',
        bankName: '',
        bankAccountHolder: '',
      },
      kyc: {
        isDelegated: false,
        assignedToRole: 'KYC_OFFICER',
        assignedToUserId: '',
        documents: [
          { type: 'AADHAAR', file: null },
          { type: 'PAN', file: null },
        ],
      },
      assignments: [{ districtId: '', sectorId: '' }],
    },
  });

  const selectedStateName = watch('profile.state');

  const { fields: documentFields, append: appendDocument, remove: removeDocument } =
    useFieldArray({ control, name: 'kyc.documents' });

  const isKycDelegated = watch('kyc.isDelegated');
  const assignedRole = watch('kyc.assignedToRole');

  // Match ISO Code for city lookup
  const selectedStateObj = useMemo(() => {
    return indianStates.find(
      (s) => s.name === selectedStateName || s.isoCode === selectedStateName
    );
  }, [indianStates, selectedStateName]);

  // Fetch cities scoped strictly to the selected Indian state
  const availableCities = useMemo(() => {
    return selectedStateObj ? City.getCitiesOfState('IN', selectedStateObj.isoCode) : [];
  }, [selectedStateObj]);

  const {
    fields: assignmentFields,
    append: appendAssignment,
    remove: removeAssignment,
  } = useFieldArray({ control, name: 'assignments' });

  const watchedAssignments = watch('assignments');

  const onSubmit = async (data: ProvisionFormValues) => {
    setError(null);

    // ✅ Extract ONLY rows where BOTH districtId AND sectorId are selected
    const validAssignments = (data.assignments || [])
      .filter((a) => Boolean(a?.districtId?.trim()) && Boolean(a?.sectorId?.trim()))
      .map((a) => ({
        districtId: a.districtId!.trim(),
        sectorId: a.sectorId!.trim(),
      }));

    try {
      await provisionMutation.mutateAsync({
        assignments: validAssignments,
        newUser: {
          ...data.newUser,
          email: data.newUser.email.toLowerCase().trim(),
          phone: data.newUser.phone?.trim() || null,
        },
        profile: {
          ...data.profile,
          registeredOfficeAddress: data.profile.registeredOfficeAddress?.trim() || null,
          city: data.profile.city?.trim() || null,
          state: data.profile.state?.trim() || null,
          postalCode: data.profile.postalCode?.trim() || null,
          organizationName: data.profile.organizationName?.trim() || null,
          taxIdentifier: data.profile.taxIdentifier?.trim() || null,
          corporateRegNumber: data.profile.corporateRegNumber?.trim() || null,
          officialLandline: data.profile.officialLandline?.trim() || null,
          aadhaarNumber: data.profile.aadhaarNumber?.trim() || null,
          panNumber: data.profile.panNumber?.trim() || null,
          bankAccountNumber: data.profile.bankAccountNumber?.trim() || null,
          bankIFSC: data.profile.bankIFSC?.trim() || null,
          bankName: data.profile.bankName?.trim() || null,
          bankAccountHolder: data.profile.bankAccountHolder?.trim() || null,
        },
        kyc: {
          isDelegated: data.kyc.isDelegated,
          assignedToRole: data.kyc.isDelegated ? data.kyc.assignedToRole || null : null,
          assignedToUserId: data.kyc.isDelegated ? data.kyc.assignedToUserId || null : null,
          documents: !data.kyc.isDelegated
            ? data.kyc.documents.filter((d) => d.file !== null)
            : [],
        },
      });

      router.push('/users');
    } catch (err: any) {
      // 1. Extract message from Axios response payload first
      const serverMessage =
        err?.response?.data?.message ||
        err?.response?.data?.error ||
        err?.message ||
        'Failed to register the requested administrative boundary.';

      // 2. Set UI state error
      setError(serverMessage);

      // Log for developer debugging
      console.error('Boundary Registration Error Details:', {
        status: err?.response?.status,
        data: err?.response?.data,
        rawError: err,
      });
    }
  };

  return (
    <div className="max-w-7xl space-y-6 animate-in fade-in duration-200 select-none min-h-screen relative pb-10">
      <div className="flex items-center gap-3">
        <Button
          variant="outline"
          size="icon"
          className="h-8 w-8 rounded-lg cursor-pointer"
          onClick={() => router.back()}
        >
          <ArrowLeft className="h-4 w-4" />
        </Button>
        <div>
          <h1 className="text-sm font-black tracking-widest text-foreground uppercase">
            Provision District-Sector Owner Node
          </h1>
          <p className="text-[11px] text-muted-foreground/70">
            Credentials will be generated and dispatched to the DSOs registered email address.
          </p>
        </div>
      </div>

      <form onSubmit={handleSubmit(onSubmit)} className="space-y-6 relative">
        {error && (
          <div className="p-3 bg-destructive/5 border border-destructive/20 text-destructive text-xs rounded-lg font-medium">
            {error}
          </div>
        )}

        {/* SECTION 1: SYSTEM CREDENTIALS */}
        <div className="border border-border/40 rounded-xl bg-surface p-4 space-y-4 shadow-sm">
          <div className="flex items-center gap-2 border-b border-border/10 pb-2">
            <UserPlus className="h-4 w-4 text-primary" />
            <h2 className="text-xs font-bold uppercase tracking-wider text-foreground">
              Identity & Authentication
            </h2>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
            <div>
              <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
                First Name *
              </label>
              <input
                type="text"
                {...register('newUser.firstName')}
                className="w-full text-xs font-medium px-3 py-2 border border-border/40 bg-background rounded-lg text-foreground focus:outline-none focus:border-primary"
              />
              {errors.newUser?.firstName && (
                <span className="text-[10px] text-destructive mt-0.5 block">
                  {errors.newUser.firstName.message}
                </span>
              )}
            </div>

            <div>
              <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
                Last Name *
              </label>
              <input
                type="text"
                {...register('newUser.lastName')}
                className="w-full text-xs font-medium px-3 py-2 border border-border/40 bg-background rounded-lg text-foreground focus:outline-none focus:border-primary"
              />
              {errors.newUser?.lastName && (
                <span className="text-[10px] text-destructive mt-0.5 block">
                  {errors.newUser.lastName.message}
                </span>
              )}
            </div>

            <div>
              <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
                Registered Email Address *
              </label>
              <input
                type="email"
                {...register('newUser.email')}
                placeholder="dso@domain.com"
                className="w-full text-xs font-medium px-3 py-2 border border-border/40 bg-background rounded-lg text-foreground focus:outline-none focus:border-primary"
              />
              {errors.newUser?.email && (
                <span className="text-[10px] text-destructive mt-0.5 block">
                  {errors.newUser.email.message}
                </span>
              )}
            </div>

            <div>
              <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
                Mobile Contact Line
              </label>
              <input
                type="text"
                {...register('newUser.phone')}
                placeholder="+91 XXXXX XXXXX"
                className="w-full text-xs font-medium px-3 py-2 border border-border/40 bg-background rounded-lg text-foreground focus:outline-none focus:border-primary"
              />
            </div>

            <div className="md:col-span-2">
              <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
                Temporary Security Key (Password) *
              </label>
              <div className="relative flex items-center">
                <input
                  type={showPassword ? 'text' : 'password'}
                  {...register('newUser.password')}
                  className="w-full text-xs font-mono pl-3 pr-9 py-2 border border-border/40 bg-background rounded-lg text-foreground focus:outline-none focus:border-primary"
                />
                <button
                  type="button"
                  onClick={() => setShowPassword(!showPassword)}
                  className="absolute right-2.5 p-1 text-muted-foreground/60 hover:text-foreground cursor-pointer"
                >
                  {showPassword ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
                </button>
              </div>
              {errors.newUser?.password && (
                <span className="text-[10px] text-destructive mt-0.5 block">
                  {errors.newUser.password.message}
                </span>
              )}
            </div>
          </div>
        </div>

        {/* SECTION 2: REGISTERED OFFICE & BANKING PROFILE (INDIA SCOPED) */}
        <div className="border border-border/40 rounded-xl bg-surface p-4 space-y-4 shadow-sm">
          <div className="flex items-center gap-2 border-b border-border/10 pb-2">
            <Building2 className="h-4 w-4 text-primary" />
            <h2 className="text-xs font-bold uppercase tracking-wider text-foreground">
              Registered Office Profile (India)
            </h2>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
            <div className="md:col-span-3">
              <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
                Registered Address *
              </label>
              <input
                type="text"
                {...register('profile.registeredOfficeAddress')}
                className="w-full text-xs font-medium px-3 py-2 border border-border/40 bg-background rounded-lg text-foreground focus:outline-none focus:border-primary"
              />
            </div>

            {/* Indian State Dropdown */}
            <div>
              <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
                State (India) *
              </label>
              <select
                {...register('profile.state')}
                onChange={(e) => {
                  setValue('profile.state', e.target.value);
                  setValue('profile.city', ''); // Reset city on state change
                }}
                className="w-full text-xs font-medium px-3 py-2 border border-border/40 bg-background rounded-lg text-foreground focus:outline-none focus:border-primary cursor-pointer"
              >
                <option value="">-- Select Indian State --</option>
                {indianStates.map((st) => (
                  <option key={st.isoCode} value={st.name}>
                    {st.name}
                  </option>
                ))}
              </select>
            </div>

            {/* Indian City Dropdown */}
            <div>
              <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
                City *
              </label>
              <select
                {...register('profile.city')}
                disabled={!selectedStateName || availableCities.length === 0}
                className="w-full text-xs font-medium px-3 py-2 border border-border/40 bg-background rounded-lg text-foreground focus:outline-none focus:border-primary cursor-pointer disabled:opacity-50"
              >
                <option value="">
                  {!selectedStateName
                    ? '-- Select State First --'
                    : availableCities.length === 0
                    ? 'No cities available'
                    : '-- Select City --'}
                </option>
                {availableCities.map((ct) => (
                  <option key={`${ct.name}-${ct.latitude}`} value={ct.name}>
                    {ct.name}
                  </option>
                ))}
              </select>
            </div>

            <div>
              <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
                Postal Code *
              </label>
              <input
                type="text"
                {...register('profile.postalCode')}
                className="w-full text-xs font-medium px-3 py-2 border border-border/40 bg-background rounded-lg text-foreground focus:outline-none focus:border-primary"
              />
            </div>
          </div>
        </div>

        {/* SECTION 5: KYC DELEGATION & FILE UPLOADS */}
        <div className="border border-border/40 rounded-xl bg-surface p-4 space-y-4 shadow-sm">
          <div className="flex items-center justify-between border-b border-border/10 pb-2">
            <div className="flex items-center gap-2">
              <FileCheck className="h-4 w-4 text-primary" />
              <h2 className="text-xs font-bold uppercase tracking-wider text-foreground">
                KYC Verification & Document Upload Workflow
              </h2>
            </div>
          </div>

          <div>
            <label className="flex items-center gap-2 cursor-pointer p-2.5 rounded-lg border border-border/30 bg-muted/20 hover:bg-muted/40 transition-colors">
              <input
                type="checkbox"
                {...register('kyc.isDelegated')}
                className="h-4 w-4 rounded border-border/40 text-primary focus:ring-primary"
              />
              <div>
                <span className="text-xs font-bold text-foreground block">
                  Delegate KYC Verification to Assigned Officer / Role
                </span>
                <span className="text-[10px] text-muted-foreground block">
                  Delegating hides immediate file uploads and routes verification to an authorized reviewer.
                </span>
              </div>
            </label>
          </div>

          {isKycDelegated ? (
            <div className="p-3.5 rounded-xl border border-primary/20 bg-primary/5 space-y-3">
              <div className="flex items-center gap-2 text-primary">
                <UserCheck className="h-4 w-4" />
                <span className="text-xs font-bold uppercase tracking-wider">
                  KYC Verification Role Assignment
                </span>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                <div>
                  <label className="block text-[10px] font-bold uppercase text-muted-foreground/80 mb-1">
                    Designated Verification Role
                  </label>
                  <select
                    {...register('kyc.assignedToRole')}
                    onChange={(e) => {
                      e.target.value as ProvisionFormValues['kyc']['assignedToRole']
                      setValue('kyc.assignedToUserId', '');
                    }}
                    className="w-full text-xs p-2 border border-border/40 rounded-lg bg-background text-foreground focus:outline-none focus:border-primary"
                  >
                    <option value="KYC_OFFICER">KYC Officer</option>
                    <option value="HR">HR Department</option>
                    <option value="BDM">Business Development Manager (BDM)</option>
                    <option value="ADMIN">System Administrator</option>
                  </select>
                </div>

                <div>
                  <label className="block text-[10px] font-bold uppercase text-muted-foreground/80 mb-1">
                    Assign Specific Verifier
                  </label>
                  <select
                    {...register('kyc.assignedToUserId')}
                    className="w-full text-xs p-2 border border-border/40 rounded-lg bg-background text-foreground focus:outline-none focus:border-primary"
                  >
                    <option value="">
                      {systemRoles && systemRoles.length > 0
                        ? '-- Select Verifier (Or Leave Blank) --'
                        : 'No officers found for this role'}
                    </option>
                    {Array.isArray(systemRoles) &&
                      systemRoles
                        .filter((u: any) => u.role === assignedRole)
                        .map((u: any) => (
                          <option key={u.id} value={u.id}>
                            {u.firstName} {u.lastName} ({u.email})
                          </option>
                        ))}
                  </select>
                </div>
              </div>
            </div>
          ) : (
            <div className="p-3.5 rounded-xl border border-border/30 bg-muted/10 space-y-3">
              <div className="flex items-center gap-2 text-foreground">
                <Upload className="h-4 w-4 text-primary" />
                <span className="text-xs font-bold uppercase tracking-wider">
                  KYC Document File Uploads
                </span>
              </div>

              <div className="space-y-3">
                {documentFields.map((field, index) => (
                  <div
                    key={field.id}
                    className="flex items-end gap-2 bg-background p-3 rounded-lg border border-border/30"
                  >
                    <div className="w-1/3">
                      <label className="block text-[10px] font-bold uppercase text-muted-foreground/80 mb-1">
                        Document Type
                      </label>
                      <select
                        {...register(`kyc.documents.${index}.type` as const)}
                        className="w-full text-xs p-2 border border-border/40 rounded-lg bg-background text-foreground focus:outline-none focus:border-primary"
                      >
                        {DOCUMENT_TYPES.map((dt) => (
                          <option key={dt.value} value={dt.value}>
                            {dt.label}
                          </option>
                        ))}
                      </select>
                    </div>

                    <div className="w-2/3">
                      <label className="block text-[10px] font-bold uppercase text-muted-foreground/80 mb-1">
                        Select File
                      </label>
                      <Controller
                        control={control}
                        name={`kyc.documents.${index}.file` as const}
                        render={({ field: { onChange } }) => (
                          <input
                            type="file"
                            accept=".pdf,.png,.jpg,.jpeg"
                            onChange={(e) =>
                              onChange(e.target.files?.[0] || null)
                            }
                            className="w-full text-xs text-muted-foreground file:mr-2 file:py-1.5 file:px-3 file:rounded-md file:border-0 file:text-[10px] file:font-bold file:bg-primary/10 file:text-primary hover:file:bg-primary/20"
                          />
                        )}
                      />
                    </div>

                    {documentFields.length > 1 && (
                      <button
                        type="button"
                        onClick={() => removeDocument(index)}
                        className="text-muted-foreground hover:text-destructive p-2 rounded-lg hover:bg-destructive/10"
                      >
                        <Trash2 className="h-4 w-4" />
                      </button>
                    )}
                  </div>
                ))}
              </div>

              <Button
                type="button"
                variant="outline"
                onClick={() => appendDocument({ type: 'OTHER', file: null })}
                className="h-8 text-[10px] gap-1 font-bold border-dashed w-full mt-1"
              >
                <Plus className="h-3 w-3" /> Attach Additional KYC Document File
              </Button>
            </div>
          )}
        </div>

        {/* SECTION 3: ASSIGNED ROUTING JURISDICTIONS */}
        <div className="border border-border/40 rounded-xl bg-surface p-4 space-y-3 shadow-sm">
          <div className="flex items-center gap-2 border-b border-border/10 pb-2">
            <MapPin className="h-4 w-4 text-primary" />
            <h2 className="text-xs font-bold uppercase tracking-wider text-foreground">
              District-Sector Coverage Routes
            </h2>
          </div>

          <div className="space-y-3 max-h-72 overflow-y-auto pr-1">
            {assignmentFields.map((field, index) => {
              const currentDistrictId = watchedAssignments?.[index]?.districtId || '';
              const currentSectorId = watchedAssignments?.[index]?.sectorId || '';

              const takenSectorsForDistrict: string[] = (watchedAssignments || [])
                .filter((a, idx) => idx !== index && a?.districtId === currentDistrictId && Boolean(a?.sectorId))
                .map((a) => a.sectorId as string);

              return (
                <div
                  key={field.id}
                  className="flex items-end gap-2 bg-muted/20 p-3 rounded-xl border border-border/30 relative"
                >
                  <div className="w-full">
                    <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
                      District Node
                    </label>
                    <select
                      {...register(`assignments.${index}.districtId` as const)}
                      onChange={(e) => {
                        setValue(`assignments.${index}.districtId`, e.target.value);
                        setValue(`assignments.${index}.sectorId`, '');
                      }}
                      className="w-full text-xs p-2 border border-border/40 rounded-lg bg-background text-foreground focus:outline-none focus:border-primary cursor-pointer"
                    >
                      <option value="">-- Choose District --</option>
                      {rawDistricts.map((d: any) => (
                        <option key={d.id} value={d.id}>
                          {d.name}
                        </option>
                      ))}
                    </select>
                  </div>

                  <Controller
                    control={control}
                    name={`assignments.${index}.sectorId` as const}
                    render={({ field: { onChange } }) => (
                      <SectorSelectRow
                        districtId={currentDistrictId}
                        selectedSectorId={currentSectorId}
                        disabledSectorIds={takenSectorsForDistrict}
                        onChange={onChange}
                      />
                    )}
                  />

                  {assignmentFields.length > 1 && (
                    <button
                      type="button"
                      onClick={() => removeAssignment(index)}
                      className="text-muted-foreground/60 hover:text-destructive p-2 mb-0.5 rounded-lg hover:bg-destructive/10 transition-colors cursor-pointer"
                    >
                      <Trash2 className="h-4 w-4" />
                    </button>
                  )}
                </div>
              );
            })}
          </div>

          <Button
            type="button"
            variant="outline"
            onClick={() => appendAssignment({ districtId: '', sectorId: '' })}
            className="h-8 text-[10px] gap-1 font-bold border-dashed w-full mt-1 cursor-pointer"
          >
            <Plus className="h-3 w-3" /> Add Assignment Route
          </Button>
        </div>

        {/* STICKY FOOTER ACTIONS BAR */}
        <div className="sticky bottom-0 w-full bg-surface border border-border/40 py-4 px-6 z-40 flex items-center justify-end gap-3 shadow-xl rounded-xl">
          <Button
            type="button"
            variant="ghost"
            onClick={() => router.back()}
            className="h-9 text-xs font-semibold cursor-pointer"
          >
            Cancel
          </Button>
          <Button
            type="submit"
            disabled={provisionMutation.isPending}
            className="h-9 rounded-lg px-4 text-xs font-semibold bg-primary text-primary-foreground gap-1.5 shadow-sm cursor-pointer"
          >
            <Check className="h-4 w-4 stroke-[2.5]" />
            <span>
              {provisionMutation.isPending ? 'Provisioning...' : 'Deploy Operations Node'}
            </span>
          </Button>
        </div>
      </form>
    </div>
  );
}