'use client';

import { useEffect, useMemo, useState } from 'react';
import { useAppForm, useFormFields } from '@/components/ui/tanstack-form';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from '@/components/ui/select';
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle
} from '@/components/ui/sheet';
import { Icons } from '@/components/icons';
import { useMutation } from '@tanstack/react-query';
import { createUserMutation, updateUserMutation } from '../api/mutations';
import type { User } from '../api/types';
import { toast } from 'sonner';
import { type UserFormValues, userSchema } from '../schemas/user';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';

interface UserFormSheetProps {
  user?: User;
  open: boolean;
  onOpenChange: (open: boolean) => void;
}

type OrganizationOption = {
  id: string;
  name: string;
  role: string;
  canManageUsers: boolean;
};

type AssignmentReferenceResponse = {
  success?: boolean;
  roleProfiles?: Array<{ organizationId: string; id: string; code: string; name: string }>;
  branches?: Array<{ organizationId: string; id: string; code: string; label: string }>;
  productTypes?: Array<{ organizationId: string; id: string; code: string; label: string }>;
};

const membershipRoleOptions = [
  { value: 'admin', label: 'Organization Admin' },
  { value: 'user', label: 'User' }
] as const;

const scopeModeOptions = [
  { value: 'inherit', label: 'Inherit' },
  { value: 'all', label: 'All' },
  { value: 'selected', label: 'Selected' },
  { value: 'none', label: 'None' }
] as const;

function scopeSummary(mode: string, ids: string[]) {
  if (mode === 'all') return 'All';
  if (mode === 'inherit') return 'Inherit';
  if (mode === 'none' || ids.length === 0) return 'None';
  return ids.join(', ');
}

export function UserFormSheet({ user, open, onOpenChange }: UserFormSheetProps) {
  const isEdit = !!user;
  const [organizations, setOrganizations] = useState<OrganizationOption[]>([]);
  const [selectedOrganizationIds, setSelectedOrganizationIds] = useState<string[]>(
    user?.memberships.map((membership) => membership.organizationId) ?? []
  );
  const [assignmentReference, setAssignmentReference] = useState<AssignmentReferenceResponse>({
    roleProfiles: [],
    branches: [],
    productTypes: []
  });
  const [isLoadingOrganizations, setIsLoadingOrganizations] = useState(false);
  const [isLoadingAssignments, setIsLoadingAssignments] = useState(false);
  const [previewUser, setPreviewUser] = useState<User | null>(null);
  const [isLoadingPreview, setIsLoadingPreview] = useState(false);

  const createMutation = useMutation({
    ...createUserMutation,
    onSuccess: () => {
      toast.success('User created successfully');
      onOpenChange(false);
      form.reset();
      setPreviewUser(null);
    },
    onError: (error) =>
      toast.error(error instanceof Error ? error.message : 'Failed to create user')
  });

  const updateMutation = useMutation({
    ...updateUserMutation,
    onSuccess: () => {
      toast.success('User updated successfully');
      onOpenChange(false);
    },
    onError: (error) =>
      toast.error(error instanceof Error ? error.message : 'Failed to update user')
  });

  const initialMemberships = useMemo(
    () =>
      user?.memberships.map((membership) => ({
        organizationId: membership.organizationId,
        membershipRole: membership.membershipRole
      })) ?? [],
    [user?.memberships]
  );

  const initialAssignments = useMemo(
    () =>
      (user?.crmRoleAssignments ?? []).map((assignment) => ({
        id: assignment.id,
        organizationId: assignment.organizationId,
        roleProfileId: assignment.roleProfileId,
        branchScopeMode: assignment.branchScopeMode,
        branchScopeIds: assignment.branchScopeIds,
        productTypeScopeMode: assignment.productTypeScopeMode,
        productTypeScopeIds: assignment.productTypeScopeIds,
        isPrimary: assignment.isPrimary,
        isActive: assignment.isActive
      })),
    [user?.crmRoleAssignments]
  );

  const form = useAppForm({
    defaultValues: {
      name: user?.name ?? '',
      email: user?.email ?? '',
      password: '',
      systemRole: user?.systemRole ?? 'user',
      memberships: initialMemberships,
      crmRoleAssignments: initialAssignments
    } as UserFormValues,
    validators: {
      onSubmit: userSchema
    },
    onSubmit: async ({ value }) => {
      if (!isEdit && (!value.password || value.password.length < 8)) {
        toast.error('Password must be at least 8 characters');
        return;
      }

      if (isEdit) {
        await updateMutation.mutateAsync({ id: user.id, values: value });
      } else {
        await createMutation.mutateAsync({
          ...value,
          systemRole: 'user'
        });
      }
    }
  });

  const { FormTextField } = useFormFields<UserFormValues>();

  useEffect(() => {
    if (!open) {
      setPreviewUser(null);
      return;
    }

    setSelectedOrganizationIds(initialMemberships.map((membership) => membership.organizationId));
    setPreviewUser(null);
    form.reset({
      name: user?.name ?? '',
      email: user?.email ?? '',
      password: '',
      systemRole: user?.systemRole ?? 'user',
      memberships: initialMemberships,
      crmRoleAssignments: initialAssignments
    });
  }, [
    form,
    initialAssignments,
    initialMemberships,
    open,
    user?.email,
    user?.name,
    user?.systemRole
  ]);

  useEffect(() => {
    if (!open) {
      return;
    }

    let cancelled = false;

    async function loadOrganizations() {
      setIsLoadingOrganizations(true);

      try {
        const response = await fetch('/api/organizations?scope=manageable');
        const data = (await response.json()) as {
          organizations?: OrganizationOption[];
          message?: string;
        };

        if (!response.ok) {
          throw new Error(data.message ?? 'Unable to load organizations');
        }

        if (!cancelled) {
          setOrganizations(data.organizations ?? []);
        }
      } catch (error) {
        if (!cancelled) {
          toast.error(error instanceof Error ? error.message : 'Unable to load organizations');
        }
      } finally {
        if (!cancelled) {
          setIsLoadingOrganizations(false);
        }
      }
    }

    void loadOrganizations();

    return () => {
      cancelled = true;
    };
  }, [open]);

  useEffect(() => {
    if (!open || selectedOrganizationIds.length === 0) {
      setAssignmentReference({ roleProfiles: [], branches: [], productTypes: [] });
      return;
    }

    let cancelled = false;

    async function loadAssignmentReference() {
      setIsLoadingAssignments(true);

      try {
        const response = await fetch(
          `/api/users/crm-role-assignment-reference?organizationIds=${selectedOrganizationIds.join(',')}`
        );
        const data = (await response.json()) as AssignmentReferenceResponse & { message?: string };

        if (!response.ok) {
          throw new Error(data.message ?? 'Unable to load CRM role assignment reference data');
        }

        if (!cancelled) {
          setAssignmentReference(data);
        }
      } catch (error) {
        if (!cancelled) {
          toast.error(
            error instanceof Error
              ? error.message
              : 'Unable to load CRM role assignment reference data'
          );
        }
      } finally {
        if (!cancelled) {
          setIsLoadingAssignments(false);
        }
      }
    }

    void loadAssignmentReference();

    return () => {
      cancelled = true;
    };
  }, [open, selectedOrganizationIds]);

  const roleProfilesByOrganization = useMemo(() => {
    const map = new Map<string, Array<{ id: string; code: string; name: string }>>();

    for (const roleProfile of assignmentReference.roleProfiles ?? []) {
      const current = map.get(roleProfile.organizationId) ?? [];
      current.push({ id: roleProfile.id, code: roleProfile.code, name: roleProfile.name });
      map.set(roleProfile.organizationId, current);
    }

    return map;
  }, [assignmentReference.roleProfiles]);

  const branchesByOrganization = useMemo(() => {
    const map = new Map<string, Array<{ id: string; code: string; label: string }>>();

    for (const branch of assignmentReference.branches ?? []) {
      const current = map.get(branch.organizationId) ?? [];
      current.push({ id: branch.id, code: branch.code, label: branch.label });
      map.set(branch.organizationId, current);
    }

    return map;
  }, [assignmentReference.branches]);

  const productTypesByOrganization = useMemo(() => {
    const map = new Map<string, Array<{ id: string; code: string; label: string }>>();

    for (const productType of assignmentReference.productTypes ?? []) {
      const current = map.get(productType.organizationId) ?? [];
      current.push({ id: productType.id, code: productType.code, label: productType.label });
      map.set(productType.organizationId, current);
    }

    return map;
  }, [assignmentReference.productTypes]);

  async function handlePreviewEffectiveAccess() {
    if (!user) {
      return;
    }

    setIsLoadingPreview(true);

    try {
      const response = await fetch(`/api/users/${user.id}/effective-access-preview`);
      const data = (await response.json()) as { user?: User; message?: string };

      if (!response.ok || !data.user) {
        throw new Error(data.message ?? 'Unable to preview effective access');
      }

      setPreviewUser(data.user);
    } catch (error) {
      toast.error(error instanceof Error ? error.message : 'Unable to preview effective access');
    } finally {
      setIsLoadingPreview(false);
    }
  }

  const effectivePreviewSource = previewUser ?? user ?? null;
  const isPending = createMutation.isPending || updateMutation.isPending;

  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent className='flex flex-col sm:max-w-5xl'>
        <SheetHeader>
          <SheetTitle>{isEdit ? 'Edit User' : 'New User'}</SheetTitle>
          <SheetDescription>
            {isEdit
              ? 'Update membership, CRM role assignments, and effective access behavior.'
              : 'Create a user with organization memberships and optional CRM role assignments.'}
          </SheetDescription>
        </SheetHeader>

        <div className='flex-1 overflow-auto pr-1'>
          <form.AppForm>
            <form.Form id='user-form-sheet' className='space-y-6'>
              <Card>
                <CardHeader>
                  <CardTitle>Account</CardTitle>
                </CardHeader>
                <CardContent className='space-y-4'>
                  <div className='grid gap-4 md:grid-cols-2'>
                    <FormTextField name='name' label='Full Name' required placeholder='Jane Doe' />
                    <FormTextField
                      name='email'
                      label='Email'
                      required
                      type='email'
                      placeholder='jane@example.com'
                    />
                  </div>

                  <div className='grid gap-4 md:grid-cols-2'>
                    <FormTextField
                      name='password'
                      label={isEdit ? 'Password (optional)' : 'Password'}
                      required={!isEdit}
                      type='password'
                      placeholder={
                        isEdit ? 'Leave blank to keep current password' : 'Minimum 8 characters'
                      }
                    />
                    <div className='rounded-lg border border-dashed p-3 text-sm'>
                      <span className='font-medium'>System Role:</span>{' '}
                      {isEdit && user?.systemRole === 'super_admin' ? 'Super Admin' : 'User'}
                    </div>
                  </div>
                </CardContent>
              </Card>

              <form.AppField
                name='memberships'
                children={(field) => (
                  <Card>
                    <CardHeader>
                      <CardTitle>Workspace Memberships</CardTitle>
                      <CardDescription>
                        Membership grants organization access. CRM authorization now comes from role
                        assignments instead of `membership.businessRole`.
                      </CardDescription>
                    </CardHeader>
                    <CardContent className='space-y-3'>
                      {isLoadingOrganizations ? (
                        <div className='text-muted-foreground text-sm'>Loading workspaces...</div>
                      ) : organizations.length ? (
                        organizations.map((organization) => {
                          const membership = field.state.value.find(
                            (value) => value.organizationId === organization.id
                          );
                          const checked = !!membership;

                          return (
                            <div
                              key={organization.id}
                              className='grid gap-3 rounded-md border p-3 md:grid-cols-[1fr_220px]'
                            >
                              <div className='flex items-start gap-3'>
                                <Checkbox
                                  checked={checked}
                                  onCheckedChange={(value) => {
                                    if (!value) {
                                      const nextMemberships = field.state.value.filter(
                                        (item) => item.organizationId !== organization.id
                                      );
                                      field.handleChange(nextMemberships);
                                      field.handleBlur();
                                      setSelectedOrganizationIds(
                                        nextMemberships.map((item) => item.organizationId)
                                      );
                                      form.setFieldValue(
                                        'crmRoleAssignments',
                                        form.state.values.crmRoleAssignments.filter(
                                          (item) => item.organizationId !== organization.id
                                        )
                                      );
                                      return;
                                    }

                                    const nextMemberships = [
                                      ...field.state.value,
                                      {
                                        organizationId: organization.id,
                                        membershipRole: 'user' as const
                                      }
                                    ];
                                    field.handleChange(nextMemberships);
                                    field.handleBlur();
                                    setSelectedOrganizationIds(
                                      nextMemberships.map((item) => item.organizationId)
                                    );
                                  }}
                                />
                                <div className='flex flex-col'>
                                  <span className='font-medium'>{organization.name}</span>
                                  <span className='text-muted-foreground text-xs'>
                                    Your role here: {organization.role}
                                  </span>
                                </div>
                              </div>

                              <Select
                                value={membership?.membershipRole ?? 'user'}
                                disabled={!checked}
                                onValueChange={(value) => {
                                  field.handleChange(
                                    field.state.value.map((item) =>
                                      item.organizationId === organization.id
                                        ? {
                                            ...item,
                                            membershipRole: value as 'admin' | 'user'
                                          }
                                        : item
                                    )
                                  );
                                  field.handleBlur();
                                }}
                              >
                                <SelectTrigger>
                                  <SelectValue placeholder='Select role' />
                                </SelectTrigger>
                                <SelectContent>
                                  {membershipRoleOptions.map((option) => (
                                    <SelectItem key={option.value} value={option.value}>
                                      {option.label}
                                    </SelectItem>
                                  ))}
                                </SelectContent>
                              </Select>
                            </div>
                          );
                        })
                      ) : (
                        <div className='text-muted-foreground text-sm'>
                          No manageable workspaces available.
                        </div>
                      )}
                    </CardContent>
                  </Card>
                )}
              />

              <form.AppField
                name='crmRoleAssignments'
                children={(field) => (
                  <Card>
                    <CardHeader>
                      <CardTitle>CRM Roles</CardTitle>
                      <CardDescription>
                        Assign one or many CRM role profiles with branch and product-type scope per
                        organization.
                      </CardDescription>
                    </CardHeader>
                    <CardContent className='space-y-4'>
                      <div className='flex justify-end'>
                        <Button
                          type='button'
                          variant='outline'
                          disabled={selectedOrganizationIds.length === 0}
                          onClick={() => {
                            const organizationId = selectedOrganizationIds[0];
                            const firstRoleProfile =
                              roleProfilesByOrganization.get(organizationId)?.[0]?.id ?? '';

                            field.handleChange([
                              ...field.state.value,
                              {
                                organizationId,
                                roleProfileId: firstRoleProfile,
                                branchScopeMode: 'inherit',
                                branchScopeIds: [],
                                productTypeScopeMode: 'inherit',
                                productTypeScopeIds: [],
                                isPrimary: field.state.value.length === 0,
                                isActive: true
                              }
                            ]);
                            field.handleBlur();
                          }}
                        >
                          <Icons.add className='mr-2 h-4 w-4' />
                          Add CRM Role
                        </Button>
                      </div>

                      {isLoadingAssignments ? (
                        <div className='text-muted-foreground text-sm'>Loading CRM role options...</div>
                      ) : field.state.value.length ? (
                        field.state.value.map((assignment, index) => {
                          const roleProfiles =
                            roleProfilesByOrganization.get(assignment.organizationId) ?? [];
                          const branches =
                            branchesByOrganization.get(assignment.organizationId) ?? [];
                          const productTypes =
                            productTypesByOrganization.get(assignment.organizationId) ?? [];

                          return (
                            <div key={assignment.id ?? `${assignment.organizationId}-${index}`} className='space-y-4 rounded-lg border p-4'>
                              <div className='grid gap-4 md:grid-cols-2 xl:grid-cols-4'>
                                <div className='space-y-2'>
                                  <Label>Organization</Label>
                                  <Select
                                    value={assignment.organizationId}
                                    onValueChange={(value) => {
                                      const next = [...field.state.value];
                                      next[index] = {
                                        ...assignment,
                                        organizationId: value,
                                        roleProfileId: roleProfilesByOrganization.get(value)?.[0]?.id ?? '',
                                        branchScopeIds: [],
                                        productTypeScopeIds: []
                                      };
                                      field.handleChange(next);
                                      field.handleBlur();
                                    }}
                                  >
                                    <SelectTrigger>
                                      <SelectValue />
                                    </SelectTrigger>
                                    <SelectContent>
                                      {selectedOrganizationIds.map((organizationId) => {
                                        const organization = organizations.find(
                                          (item) => item.id === organizationId
                                        );

                                        return organization ? (
                                          <SelectItem key={organization.id} value={organization.id}>
                                            {organization.name}
                                          </SelectItem>
                                        ) : null;
                                      })}
                                    </SelectContent>
                                  </Select>
                                </div>
                                <div className='space-y-2'>
                                  <Label>Role Profile</Label>
                                  <Select
                                    value={assignment.roleProfileId}
                                    onValueChange={(value) => {
                                      const next = [...field.state.value];
                                      next[index] = { ...assignment, roleProfileId: value };
                                      field.handleChange(next);
                                      field.handleBlur();
                                    }}
                                  >
                                    <SelectTrigger>
                                      <SelectValue placeholder='Select role profile' />
                                    </SelectTrigger>
                                    <SelectContent>
                                      {roleProfiles.map((roleProfile) => (
                                        <SelectItem key={roleProfile.id} value={roleProfile.id}>
                                          {roleProfile.name} ({roleProfile.code})
                                        </SelectItem>
                                      ))}
                                    </SelectContent>
                                  </Select>
                                </div>
                                <div className='flex items-end gap-6'>
                                  <label className='flex items-center gap-3'>
                                    <Checkbox
                                      checked={assignment.isPrimary}
                                      onCheckedChange={(value) => {
                                        const next = field.state.value.map((item, itemIndex) => ({
                                          ...item,
                                          isPrimary:
                                            itemIndex === index ? value === true : false
                                        }));
                                        field.handleChange(next);
                                        field.handleBlur();
                                      }}
                                    />
                                    <span className='text-sm font-medium'>Primary</span>
                                  </label>
                                  <label className='flex items-center gap-3'>
                                    <Checkbox
                                      checked={assignment.isActive}
                                      onCheckedChange={(value) => {
                                        const next = [...field.state.value];
                                        next[index] = { ...assignment, isActive: value === true };
                                        field.handleChange(next);
                                        field.handleBlur();
                                      }}
                                    />
                                    <span className='text-sm font-medium'>Active</span>
                                  </label>
                                </div>
                                <div className='flex items-end justify-end'>
                                  <Button
                                    type='button'
                                    variant='destructive'
                                    onClick={() => {
                                      field.handleChange(
                                        field.state.value.filter((_, itemIndex) => itemIndex !== index)
                                      );
                                      field.handleBlur();
                                    }}
                                  >
                                    <Icons.trash className='mr-2 h-4 w-4' />
                                    Remove
                                  </Button>
                                </div>
                              </div>

                              <div className='grid gap-6 xl:grid-cols-2'>
                                <div className='space-y-3'>
                                  <Label>Branch Scope</Label>
                                  <Select
                                    value={assignment.branchScopeMode}
                                    onValueChange={(value) => {
                                      const next = [...field.state.value];
                                      next[index] = {
                                        ...assignment,
                                        branchScopeMode: value as typeof assignment.branchScopeMode,
                                        branchScopeIds:
                                          value === 'selected' ? assignment.branchScopeIds : []
                                      };
                                      field.handleChange(next);
                                      field.handleBlur();
                                    }}
                                  >
                                    <SelectTrigger>
                                      <SelectValue />
                                    </SelectTrigger>
                                    <SelectContent>
                                      {scopeModeOptions.map((option) => (
                                        <SelectItem key={option.value} value={option.value}>
                                          {option.label}
                                        </SelectItem>
                                      ))}
                                    </SelectContent>
                                  </Select>
                                  {assignment.branchScopeMode === 'selected' ? (
                                    <div className='grid gap-2 rounded-md border p-3 md:grid-cols-2'>
                                      {branches.map((branch) => (
                                        <label key={branch.id} className='flex items-start gap-3 rounded-md border p-3'>
                                          <Checkbox
                                            checked={assignment.branchScopeIds.includes(branch.id)}
                                            onCheckedChange={(value) => {
                                              const nextIds =
                                                value === true
                                                  ? [...new Set([...assignment.branchScopeIds, branch.id])]
                                                  : assignment.branchScopeIds.filter((item) => item !== branch.id);
                                              const next = [...field.state.value];
                                              next[index] = { ...assignment, branchScopeIds: nextIds };
                                              field.handleChange(next);
                                              field.handleBlur();
                                            }}
                                          />
                                          <div>
                                            <div className='font-medium'>{branch.label}</div>
                                            <div className='text-muted-foreground text-xs'>{branch.code}</div>
                                          </div>
                                        </label>
                                      ))}
                                    </div>
                                  ) : null}
                                </div>

                                <div className='space-y-3'>
                                  <Label>Product Scope</Label>
                                  <Select
                                    value={assignment.productTypeScopeMode}
                                    onValueChange={(value) => {
                                      const next = [...field.state.value];
                                      next[index] = {
                                        ...assignment,
                                        productTypeScopeMode:
                                          value as typeof assignment.productTypeScopeMode,
                                        productTypeScopeIds:
                                          value === 'selected' ? assignment.productTypeScopeIds : []
                                      };
                                      field.handleChange(next);
                                      field.handleBlur();
                                    }}
                                  >
                                    <SelectTrigger>
                                      <SelectValue />
                                    </SelectTrigger>
                                    <SelectContent>
                                      {scopeModeOptions.map((option) => (
                                        <SelectItem key={option.value} value={option.value}>
                                          {option.label}
                                        </SelectItem>
                                      ))}
                                    </SelectContent>
                                  </Select>
                                  {assignment.productTypeScopeMode === 'selected' ? (
                                    <div className='grid gap-2 rounded-md border p-3 md:grid-cols-2'>
                                      {productTypes.map((productType) => (
                                        <label key={productType.id} className='flex items-start gap-3 rounded-md border p-3'>
                                          <Checkbox
                                            checked={assignment.productTypeScopeIds.includes(productType.id)}
                                            onCheckedChange={(value) => {
                                              const nextIds =
                                                value === true
                                                  ? [
                                                      ...new Set([
                                                        ...assignment.productTypeScopeIds,
                                                        productType.id
                                                      ])
                                                    ]
                                                  : assignment.productTypeScopeIds.filter(
                                                      (item) => item !== productType.id
                                                    );
                                              const next = [...field.state.value];
                                              next[index] = {
                                                ...assignment,
                                                productTypeScopeIds: nextIds
                                              };
                                              field.handleChange(next);
                                              field.handleBlur();
                                            }}
                                          />
                                          <div>
                                            <div className='font-medium'>{productType.label}</div>
                                            <div className='text-muted-foreground text-xs'>
                                              {productType.code}
                                            </div>
                                          </div>
                                        </label>
                                      ))}
                                    </div>
                                  ) : null}
                                </div>
                              </div>
                            </div>
                          );
                        })
                      ) : (
                        <div className='text-muted-foreground rounded-lg border border-dashed p-6 text-sm'>
                          No CRM role assignments yet. Users can still fall back to the legacy
                          `membership.businessRole` path until assignments are added.
                        </div>
                      )}
                    </CardContent>
                  </Card>
                )}
              />

              <Card>
                <CardHeader className='flex flex-row items-start justify-between gap-4'>
                  <div>
                    <CardTitle>Effective Access</CardTitle>
                    <CardDescription>
                      Preview resolved CRM permissions, scopes, and approval authority for troubleshooting.
                    </CardDescription>
                  </div>
                  {isEdit ? (
                    <Button
                      type='button'
                      variant='outline'
                      onClick={() => void handlePreviewEffectiveAccess()}
                      isLoading={isLoadingPreview}
                    >
                      <Icons.sparkles className='mr-2 h-4 w-4' />
                      Preview Effective Access
                    </Button>
                  ) : null}
                </CardHeader>
                <CardContent className='space-y-4'>
                  {effectivePreviewSource?.crmAccessSummaries?.length ? (
                    effectivePreviewSource.crmAccessSummaries.map((summary) => (
                      <div key={summary.organizationId} className='rounded-lg border p-4'>
                        <div className='flex flex-wrap items-center justify-between gap-3'>
                          <div>
                            <div className='font-medium'>{summary.organizationName}</div>
                            <div className='text-muted-foreground text-sm'>
                              Primary CRM Role: {summary.primaryCrmRoleLabel ?? summary.primaryCrmRole ?? 'None'}
                            </div>
                          </div>
                          <div className='flex gap-2'>
                            <Badge variant='secondary'>{summary.roleCount} Roles</Badge>
                            {summary.usedLegacyFallback ? (
                              <Badge variant='outline'>Legacy Fallback</Badge>
                            ) : null}
                          </div>
                        </div>
                        <div className='mt-4 grid gap-3 md:grid-cols-2 xl:grid-cols-4'>
                          <div className='rounded-md border p-3'>
                            <div className='text-muted-foreground text-xs'>Ownership</div>
                            <div className='font-medium capitalize'>{summary.ownershipScope}</div>
                          </div>
                          <div className='rounded-md border p-3'>
                            <div className='text-muted-foreground text-xs'>Approval</div>
                            <div className='font-medium capitalize'>{summary.approvalAuthority}</div>
                          </div>
                          <div className='rounded-md border p-3'>
                            <div className='text-muted-foreground text-xs'>Branch Scope</div>
                            <div className='font-medium'>
                              {scopeSummary(summary.branchScopeMode, summary.branchScopeIds)}
                            </div>
                          </div>
                          <div className='rounded-md border p-3'>
                            <div className='text-muted-foreground text-xs'>Product Scope</div>
                            <div className='font-medium'>
                              {scopeSummary(summary.productScopeMode, summary.productTypeScopeIds)}
                            </div>
                          </div>
                        </div>
                        <div className='mt-4'>
                          <div className='mb-2 text-sm font-medium'>Resolved Permissions</div>
                          <div className='flex flex-wrap gap-2'>
                            {summary.permissions.map((permission) => (
                              <Badge key={permission} variant='outline'>
                                {permission}
                              </Badge>
                            ))}
                          </div>
                        </div>
                      </div>
                    ))
                  ) : (
                    <div className='text-muted-foreground rounded-lg border border-dashed p-6 text-sm'>
                      {isEdit
                        ? 'Use Preview Effective Access to inspect the resolved CRM authorization.'
                        : 'Effective access preview becomes available after the user is created.'}
                    </div>
                  )}
                </CardContent>
              </Card>
            </form.Form>
          </form.AppForm>
        </div>

        <SheetFooter>
          <Button type='button' variant='outline' onClick={() => onOpenChange(false)}>
            Cancel
          </Button>
          <Button
            type='submit'
            form='user-form-sheet'
            isLoading={isPending}
            disabled={isLoadingOrganizations}
          >
            <Icons.check className='mr-2 h-4 w-4' />
            {isEdit ? 'Update User' : 'Create User'}
          </Button>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  );
}

export function UserFormSheetTrigger() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>
        <Icons.add className='mr-2 h-4 w-4' /> Add User
      </Button>
      <UserFormSheet open={open} onOpenChange={setOpen} />
    </>
  );
}
