Название	Тип	Статус	Участников	Demo	Контакт
onUpdateClient(client.id, { name: event.target.value })} aria-label={`Название клиента ${client.name}`} /> onUpdateClient(client.id, { legalName: event.target.value \|\| null })} aria-label={`Юридическое название ${client.name}`} />	onUpdateClient(client.id, { type })} />	onUpdateClient(client.id, { status })} />	{data.memberships.filter((membership) => membership.clientId === client.id).length}	onUpdateClient(client.id, { demoEndsAt: value })} />	onUpdateClient(client.id, { contactEmail: event.target.value \|\| null })} aria-label={`Контакт клиента ${client.name}`} />	setEditingClientId(client.id)} >

Пользователь	Клиент	Телефон	Должность	Заметки	Статус аккаунта
onUpdateUser(user.id, { name: event.target.value })} aria-label={`Имя пользователя ${user.name}`} /> onUpdateUser(user.id, { email: event.target.value })} aria-label={`Email пользователя ${user.name}`} />	{client.name}	onUpdateUser(user.id, { phone: event.target.value \|\| null })} placeholder="—" aria-label={`Телефон пользователя ${user.name}`} />	onUpdateUser(user.id, { position: event.target.value \|\| null })} placeholder="—" aria-label={`Должность пользователя ${user.name}`} />	onUpdateUser(user.id, { notes: event.target.value \|\| null })} placeholder="—" aria-label={`Заметки пользователя ${user.name}`} />	{protectedUser ? ( {statusOptionLabel(userStatusOptions, user.globalStatus)} ) : ( onUpdateUser(user.id, { globalStatus: status })} /> )}

Название	Описание	Участников	Подключённые сервисы
onUpdateGroup(group.id, { name: event.target.value })} aria-label={`Название группы ${group.name}`} />	onUpdateGroup(group.id, { description: event.target.value \|\| null })} aria-label={`Описание группы ${group.name}`} />	{group.memberIds.length}	{data.grants.filter((grant) => grant.targetType === "group" && grant.targetId === group.id).length}	setEditingGroupId(group.id)} >

Витрина сервиса

{service.title}

Название в витрине update("title", event.target.value)} /> Подзаголовок update("subtitle", event.target.value || null)} /> Короткое описание

update("description", event.target.value)} rows={3} />
          </label>

<label className="service-content-field service-content-field--wide">
            <span>Description</span>
            <textarea value={draft.fullDescription ?? ""} onChange={(event) => update("fullDescription", event.target.value || null)} rows={5} />
          </label>

<label className="service-content-field service-content-field--wide">
            <span>
              <Link2 size={14} /> Ссылка запуска
            </span>
            <input
              value={getServiceLaunchLink(draft)}
              onChange={(event) => setDraft((current) => ({ ...current, ...createServiceLaunchLinkPatch(event.target.value) }))}
            />
          </label>

<MediaSourceField
            label="Карточка"
            icon={<ImageIcon size={14} />}
            source={draft.coverMediaSource ?? "url"}
            value={draft.coverImageUrl ?? ""}
            fileName={draft.coverMediaFileName ?? null}
            isUploading={uploadingSlot === "cover"}
            onSourceChange={(source) => update("coverMediaSource", source)}
            onUrlChange={(value) => {
              update("coverImageUrl", value || null);
              update("coverMediaSource", "url");
              update("coverMediaKind", mediaKindFromUrl(value));
              update("coverMediaFileName", null);
            }}
            onFileChange={handleCoverUpload}
          />

<MediaSourceField
            label="Фоновый контент"
            icon={<Video size={14} />}
            source={draft.ambientMediaSource ?? "url"}
            value={draft.ambientVideoUrl ?? ""}
            fileName={draft.ambientMediaFileName ?? null}
            isUploading={uploadingSlot === "ambient"}
            onSourceChange={(source) => update("ambientMediaSource", source)}
            onUrlChange={(value) => {
              update("ambientVideoUrl", value || null);
              update("ambientMediaSource", "url");
              update("ambientMediaKind", mediaKindFromUrl(value));
              update("ambientMediaFileName", null);
            }}
            onFileChange={handleAmbientUpload}
          />

<div className="service-content-preview service-content-preview--image">
            {draft.coverImageUrl ? <MediaPreview src={draft.coverImageUrl} kind={draft.coverMediaKind} /> : <ImageIcon size={30} />}
          </div>

<div className="service-content-preview service-content-preview--video">
            {draft.ambientVideoUrl ? <MediaPreview src={draft.ambientVideoUrl} kind={draft.ambientMediaKind} /> : <Video size={30} />}
          </div>

{storageError ? <p className="service-content-storage-error">{storageError}</p> : null}
        </div>

<div className="service-content-modal__foot">
          <Button variant="secondary" surface="modal" type="button" onClick={onClose}>
            Отмена
          </Button>
          <div className="service-content-modal__foot-actions">
            <Button variant="danger" surface="modal" type="button" icon={<Trash2 size={16} />} onClick={() => setDeleteOpen(true)}>
              Удалить
            </Button>
            <Button
              variant="accent"
              surface="modal"
              accentRgb={modalActionAccentRgb}
              type="button"
              disabled={uploadingSlot !== null}
              icon={<Save size={16} />}
              onClick={() =>
                onSave({
                  title: draft.title,
                  subtitle: draft.subtitle,
                  description: draft.description,
                  fullDescription: draft.fullDescription,
                  url: draft.url,
                  launchUrl: draft.launchUrl,
                  coverImageUrl: draft.coverImageUrl,
                  coverMediaKind: draft.coverMediaKind,
                  coverMediaSource: draft.coverMediaSource,
                  coverMediaFileName: draft.coverMediaFileName,
                  ambientVideoUrl: draft.ambientVideoUrl,
                  ambientMediaKind: draft.ambientMediaKind,
                  ambientMediaSource: draft.ambientMediaSource,
                  ambientMediaFileName: draft.ambientMediaFileName,
                })
            }
            >
              {uploadingSlot ? "Сохраняем файл" : "Сохранить"}
            </Button>
          </div>
        </div>
      </article>
      <NodeDcDeleteModal
        isOpen={deleteOpen}
        title="Удалить витрину"
        description={
          <>
            Витрина <strong>{service.title}</strong> будет удалена из каталога, нижней панели и матрицы доступов.
          </>
        }
        onClose={() => setDeleteOpen(false)}
        onConfirm={() => {
          setDeleteOpen(false);
          onDelete();
        }}
      />
    </div>
  );
}

function ClientEditorModal({
  client,
  taskManagerWorkspaces,
  taskManagerWorkspacesLoading,
  taskManagerWorkspacesError,
  onRefreshTaskManagerWorkspaces,
  onClose,
  onSave,
  onDelete,
  canDelete,
}: {
  client: Client;
  taskManagerWorkspaces: TaskManagerWorkspaceSummary[];
  taskManagerWorkspacesLoading: boolean;
  taskManagerWorkspacesError: string | null;
  onRefreshTaskManagerWorkspaces: () => void;
  onClose: () => void;
  onSave: (patch: Partial<Client>) => void;
  onDelete: () => void;
  canDelete: boolean;
}) {
  const [draft, setDraft] = useState<Client>(client);
  const [uploadingAvatar, setUploadingAvatar] = useState(false);
  const [storageError, setStorageError] = useState<string | null>(null);
  const taskManagerWorkspaceBindings = getClientTaskManagerWorkspaces(draft);
  const selectedTaskManagerWorkspaceSlugs = new Set(taskManagerWorkspaceBindings.map((workspace) => workspace.slug));
  const primaryTaskManagerWorkspace = getPrimaryTaskManagerWorkspace(draft);

useEffect(() => {
    setDraft(client);
    setUploadingAvatar(false);
    setStorageError(null);
  }, [client]);

function update<K extends keyof Client>(key: K, value: Client[K]) {
    setDraft((current) => ({ ...current, [key]: value }));
  }

function updateTaskManagerWorkspaces(workspaces: ClientTaskManagerWorkspaceBinding[]) {
    const primaryWorkspace = workspaces.find((workspace) => workspace.isPrimary) ?? workspaces[0] ?? null;
    setDraft((current) => ({
      ...current,
      integrations: {
        ...current.integrations,
        taskManager: {
          ...current.integrations?.taskManager,
          workspaceSlug: primaryWorkspace?.slug ?? null,
          workspaceName: primaryWorkspace?.name ?? null,
          workspaces,
        },
      },
    }));
  }

function toggleTaskManagerWorkspace(workspace: TaskManagerWorkspaceSummary) {
    const currentWorkspaces = getClientTaskManagerWorkspaces(draft);
    const exists = currentWorkspaces.some((item) => item.slug === workspace.slug);
    const nextWorkspaces = exists
      ? currentWorkspaces.filter((item) => item.slug !== workspace.slug)
      : [
          ...currentWorkspaces,
          {
            slug: workspace.slug,
            name: workspace.name,
            isPrimary: currentWorkspaces.length === 0,
          },
        ];

updateTaskManagerWorkspaces(normalizeClientTaskManagerWorkspaceDraft(nextWorkspaces));
  }

function setPrimaryTaskManagerWorkspace(workspaceSlug: string) {
    const nextWorkspaces = getClientTaskManagerWorkspaces(draft).map((workspace) => ({
      ...workspace,
      isPrimary: workspace.slug === workspaceSlug,
    }));
    updateTaskManagerWorkspaces(normalizeClientTaskManagerWorkspaceDraft(nextWorkspaces));
  }

async function handleAvatarUpload(file?: File) {
    if (!file) return;

setUploadingAvatar(true);
    setStorageError(null);

try {
      const storedFile = await uploadStorageFile(file);
      update("avatarUrl", storedFile.url);
    } catch (error) {
      setStorageError(error instanceof Error ? error.message : "Не удалось сохранить аватар компании");
    } finally {
      setUploadingAvatar(false);
    }
  }

return (
    <div className="service-content-modal-layer" role="dialog" aria-modal="true" aria-label={`Редактор клиента ${client.name}`}>
      <article className="service-content-modal admin-entity-modal client-editor-modal">
        <EntityModalHead
          eyebrow="Клиент"
          title={client.name}
          onClose={onClose}
          actions={
            <IconButton
              label={taskManagerWorkspacesLoading ? "Обновляем workspace Operational Core" : "Обновить workspace Operational Core"}
              className="admin-circle-action admin-circle-action--solid"
              type="button"
              disabled={taskManagerWorkspacesLoading}
              onClick={onRefreshTaskManagerWorkspaces}
            >
              <RefreshCw size={16} />
            </IconButton>
          }
        />
        <div className="service-content-modal__grid">
          <label className="service-content-field">
            <span>Название</span>
            <input value={draft.name} onChange={(event) => update("name", event.target.value)} />
          </label>
          <label className="service-content-field">
            <span>Юридическое название</span>
            <input value={draft.legalName ?? ""} onChange={(event) => update("legalName", event.target.value || null)} />
          </label>
          <label className="service-content-field">
            <span>ИНН</span>
            <input value={draft.inn ?? ""} onChange={(event) => update("inn", event.target.value || null)} />
          </label>
          <label className="service-content-field">
            <span>Тип</span>
            <NodeDcSelect
              className="admin-modal-select-wrap"
              triggerClassName="admin-modal-select-trigger"
              value={draft.type}
              options={clientTypeOptions}
              label="Тип клиента"
              onChange={(type) => update("type", type)}
            />
          </label>
          <div className="service-content-field">
            <span>Статус</span>
            <AdminStatusDropdown value={draft.status} options={clientStatusOptions} label="Статус клиента" onChange={(status) => update("status", status)} />
          </div>
          <div className="service-content-field service-content-field--wide client-avatar-field">
            <span>Аватар компании</span>
            <div className="client-avatar-control">
              <div className="client-avatar-preview" aria-hidden="true">
                {draft.avatarUrl ? <img src={draft.avatarUrl} alt="" /> : null}
              </div>
              <div className="client-avatar-control__copy">
                <strong>{draft.avatarUrl ? "Аватар подключён" : "Аватар не задан"}</strong>
                <small>Показывается в верхнем переключателе компании.</small>
              </div>
              <label className="service-media-file-button client-avatar-upload-button">
                {uploadingAvatar ? "Загрузка..." : "Выберите файл"}
                <input
                  type="file"
                  accept="image/*"
                  disabled={uploadingAvatar}
                  onChange={(event) => {
                    void handleAvatarUpload(event.target.files?.[0]);
                    event.target.value = "";
                  }}
                />
              </label>
              {draft.avatarUrl ? (
                <button className="admin-icon-action client-avatar-clear-action" type="button" onClick={() => update("avatarUrl", null)} aria-label="Убрать аватар">
                  <X size={11} />
                </button>
              ) : null}
            </div>
            {storageError ? <small className="client-avatar-error">{storageError}</small> : null}
          </div>
          <div className="service-content-field service-content-field--wide">
            <span>Operational Core workspaces</span>
            <div className="task-workspace-picker-card">
              <div className="task-workspace-picker" role="list" aria-label="Operational Core workspaces клиента">
                {taskManagerWorkspaces.length ? (
                  taskManagerWorkspaces.map((workspace) => {
                    const selected = selectedTaskManagerWorkspaceSlugs.has(workspace.slug);
                    const primary = primaryTaskManagerWorkspace?.slug === workspace.slug;

return (
                      <button
                        key={workspace.slug}
                        className={cn("task-workspace-chip", selected && "task-workspace-chip--selected")}
                        type="button"
                        aria-pressed={selected}
                        onClick={() => toggleTaskManagerWorkspace(workspace)}
                      >
                        <span>
                          <strong>{workspace.name}</strong>
                          <small>
                            {workspace.slug} · {workspace.memberCount} участников
                          </small>
                        </span>
                        {selected ? (
                          <em
                            role="button"
                            tabIndex={0}
                            onClick={(event) => {
                              event.stopPropagation();
                              setPrimaryTaskManagerWorkspace(workspace.slug);
                            }}
                            onKeyDown={(event) => {
                              if (event.key !== "Enter" && event.key !== " ") return;
                              event.preventDefault();
                              event.stopPropagation();
                              setPrimaryTaskManagerWorkspace(workspace.slug);
                            }}
                          >
                            {primary ? "Основной" : "Сделать основным"}
                          </em>
                        ) : null}
                      </button>
                    );
                  })
                ) : (
                  <span className="task-workspace-picker__empty">Workspace Operational Core не загружены</span>
                )}
              </div>
            </div>
            <small>
              {taskManagerWorkspacesError
                ? taskManagerWorkspacesError
                : "Эти workspace доступны для детальных назначений пользователей в Operational Core."}
            </small>
          </div>
          <label className="service-content-field">
            <span>Контактное лицо</span>
            <input value={draft.contactName ?? ""} onChange={(event) => update("contactName", event.target.value || null)} />
          </label>
          <label className="service-content-field">
            <span>Email</span>
            <input value={draft.contactEmail ?? ""} onChange={(event) => update("contactEmail", event.target.value || null)} />
          </label>
          <div className="service-content-field">
            <span>Договор с</span>
            <NodeDcDateField
              value={draft.contractStartsAt ?? null}
              rangeStart={draft.contractStartsAt ?? null}
              rangeEnd={draft.contractEndsAt ?? null}
              label="Договор с"
              onChange={(value) => update("contractStartsAt", value)}
            />
          </div>
          <div className="service-content-field">
            <span>Договор до</span>
            <NodeDcDateField
              value={draft.contractEndsAt ?? null}
              rangeStart={draft.contractStartsAt ?? null}
              rangeEnd={draft.contractEndsAt ?? null}
              label="Договор до"
              onChange={(value) => update("contractEndsAt", value)}
            />
          </div>
          <div className="service-content-field">
            <span>Оплачено до</span>
            <NodeDcDateField value={draft.paidUntil ?? null} label="Оплачено до" onChange={(value) => update("paidUntil", value)} />
          </div>
          <div className="service-content-field">
            <span>Демо до</span>
            <NodeDcDateField value={draft.demoEndsAt ?? null} label="Демо до" onChange={(value) => update("demoEndsAt", value)} />
          </div>
          <label className="service-content-field service-content-field--wide">
            <span>Заметки</span>
            <textarea value={draft.notes ?? ""} onChange={(event) => update("notes", event.target.value || null)} rows={4} />
          </label>
        </div>
        <EntityModalFoot
          onClose={onClose}
          onSave={() => onSave(draft)}
          deleteConfig={
            canDelete
              ? {
                  label: "Удалить",
                  title: "Удалить компанию",
                  description: (
                    <>
                      Компания <strong>{client.name}</strong>, ее участники, группы, инвайты и клиентские гранты будут удалены из демо-данных.
                    </>
                  ),
                  onConfirm: onDelete,
                }
              : undefined
          }
        />
      </article>
    </div>
  );
}

function UserEditorModal({
  user,
  membership,
  client,
  onClose,
  onSave,
  onDelete,
}: {
  user: LauncherUser;
  membership: ClientMembership;
  client: Client;
  onClose: () => void;
  onSave: (userPatch: Partial<LauncherUser>, membershipPatch: Partial<ClientMembership>) => void;
  onDelete: () => void;
}) {
  const [userDraft, setUserDraft] = useState<LauncherUser>(user);
  const [membershipDraft, setMembershipDraft] = useState<ClientMembership>(membership);

useEffect(() => {
    setUserDraft(user);
    setMembershipDraft(membership);
  }, [membership, user]);

function updateUser<K extends keyof LauncherUser>(key: K, value: LauncherUser[K]) {
    setUserDraft((current) => ({ ...current, [key]: value }));
  }

function updateMembership<K extends keyof ClientMembership>(key: K, value: ClientMembership[K]) {
    setMembershipDraft((current) => ({ ...current, [key]: value }));
  }

return (
    <div className="service-content-modal-layer" role="dialog" aria-modal="true" aria-label={`Редактор пользователя ${user.name}`}>
      <article className="service-content-modal admin-entity-modal">
        <EntityModalHead eyebrow={client.name} title={user.name} onClose={onClose} />
        <div className="service-content-modal__grid">
          <label className="service-content-field">
            <span>Имя</span>
            <input value={userDraft.name} onChange={(event) => updateUser("name", event.target.value)} />
          </label>
          <label className="service-content-field">
            <span>Email</span>
            <input value={userDraft.email} onChange={(event) => updateUser("email", event.target.value)} />
          </label>
          <label className="service-content-field">
            <span>Телефон</span>
            <input value={userDraft.phone ?? ""} onChange={(event) => updateUser("phone", event.target.value || null)} />
          </label>
          <label className="service-content-field">
            <span>Должность</span>
            <input value={userDraft.position ?? ""} onChange={(event) => updateUser("position", event.target.value || null)} />
          </label>
          <div className="service-content-field">
            <span>Статус</span>
            <AdminStatusDropdown value={userDraft.globalStatus} options={userStatusOptions} label="Статус пользователя" onChange={(status) => updateUser("globalStatus", status)} />
          </div>
          <label className="service-content-field">
            <span>Роль в клиенте</span>
            <NodeDcSelect
              className="admin-modal-select-wrap"
              triggerClassName="admin-modal-select-trigger"
              value={membershipDraft.role}
              options={membershipRoleOptions}
              label="Роль в клиенте"
              onChange={(role) => updateMembership("role", role)}
            />
          </label>
          <div className="service-content-field">
            <span>Доступ</span>
            <AdminStatusDropdown
              value={membershipDraft.status}
              options={membershipStatusOptions}
              label="Доступ пользователя"
              onChange={(status) => updateMembership("status", status)}
            />
          </div>
          <label className="service-content-field service-content-field--wide">
            <span>Заметки</span>
            <textarea value={userDraft.notes ?? ""} onChange={(event) => updateUser("notes", event.target.value || null)} rows={4} />
          </label>
        </div>
        <EntityModalFoot
          onClose={onClose}
          onSave={() => onSave(userDraft, membershipDraft)}
          deleteConfig={{
            label: "Удалить",
            title: "Удалить участника",
            description: (
              <>
                Участник <strong>{user.name}</strong> будет удален из клиента <strong>{client.name}</strong>. Глобальный профиль пользователя останется в демо-справочнике.
              </>
            ),
            onConfirm: onDelete,
          }}
        />
      </article>
    </div>
  );
}

function GroupEditorModal({
  group,
  users,
  onClose,
  onSave,
  onDelete,
}: {
  group: ClientGroup;
  users: LauncherUser[];
  onClose: () => void;
  onSave: (patch: Partial<ClientGroup>) => void;
  onDelete: () => void;
}) {
  const [draft, setDraft] = useState<ClientGroup>(group);

useEffect(() => setDraft(group), [group]);

function toggleUser(userId: string) {
    setDraft((current) => ({
      ...current,
      memberIds: current.memberIds.includes(userId)
        ? current.memberIds.filter((item) => item !== userId)
        : [...current.memberIds, userId],
    }));
  }

return (
    <div className="service-content-modal-layer" role="dialog" aria-modal="true" aria-label={`Редактор группы ${group.name}`}>
      <article className="service-content-modal admin-entity-modal">
        <EntityModalHead eyebrow="Группа" title={group.name} onClose={onClose} />
        <div className="service-content-modal__grid">
          <label className="service-content-field">
            <span>Название</span>
            <input value={draft.name} onChange={(event) => setDraft((current) => ({ ...current, name: event.target.value }))} />
          </label>
          <label className="service-content-field service-content-field--wide">
            <span>Описание</span>
            <textarea
              value={draft.description ?? ""}
              onChange={(event) => setDraft((current) => ({ ...current, description: event.target.value || null }))}
              rows={4}
            />
          </label>
          <div className="service-content-field service-content-field--wide">
            <span>Участники</span>
            <div className="admin-token-grid">
              {users.map((user) => (
                <button
                  key={user.id}
                  className="admin-token"
                  data-active={draft.memberIds.includes(user.id)}
                  type="button"
                  onClick={() => toggleUser(user.id)}
                >
                  {user.name}
                </button>
              ))}
            </div>
          </div>
        </div>
        <EntityModalFoot
          onClose={onClose}
          onSave={() => onSave(draft)}
          deleteConfig={{
            label: "Удалить",
            title: "Удалить группу",
            description: (
              <>
                Группа <strong>{group.name}</strong> и привязанные к ней гранты сервисов будут удалены.
              </>
            ),
            onConfirm: onDelete,
          }}
        />
      </article>
    </div>
  );
}

return (
    <>
      <div className="service-content-modal__foot">
        <Button variant="secondary" surface="modal" type="button" onClick={onClose}>
          Отмена
        </Button>
        <div className="service-content-modal__foot-actions">
          {deleteConfig ? (
            <Button variant="danger" surface="modal" type="button" icon={<Trash2 size={16} />} onClick={() => setDeleteOpen(true)}>
              {deleteConfig.label}
            </Button>
          ) : null}
          <Button variant="accent" surface="modal" accentRgb={modalActionAccentRgb} type="button" icon={<Save size={16} />} onClick={onSave}>
            Сохранить
          </Button>
        </div>
      </div>
      {deleteConfig ? (
        <NodeDcDeleteModal
          isOpen={deleteOpen}
          title={deleteConfig.title}
          description={deleteConfig.description}
          onClose={() => setDeleteOpen(false)}
          onConfirm={() => {
            setDeleteOpen(false);
            deleteConfig.onConfirm();
          }}
        />
      ) : null}
    </>
  );
}

return (
    <div className="service-content-field service-media-field">
      <span>
        {icon} {label}
      </span>
      <div className="service-media-control">
        {source === "file" ? (
          <div className="service-media-file-control">
            <label className="service-media-file-button" htmlFor={inputId}>
              Выберите файл
            </label>
            <span className="service-media-file-name" title={fileTitle}>
              {displayFileName}
            </span>
            <input id={inputId} type="file" accept={mediaAccept} onChange={(event) => onFileChange(event.currentTarget.files?.[0])} />
          </div>
        ) : (
          <input className="service-media-url-input" value={value} onChange={(event) => onUrlChange(event.target.value)} placeholder="https://..." />
        )}

<div className="service-media-source-switch" aria-label={`${label}: источник`}>
          <button
            type="button"
            className="service-media-source-button"
            data-active={source === "file"}
            aria-label="Файл с диска"
            onClick={() => onSourceChange("file")}
          >
            <HardDrive size={15} />
          </button>
          <button
            type="button"
            className="service-media-source-button"
            data-active={source === "url"}
            aria-label="Внешняя ссылка"
            onClick={() => onSourceChange("url")}
          >
            <Globe2 size={15} />
          </button>
        </div>
      </div>
    </div>
  );
}

function truncateText(value: string, maxLength: number) {
  return value.length > maxLength ? `${value.slice(0, maxLength)}…` : value;
}

function MediaPreview({ src, kind }: { src: string; kind?: MediaKind | null }) {
  if (kind === "video" || mediaKindFromUrl(src) === "video") {
    return <video src={src} autoPlay loop muted playsInline />;
  }

return <img src={src} alt="" />;
}

function mediaKindFromFile(file: File): MediaKind {
  if (file.type.startsWith("video/")) return "video";
  if (file.type === "image/gif" || /\.gif$/i.test(file.name)) return "gif";
  return "image";
}

function mediaKindFromUrl(value: string): MediaKind | null {
  if (!value.trim()) return null;
  if (/\.(mp4|webm|mov|m4v|avi|mkv)(\?.*)?$/i.test(value)) return "video";
  if (/\.gif(\?.*)?$/i.test(value)) return "gif";
  return "image";
}

function AccessSection({
  data,
  matrix,
  selectedCell,
  onSelectCell,
  onSetUserServiceAccess,
  pendingAccessAssignments,
  onUpdateUser,
  onUpdateMembership,
  pendingTaskManagerMemberships,
  pendingTaskManagerProjectMemberships,
  taskManagerWorkspaceCatalog,
  onSetTaskManagerWorkspaceMemberRole,
  onSetTaskManagerProjectMemberRole,
}: {
  data: LauncherData;
  matrix: ReturnType<typeof buildAccessMatrix>;
  selectedCell: AccessMatrixCell | null;
  onSelectCell: (cell: AccessMatrixCell) => void;
  onSetUserServiceAccess: (command: SetUserServiceAccessCommand) => void;
  pendingAccessAssignments: Record<string, AccessAssignmentValue>;
  onUpdateUser: (userId: string, patch: Partial<LauncherUser>) => void;
  onUpdateMembership: (membershipId: string, patch: Partial<ClientMembership>) => void;
  pendingTaskManagerMemberships: Record<string, boolean>;
  pendingTaskManagerProjectMemberships: Record<string, boolean>;
  taskManagerWorkspaceCatalog: TaskManagerWorkspaceSummary[];
  onSetTaskManagerWorkspaceMemberRole: (command: EnsureTaskManagerWorkspaceMemberCommand) => void;
  onSetTaskManagerProjectMemberRole: (command: EnsureTaskManagerProjectMemberCommand) => void;
}) {
  const hasUsers = matrix.users.length > 0;
  const clientTaskManagerWorkspaces = getClientTaskManagerWorkspaces(matrix.client);
  const primaryTaskManagerWorkspace = getPrimaryTaskManagerWorkspace(matrix.client);
  const [detailsCell, setDetailsCell] = useState<AccessMatrixCell | null>(null);

if (!hasUsers) {
    return (
      <div className="access-layout">
        <GlassSurface className="access-matrix">
          <div className="table-toolbar">
            <h3>Матрица доступа · {matrix.client.name}</h3>
            <span className="muted-text">Нет данных для матрицы</span>
          </div>
          <div className="access-empty-state">
            <strong>У клиента пока нет участников</strong>
            <span>Добавьте участника или инвайт, после этого здесь появятся ячейки доступа.</span>
          </div>
        </GlassSurface>
      </div>
    );
  }

const accessGridTemplateColumns = `15rem repeat(2, 9.7rem) repeat(${matrix.services.length}, 11.25rem)`;

return (
    <div className="access-layout">
      <GlassSurface className="access-matrix">
        <div className="table-toolbar">
          <h3>Матрица доступа · {matrix.client.name}</h3>
          <span className="muted-text">Клик по ячейке открывает назначение</span>
        </div>
        <div className="matrix-scroll">
          <div className="access-matrix-grid" style={{ gridTemplateColumns: accessGridTemplateColumns }} role="table">
            <div className="access-grid-head access-grid-sticky" role="columnheader">
              Участник
            </div>
            <div className="access-grid-head" role="columnheader">
              MAIN
            </div>
            <div className="access-grid-head" role="columnheader">
              MAIN ROLE
            </div>
            {matrix.services.map((service) => (
              <div key={service.id} className="access-grid-head" role="columnheader">
                {service.title}
              </div>
            ))}

{matrix.users.map((user) => {
              const membership = data.memberships.find((item) => item.clientId === matrix.client.id && item.userId === user.id);
              if (!membership) return null;

return (
                <Fragment key={user.id}>
                  <div className="access-grid-cell access-grid-sticky access-user-cell" role="rowheader">
                    <strong>{user.name}</strong>
                    <small>{user.email}</small>
                  </div>
                  <div className="access-grid-cell" role="cell">
                    <MainStatusControl
                      value={user.globalStatus}
                      protectedUser={protectedUser}
                      onChange={(status) => onUpdateUser(user.id, { globalStatus: status })}
                    />
                  </div>
                  <div className="access-grid-cell" role="cell">
                    <MainRoleControl
                      value={membership.role}
                      protectedUser={protectedUser}
                      onChange={(role) => onUpdateMembership(membership.id, { role })}
                    />
                  </div>
                  {matrix.services.map((service) => {
                    const cell = matrix.cells.find((item) => item.userId === user.id && item.serviceId === service.id)!;
                    const active = selectedCell?.userId === user.id && selectedCell.serviceId === service.id;
                    const isTaskManagerService = isOperationalCoreService(service);

return (
                      <div key={service.id} className="access-grid-cell" role="cell">
                        <AccessCellControl
                          cell={cell}
                          active={active}
                          pendingValue={pendingAccessAssignments[accessCellKey(user.id, service.id)]}
                          busy={isTaskManagerService && pendingTaskerAssignment}
                          onSelectCell={onSelectCell}
                          onSetAccess={(value) => {
                            onSetUserServiceAccess({ userId: user.id, serviceId: service.id, value });

if (!isTaskManagerService || !primaryTaskManagerWorkspace || protectedUser || forcedTaskManagerAdmin) return;

onSetTaskManagerWorkspaceMemberRole({
                              clientId: matrix.client.id,
                              userId: user.id,
                              workspaceSlug: primaryTaskManagerWorkspace.slug,
                              role: accessAssignmentToTaskManagerRole(value),
                            });
                          }}
                          onOpenDetails={isTaskManagerService ? () => setDetailsCell(cell) : undefined}
                        />
                      </div>
                    );
                  })}
                </Fragment>
              );
            })}
          </div>
        </div>
      </GlassSurface>

{detailsCell ? (
        <OperationalCoreAccessModal
          data={data}
          client={matrix.client}
          user={getUser(data, detailsCell.userId)}
          service={getService(data, detailsCell.serviceId)}
          cell={detailsCell}
          workspaces={clientTaskManagerWorkspaces}
          workspaceCatalog={taskManagerWorkspaceCatalog}
          pendingAccessAssignments={pendingAccessAssignments}
          pendingTaskManagerMemberships={pendingTaskManagerMemberships}
          pendingTaskManagerProjectMemberships={pendingTaskManagerProjectMemberships}
          onClose={() => setDetailsCell(null)}
          onSetUserServiceAccess={onSetUserServiceAccess}
          onSetTaskManagerWorkspaceMemberRole={onSetTaskManagerWorkspaceMemberRole}
          onSetTaskManagerProjectMemberRole={onSetTaskManagerProjectMemberRole}
        />
      ) : null}
    </div>
  );
}

function MainStatusControl({
  value,
  protectedUser,
  onChange,
}: {
  value: LauncherUserStatus;
  protectedUser: boolean;
  onChange: (value: LauncherUserStatus) => void;
}) {
  const label = mainStatusLabel(value);
  const allowed = value === "active";

if (protectedUser) {
    return (
      <span className={cn("access-cell access-cell--main access-cell--readonly", allowed ? "access-cell--allowed" : "access-cell--exception")}>
        <strong>{label}</strong>
        <span>MAIN</span>
      </span>
    );
  }

return (
    <NodeDcSelect
      value={value}
      options={mainStatusOptions}
      label="MAIN статус"
      minMenuWidth={172}
      menuClassName="access-cell-menu"
      onChange={onChange}
      trigger={({ open, toggle, setTriggerRef, selectedOption }) => (
        <button
          ref={setTriggerRef}
          className={cn("access-cell access-cell--main", value === "active" ? "access-cell--allowed" : "access-cell--exception")}
          type="button"
          aria-expanded={open}
          onClick={toggle}
        >
          <strong>{selectedOption.label}</strong>
          <span>MAIN</span>
        </button>
      )}
    />
  );
}

function MainRoleControl({
  value,
  protectedUser,
  onChange,
}: {
  value: ClientMembershipRole;
  protectedUser: boolean;
  onChange: (value: ClientMembershipRole) => void;
}) {
  const label = membershipRoleLabel(value);

if (protectedUser) {
    return (
      <span className="access-cell access-cell--main access-cell--allowed access-cell--readonly">
        <strong>{label}</strong>
        <span>MAIN роль</span>
      </span>
    );
  }

return (
    <NodeDcSelect
      value={value}
      options={membershipRoleOptions}
      label="MAIN роль"
      minMenuWidth={198}
      menuClassName="access-cell-menu"
      onChange={onChange}
      trigger={({ open, toggle, setTriggerRef, selectedOption }) => (
        <button ref={setTriggerRef} className="access-cell access-cell--main access-cell--allowed" type="button" aria-expanded={open} onClick={toggle}>
          <strong>{selectedOption.label}</strong>
          <span>MAIN роль</span>
        </button>
      )}
    />
  );
}

function OperationalCoreAccessModal({
  data,
  client,
  user,
  service,
  cell,
  workspaces,
  workspaceCatalog,
  pendingAccessAssignments,
  pendingTaskManagerMemberships,
  pendingTaskManagerProjectMemberships,
  onClose,
  onSetUserServiceAccess,
  onSetTaskManagerWorkspaceMemberRole,
  onSetTaskManagerProjectMemberRole,
}: {
  data: LauncherData;
  client: Client;
  user: LauncherUser;
  service: Service;
  cell: AccessMatrixCell;
  workspaces: ClientTaskManagerWorkspaceBinding[];
  workspaceCatalog: TaskManagerWorkspaceSummary[];
  pendingAccessAssignments: Record<string, AccessAssignmentValue>;
  pendingTaskManagerMemberships: Record<string, boolean>;
  pendingTaskManagerProjectMemberships: Record<string, boolean>;
  onClose: () => void;
  onSetUserServiceAccess: (command: SetUserServiceAccessCommand) => void;
  onSetTaskManagerWorkspaceMemberRole: (command: EnsureTaskManagerWorkspaceMemberCommand) => void;
  onSetTaskManagerProjectMemberRole: (command: EnsureTaskManagerProjectMemberCommand) => void;
}) {
  const membership = data.memberships.find((item) => item.clientId === client.id && item.userId === user.id);
  const protectedUser = user.id === "user_root" || membership?.role === "client_owner";
  const basePendingValue = pendingAccessAssignments[accessCellKey(user.id, service.id)];
  const baseAssignmentValue = basePendingValue ?? accessAssignmentValue(cell);

return (
    <div className="service-content-modal-layer" role="dialog" aria-modal="true" aria-label={`Operational Core доступы ${user.name}`}>
      <article className="service-content-modal admin-entity-modal task-access-modal">
        <EntityModalHead eyebrow="Доступы → Operational Core" title={user.name} onClose={onClose} />
        <div className="task-access-summary">
          <InfoLine label="Клиент" value={client.name} />
          <InfoLine label="Сервис" value={service.title} />
          <InfoLine label="Пользователь" value={user.email} />
        </div>

<div className="task-workspace-access-list">
          {workspaces.length ? (
            workspaces.map((workspace) => {
              const role = getTaskManagerMembershipRole(data, client.id, user.id, workspace.slug);
              const projects = getWorkspaceCatalogProjects(workspace, workspaceCatalog);
              const pendingKey = `${client.id}:${user.id}:${workspace.slug}`;
              const pending = Boolean(pendingTaskManagerMemberships[pendingKey]) || basePendingValue !== undefined;
              const value: OperationalCoreRoleSelectValue = pending
                ? "pending"
                : baseAssignmentValue === "deny"
                  ? "deny"
                  : taskManagerRoleToAccessAssignment(role);

return (
                <section key={workspace.slug} className="task-workspace-access-card">
                  <div className="task-workspace-access-card__head">
                    <div>
                      <strong>{workspace.name ?? workspace.slug}</strong>
                      <small>
                        {workspace.slug}
                        {workspace.isPrimary ? " · основной workspace" : ""}
                      </small>
                    </div>
                    {protectedUser ? (
                      <AdminStaticPill>{accessAssignmentLabel("admin")}</AdminStaticPill>
                    ) : (
                      <NodeDcSelect
                        className="admin-table-select-wrap"
                        triggerClassName="admin-table-select-trigger"
                        value={value}
                        options={operationalCoreRoleOptions}
                        label={`Роль ${user.name} в ${workspace.name ?? workspace.slug}`}
                        minMenuWidth={180}
                        disabled={pending}
                        onChange={(nextValue) => {
                          if (nextValue === "pending") return;
                          onSetUserServiceAccess({ userId: user.id, serviceId: service.id, value: nextValue });
                          onSetTaskManagerWorkspaceMemberRole({
                            clientId: client.id,
                            userId: user.id,
                            workspaceSlug: workspace.slug,
                            role: accessAssignmentToTaskManagerRole(nextValue),
                          });
                        }}
                      />
                    )}
                  </div>
                  <div className="task-project-access-list">
                    <div className="task-project-access-list__head">
                      <strong>Проекты</strong>
                      <span>{projects.length ? "Точечные роли внутри выбранного workspace" : "В этом workspace пока нет проектов"}</span>
                    </div>
                    {projects.map((project) => {
                      const projectRole = getTaskManagerProjectMembershipRole(data, client.id, user.id, workspace.slug, project.id);
                      const projectPendingKey = `${client.id}:${user.id}:${workspace.slug}:${project.id}`;
                      const projectPending = Boolean(pendingTaskManagerProjectMemberships[projectPendingKey]);
                      const projectValue: OperationalCoreRoleSelectValue = projectPending ? "pending" : taskManagerRoleToAccessAssignment(projectRole);

return (
                        <div key={project.id} className="task-project-access-row">
                          <div className="task-project-access-row__meta">
                            <strong>{project.name}</strong>
                            <small>
                              {project.identifier}
                              {project.memberCount ? ` · ${project.memberCount} участников` : ""}
                            </small>
                          </div>
                          {protectedUser ? (
                            <AdminStaticPill>{accessAssignmentLabel("admin")}</AdminStaticPill>
                          ) : (
                            <NodeDcSelect
                              className="admin-table-select-wrap"
                              triggerClassName="admin-table-select-trigger"
                              value={projectValue}
                              options={taskManagerProjectRoleOptions}
                              label={`Роль ${user.name} в проекте ${project.name}`}
                              minMenuWidth={180}
                              disabled={projectPending}
                              onChange={(nextValue) => {
                                if (nextValue === "pending") return;

onSetTaskManagerProjectMemberRole({
                                  clientId: client.id,
                                  userId: user.id,
                                  workspaceSlug: workspace.slug,
                                  projectId: project.id,
                                  role: nextTaskManagerRole,
                                });
                              }}
                            />
                          )}
                        </div>
                      );
                    })}
                  </div>
                </section>
              );
            })
          ) : (
            <div className="access-empty-state">
              <strong>Workspace не привязаны к клиенту</strong>
              <span>Откройте карточку клиента и выберите Operational Core workspaces, после этого здесь появятся назначения.</span>
            </div>
          )}
        </div>

<div className="service-content-modal__foot">
          <Button variant="secondary" surface="modal" type="button" onClick={onClose}>
            Закрыть
          </Button>
        </div>
      </article>
    </div>
  );
}

function AccessCellControl({
  cell,
  active,
  pendingValue,
  busy = false,
  onSelectCell,
  onSetAccess,
  onOpenDetails,
}: {
  cell: AccessMatrixCell;
  active: boolean;
  pendingValue?: AccessAssignmentValue;
  busy?: boolean;
  onSelectCell: (cell: AccessMatrixCell) => void;
  onSetAccess: (value: AccessAssignmentValue) => void;
  onOpenDetails?: () => void;
}) {
  const isPending = pendingValue !== undefined || busy;
  const assignmentValue = pendingValue ?? accessAssignmentValue(cell);
  const cellClassName = cn(
    "access-cell",
    onOpenDetails && "access-cell--modal",
    cell.effectiveAccess.allowed && "access-cell--allowed",
    !cell.effectiveAccess.allowed && "access-cell--denied",
    cell.effectiveAccess.source === "exception" && "access-cell--exception",
    isPending && "access-cell--pending",
    active && "access-cell--active"
  );

if (onOpenDetails) {
    return (
      <button
        className={cellClassName}
        type="button"
        aria-busy={isPending}
        disabled={isPending}
        onClick={() => {
          onSelectCell(cell);
          onOpenDetails();
        }}
      >
        <strong>{isPending ? accessAssignmentLabel(assignmentValue) : accessCellTitle(cell)}</strong>
        <span>{isPending ? "Сохраняем..." : sourceLabel(cell.effectiveAccess.source)}</span>
      </button>
    );
  }

return (
    <NodeDcSelect
      value={assignmentValue}
      options={accessAssignmentOptions}
      label={`Назначить доступ ${cell.userId} / ${cell.serviceId}`}
      minMenuWidth={172}
      menuClassName="access-cell-menu"
      disabled={isPending}
      onChange={(value) => onSetAccess(value)}
      trigger={({ open, toggle, setTriggerRef }) => (
        <button
          ref={setTriggerRef}
          className={cellClassName}
          type="button"
          aria-expanded={open}
          aria-busy={isPending}
          onClick={() => {
            onSelectCell(cell);
            toggle();
          }}
        >
          <strong>{isPending ? accessAssignmentLabel(assignmentValue) : accessCellTitle(cell)}</strong>
          <span>{isPending ? "Сохраняем..." : sourceLabel(cell.effectiveAccess.source)}</span>
        </button>
      )}
    />
  );
}

function InvitesSection({
  data,
  clientId,
  actorUserId,
  onCreateInvite,
  onUpdateInvite,
  onDeleteInvite,
}: {
  data: LauncherData;
  clientId: string;
  actorUserId: string;
  onCreateInvite: (invite: Pick<Invite, "clientId" | "email" | "role">) => void;
  onUpdateInvite: (inviteId: string, patch: Partial<Invite>) => void;
  onDeleteInvite: (inviteId: string) => void;
}) {
  const [email, setEmail] = useState("");
  const [role, setRole] = useState<ClientMembershipRole>("member");
  const [deleteInviteId, setDeleteInviteId] = useState<string | null>(null);
  const [copiedInviteId, setCopiedInviteId] = useState<string | null>(null);
  const invites = data.invites.filter((invite) => invite.clientId === clientId);
  const deletingInvite = invites.find((invite) => invite.id === deleteInviteId) ?? null;
  const actor = getUser(data, actorUserId);

function handleCreateInvite() {
    if (!email.trim()) return;

onCreateInvite({ clientId, email: email.trim(), role });
    setEmail("");
    setRole("member");
  }

async function handleCopyInvite(invite: Invite) {
    const inviteUrl = buildInviteUrl(invite.token);

try {
      await copyToClipboard(inviteUrl);
    } catch {
      return;
    }

setCopiedInviteId(invite.id);

if (invite.status === "created") {
      onUpdateInvite(invite.id, { status: "sent" });
    }

window.setTimeout(() => {
      setCopiedInviteId((currentInviteId) => (currentInviteId === invite.id ? null : currentInviteId));
    }, 1800);
  }

return (
    <div className="invites-layout invites-layout--catalog">
      <GlassSurface className="invite-form invite-form--compact">
        <div className="table-toolbar">
          <div>
            <p className="eyebrow">Инвайт от {actor.name}</p>
            <h3>Создать приглашение</h3>
          </div>
          <IconButton
            label="Сгенерировать ссылку"
            className="admin-circle-action admin-circle-action--solid"
            type="button"
            disabled={!email.trim()}
            onClick={handleCreateInvite}
          >
            <MailPlus size={16} />
          </IconButton>
        </div>
        <div className="invite-form__fields">
          <input value={email} onChange={(event) => setEmail(event.target.value)} placeholder="email@company.ru" />
          <NodeDcSelect
            className="admin-table-select-wrap"
            triggerClassName="admin-modal-select-trigger"
            value={role}
            options={inviteRoleOptions}
            label="Роль инвайта"
            onChange={(nextRole) => setRole(nextRole)}
          />
        </div>
      </GlassSurface>

<GlassSurface className="table-shell">
        <div className="table-toolbar">
          <h3>Инвайты</h3>
        </div>
        <table className="admin-data-table">
          <thead>
            <tr>
              <th>Email</th>
              <th>Роль</th>
              <th>Статус</th>
              <th>Ссылка</th>
              <th>Истекает</th>
              <th aria-label="Удаление" />
            </tr>
          </thead>
          <tbody>
            {invites.map((invite) => {
              const inviteUrl = buildInviteUrl(invite.token);
              const isCopied = copiedInviteId === invite.id;

return (
                <tr key={invite.id}>
                  <td>
                    <input
                      className="admin-table-input admin-table-input--strong"
                      value={invite.email}
                      onChange={(event) => onUpdateInvite(invite.id, { email: event.target.value })}
                      aria-label={`Email инвайта ${invite.email}`}
                    />
                  </td>
                  <td>
                    <NodeDcSelect
                      className="admin-table-select-wrap"
                      triggerClassName="admin-table-select-trigger"
                      value={invite.role}
                      options={inviteRoleOptions}
                      label={`Роль инвайта ${invite.email}`}
                      minMenuWidth={172}
                      onChange={(nextRole) => onUpdateInvite(invite.id, { role: nextRole })}
                    />
                  </td>
                  <td>
                    <AdminStatusDropdown
                      value={invite.status}
                      options={inviteStatusOptions}
                      label={`Статус инвайта ${invite.email}`}
                      onChange={(status) => onUpdateInvite(invite.id, { status })}
                    />
                  </td>
                  <td>
                    <div className="invite-link-cell">
                      <code title={inviteUrl}>{inviteUrl}</code>
                      {isCopied ? <span className="invite-link-cell__state">Скопировано</span> : null}
                      <IconButton
                        label={isCopied ? `Инвайт ${invite.email} скопирован` : `Скопировать инвайт ${invite.email}`}
                        className="admin-icon-action invite-icon-action"
                        type="button"
                        onClick={() => void handleCopyInvite(invite)}
                      >
                        <Copy size={11} />
                      </IconButton>
                    </div>
                  </td>
                  <td>
                    <NodeDcDateField
                      value={invite.expiresAt}
                      label={`Инвайт истекает ${invite.email}`}
                      onChange={(value) => {
                        if (value) onUpdateInvite(invite.id, { expiresAt: value });
                      }}
                    />
                  </td>
                  <td className="services-admin-table__actions">
                    <IconButton
                      label={`Удалить инвайт ${invite.email}`}
                      className="admin-icon-action invite-icon-action"
                      type="button"
                      onClick={() => setDeleteInviteId(invite.id)}
                    >
                      <Trash2 size={12} />
                    </IconButton>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </GlassSurface>
      <NodeDcDeleteModal
        isOpen={Boolean(deletingInvite)}
        title="Удалить инвайт"
        description={
          <>
            Инвайт для <strong>{deletingInvite?.email}</strong> будет удален вместе с токеном приглашения.
          </>
        }
        onClose={() => setDeleteInviteId(null)}
        onConfirm={() => {
          if (deletingInvite) onDeleteInvite(deletingInvite.id);
          setDeleteInviteId(null);
        }}
      />
    </div>
  );
}

function buildInviteUrl(token: string) {
  if (typeof window === "undefined") return `/invite/${token}`;

return new URL(`/invite/${token}`, window.location.origin).toString();
}

async function copyToClipboard(value: string) {
  if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
    await navigator.clipboard.writeText(value);
    return;
  }

if (typeof document === "undefined") {
    throw new Error("Clipboard API is not available");
  }

const input = document.createElement("textarea");
  input.value = value;
  input.setAttribute("readonly", "");
  input.style.position = "fixed";
  input.style.opacity = "0";
  document.body.append(input);
  input.select();

const copied = document.execCommand("copy");
  input.remove();

if (!copied) {
    throw new Error("Fallback copy failed");
  }
}

function SyncSection({
  data,
  clientId,
  isRoot,
  onRetrySync,
}: {
  data: LauncherData;
  clientId: string;
  isRoot: boolean;
  onRetrySync: (syncId: string) => void;
}) {
  const syncRows = data.syncStatuses.filter((sync) => isRoot || sync.objectId === clientId || sync.objectName.includes(getClient(data, clientId).name));

return (
    <GlassSurface className="table-shell">
      <div className="table-toolbar">
        <div>
          <h3>Синхронизация</h3>
          <p className="admin-helper-note">Контроль доставки изменений в Authentik, сервисы и внешние контуры. Ошибочные строки можно отправить повторно.</p>
        </div>
      </div>
      <table className="admin-data-table">
        <thead>
          <tr>
            <th>Объект</th>
            <th>Тип</th>
            <th>Цель</th>
            <th>Статус</th>
            <th>Последняя sync</th>
            <th>Ошибка</th>
            <th>Действие</th>
          </tr>
        </thead>
        <tbody>
          {syncRows.map((sync) => (
            <tr key={sync.id}>
              <td>{sync.objectName}</td>
              <td>{sync.objectType}</td>
              <td>{targetLabel(sync.target)}</td>
              <td>
                <AdminStatusPill value={sync.state} options={syncStatusOptions} />
              </td>
              <td>{formatDateTime(sync.lastSyncAt ?? sync.updatedAt)}</td>
              <td>{sync.error ?? "—"}</td>
              <td>
                <IconButton
                  label={`Повторить синхронизацию ${sync.objectName}`}
                  className="admin-icon-action services-admin-table__edit"
                  type="button"
                  onClick={() => onRetrySync(sync.id)}
                >
                  <RefreshCw size={12} />
                </IconButton>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </GlassSurface>
  );
}

function AuditSection({ data }: { data: LauncherData }) {
  return (
    <GlassSurface className="table-shell">
      <div className="table-toolbar">
        <div>
          <h3>Аудит</h3>
          <p className="admin-helper-note">Журнал действий: кто менял доступы, каталоги, инвайты и синхронизацию. Нужен для разбора спорных изменений.</p>
        </div>
      </div>
      <table className="admin-data-table">
        <thead>
          <tr>
            <th>Дата</th>
            <th>Пользователь</th>
            <th>Действие</th>
            <th>Объект</th>
            <th>Результат</th>
            <th>Детали</th>
          </tr>
        </thead>
        <tbody>
          {data.auditEvents.map((event) => (
            <tr key={event.id}>
              <td>{formatDateTime(event.at)}</td>
              <td>{event.actorName}</td>
              <td>{event.action}</td>
              <td>{event.objectName}</td>
              <td>
                <AdminStatusPill value={event.result} options={auditResultOptions} />
              </td>
              <td>{event.details ?? "—"}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </GlassSurface>
  );
}

function MiscSection({
  data,
  onUpdateSettings,
}: {
  data: LauncherData;
  onUpdateSettings: (patch: Partial<LauncherSettings>) => void;
}) {
  const [logoLinkUrl, setLogoLinkUrl] = useState(data.settings.brand.logoLinkUrl);
  const [workspaceCreationPolicy, setWorkspaceCreationPolicy] = useState(
    data.settings.taskManager.workspaceCreationPolicy
  );

useEffect(() => {
    setLogoLinkUrl(data.settings.brand.logoLinkUrl);
    setWorkspaceCreationPolicy(data.settings.taskManager.workspaceCreationPolicy);
  }, [data.settings.brand.logoLinkUrl, data.settings.taskManager.workspaceCreationPolicy]);

const normalizedLogoLinkUrl = logoLinkUrl.trim() || "/";
  const hasChanges =
    normalizedLogoLinkUrl !== data.settings.brand.logoLinkUrl ||
    workspaceCreationPolicy !== data.settings.taskManager.workspaceCreationPolicy;

return (
    <GlassSurface className="table-shell admin-settings-panel">
      <div className="table-toolbar">
        <div>
          <h3>Разное</h3>
          <p className="admin-helper-note">
            Общие настройки платформы, которые должны применяться в лаунчере, Task Manager и системных auth-экранах.
          </p>
        </div>
        <Button
          variant="accent"
          type="button"
          icon={<Save size={16} />}
          disabled={!hasChanges}
          onClick={() =>
            onUpdateSettings({
              brand: { logoLinkUrl: normalizedLogoLinkUrl },
              taskManager: { workspaceCreationPolicy },
            })
          }
        >
          Сохранить
        </Button>
      </div>

<div className="admin-settings-grid">
        <label className="admin-settings-field">
          <span>Ссылка логотипа</span>
          <input
            className="admin-table-input admin-settings-field__input"
            value={logoLinkUrl}
            placeholder="/"
            onChange={(event) => setLogoLinkUrl(event.target.value)}
          />
          <small>Куда ведёт клик по логотипу NODE.DC. Можно указать относительный путь или полный URL.</small>
        </label>
        <label className="admin-settings-field">
          <span>Operational Core: создание workspace</span>
          <NodeDcSelect
            className="admin-modal-select-wrap"
            triggerClassName="admin-modal-select-trigger"
            value={workspaceCreationPolicy}
            options={taskManagerWorkspacePolicyOptions}
            label="Политика создания workspace в Operational Core"
            onChange={(value) => setWorkspaceCreationPolicy(value)}
          />
          <small>Платформенная policy для новых пользователей без назначенных рабочих пространств в Task Manager.</small>
        </label>
      </div>
    </GlassSurface>
  );
}

function CompanySection({ data, clientId }: { data: LauncherData; clientId: string }) {
  const client = getClient(data, clientId);

return (
    <GlassSurface className="company-panel">
      <p className="eyebrow">Профиль компании</p>
      <h3>{client.name}</h3>
      <div className="explanation-stack">
        <InfoLine label="Юридическое название" value={client.legalName ?? "—"} />
        <InfoLine label="Тип" value={client.type === "company" ? "Компания" : "Частное лицо"} />
        <InfoLine label="Контакт" value={`${client.contactName ?? "—"} · ${client.contactEmail ?? "—"}`} />
        <InfoLine label="Demo до" value={formatDate(client.demoEndsAt)} />
        <InfoLine label="Заметки" value={client.notes ?? "—"} />
      </div>
    </GlassSurface>
  );
}

function InfoLine({ label, value }: { label: string; value: string }) {
  return (
    <div className="info-line">
      <span>{label}</span>
      <strong>{value}</strong>
    </div>
  );
}

function roleLabel(role: string): string {
  const labels: Record<string, string> = {
    root_admin: "Root Admin",
    support_admin: "Support Admin",
    client_owner: "Client Owner",
    client_admin: "Client Admin",
    member: "Member",
  };
  return labels[role] ?? role;
}

function sectionTitle(section: AdminSection): string {
  const labels: Record<AdminSection, string> = {
    overview: "Обзор",
    clients: "Клиенты",
    users: "Участники",
    groups: "Группы",
    services: "Каталог сервисов",
    access: "Доступы",
    invites: "Инвайты",
    sync: "Синхронизация",
    audit: "Аудит",
    misc: "Разное",
    company: "Профиль компании",
  };
  return labels[section];
}

function accessCellTitle(cell: AccessMatrixCell): string {
  if (!cell.effectiveAccess.allowed) return cell.effectiveAccess.source === "exception" ? accessAssignmentLabel("deny") : "—";
  return accessAssignmentRoleLabel(cell.effectiveAccess.appRole);
}

function accessAssignmentValue(cell: AccessMatrixCell): AccessAssignmentValue {
  if (cell.effectiveAccess.source === "exception" && !cell.effectiveAccess.allowed) return "deny";
  if (cell.effectiveAccess.source === "user" && cell.effectiveAccess.appRole) {
    return cell.effectiveAccess.appRole === "owner" ? "admin" : cell.effectiveAccess.appRole;
  }
  return "unset";
}

function accessAssignmentLabel(value: AccessAssignmentValue): string {
  return accessAssignmentOptions.find((option) => option.value === value)?.label ?? value;
}

function accessAssignmentRoleLabel(role?: ServiceAppRole | null): string {
  if (!role) return "—";
  return accessAssignmentLabel(role === "owner" ? "admin" : role);
}

function accessCellKey(userId: string, serviceId: string): string {
  return `${userId}:${serviceId}`;
}

function isOperationalCoreService(service: Service): boolean {
  return service.slug === "task-manager" || service.authentikApplicationSlug === "task-manager";
}

function accessAssignmentToTaskManagerRole(value: AccessAssignmentValue): TaskManagerWorkspaceMemberRole {
  if (value === "admin" || value === "member") return value;
  if (value === "viewer") return "guest";
  return "unset";
}

function taskManagerRoleToAccessAssignment(role: TaskManagerWorkspaceMemberRole): AccessAssignmentValue {
  if (role === "admin" || role === "member") return role;
  if (role === "guest") return "viewer";
  return "unset";
}

function sourceLabel(source?: AccessMatrixCell["effectiveAccess"]["source"]): string {
  if (!source) return "—";
  const labels = {
    client: "Клиент",
    group: "Группа",
    user: "Пользователь",
    exception: "Исключение",
  };
  return labels[source];
}

function targetLabel(target: SyncStatus["target"]): string {
  const labels: Record<SyncStatus["target"], string> = {
    authentik: "Authentik",
    task_manager: "Task Manager",
    nodedc: "NodeDC",
    service: "Сервис",
  };
  return labels[target];
}

Последние действия

Клиенты

Создать участника

Участники

Группы

Каталог сервисов

{service.title}