'use client';

import React, { useState } from 'react';
import { useForm, useFieldArray, Controller } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import {
  UserPlus,
  Eye,
  EyeOff,
  Check,
  Plus,
  Trash2,
  Building2,
  MapPin,
  FileCheck,
  Upload,
  UserCheck,
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Modal } from '@/components/ui/modal';
import { useProvisionDistrictSectorOwner } from '@/services/district-sector-assignments/queries';
import { useAllSectors } from '@/services/sectors/queries';
import { useSystemUSerRoles } from '@/services/roles/queries';
import { provisionSchema } from '@/schemas/district-sector-owner.schema';
import { DOCUMENT_TYPES } from '@/data/document-types';
import { useAllDistricts } from '@/services/districts/queries';

type ProvisionFormValues = z.infer<typeof provisionSchema>;

interface CreateDistrictSectorOwnerModalProps {
  districtsList: Array<{ id: string; name: string }>;
  onClose: () => void;
}

function SectorSelectRow({
  districtId,
  selectedSectorId,
  onChange,
  disabledSectorIds,
}: {
  districtId: string;
  selectedSectorId: string;
  onChange: (sectorId: string) => void;
  disabledSectorIds: string[];
}) {
  const { data: sectorsData, isLoading: isLoadingSectors } = useAllSectors(
    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) => {
          const isTaken =
            disabledSectorIds.includes(s.id) && s.id !== selectedSectorId;
          return (
            <option key={s.id} value={s.id} disabled={isTaken}>
              {s.name} {isTaken ? '(Already Selected)' : ''}
            </option>
          );
        })}
      </select>
    </div>
  );
}

export default function CreateDistrictSectorOwnerModal({
  districtsList,
  onClose,
}: CreateDistrictSectorOwnerModalProps) {
  const [showPassword, setShowPassword] = useState(false);
  const [submitError, setSubmitError] = useState<string | null>(null);
  const { data: districtsData } = useAllDistricts();

  const rawDistricts = (districtsData as any)?.items || districtsData || [];
  const { data: systemRole } = useSystemUSerRoles();
  const provisionMutation = useProvisionDistrictSectorOwner();

  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: [],
    },
  });

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

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

  const isKycDelegated = watch('kyc.isDelegated');
  const assignedRole = watch('kyc.assignedToRole');
  const watchedAssignments = watch('assignments') || [];

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

    const validAssignments: Array<{ districtId: string | null; sectorId: string | null }> = (
      data.assignments || []
    )
      .filter((a) => Boolean(a?.districtId && a?.sectorId))
      .map((a) => ({
        districtId: a.districtId ?? null,
        sectorId: a.sectorId ?? null,
      }));

    try {
      await provisionMutation.mutateAsync({
        assignments: validAssignments.length > 0 ? 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)
            : [],
        },
      });

      onClose();
    } catch (err: any) {
      setSubmitError(
        err?.response?.data?.message || 'Failed to initialize administrative account records.'
      );
    }
  };

  return (
    <Modal
      onClose={onClose}
      icon={UserPlus}
      iconClassName="text-primary"
      title="Provision District-Sector Owner"
    >
      <form onSubmit={handleSubmit(onSubmit)} className="p-4 space-y-4 max-h-[80vh] overflow-y-auto text-left select-none">
        {submitError && (
          <div className="p-2.5 bg-destructive/5 border border-destructive/20 text-destructive text-xs rounded-lg font-medium">
            {submitError}
          </div>
        )}

        {/* SECTION 1: SYSTEM CREDENTIALS */}
        <div className="border border-border/40 rounded-xl bg-surface p-3.5 space-y-3 shadow-xs">
          <div className="flex items-center gap-1.5 border-b border-border/10 pb-2">
            <UserPlus className="h-3.5 w-3.5 text-primary" />
            <span className="text-[11px] font-bold uppercase tracking-wider text-foreground">
              1. System Access Credentials
            </span>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-2.5">
            <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-2.5 py-1.5 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-2.5 py-1.5 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">
                Corporate Login Email *
              </label>
              <input
                type="email"
                {...register('newUser.email')}
                placeholder="owner@domain.com"
                className="w-full text-xs font-medium px-2.5 py-1.5 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-2.5 py-1.5 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 Password *
              </label>
              <div className="relative flex items-center">
                <input
                  type={showPassword ? 'text' : 'password'}
                  {...register('newUser.password')}
                  className="w-full text-xs font-mono pl-2.5 pr-8 py-1.5 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 & CORPORATE DETAILS */}
        <div className="border border-border/40 rounded-xl bg-surface p-3.5 space-y-3 shadow-xs">
          <div className="flex items-center gap-1.5 border-b border-border/10 pb-2">
            <Building2 className="h-3.5 w-3.5 text-primary" />
            <span className="text-[11px] font-bold uppercase tracking-wider text-foreground">
              2. Registered Office & Corporate Details
            </span>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-2.5">
            <div className="md:col-span-3">
              <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
                Registered Address Route *
              </label>
              <input
                type="text"
                {...register('profile.registeredOfficeAddress')}
                placeholder="Suite, Building, Industrial Complex"
                className="w-full text-xs font-medium px-2.5 py-1.5 border border-border/40 bg-background rounded-lg text-foreground focus:outline-none focus:border-primary"
              />
              {errors.profile?.registeredOfficeAddress && (
                <span className="text-[10px] text-destructive mt-0.5 block">
                  {errors.profile.registeredOfficeAddress.message}
                </span>
              )}
            </div>

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

            <div>
              <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
                State *
              </label>
              <input
                type="text"
                {...register('profile.state')}
                className="w-full text-xs font-medium px-2.5 py-1.5 border border-border/40 bg-background rounded-lg text-foreground focus:outline-none focus:border-primary"
              />
              {errors.profile?.state && (
                <span className="text-[10px] text-destructive mt-0.5 block">
                  {errors.profile.state.message}
                </span>
              )}
            </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-2.5 py-1.5 border border-border/40 bg-background rounded-lg text-foreground focus:outline-none focus:border-primary"
              />
              {errors.profile?.postalCode && (
                <span className="text-[10px] text-destructive mt-0.5 block">
                  {errors.profile.postalCode.message}
                </span>
              )}
            </div>

            <div>
              <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
                Organization Name
              </label>
              <input
                type="text"
                {...register('profile.organizationName')}
                placeholder="Entity Pvt. Ltd."
                className="w-full text-xs font-medium px-2.5 py-1.5 border border-border/40 bg-background rounded-lg text-foreground focus:outline-none focus:border-primary"
              />
            </div>

            <div>
              <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
                Tax Identifier (GSTIN/PAN)
              </label>
              <input
                type="text"
                {...register('profile.taxIdentifier')}
                className="w-full text-xs font-medium px-2.5 py-1.5 border border-border/40 bg-background rounded-lg text-foreground focus:outline-none focus:border-primary"
              />
            </div>

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

            <div>
              <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
                Official Landline
              </label>
              <input
                type="text"
                {...register('profile.officialLandline')}
                placeholder="022-XXXXXXXX"
                className="w-full text-xs font-medium px-2.5 py-1.5 border border-border/40 bg-background rounded-lg text-foreground focus:outline-none focus:border-primary"
              />
            </div>
          </div>
        </div>

        {/* SECTION 3: KYC WORKFLOW & FILE UPLOADS */}
        <div className="border border-border/40 rounded-xl bg-surface p-3.5 space-y-3 shadow-xs">
          <div className="flex items-center gap-1.5 border-b border-border/10 pb-2">
            <FileCheck className="h-3.5 w-3.5 text-primary" />
            <span className="text-[11px] font-bold uppercase tracking-wider text-foreground">
              3. KYC Verification & Documents
            </span>
          </div>

          <div>
            <label className="flex items-center gap-2 cursor-pointer p-2 rounded-lg border border-border/30 bg-muted/20 hover:bg-muted/40 transition-colors">
              <input
                type="checkbox"
                {...register('kyc.isDelegated')}
                className="h-3.5 w-3.5 rounded border-border/40 text-primary focus:ring-primary cursor-pointer"
              />
              <div>
                <span className="text-xs font-bold text-foreground block">
                  Delegate KYC Process to Assigned Officer
                </span>
                <span className="text-[10px] text-muted-foreground block">
                  Delegates verification to HR, BDM, Admin, or KYC Officer instead of immediate file upload.
                </span>
              </div>
            </label>
          </div>

          {isKycDelegated ? (
            <div className="p-3 rounded-xl border border-primary/20 bg-primary/5 space-y-2.5">
              <div className="flex items-center gap-1.5 text-primary">
                <UserCheck className="h-3.5 w-3.5" />
                <span className="text-[11px] font-bold uppercase tracking-wider">
                  Verification Delegate Settings
                </span>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-2.5">
                <div>
                  <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
                    Designated Role
                  </label>
                  <select
                    {...register('kyc.assignedToRole')}
                    onChange={(e) => {
                      setValue('kyc.assignedToRole', e.target.value as any);
                      setValue('kyc.assignedToUserId', '');
                    }}
                    className="w-full text-xs p-1.5 border border-border/40 rounded-lg bg-background text-foreground focus:outline-none focus:border-primary cursor-pointer"
                  >
                    <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 tracking-wider text-muted-foreground/80 mb-1">
                    Specific Verifier (Optional)
                  </label>
                  <select
                    {...register('kyc.assignedToUserId')}
                    className="w-full text-xs p-1.5 border border-border/40 rounded-lg bg-background text-foreground focus:outline-none focus:border-primary cursor-pointer"
                  >
                    <option value="">-- Select Verifier (Optional) --</option>
                    {Array.isArray(systemRole) &&
                      systemRole
                        .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 rounded-xl border border-border/30 bg-muted/10 space-y-2.5">
              <div className="flex items-center gap-1.5 text-foreground">
                <Upload className="h-3.5 w-3.5 text-primary" />
                <span className="text-[11px] font-bold uppercase tracking-wider">
                  Document Attachments
                </span>
              </div>

              <div className="space-y-2">
                {documentFields.map((field, index) => (
                  <div
                    key={field.id}
                    className="flex items-end gap-2 bg-background p-2.5 rounded-lg border border-border/30"
                  >
                    <div className="w-1/3">
                      <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
                        Type
                      </label>
                      <select
                        {...register(`kyc.documents.${index}.type` as const)}
                        className="w-full text-xs p-1.5 border border-border/40 rounded-lg bg-background text-foreground focus:outline-none focus:border-primary cursor-pointer"
                      >
                        {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 tracking-wider text-muted-foreground/80 mb-1">
                        File Asset
                      </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 file:px-2.5 file:rounded-md file:border-0 file:text-[10px] file:font-bold file:bg-primary/10 file:text-primary hover:file:bg-primary/20 cursor-pointer"
                          />
                        )}
                      />
                    </div>

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

              <Button
                type="button"
                variant="outline"
                onClick={() => appendDocument({ type: 'OTHER', file: null })}
                className="h-7 text-[10px] gap-1 font-bold border-dashed w-full cursor-pointer"
              >
                <Plus className="h-3 w-3" /> Add Document Row
              </Button>
            </div>
          )}
        </div>

        {/* SECTION 4: ASSIGNED OPERATIONAL TARGETS */}
        <div className="border border-border/40 rounded-xl bg-surface p-3.5 space-y-3 shadow-xs">
          <div className="flex items-center gap-1.5 border-b border-border/10 pb-2">
            <MapPin className="h-3.5 w-3.5 text-primary" />
            <span className="text-[11px] font-bold uppercase tracking-wider text-foreground">
              4. Assigned Operational Targets (Optional)
            </span>
          </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>

        {/* MODAL ACTION BAR */}
        <div className="flex items-center justify-end gap-2 border-t border-border/10 pt-3 mt-4">
          <Button
            type="button"
            variant="ghost"
            onClick={onClose}
            className="h-8 rounded-lg px-3 text-xs font-semibold cursor-pointer"
          >
            Cancel
          </Button>
          <Button
            type="submit"
            disabled={provisionMutation.isPending}
            className="h-8 rounded-lg px-3 text-xs font-semibold bg-primary text-primary-foreground gap-1.5 shadow-xs cursor-pointer"
          >
            <Check className="h-3.5 w-3.5 stroke-[2.5]" />
            <span>{provisionMutation.isPending ? 'Provisioning...' : 'Provision Profile'}</span>
          </Button>
        </div>
      </form>
    </Modal>
  );
}